/* ==========================================================================
   Seronera mockup: shared shell            (owner: architect, S-002)
   Base type, buttons, bands, header, hub panels, mobile menu, breadcrumb, footer.
   Depends on assets/tokens.css. Pairs with assets/shell.js (renders header,
   menu, footer, breadcrumb into mount points). Look = index.html.

   PAGE SKELETON (what the page author writes)
     <body class="s-page" data-page="craft">      data-page = registry id (see shell.js)
       <div data-s-mount="header"></div>          header + mobile menu + skip link
       <main id="main">
         <div data-s-mount="breadcrumb"></div>    optional, trail from registry
         ...sections...
       </main>
       <div data-s-mount="footer"></div>
     <noscript> fallback links are the author's job (see shell.js header comment).

   CLASS API (all prefixed s- unless it is a shared typographic primitive that
   keeps the protected pages' names)
     Layout     .s-wrap           max 1260px container with fluid gutter
                .s-section        vertical rhythm (padding-block)
     Bands      .licht            light band (steen / inkt)
                .groen            forest band
                (default)         dark band (nacht / wit)
                .korrel           fine grain overlay on any band
     Type       .kop1 .kop2 h3    Syne display headings; <em> inside = gold accent word
                .intro            lead paragraph, max 54ch
                .label            small caps label with the gold ring glyph
                .w > span         word mask used by motion M2 (added by motion.js)
     Buttons    .knop             pill button base
                .knop-oker        primary (ONE per screen)
                .knop-lijn        secondary outline
                .s-textlink       gold-underlined text link
     State      .s-soon           destination that does not exist yet: NOT a link
     Utilities  .s-vh             visually hidden
   ========================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.s-page {
  margin: 0;
  background: var(--nacht);
  color: var(--wit);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.s-page main { overflow-x: clip; }
.s-page a { color: inherit; }
.s-page img { max-width: 100%; display: block; }
.s-page :focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 3px; }
.s-page .licht :focus-visible { outline-color: var(--oker-diep); }
.s-page [id] { scroll-margin-top: var(--kop-h); }
.s-lock { overflow: hidden; }                         /* body while the menu is open */
.s-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.s-wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.s-section { padding-block: var(--section-pad); }

/* ---------- bands ---------- */
.licht { background: var(--steen); color: var(--inkt); }
.groen { background: var(--bos); color: var(--wit); }
.korrel { position: relative; isolation: isolate; }
.korrel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.s-page .kop1, .s-page .kop2, .s-page h3.kop3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.025em; line-height: 1; margin: 0; text-wrap: balance;
}
.s-page .kop1 { font-size: var(--fs-kop1); }
.s-page .kop2 { font-size: var(--fs-kop2); }
.s-page .kop3 { font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.12; }
.s-page .kop1 em, .s-page .kop2 em, .s-page .kop3 em { font-style: normal; color: var(--oker-licht); }
.s-page .licht .kop1 em, .s-page .licht .kop2 em, .s-page .licht .kop3 em { color: var(--oker-diep); }
.s-page .intro { font-size: var(--fs-intro); color: var(--mist); max-width: 54ch; margin: 0; }
.s-page .licht .intro { color: var(--inkt-zacht); }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; }

/* Label with the gold ring glyph (the stamp ring returning as a ripple) */
.s-page .label {
  font-weight: 600; font-size: var(--fs-label); letter-spacing: .24em; text-transform: uppercase;
  color: var(--oker-licht); display: flex; align-items: center; gap: 14px; margin: 0;
}
.s-page .licht .label { color: var(--oker-diep); }
.s-page .label::before, .s-ring {
  content: ""; flex: none; display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, currentColor 0 2px, transparent 2.5px 4.5px, currentColor 5px 6.2px, transparent 6.7px 8px, currentColor 8.4px 9px, transparent 9.4px);
}

.s-sectionhead { display: grid; gap: 22px; margin-bottom: var(--head-gap); max-width: 860px; }

