/** Shopify CDN: Minification failed

Line 888:2 Unexpected "#3bute-loc-toggle"

**/
/* =============================================================
   3BUTE — Navigatiebalk & mega-menu styling
   Kleuren: cyaan #1a8aa8 / #49BFE5, oranje #e36b2c, zwart #111111
   Bestand: assets/custom.css
   ============================================================= */


/* -------------------------------------------------------------
   1. NAVIGATIEBALK — achtergrond
   ------------------------------------------------------------- */
.nav-bar {
  background-color: #49BFE5;
}

.header__desktop-nav::after,
.header__desktop-nav::before,
.nav-bar::after,
.nav-bar::before {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}


/* -------------------------------------------------------------
   2. MENU-ITEMS — standaard staat
   ------------------------------------------------------------- */
.nav-bar__link {
  color: #111111;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
  transition: color 0.2s ease;
}

.nav-bar__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: #e36b2c;
  transition: width 0.3s ease, left 0.3s ease;
}


/* -------------------------------------------------------------
   3. MENU-ITEMS — hover en actief
   ------------------------------------------------------------- */
.nav-bar__link:hover,
.nav-bar__link[aria-expanded="true"] {
  color: #ffffff;
}

.nav-bar__link:hover::after,
.nav-bar__link[aria-expanded="true"]::after {
  width: 100%;
  left: 0;
}


/* -------------------------------------------------------------
   4. NAVIGATIEBALK — sticky staat
   ------------------------------------------------------------- */
.header.is-sticky .nav-bar {
  background-color: #111111;
}


/* -------------------------------------------------------------
   5. MEGA-MENU DROPDOWN — achtergrond en rand
   ------------------------------------------------------------- */
