/* ==========================================================================
   De Schouw — Header / mega-menu / zoekbalk huisstijl  (prototype)
   ---------------------------------------------------------------------------
   Aanpak = VEILIG HERSTYLEN: zelfde live markup + JS-hooks (uspbar, page-header,
   #nav .nav-headmenu, .submenu, #header-search ...). Alleen nieuwe CSS eroverheen.
   Alles scoped onder body.dsw-modhead zodat het over de bestaande 554KB styles.css
   valt zonder andere paginatypes te raken. In de port: body-class dsw-modhead zetten.
   Designtaal 1-op-1 uit dsw-account.css (Inter, #3b3b71, kaarten, schaduw).
   ========================================================================== */

body.dsw-modhead {
  --ds:        #3b3b71;
  --ds-dark:   #2d2d5a;
  --ds-deep:   #25254a;
  --ds-light:  #f4f3f9;
  --ds-green:  #3daa35;
  --ds-red:    #c5302f;
  --ds-border: #e8e6f0;
  --ds-border2:#d4d2e8;
  --ds-text:   #1d1d33;
  --ds-muted:  #6b6b86;
  --ds-radius: 12px;
  --ds-radius-sm: 8px;
  --ds-shadow: 0 1px 3px rgba(35,35,80,.06), 0 12px 30px rgba(35,35,80,.10);
  --ds-maxw:   1600px;
  --ds-gutter: max(48px, calc((100vw - 1600px) / 2)); /* zijmarge: vw-gebaseerd (consistent over nesting) + min. 48px zodat de inhoud nooit buiten beeld valt */
  --hd-font:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* font alleen op de chrome leggen; productpagina's etc. blijven hun eigen font houden */
body.dsw-modhead .uspbar,
body.dsw-modhead .page-header { font-family: var(--hd-font); -webkit-font-smoothing: antialiased; }
body.dsw-modhead .uspbar *,
body.dsw-modhead .page-header * { box-sizing: border-box; }

/* ==========================================================================
   1. USP-strip
   ========================================================================== */
@media (min-width: 1025px) { /* USP-styling ALLEEN desktop; mobiel = native JS-rotator */
body.dsw-modhead .uspbar {
  background: var(--ds-deep);
  color: #d7d7ec;
  font-size: 12.5px;
  letter-spacing: .1px;
}
body.dsw-modhead .uspbar { /* container: volle breedte achtergrond, inhoud binnen main-breedte */
  display: flex; justify-content: space-between; align-items: center;
  gap: 34px; flex-wrap: wrap;
  padding: 9px var(--ds-gutter);
  max-width: none; margin: 0;
}
body.dsw-modhead .uspbar .usp {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding-left: 22px;
}
/* groen vinkje voor elke USP */
body.dsw-modhead .uspbar .usp::before {
  content: "";
  position: absolute; left: 0; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%);
  background: var(--ds-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.dsw-modhead .uspbar a { color: #fff; text-decoration: none; }
body.dsw-modhead .uspbar a:hover { text-decoration: underline; }
} /* einde USP desktop-only (mobiel = native rotator) */

/* ==========================================================================
   2. Logo-balk (logo + zoek + account + winkelwagen + trustpilot)
   ========================================================================== */
body.dsw-modhead .page-header {
  background: #fff; border: 0;
  position: sticky; top: 0; z-index: 900;  /* boven de live z-index:888 elementen */
  box-shadow: 0 0 0 rgba(35,35,80,0);
  transition: box-shadow .2s ease;
}
/* sticky / shrink-staat (JS zet .dsw-stuck op de body bij scrollen) */
body.dsw-modhead.dsw-stuck .page-header { box-shadow: 0 6px 22px rgba(35,35,80,.10); }
body.dsw-modhead.dsw-stuck .page-header-container { padding-top: 10px; }
body.dsw-modhead.dsw-stuck .logo-de-schouw-witgoed { height: 42px; }
body.dsw-modhead.dsw-stuck .trustpilotheader { display: none; }
body.dsw-modhead .logo-de-schouw-witgoed { transition: height .2s ease; }
body.dsw-modhead .page-header-container {
  max-width: none; margin: 0;
  padding: 18px var(--ds-gutter) 0;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  grid-template-areas:
    "logo search tools"
    "nav  nav    nav";
  align-items: center;
  column-gap: 32px; row-gap: 16px;
}
body.dsw-modhead .page-header-container > a { grid-area: logo; margin-left: 40px; } /* logo meer naar binnen (rechts) */
body.dsw-modhead .logo-de-schouw-witgoed { display: block; height: 54px; width: auto; }

/* skip-links cluster = rechterkolom met info/account/cart */
body.dsw-modhead .skip-links {
  grid-area: tools;
  display: flex; align-items: center; gap: 26px;
  float: none; margin: 0 40px 0 0; /* winkelwagen-cluster iets meer naar binnen (links) */
}
body.dsw-modhead .skip-links .skip-link {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 3px; color: var(--ds); text-decoration: none;
  font-weight: 600; font-size: 13px; line-height: 1;
  position: relative; background: none; border: 0;
}
/* HARD neutraliseren: de legacy styles.css zet op >=1200px o.a.
   header.page-header .skip-account { top:20px; margin-right:14% } en floats op de
   skip-links — dat veroorzaakt de enorme gaten en scheve knoppen. Terugdwingen. */
body.dsw-modhead .skip-links .skip-link,
body.dsw-modhead .skip-links .header-minicart,
body.dsw-modhead .skip-links .skip-account,
body.dsw-modhead .skip-links .skip-cart {
  top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
  margin: 0 !important;
  float: none !important;
}
body.dsw-modhead .skip-links .skip-link .icon {
  width: 24px; height: 24px; font-size: 0; color: var(--ds);
}
body.dsw-modhead .skip-links .skip-link .icon::before {
  content: ""; display: block; width: 24px; height: 24px;
  background: currentColor; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
body.dsw-modhead .skip-nav .icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/%3E%3C/svg%3E");
}
body.dsw-modhead .skip-account .icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-9 2-9 6v2h18v-2c0-4-5-6-9-6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-9 2-9 6v2h18v-2c0-4-5-6-9-6z'/%3E%3C/svg%3E");
}
body.dsw-modhead .skip-cart .icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 18a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm10 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2zM6.2 6l1.5 8h9.2l1.8-6H7.6'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M2 3h2.2l.9 3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 18a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm10 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2zM6.2 6l1.5 8h9.2l1.8-6H7.6'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M2 3h2.2l.9 3'/%3E%3C/svg%3E");
}
body.dsw-modhead .skip-links .skip-link .label,
body.dsw-modhead .skip-links .skip-link .label2 { font-weight: 600; }

/* hamburger (skip-nav) alleen op mobiel — specificiteit moet .skip-links .skip-link verslaan */
body.dsw-modhead .skip-links .skip-nav { display: none; }

/* winkelwagen-teller als badge op het icoon */
body.dsw-modhead .header-minicart { position: relative; }
body.dsw-modhead .skip-cart { position: relative; }
body.dsw-modhead .skip-cart .count {
  position: absolute; top: -6px; left: 50%; right: auto; transform: translateX(-2px);
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--ds-green); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* Trustpilot compact rechts bovenin */
/* HARD neutraliseren: de live styles.css positioneert .trustpilotheader (absolute/float
   + eigen hoogte) waardoor het blok los over de header zweeft. Terugdwingen in de flow. */
body.dsw-modhead .skip-links .trustpilotheader {
  position: static !important;
  float: none !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: auto !important; max-width: 150px; height: auto !important;
  font-size: 11px !important; color: var(--ds-muted); text-align: center;
}
body.dsw-modhead .skip-links .trustpilotheader a {
  display: inline-flex !important; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ds-muted); text-decoration: none; line-height: 1.2;
}
body.dsw-modhead .trustpilotlogo {
  height: 40px !important; width: auto !important; max-width: 130px;
  position: static !important; float: none !important;
}