/* ---------- buttons ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: var(--doel);
  font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: 17px 28px; border: 1.5px solid transparent; border-radius: 999px; cursor: pointer;
  transition: background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro);
}
.knop-oker { background: var(--oker); color: var(--nacht); }
.knop-oker:hover { background: var(--oker-hover); }
.knop-lijn { border-color: rgba(239, 236, 236, .42); color: var(--wit); background: transparent; }
.knop-lijn:hover { background: var(--wit); color: var(--nacht); border-color: var(--wit); }
.licht .knop-lijn { border-color: var(--inkt); color: var(--inkt); }
.licht .knop-lijn:hover { background: var(--inkt); color: var(--steen); }
.knop svg { width: 18px; height: 18px; transition: transform var(--dur-micro) ease; flex: none; }
.knop:hover svg { transform: translateX(5px); }
@media (max-width: 560px) { .knop { padding: 14px 22px; font-size: 13px; } }

.s-textlink { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--oker); padding-bottom: 1px; }
.licht .s-textlink { border-bottom-color: var(--oker-diep); }
.s-textlink:hover { color: var(--oker-licht); }
.licht .s-textlink:hover { color: var(--oker-diep); }

/* ---------- not-yet-existing destinations ----------
   Rendered by shell.js instead of an <a>. Not focusable, not clickable. */
.s-soon { cursor: default; opacity: .62; display: inline-flex; align-items: baseline; gap: 8px; }
.s-soon small {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; opacity: .85; white-space: nowrap;
}

/* ---------- skip link ---------- */
.s-skip {
  position: fixed; left: 12px; top: -80px; z-index: var(--z-skip); background: var(--oker); color: var(--nacht);
  padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: top .2s;
}
.s-skip:focus { top: 12px; }

/* ==========================================================================
   Header                       (rendered by shell.js into [data-s-mount=header])
   ========================================================================== */
.s-header {
  position: sticky; top: 0; z-index: var(--z-header); height: var(--kop-h);
  background: var(--nacht); color: var(--wit); border-bottom: 1px solid var(--lijn-d);
}
.s-header__bar { height: 100%; display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.s-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--wit); flex: none; }
.s-logo img { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.s-logo__text { display: flex; flex-direction: column; line-height: 1; }
.s-logo__name { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .2em; margin-right: -.2em; white-space: nowrap; }
.s-logo__sub { font-size: 9.5px; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: var(--oker-licht); margin-top: 6px; white-space: nowrap; }

.s-nav { display: flex; align-items: center; flex: 1; gap: clamp(20px, 3vw, 40px); min-width: 0; }
.s-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.s-nav__list--secondary { margin-left: auto; }
.s-nav__item { display: flex; align-items: center; gap: 2px; position: relative; }
.s-nav a.s-nav__link, .s-nav .s-nav__trigger, .s-nav .s-soon {
  font: 500 15px var(--sans); color: var(--mist); text-decoration: none; position: relative;
  transition: color var(--dur-micro); background: none; border: 0; padding: 0; cursor: pointer; min-height: var(--doel);
  display: inline-flex; align-items: center;
}
.s-nav .s-soon { cursor: default; }
.s-nav a.s-nav__link::after, .s-nav .s-nav__trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1.5px; background: var(--oker);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s ease;
}
.s-nav a.s-nav__link:hover, .s-nav .s-nav__trigger:hover, .s-nav .s-nav__trigger[aria-expanded="true"] { color: var(--wit); }
.s-nav a.s-nav__link:hover::after, .s-nav .s-nav__trigger:hover::after { transform: scaleX(1); }
.s-nav .is-section > .s-nav__link, .s-nav .is-section > .s-nav__trigger { color: var(--wit); }
.s-nav .is-section > .s-nav__link::after, .s-nav .is-section > .s-nav__trigger::after { transform: scaleX(1); }
.s-nav__more {
  width: 28px; height: var(--doel); display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--mist); cursor: pointer; padding: 0;
}
.s-nav__more svg, .s-nav__trigger svg { width: 14px; height: 14px; transition: transform .3s ease; margin-left: 6px; }
.s-nav__more svg { margin: 0; }
.s-nav__more[aria-expanded="true"] svg, .s-nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.s-nav__more:hover { color: var(--wit); }