.mega-menu {
  background-color: #ffffff;
  border-top: 3px solid #111111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}


/* -------------------------------------------------------------
   6. MEGA-MENU — kolomtitels + hover-animatie
   Oranje accentlijn schuift uit onder de titel bij hover op de kolom.
   ------------------------------------------------------------- */
.mega-menu__title {
  color: #111111;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}

.mega-menu__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 20px;
  background-color: #e36b2c;
  transition: width 0.25s ease;
}

.mega-menu__column:hover .mega-menu__title::after {
  width: 100%;
}


/* -------------------------------------------------------------
   7. MEGA-MENU — links
   ------------------------------------------------------------- */
.mega-menu__linklist {
  padding: 0;
}

.mega-menu__item {
  width: 100%;
}

.mega-menu__link {
  display: block !important;
  color: #333333;
  width: 100%;
  margin-bottom: 6px;
  box-sizing: border-box;
  text-decoration: none !important;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.mega-menu__link:hover {
  color: #1a8aa8 !important;
  padding-left: 6px;
}

.mega-menu__link-arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  margin-right: 4px;
  color: #e36b2c;
}

.mega-menu__link:hover .mega-menu__link-arrow {
  opacity: 1;
  transform: translateX(0);
}


/* -------------------------------------------------------------
   8. MEGA-MENU — kolommen gelijk verdeeld over volledige breedte
   ------------------------------------------------------------- */
.mega-menu__inner {
  display: flex;
  width: 100%;
  gap: 8px;
  justify-content: space-between;
}

.mega-menu__column {
  flex: 1 1 0 !important;
  min-width: 180px !important;
  max-width: none !important;
}

@media screen and (max-width: 1280px) {
  .mega-menu__inner {
    gap: 6px;
  }

  .mega-menu__column {
    min-width: 150px;
    max-width: none;
  }

  .mega-menu__inner {
  display: flex !important;
  width: 100%;
  gap: 8px !important;
  justify-content: space-between;
}

.mega-menu__inner .mega-menu__column,
.mega-menu__inner--center .mega-menu__column,
.mega-menu__inner--large .mega-menu__column {
  flex: 1 1 0 !important;
  min-width: 180px !important;
  max-width: none !important;
  margin: 0 !important;
}
}


/* -------------------------------------------------------------
   9. MEGA-MENU — rest van de pagina lichtgrijs dimmen bij openen
   Zodra een mega-menu open staat (aria-hidden="false"), wordt de
   rest van de pagina onder de navigatiebalk gedimd met een
   lichtgrijze overlay, zodat het menu duidelijker opvalt (zie
   referentiebeeld concurrent StageRoads.nl). Header + navigatiebalk
   blijven zelf helder; het menu-paneel blijft altijd boven de
   overlay staan (z-index 5 header-sectie > 4 overlay > rest pagina).
   Overlay heeft pointer-events:none zodat de bestaande hover
   open/close-logica van het menu niet wordt verstoord.
   LET OP: de overlay hangt bewust aan <body>, niet aan .nav-bar —
   regel 1 hierboven zet .nav-bar::after/::before altijd uit met
   !important (voor de standaard scroll-fade van het theme), dat
   zou deze overlay ook onzichtbaar maken als hij op .nav-bar zelf
   had gezeten.
   ------------------------------------------------------------- */
@keyframes bute-mega-menu-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body:has(.nav-bar .mega-menu[aria-hidden="false"])::after {
  content: '';
  position: fixed;
  top: var(--header-height, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 17, 17, 0.18);
  z-index: 4;
  pointer-events: none;
  animation: bute-mega-menu-overlay-in 0.2s ease-in-out;
}


/* =============================================================
   3BUTE — Extra productinfo op collectiekaart
   Toont de waarde van metafield: custom.extra_product_info
   Positie: onder de producttitel, boven de prijs
   HTML-klasse: .product-item__extra-info
   Liquid: snippets/product-item.liquid, na regel product-item__title
   ============================================================= */

.product-item__extra-info {
  font-size: 0.8rem;
  color: #383737ff;
  margin: 4px 0 6px;
  line-height: 1.4;
}


/* =============================================================
   3BUTE — Winkelwagen-icoon in collectiekaart koopknop
   Vervangt tekst "Toevoegen aan winkelwagen" door een icoon.
   Van toepassing op: buy-button > button--primary in productkaart
   Werkt op desktop én mobiel.
   HTML: buy-button > button.product-item__action-button.button--primary
   ============================================================= */

buy-button,
buy-button .product-item__action-button.button--primary {
  width: 100%;
}

buy-button .product-item__action-button.button--primary {
  font-size: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* =============================================================
   3BUTE — Prijs en voorraad gelijk uitlijnen in collectiekaart
   Titel neemt de beschikbare ruimte in zodat prijs en voorraad
   altijd op dezelfde hoogte staan, ongeacht de titellengte.
   ============================================================= */

.product-item__info {
  display: flex;
  flex-direction: column;
}

.product-item__info-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Prijs duwt zichzelf naar beneden met auto margin */
.product-item__info-inner .product-item__price-list {
  margin-top: auto;
  padding-top: 8px;
}


/* 3BUTE CUSTOM: dropshipment block in cart */
.cart-dropshipment {
  margin: 18px 0 20px;
  padding: 16px 18px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fafafa;
}

.cart-dropshipment__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.4;
  color: #1f1f1f;
}

.cart-dropshipment__label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: #ff6a00;
  cursor: pointer;
}

.cart-dropshipment__note {
  margin: 8px 0 0 30px;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
}

@media screen and (max-width: 640px) {
  .cart-dropshipment {
    padding: 14px;
  }

  .cart-dropshipment__note {
    margin-left: 30px;
  }
}

.button--3bute-preorder {
  background: #f47c20 !important;
  border-color: #f47c20 !important;
  color: #ffffff !important;
}

/* winkelwagen icoon verwijderen */

.button--3bute-preorder svg,
.button--3bute-preorder .icon,
.button--3bute-preorder::before,
.button--3bute-preorder::after {
  display: none !important;
  content: none !important;
}

/* tekst */

.button--3bute-preorder-text {
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  text-transform: uppercase !important;
  letter-spacing: 0.08em;
}

.finance-email-field {
  margin: 18px 0 22px;
}

.finance-email-field .form__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.finance-email-field .form__field {
  width: 100%;
}