/* ---- Zoekbalk ---- */
body.dsw-modhead #header-search {
  grid-area: search;
  /* legacy header.page-header #header-search{width:32%; right:42%; top:25px; display:inline-block}
     (ID-regels) maakten de zoekbalk smal én duwden 'm omlaag -> hard terugzetten */
  width: auto !important; max-width: none !important;
  position: static !important;
  top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
  display: block !important;
}
body.dsw-modhead #search_mini_form { position: relative; max-width: 920px; }
body.dsw-modhead #header-search .form-search { position: relative; }
body.dsw-modhead #header-search input.input-text {
  width: 100%; height: 54px;
  border: 1.5px solid var(--ds-border2); background: var(--ds-light);
  border-radius: 999px; padding: 0 52px 0 20px;
  font: 15px/1.2 var(--hd-font); color: var(--ds-text);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
body.dsw-modhead #header-search input.input-text::placeholder { color: var(--ds-muted); }
body.dsw-modhead #header-search input.input-text:focus {
  outline: 0; background: #fff; border-color: var(--ds);
  box-shadow: 0 0 0 3px rgba(59,59,113,.12);
}
body.dsw-modhead #header-search .search-button {
  position: absolute; right: 6px; top: 6px; width: 46px; color: #3b3b71; height: 46px;
  border: 0; border-radius: 999px;  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