.s-header__tools { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.s-nav ~ .s-header__tools { margin-left: 0; }
.s-bag, .s-menubtn {
  position: relative; width: var(--doel); height: var(--doel); display: inline-flex; align-items: center; justify-content: center;
  color: var(--wit); background: transparent; border: 1px solid transparent; border-radius: 50%; cursor: pointer; text-decoration: none; padding: 0;
  transition: border-color var(--dur-micro);
}
.s-bag:hover { border-color: var(--lijn-d); }
.s-bag svg { width: 22px; height: 22px; }
.s-menubtn { display: none; border-color: var(--lijn-d); }
.s-menubtn span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--wit); transition: transform .35s ease, opacity .25s ease, top .35s ease; }
.s-menubtn span:nth-child(1) { top: 16px; } .s-menubtn span:nth-child(2) { top: 21.5px; } .s-menubtn span:nth-child(3) { top: 27px; }
.s-menubtn[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.s-menubtn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.s-menubtn[aria-expanded="true"] span:nth-child(3) { top: 21.5px; transform: rotate(-45deg); }

/* Scroll-progress hairline (motion M3) */
.s-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--oker); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

@media (max-width: 1180px) {
  .s-nav { display: none; }
  .s-menubtn { display: inline-flex; }
  .s-nav ~ .s-header__tools, .s-header__tools { margin-left: auto; }
}
/* Mobile: fixed header in its own layer (the home page's iOS Safari workaround) */
@media (max-width: 900px) {
  .s-header { position: fixed; left: 0; right: 0; top: 0; transform: translateZ(0); will-change: transform; }
  .s-page { padding-top: var(--kop-h); }
}
@media (max-width: 440px) {
  .s-logo img { width: 38px; height: 38px; }
  .s-logo__name { font-size: 16px; letter-spacing: .16em; }
  .s-logo__sub { font-size: 8px; letter-spacing: .3em; }
  .s-logo { gap: 10px; }
}
@media (max-width: 350px) { .s-logo__text { display: none; } }

/* The original homepage, product picker and checkout use the same shell header. */
body[data-shell-header-only].shell-header-ready > header.kop,
body[data-shell-header-only].shell-header-ready > .mobiel-menu,
body[data-shell-header-only="shop"].shell-header-ready .app > header.top { display: none !important; }
body[data-shell-header-only] .s-header { --doel: 48px; --kop-h: 74px; }
body[data-shell-header-only="shop"] { margin: 0; }
body[data-shell-header-only="shop"] .app > .s-header { position: relative; grid-column: 1 / -1; top: auto; left: auto; right: auto; transform: none; will-change: auto; }
body[data-shell-header-only="shop"] .s-header__tools { gap: 8px; }
body[data-shell-header-only="shop"] .s-header .tas { flex: none; }
body[data-shell-header-only="checkout"] .s-header .kop-rechts { display: flex; align-items: center; gap: 12px; }
body[data-shell-header-only="checkout"] .s-header .veilig { display: none; }
body[data-shell-header-only="checkout"] .s-header .s-nav__link { white-space: nowrap; }
@media (max-width: 900px) {
  body[data-shell-header-only="checkout"].shell-header-ready { padding-top: 74px; }
}
@media (max-width: 600px) {
  body[data-shell-header-only="checkout"] .s-header .veilig,
  body[data-shell-header-only="checkout"] .s-header .s-bag { display: none; }
  body[data-shell-header-only="checkout"] .s-header .s-logo__text { display: none; }
  body[data-shell-header-only="shop"] .s-header .kop-shop { display: none; }
}
@media (max-width: 759px) {
  body[data-shell-header-only="shop"] .s-header { z-index: 41; }
  body[data-shell-header-only="shop"] .collectie { top: 74px; }
}