/* 3BUTE. BSS custom fields in cart */
.bss-b2b-custom-fields.bss-config-header {
  max-width: 360px;
  margin-left: auto;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #d8d8d8;
  background: #fff;
}

/* Finance label */
.bss-b2b-custom-fields.bss-config-header .cart-note__label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111 !important;
}

/* Finance textarea */
#bss-cart-note-textarea.bss-finance-mail {
  width: 100%;
  min-height: 46px !important;
  padding: 12px 14px !important;
  border: 1px solid #bfbfbf;
  background: #fff;
  font-size: 14px;
  resize: vertical;
}

/* Dropshipment titel */
.bss-b2b-custom-fields.bss-config-header label,
.bss-b2b-custom-fields.bss-config-header span {
  font-size: 14px;
}

/* Dropshipment checkbox regel */
.bss-b2b-custom-fields.bss-config-header input[type="checkbox"] {
  margin-right: 8px;
}

/* Ruimte tussen finance en dropshipment */
.bss-b2b-custom-fields.bss-config-header br {
  display: none;
}

.bss-b2b-custom-fields.bss-config-header > div,
.bss-b2b-custom-fields.bss-config-header > label,
.bss-b2b-custom-fields.bss-config-header > textarea {
  margin-bottom: 14px;
}

/* BSS velden dezelfde breedte als checkout blok */
.bss-b2b-custom-fields.bss-config-header {
  width: 100%;
  max-width: 400px !important;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid #A7A7A7;
  background: #fff;
  box-sizing: border-box;
}

/* Ruimte tussen BSS velden */
.bss-b2b-custom-fields.bss-config-header {
  margin-bottom: 18px;
}

/* Finance veld */
#bss-cart-note-textarea.bss-finance-mail {
  width: 100%;
  min-height: 80px !important;
  padding: 12px 14px !important;
  border: 1px solid #bfbfbf;
  background: #fff;
  box-sizing: border-box;
}

/* Labels */
.bss-b2b-custom-fields.bss-config-header label,
.bss-b2b-custom-fields.bss-config-header .cart-note__label {
  font-weight: 700;
  color: #111 !important;
  margin-bottom: 10px;
  display: block;
}


/* =============================================================
   3BUTE — Productnaam altijd op 1 regel
   Iets kleiner basislettertype dan de theme-standaard; custom.js
   verkleint het font verder indien nodig zodat de titel nooit
   naar een 2e regel wrapt, ongeacht de lengte van de naam.
   Element: h1.product-meta__title (product-pagina, rechterkolom)
   ============================================================= */
.product-meta__title {
  font-size: 24px;
}


/* =============================================================
   3BUTE — Prijs op productpagina groter
   Basisprijs (geen actie, staat al in oranje) 50% groter en vet.
   Bij een actieprijs geldt hetzelfde voor de oranje actieprijs;
   de doorgestreepte van-prijs wordt 15% groter (normaal gewicht),
   via de latere regel die dezelfde specificiteit wint.
   Elementen: .price / .price--highlight / .price--compare
   Liquid: snippets/product-variant-selector.liquid
   ============================================================= */
.product-form__info-content .price {
  font-size: 20.5px;
  font-weight: 700;
}

.product-form__info-content .price--compare {
  font-size: 24.5px;
  font-weight: 400;
}


/* =============================================================
   3BUTE — B2B-actieprijs (BSS app) groter
   De BSS B2B-app injecteert bij een klantspecifieke korting kale
   <span style="..."> elementen zonder classes (bypassed de theme-
   markup .price--compare/.price--highlight hierboven volledig).
   Alleen color/text-decoration staan inline, dus font-size/weight
   kunnen we hier nog sturen. Onderscheid op de vaste inline-stijl:
   doorgestreepte prijs heeft text-decoration:line-through, de
   actieprijs heeft altijd color:#fa751e.
   ============================================================= */
.product-form__info-content .price-list span[style*="line-through"] {
  font-size: 20.5px !important;
  color: #000000 !important;
}

.product-form__info-content .price-list span[style*="fa751e"] {
  font-size: 24.5px !important;
  font-weight: 700 !important;
}