body.dsw-modhead #header-search .search-button::before {
  content: ""; width: 18px; height: 18px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2' d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm5 12 5 5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2' d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm5 12 5 5'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.dsw-modhead #header-search .search-button:hover { background: var(--ds-dark); }

/* ---- Zoek-autocomplete ----
   De live zoek-autocomplete is het Mirasvit "elevate" component met eigen structuur
   (.autocomplete2-*) en eigen CSS. Dat laten we met RUST (veilig herstylen): mijn oude
   prototype-dropdown (.dsw-ac-*) paste hier niet op en zat het native paneel in de weg.
   Alleen de zoek-input (de pill hierboven) stylen wij; het resultaten-paneel blijft native. */

/* ---- Account/Informatie-dropdown + minicart-dropdown ----
   Zichtbaarheid loopt via de BESTAANDE skip-link-JS (.skip-active → display:block);
   wij stylen alleen het paneel en herpositioneren het onder de nieuwe knoppen.
   NIET met left:-9999px verbergen — dat zou de live dropdown breken. */
body.dsw-modhead .page-header-container { position: relative; } /* anker voor de dropdowns */

body.dsw-modhead #header-account.skip-content {
  position: absolute; top: 74px; right: 24px; left: auto; width: 240px; z-index: 907;
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow); padding: 8px;
}
body.dsw-modhead #header-account .links ul { list-style: none; margin: 0; padding: 0; }
body.dsw-modhead #header-account .links li { margin: 0; }
body.dsw-modhead #header-account a {
  display: block; padding: 9px 12px; border-radius: var(--ds-radius-sm);
  color: var(--ds-text); text-decoration: none; font-size: 14px; line-height: 1.4;
  text-align: left;
}
body.dsw-modhead #header-account a:hover { background: var(--ds-light); color: var(--ds); }

body.dsw-modhead #header-cart.skip-content {
  position: absolute; top: 74px; right: 24px; left: auto; width: 340px; z-index: 907;
  background: #fff; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow); padding: 14px 16px;
}

/* ==========================================================================
   3. Hoofdmenu / mega-menu
   ========================================================================== */
body.dsw-modhead #header-nav {
  grid-area: nav;
  /* legacy .skip-content{display:none} verbergt de menubalk op desktop -> forceren */
  display: block !important;
  position: relative;          /* anker voor het absolute mega-menu */
  background: #fff;
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  margin: 4px calc(-1 * var(--ds-gutter)) 0;  /* volle breedte tot de viewport-rand */
}