/* ---------- hub panels (desktop) ---------- */
.s-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-panel); background: var(--nacht);
  border-bottom: 1px solid var(--lijn-d); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); padding: 28px 0 26px;
}
.s-panel[hidden], .s-panel__sec[hidden] { display: none; }
.s-panel__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.s-panel__col { display: block; min-width: 0; }
.s-panel__imgl { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-tile); background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform .4s ease, box-shadow .4s ease; }
.s-panel__col:hover .s-panel__imgl { transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .8); }
.s-panel__cat a { color: inherit; text-decoration: none; }
.s-panel__cat a:hover { text-decoration: underline; text-decoration-color: var(--oker); text-underline-offset: 4px; }
.s-panel__cat { margin: 14px 0 6px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--wit); }
.s-panel__col ul, .s-panel__chaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.s-panel__col li a, .s-panel__col li .s-soon {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--lijn-d);
  text-decoration: none; color: var(--mist); font-size: 14.5px; transition: color .2s;
}
.s-panel__col li a small { font-size: 12px; color: var(--oker); white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-panel__col li a:hover, .s-panel__col li a:focus-visible { color: var(--wit); }
.s-panel__foot { margin-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 14px; color: var(--mist); }
.s-panel__foot p { margin: 0; }
.s-panel__all { display: inline-flex; align-items: center; gap: 8px; color: var(--oker-licht); font-weight: 600; text-decoration: none; white-space: nowrap; }
.s-panel__all svg { width: 16px; height: 16px; transition: transform .3s ease; }
.s-panel__all:hover svg { transform: translateX(4px); }
/* chapter list panel (The Craft etc.) */
.s-panel__chaps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.s-panel__chaps li { padding: 14px 0; border-bottom: 1px solid var(--lijn-d); display: grid; gap: 2px; }
.s-panel__chaps a, .s-panel__chaps .s-soon { font-family: var(--display); font-weight: 600; font-size: 19px; text-decoration: none; color: var(--wit); }
.s-panel__chaps .s-soon { color: var(--mist); }
.s-panel__chaps small.desc { font-size: 14px; color: var(--mist); }
@media (max-width: 1180px) { .s-panel { display: none !important; } }

/* ==========================================================================
   Mobile menu                  (rendered by shell.js; opened by .s-menubtn)
   ========================================================================== */
.s-menu {
  position: fixed; left: 0; right: 0; top: var(--kop-h); bottom: 0; z-index: var(--z-menu); background: var(--nacht); color: var(--wit);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
}
.s-menu[hidden] { display: none; }
.s-menu__primary, .s-menu__secondary { list-style: none; margin: 0; padding: 0; display: grid; }
.s-menu__row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--lijn-d); }
.s-menu__row > a, .s-menu__row > .s-soon {
  flex: 1; display: flex; align-items: baseline; gap: 16px; padding: 16px 0; text-decoration: none; color: var(--wit);
  font-family: var(--display); font-weight: 700; font-size: clamp(30px, 9vw, 44px); letter-spacing: -.02em; line-height: 1;
}
.s-menu__row > .s-soon { color: var(--mist); }
.s-menu__row small.n { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--oker); }
.s-menu__secondary .s-menu__row > a, .s-menu__secondary .s-menu__row > .s-soon { font-size: 22px; padding: 14px 0; letter-spacing: -.01em; }
.s-menu__toggle {
  width: var(--doel); height: var(--doel); flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--lijn-d); border-radius: 50%; color: var(--wit); cursor: pointer; padding: 0;
}
.s-menu__toggle svg { width: 16px; height: 16px; transition: transform .3s ease; }
.s-menu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.s-menu__sub { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 18px; border-bottom: 1px solid var(--lijn-d); }
.s-menu__sub[hidden] { display: none; }
.s-menu__sub a, .s-menu__sub .s-soon {
  min-height: var(--doel); display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--lijn-d); border-radius: 999px;
  color: var(--mist); text-decoration: none; font-size: 14px;
}
.s-menu__sub .s-soon { border-style: dashed; }
.s-menu__label { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oker); }
.s-menu__chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.s-menu__chips a { flex: none; width: 112px; text-decoration: none; color: var(--mist); font-size: 13px; display: grid; gap: 6px; }
.s-menu__chips .ph { aspect-ratio: 4 / 3; border-radius: 10px; background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; }
.s-menu__foot { display: grid; gap: 8px; justify-items: start; color: var(--mist); font-size: 15px; }
.s-menu__foot a { color: var(--mist); text-decoration: none; border-bottom: 1px solid var(--oker); }
@media (min-width: 1181px) { .s-menu { display: none !important; } }