/* =============================================================
   3BUTE — Ruimte boven BSS staffelprijs-tabel
   .product-form__info-list gebruikt display:table met
   border-spacing: 0 22px — dat is de ruimte tussen bv. het
   Voorraad-blok en het Aantal-blok (dus ook boven de Aantal-
   stepper, die zelf geen eigen margin/padding heeft).
   Eerdere poging zette margin-top op de (mogelijk lege) titel-
   paragraaf binnenin de BSS-tabel-wrapper; dat gaf geen zichtbaar
   effect (waarschijnlijk margin-collapse met de wrapper zelf).
   padding-top op de wrapper zelf kan niet wegvallen door collapse,
   dus dat is hier gebruikt in plaats daarvan.
   ============================================================= */
.bss-b2b-cart-item-qty-table {
  padding-top: 22px !important;
}


/* =============================================================
   3BUTE — "Aantal:" label verbergen + hele rij links uitlijnen
   + BSS staffeltabel breder maken
   Het label komt uit de vertaling 'product.form.quantity' in
   snippets/product-variant-selector.liquid (theme-native), binnen
   de vaste .product-form__info-list tabel-layout (label = kolom 1,
   content = kolom 2, kolombreedte gedeeld met de Prijs/Voorraad-
   rijen). display:block zetten op de content lukt hier NIET om
   'm los te maken van de tabel-kolombreedte: zolang het element
   nog een kind is van een display:table rij, genereert de browser
   automatisch een anonieme 1-koloms tabel eromheen (CSS-spec voor
   "anonymous table objects"), en width:100% blijft dan relatief
   aan die anonieme cel i.p.v. de volledige tabelbreedte. custom.js
   verplaatst .product-form__info-content daarom letterlijk in de
   DOM naar buiten de tabel (als sibling ná .product-form__info-list)
   en geeft het de class .bute-quantity-buybar, zodat het pas ECHT
   een normaal blok-element wordt en over de volle breedte links
   uitlijnt met het "Toevoegen aan Mijn Favorieten"-blok eronder.
   Het label blijft gewoon (leeg) in de tabel staan, verborgen.
   De BSS-tabel zelf vult standaard niet de volledige beschikbare
   breedte — hij krimpt naar zijn eigen inhoud. width:100% laat 'm
   dezelfde breedte gebruiken als de rest van dit blok.
   ============================================================= */
.product-form__info-item--quantity .product-form__info-title {
  display: none;
}

.bute-quantity-buybar {
  display: block;
  width: 100%;
}

.bss-b2b-cart-item-qty-table,
.bss-b2b-qty-table-wrapper,
.bss-b2b-qty-table-wrapper table.quantity_break_table {
  width: 100% !important;
}


/* =============================================================
   3BUTE — "Toevoegen aan winkelwagen" naast de Aantal-stepper
   custom.js verplaatst alleen .product-form__payment-container
   (de winkelwagen-knop) in de DOM naar binnenin
   .product-form__quantity-with-rules (die al display:flex met
   flex-wrap:wrap is). De "Toevoegen aan Mijn Favorieten"-knop zit
   in hetzelfde .product-form__buy-buttons blok maar in een apart
   .nm-portal element (wishlist-app) — die wordt bewust NIET
   verplaatst, en blijft dus gewoon onder de staffeltabel staan.
   Deze regels zorgen dat de knop de resterende ruimte vult i.p.v.
   zijn eigen volle paginabreedte, en dat alles verticaal is
   uitgelijnd — net als het referentiebeeld.
   ============================================================= */
.product-form__quantity-with-rules {
  align-items: center;
  gap: 12px;
  width: 100%;
}

.product-form__quantity-with-rules .product-form__payment-container {
  display: flex;
  flex: 1 1 200px;
  min-width: 160px;
  /* De theme zet hier standaard -9px margin (compenseert de eigen
     9px margin van <buy-button>, bedoeld voor de gestapelde layout
     verderop op de pagina). In onze flex-rij duwt dat de knop 9px
     buiten de rij aan weerszijden — hier dus overruled naar 0. */
  margin: 0 !important;
}