/* visueel verborgen label (site-CSS doet dit normaal via .sr-only) */
body.dsw-modhead .sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.dsw-modhead #nav { max-width: none; margin: 0; padding: 0 var(--ds-gutter); }

/* de mobiele "Ga naar categorie" lijst verbergen op desktop */
body.dsw-modhead #productmenu2.mobileHide { display: none; }

body.dsw-modhead .nav-headmenu.categories {
  list-style: none; margin: 0; padding: 0;
  /* !important: legacy header.page-header #nav .categories{display:inline-block} (ID) verslaat
     anders mijn flex-layout */
  display: flex !important; align-items: stretch; gap: 4px;
  justify-content: space-between; width: 100%; /* items over de volle breedte verdelen */
}
body.dsw-modhead .nav-headmenu.categories > li.level0 {
  position: static; /* mega-menu vol-breed onder de balk */
  width: auto !important; /* legacy zet nth-of-type(1)/(11) op width:10% */
}

/* ---- Desktop categorie-labels (>=1025px) ----
   De live markup heeft per categorie 2 labels: <a class="labelhoofdmenu2"> (de zichtbare
   desktop-link, die legacy op display:block zet) en <span class="labelhoofdmenu"> (die legacy
   met een ID-selector op desktop VERBERGT). Eerder toonde ik de span -> bleef verborgen, en
   verstopte ik de <a> -> lege balk. Nu: op desktop de <a> tonen + stylen, span verbergen.
   Gescoped op >=1025px zodat de mobiele drawer (die de span gebruikt) intact blijft. */
@media (min-width: 1025px) {
  body.dsw-modhead .nav-headmenu.categories > li.level0 > .labelhoofdmenu { display: none !important; }
  body.dsw-modhead .nav-headmenu.categories > li.level0 > a.labelhoofdmenu2 {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 15px 16px !important; margin: 0 !important; cursor: pointer;
    font: 600 15px/1 var(--hd-font) !important;
    text-decoration: none !important; width: auto !important;
    /* onderlijn-ruimte ALTIJD reserveren (!important) zodat hover geen hoogtesprong geeft */
    border-bottom: 3px solid transparent !important; transition: color .12s, border-color .12s;
  }
  body.dsw-modhead .nav-headmenu.categories > li.level0 > a.labelhoofdmenu2::after {
    content: ""; width: 14px; height: 14px; margin-top: 1px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 9l6 6 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 9l6 6 6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform .15s; opacity: .6;
  }
  body.dsw-modhead .nav-headmenu.categories > li.level0:hover > a.labelhoofdmenu2 {
    color: var(--ds-dark) !important; border-bottom-color: var(--ds) !important;
    /* legacy .nav-headmenu a:hover{background:#3b3b71!important} maakt een gevuld paars blok -> uit */
    background: transparent !important; border-radius: 0 !important;
  }
  body.dsw-modhead .nav-headmenu.categories > li.level0:hover > a.labelhoofdmenu2::after {
    transform: rotate(180deg); opacity: 1;
  }
}

/* extra "Klantenservice" tekstkolom in de nav -> verbergen op desktop (zat in mobiel menu) */
body.dsw-modhead .nav-headmenu.categories > li:not(.level0) { display: none; }

/* ---- mega-menu paneel ---- */
body.dsw-modhead .submenu {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 905;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  background: #fff;
  border-top: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
  border-radius: 0 0 var(--ds-radius) var(--ds-radius);
}
body.dsw-modhead .nav-headmenu.categories > li.level0:hover > .submenu { display: block; }
/* binnenruimte: kolommen-grid */
body.dsw-modhead .submenu {
  padding: 28px 24px 30px;
}
body.dsw-modhead .submenu::after { content: ""; display: block; clear: both; }
body.dsw-modhead .submenu {
  display: none;
}
body.dsw-modhead .nav-headmenu.categories > li.level0:hover > .submenu {
  /* !important verslaat de bestaande .displaynone{display:none!important} uit styles.css,
     zodat het hover-megamenu werkt náást topmenu.js (veilig herstylen) */
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) 220px;
  gap: 28px 34px;
  max-width: var(--ds-maxw); margin: 0 auto;
  /* legacy zet hoogte/overflow op de submenu waardoor de witte achtergrond niet de volle
     hoogte dekt (onderste kolommen schijnen door) -> hard terugzetten */
  background: #fff !important; align-items: start;
  height: auto !important; max-height: none !important; overflow: visible !important;
}
/* "terug naar categorieen" (mobiel) verbergen op desktop */
body.dsw-modhead .submenu .titlehoofdmenu { display: none; }