/* ==========================================================================
   Breadcrumb                   (shell.js renders from the registry)
   Desktop: Home › Hub › Page.  < 760px: single back link to the parent.
   ========================================================================== */
.s-crumb { padding-top: clamp(20px, 3vw, 32px); }
.s-crumb__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: var(--fs-caption); }
.s-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--mist); }
.s-crumb li { display: inline-flex; align-items: center; gap: 10px; }
.s-crumb li + li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--oker); flex: none; }
.s-crumb a { color: var(--mist); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.s-crumb a:hover { color: var(--wit); }
.s-crumb [aria-current] { color: var(--wit); }
.s-crumb__back { display: none; align-items: center; min-height: var(--doel); color: var(--mist); text-decoration: none; font-size: 14px; }
.licht .s-crumb ol, .licht .s-crumb a { color: var(--inkt-zacht); }
.licht .s-crumb [aria-current], .licht .s-crumb a:hover { color: var(--inkt); }
@media (max-width: 759px) {
  .s-crumb ol { display: none; }
  .s-crumb__back { display: inline-flex; }
}

/* ==========================================================================
   Footer                       (rendered by shell.js into [data-s-mount=footer])
   ========================================================================== */
.s-footer { background: var(--nacht-3); color: var(--mist); font-size: 14.5px; border-top: 4px solid var(--bos); }
.s-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; padding-block: 72px 40px; }
.s-footer h2, .s-footer summary {
  margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wit); list-style: none;
}
.s-footer summary::-webkit-details-marker { display: none; }
.s-footer p { margin: 0; }
.s-footer a { text-decoration: none; }
.s-footer a:hover { color: var(--wit); }
.s-footer nav, .s-footer details > div { display: grid; gap: 6px; }
.s-footer nav a, .s-footer nav .s-soon { min-height: 28px; display: inline-flex; align-items: center; }
.s-footer .s-logo img { width: 72px; height: 72px; }
.s-footer__brand p { margin-top: 22px; max-width: 36ch; }
.s-footer__brand address { font-style: normal; margin-top: 18px; display: grid; gap: 2px; }
.s-footer__brand address a { border-bottom: 1px solid var(--oker); justify-self: start; }
.s-footer__legal { border-top: 1px solid var(--lijn-d); }
.s-footer__legal .s-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 20px; font-size: 13px; }
.s-footer__legal nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (max-width: 1100px) { .s-footer__grid { grid-template-columns: repeat(3, 1fr); } .s-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 759px) {
  .s-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 48px 24px; }
  .s-footer__brand { padding-bottom: 28px; }
  .s-footer details { border-top: 1px solid var(--lijn-d); }
  .s-footer summary { margin: 0; padding: 16px 0; min-height: var(--doel); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .s-footer summary::after { content: "+"; font-size: 18px; letter-spacing: 0; color: var(--oker); }
  .s-footer details[open] summary::after { content: "\2212"; }
  .s-footer details > div { padding-bottom: 14px; }
}

/* ---------- reduced motion (CSS side) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .s-page *, .s-page *::before, .s-page *::after { transition: none !important; }
}