.product-form__quantity-with-rules buy-button {
  margin: 0 !important;
}

.product-form__quantity-with-rules buy-button,
.product-form__quantity-with-rules .product-form__add-button {
  width: 100%;
}


/* =============================================================
   3BUTE — Complementary product card ("Gerelateerd product")
   Dit is de Shopify Search & Discovery "complementary products"
   app-block op de productpagina, die via snippets/product-item.
   liquid rendert met complementary_products: true (klasse
   .product-item--complementary). Twee problemen aangepakt:
   1) de knop krijgt in dat pad bewust de zwakke .button--ternary
      stijl (contour) i.p.v. .button--primary — hier gelijk
      getrokken met de solide groene knoppen elders op de site,
      via dezelfde --primary-button-* CSS-variabelen.
   2) de kenmerken-tekst (custom.extra_product_info, .product-item
      __extra-info) is vaak een lange met "·" gescheiden opsomming
      die de kaart dichtslibt — hier afgekapt op 2 regels.
   ============================================================= */

.product-item--complementary {
  padding: 16px;
  border-radius: 6px;
}

.product-item--complementary .product-item__image-wrapper {
  background: var(--secondary-background, #f5f5f5);
  border-radius: 4px;
  overflow: hidden;
}

.product-item--complementary .product-item__primary-image {
  object-fit: contain;
}

.product-item--complementary .product-item__title {
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 4px;
}

.product-item--complementary .product-item__extra-info {
  font-size: 12.5px;
  color: #767676;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-item--complementary .product-item__price-list {
  margin-top: 8px;
}

.product-item--complementary .product-item__reviews-badge,
.product-item--complementary .product-item__inventory {
  font-size: 12.5px;
}

.product-item--complementary .product-item__action-button.button--ternary {
  background: var(--primary-button-background);
  color: var(--primary-button-text-color);
  border-color: var(--primary-button-background);
}

.product-item--complementary .product-item__action-button.button--ternary:hover {
  opacity: 0.9;
}


/* =============================================================
   3BUTE — B2B-staffelprijs: dubbele/foutieve unit price fix
   De BSS B2B-app injecteert bij klantspecifieke korting een eigen
   herberekende unit price als <small style="display:block"> ín
   .product-item__price-list (kale, class-loze markup — zie ook
   de "B2B-actieprijs (BSS app) groter" regel hierboven). De theme
   zelf toont daaronder óók nog de eigen, niet-verdisconteerde unit
   price via .product-item__price-info — dat klopt dan niet meer
   met de werkelijk betaalde prijs, dus die verbergen we zodra BSS
   een eigen unit price heeft geïnjecteerd.
   De BSS-prijs zelf (oranje, #fa751e) wordt vetgedrukt en groter
   getoond; de bijbehorende unit price komt in dezelfde oranje kleur
   tussen haakjes vlak áchter die prijs te staan (geen display:block/
   flex-wrap meer — <small> blijft een inline element in de flex-rij).
   ============================================================= */
.product-item__price-list span[style*="fa751e"] {
  font-weight: 700 !important;
  font-size: 19px !important;
}

.product-item__price-list small {
  color: #fa751e;
  font-size: 13px;
  margin-left: 4px;
}

.product-item__price-list small::before {
  content: "(";
}

.product-item__price-list small::after {
  content: ")";
}

.product-item__price-list:has(small) + .product-item__price-info {
  display: none;
}


/* =============================================================
   3BUTE — Cart & mini-cart: dubbele/foutieve unit price fix
   Zelfde patroon als bij de collectiekaart hierboven, nu voor
   line items in de winkelwagen en de cart-drawer:
   sections/main-cart.liquid (.line-item__price-list /
   .line-item__price-info) en snippets/mini-cart.liquid
   (.mini-cart__price-list / .mini-cart__price-info). BSS
   injecteert ook hier een eigen <small style="display:block">
   met de herberekende unit price. Anders dan de collectiekaart is
   deze price-list geen flex-rij, dus de inline display:block
   overrulen we hier expliciet met !important zodat 'm naast de
   prijs blijft staan i.p.v. op een eigen regel. De doorgestreepte
   van-prijs kleurt BSS bij sommige kortingstypes (bv. staffel-
   prijzen bij Deco Molton) ten onrechte ook oranje i.p.v. zwart —
   forceren we hier terug naar zwart via de line-through inline-
   stijl die BSS altijd meegeeft.
   ============================================================= */
.line-item__price-list span[style*="fa751e"],
.mini-cart__price-list span[style*="fa751e"] {
  font-weight: 700 !important;
}

.line-item__price-list span[style*="line-through"],
.mini-cart__price-list span[style*="line-through"] {
  color: #000000 !important;
}

.line-item__price-list small,
.mini-cart__price-list small {
  display: inline !important;
  color: #fa751e;
  font-weight: 400 !important;
  font-size: 13px;
  margin-left: 4px;
}

.line-item__price-list small::before,
.mini-cart__price-list small::before {
  content: "(";
}

.line-item__price-list small::after,
.mini-cart__price-list small::after {
  content: ")";
}

.line-item__price-list:has(small) + .line-item__price-info,
.mini-cart__price-list:has(small) + .mini-cart__price-info {
  display: none;
}


/* =============================================================
   3BUTE — Productpagina: dubbele/foutieve unit price fix
   Zelfde patroon als bij de collectiekaart en de winkelwagen
   hierboven, nu voor snippets/product-variant-selector.liquid
   (.price-list / .product-form__price-info, binnen
   .product-form__info-content). BSS injecteert ook hier een eigen
   <small style="display:block"> met de herberekende unit price.
   ============================================================= */
.product-form__info-content .price-list small {
  display: inline !important;
  color: #fa751e;
  font-weight: 400 !important;
  font-size: 13px;
  margin-left: 4px;
}

.product-form__info-content .price-list small::before {
  content: "(";
}

.product-form__info-content .price-list small::after {
  content: ")";
}

.product-form__info-content .price-list:has(small) + .product-form__price-info {
  display: none;
}


/* =============================================================
   3BUTE — Mega-menu collectie-foto (snippets/3bute-megamenu-
   collectie-foto.liquid) styling
   Zet de kleine collectie-thumbnail + titel netjes op één rij
   binnen de bestaande .mega-menu__link.
   ============================================================= */

.mega-menu__collection-button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mega-menu__collection-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.15);
}