/* kolommen: legacy zet smalle breedte/float/absolute -> neutraliseren (anders woordafbreking
   + collaberende hoogte) */
body.dsw-modhead .submenu .col {
  min-width: 0;
  width: auto !important; max-width: none !important;
  float: none !important; position: static !important;
}
body.dsw-modhead .submenu .menutitle {
  display: block; margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ds-muted);
}
body.dsw-modhead .submenu .col a {
  display: block; padding: 7px 0;
  color: var(--ds-text); text-decoration: none; font-size: 14.5px; line-height: 1.35;
  border-radius: 6px;
  /* legacy forceert smalle breedte -> woordafbreking; terugzetten naar normale tekstloop */
  white-space: normal !important; width: auto !important; max-width: none !important; float: none !important;
}
body.dsw-modhead .submenu .col a:hover { color: var(--ds); }
/* "Bekijk alle ..." en BLOG = accent-links bovenaan een kolom */
body.dsw-modhead .submenu .col a.bekijkcategorie {
  font-weight: 700; color: var(--ds);
}
body.dsw-modhead .submenu .col a.bekijkcategorie:hover { text-decoration: underline; }

/* categoriefoto rechts */
body.dsw-modhead .submenu .colimage {
  align-self: start;
  float: none !important; position: static !important; width: auto !important; max-width: none !important;
}
body.dsw-modhead .submenu .colimage .topmenuimage {
  width: 100%; height: auto; border-radius: var(--ds-radius); display: block;
}

/* ==========================================================================
   Mobiel / tablet (<= 1024px): hamburger + off-canvas drawer + accordion
   ========================================================================== */

/* off-canvas overlay (JS injecteert .dsw-overlay als die mist) */
body.dsw-modhead .dsw-overlay { display: none; }