.mega-menu__collection-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-menu__collection-text {
  flex: 1 1 auto;
}


/* =============================================================
   3BUTE — Mobiele header: alles op 1 regel
   Op mobiel staat de header standaard op 2 rijen (hamburger+logo
   bovenaan, actie-iconen eronder). Deze regels zetten alles op
   1 flexrij: hamburger | logo (gecentreerd, flex) | globe | zoek
   | account-icoon | cart.
   Logo verkleind naar max 75px; "Account"-label en "NL"-tekst
   naast globe-icoon verborgen om ruimte te besparen.
   Drempelwaarde: < 1000px (= "pocket" in Warehouse theme).
   ============================================================= */
@media screen and (max-width: 999px) {
  /* Alles op 1 rij, niet wrappen */
  .header__inner {
    flex-wrap: nowrap !important;
    align-items: center;
  }

  /* Logo gecentreerd en flexibel in de beschikbare ruimte */
  .header__logo {
    flex: 1 1 auto !important;
    min-width: 0;
    text-align: center;
  }

  /* Logo afbeelding iets kleiner zodat alles past */
  .header__logo-image {
    max-width: 75px !important;
  }

  /* Action list niet laten wrappen */
  .header__action-list {
    flex-wrap: nowrap !important;
    flex-shrink: 0;
  }

  /* Verberg "Account" tekst, behoud icoon */
  .bute-account-label {
    display: none !important;
  }

  /* Verberg "NL" tekst naast globe-icoon, behoud globe */
  #3bute-loc-toggle > span:last-child {
    display: none;
  }

  /* Iets compactere padding op action items */
  .header__action-item {
    padding-left: 4px;
    padding-right: 4px;
  }
}