@media (max-width: 1024px) {
  /* topbalk: hamburger | logo gecentreerd | account+cart, zoek eronder vol-breed */
  body.dsw-modhead .page-header-container {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo tools"
      "search search";
    column-gap: 12px; row-gap: 12px;
    padding: 12px 16px 0;
  }
  /* hamburger zit IN .skip-links (kan niet los in de parent-grid) -> via order links in het cluster */
  body.dsw-modhead .skip-links .skip-nav { display: inline-flex; order: -1; }
  body.dsw-modhead .page-header-container > a { grid-area: logo; justify-self: start; margin-left: 0; }
  body.dsw-modhead .logo-de-schouw-witgoed { height: 40px; }
  body.dsw-modhead .skip-links { grid-area: tools; gap: 16px; margin: 0; } /* desktop-marge resetten op mobiel */
  body.dsw-modhead #header-search { grid-area: search; }
  body.dsw-modhead .trustpilotheader { display: none !important; }
  body.dsw-modhead .skip-account .label2,
  body.dsw-modhead .skip-cart .label { display: none; } /* alleen iconen op mobiel */

  /* sticky shrink op mobiel niet nog kleiner maken */
  body.dsw-modhead.dsw-stuck .logo-de-schouw-witgoed { height: 36px; }

  /* ---- het mega-menu wordt een off-canvas drawer ---- */
  body.dsw-modhead #header-nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 330px; max-width: 86vw;
    margin: 0; border: 0; border-radius: 0; background: #fff;
    z-index: 1001; overflow-y: auto;
    transform: translateX(-100%); transition: transform .26s ease;
    box-shadow: 0 0 50px rgba(20,20,45,.28);
    /* overschrijf de rwd .skip-content{display:none} op mobiel; zichtbaarheid via transform */
    display: block !important;
  }
  body.dsw-modhead.dsw-drawer-open #header-nav { transform: none; }

  body.dsw-modhead .dsw-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(20,20,45,.5); z-index: 1000;
    opacity: 0; visibility: hidden; transition: opacity .26s ease;
  }
  body.dsw-modhead.dsw-drawer-open .dsw-overlay { opacity: 1; visibility: visible; }
  body.dsw-modhead.dsw-drawer-open { overflow: hidden; } /* body-scroll lock */

  body.dsw-modhead #nav { max-width: none; margin: 0; padding: 0; }
  body.dsw-modhead #productmenu2.mobileHide { display: none; }

  /* categorielijst verticaal */
  body.dsw-modhead .nav-headmenu.categories { flex-direction: column; gap: 0; padding: 6px 0 24px; }
  body.dsw-modhead .nav-headmenu.categories > li.level0 {
    border-bottom: 1px solid var(--ds-border);
  }
  /* mobiel: span = accordion-header tonen, de <a>-duplicaat verbergen (anders dubbel) */
  body.dsw-modhead .nav-headmenu.categories > li.level0 > a.labelhoofdmenu2 { display: none !important; }
  body.dsw-modhead .nav-headmenu.categories > li.level0 > .labelhoofdmenu {
    display: flex !important; justify-content: space-between; align-items: center;
    width: 100%; padding: 15px 20px; border-bottom: 0; font-size: 15.5px;
  }
  body.dsw-modhead .nav-headmenu.categories > li.level0:hover > .labelhoofdmenu {
    border-bottom-color: transparent; color: var(--ds);
  }
  body.dsw-modhead .nav-headmenu.categories > li.level0 > .labelhoofdmenu::after { opacity: .55; }
  body.dsw-modhead .nav-headmenu.categories > li.level0.is-open > .labelhoofdmenu {
    background: var(--ds-light); color: var(--ds);
  }
  body.dsw-modhead .nav-headmenu.categories > li.level0.is-open > .labelhoofdmenu::after {
    transform: rotate(180deg); opacity: 1;
  }

  /* submenu = accordion-paneel (geen hover, geen absolute) */
  body.dsw-modhead .submenu,
  body.dsw-modhead .nav-headmenu.categories > li.level0:hover > .submenu {
    display: none !important; position: static; box-shadow: none; border: 0;
    border-radius: 0; background: var(--ds-light); padding: 4px 20px 18px;
    grid-template-columns: 1fr; gap: 0; max-width: none; margin: 0;
  }
  body.dsw-modhead .nav-headmenu.categories > li.level0.is-open > .submenu {
    display: block !important;
  }
  body.dsw-modhead .submenu .colimage { display: none; }
  body.dsw-modhead .submenu .titlehoofdmenu { display: none; }
  body.dsw-modhead .submenu .col { padding: 8px 0 4px; }
  body.dsw-modhead .submenu .menutitle { margin: 8px 0 6px; }
  body.dsw-modhead .submenu .col a { padding: 9px 0; }

  /* Klantenservice-blok onderaan de drawer wél tonen */
  body.dsw-modhead .nav-headmenu.categories > li:not(.level0) { display: block; padding: 16px 20px; }
  body.dsw-modhead .nav-headmenu.categories > li:not(.level0) .tmenu {
    font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--ds-muted); margin: 0 0 8px;
  }
  body.dsw-modhead .nav-headmenu-extra { list-style: none; margin: 0; padding: 0; }
  body.dsw-modhead .nav-headmenu-extra a { display: block; padding: 8px 0; color: var(--ds-text); text-decoration: none; }
}

@media (max-width: 560px) {
  body.dsw-modhead #header-search input.input-text { height: 44px; }
  body.dsw-modhead .skip-links { gap: 12px; }
}