/* ==========================================================================
   UMMU — Site styles (iteratie 1: echte website uit screenshots)
   --------------------------------------------------------------------------
   Mobile-first, responsive naar tablet/desktop. Bouwt op tokens.css.
   Bron-designs: /BRANDING/{Homepage,Over ons,PDP,Contact}.jpg
   Componenten zijn herbruikbaar; header/footer staan als partial in
   /WWW/src/components/. Uitleg: /Docs/technical/design-from-screenshots.md
   ========================================================================== */

/* ?v= hier ook: tokens.css heeft zelf geen <link>-tag/cache-bust in de HTML
   (alleen site.css zelf krijgt die), dus zonder eigen query-param kan de
   browser 'm na een wijziging gewoon uit cache blijven serveren terwijl
   site.css's eigen versie al wel omhoog is gegaan. */
@import url("./tokens.css?v=2026093071");

/* Deze site is een echte multi-page app (elke navigatie = volledige
   document-load, geen SPA-router). Chromium laat bij zo'n navigatie
   standaard nog héél even de OUDE pagina staan (incl. actieve
   menu-onderstreping) voordat de nieuwe pagina zijn eerste frame toont —
   dat is het "flikkeren" in het menu bij snel doorklikken. De
   View Transitions API (native cross-document transitions, Chrome 126+)
   lost dat op met een korte crossfade i.p.v. die abrupte wissel. Puur
   progressive enhancement: browsers zonder support negeren dit gewoon. */
@view-transition {
  navigation: auto;
}

/* ----------------------------------------------------------------- Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* scrollbar-gutter:stable reserveert altijd de ruimte voor de verticale
   scrollbar, ook op pagina's die kort genoeg zijn om er geen te hebben —
   anders verschuift de (gecentreerde) header/kruimelpad een paar pixels
   heen en weer tussen pagina's die wél/niet hoeven te scrollen. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; scrollbar-gutter: stable; }
body {
  min-height: 100dvh;
  max-width: 100vw;
  overflow-x: hidden;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.bg-white { background: #fff; } /* PDP/PLP: witte paginaondergrond i.p.v. cream (uit Figma) */
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}

/* --------------------------------------------------------------- Layout */
:root {
  --page-pad: clamp(20px, 5vw, 48px);
  --content-width: 1120px;
  /* Voor containers die ZELF ook padding-inline:var(--page-pad) toepassen:
     max-width groter dan 1120px, zodat de padding er "bovenop" komt i.p.v.
     ervan afgaat — het echte content-vlak (na aftrek van de padding) blijft
     zo altijd precies 1120px, ongeacht de viewport. */
  --content-box: calc(var(--content-width) + 2 * var(--page-pad));
  /* Linkerkant van de 1120px-contentgrid t.o.v. het echte viewport-links,
     ook bruikbaar buiten een gecentreerde .container (bv. de footer, die
     zelf edge-to-edge blijft voor het beeld rechts). */
  --content-inset: max(var(--page-pad), calc((100vw - var(--content-width)) / 2));
}
.container { width: 100%; max-width: var(--content-box); margin-inline: auto; padding-inline: var(--page-pad); }
.container--narrow { max-width: 760px; }
.section { padding-block: clamp(var(--space-12), 8vw, var(--space-24)); }
.bleed { /* full-bleed binnen een .container */
  margin-inline: calc(-1 * var(--page-pad));
}

/* ------------------------------------------------------------- Skip-link */
.skip-link {
  position: absolute; left: var(--space-4); top: -3rem;
  background: var(--color-forest); color: var(--color-cream);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  z-index: var(--z-toast); transition: top var(--motion-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ----------------------------------------------------------------- Icons
   Monochroom icoon via CSS-mask → erft kleur uit `color` (currentColor).
   Bron-SVG's: /WWW/assets/icons/. Zo kleuren we hetzelfde icoon per sectie. */
.icon {
  display: inline-block; width: 1.4em; height: 1.4em; flex: none;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.icon--customize  { -webkit-mask-image: url("../../assets/icons/customize.svg?v=2");      mask-image: url("../../assets/icons/customize.svg?v=2"); }
.icon--soap       { -webkit-mask-image: url("../../assets/icons/soap.svg?v=2");           mask-image: url("../../assets/icons/soap.svg?v=2"); }
.icon--longlast   { -webkit-mask-image: url("../../assets/icons/gaat_lang_mee.svg");  mask-image: url("../../assets/icons/gaat_lang_mee.svg"); }
.icon--durable    { -webkit-mask-image: url("../../assets/icons/duurzaam.svg");       mask-image: url("../../assets/icons/duurzaam.svg"); }
.icon--design     { -webkit-mask-image: url("../../assets/icons/design_with_love.svg"); mask-image: url("../../assets/icons/design_with_love.svg"); }
.icon--press      { -webkit-mask-image: url("../../assets/icons/press_to_use.svg");   mask-image: url("../../assets/icons/press_to_use.svg"); }
.icon--size       { -webkit-mask-image: url("../../assets/icons/size.svg");           mask-image: url("../../assets/icons/size.svg"); }
.icon--weight     { -webkit-mask-image: url("../../assets/icons/weight.svg");         mask-image: url("../../assets/icons/weight.svg"); }
.icon--material   { -webkit-mask-image: url("../../assets/icons/material.svg");       mask-image: url("../../assets/icons/material.svg"); }
.icon--refill     { -webkit-mask-image: url("../../assets/icons/refill.svg");         mask-image: url("../../assets/icons/refill.svg"); }
.icon--dishwasher { -webkit-mask-image: url("../../assets/icons/dishwasher_safe.svg?v=2"); mask-image: url("../../assets/icons/dishwasher_safe.svg?v=2"); }
.icon--reuse      { -webkit-mask-image: url("../../assets/icons/icon_re-use.svg");    mask-image: url("../../assets/icons/icon_re-use.svg"); }
.icon--mail       { -webkit-mask-image: url("../../assets/icons/mail.svg");           mask-image: url("../../assets/icons/mail.svg"); }
.icon--phone      { -webkit-mask-image: url("../../assets/icons/phone.svg");          mask-image: url("../../assets/icons/phone.svg"); }
.icon--whatsapp   { -webkit-mask-image: url("../../assets/icons/whatsapp.svg");       mask-image: url("../../assets/icons/whatsapp.svg"); }
.icon--menu       { -webkit-mask-image: url("../../assets/icons/hamburgermenu.svg");  mask-image: url("../../assets/icons/hamburgermenu.svg"); }
.icon--heart      { -webkit-mask-image: url("../../assets/icons/heart.svg");          mask-image: url("../../assets/icons/heart.svg"); }
.icon--chevron    { -webkit-mask-image: url("../../assets/icons/dropdown.svg");       mask-image: url("../../assets/icons/dropdown.svg"); }
.icon--check      { -webkit-mask-image: url("../../assets/icons/vinkje.svg");         mask-image: url("../../assets/icons/vinkje.svg"); }
.icon--heart-filled { -webkit-mask-image: url("../../assets/icons/heart_filled.svg"); mask-image: url("../../assets/icons/heart_filled.svg"); }
.icon--cross      { -webkit-mask-image: url("../../assets/icons/cross.svg");          mask-image: url("../../assets/icons/cross.svg"); }
.icon--cart       { -webkit-mask-image: url("../../assets/icons/shopping_cart.svg?v=2"); mask-image: url("../../assets/icons/shopping_cart.svg?v=2"); }

/* --------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: var(--space-3) var(--space-8);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--color-forest); text-decoration: none;
  background: var(--color-mint); border: 1px solid transparent; border-radius: var(--radius-full);
  cursor: pointer; transition: transform var(--motion-fast) var(--ease-out),
              background-color var(--motion-base) var(--ease-out), filter var(--motion-base) var(--ease-out);
}
.btn:hover { filter: brightness(0.96); }
.btn:active { transform: scale(0.99); }
.btn--rust  { background: var(--color-rust); color: #fff; }
.btn--rust:hover { background: var(--ummu-terracotta-hover); filter: none; }
.btn--midgreen { background: var(--ummu-mid-green); color: #fff; }
.btn--block { width: 100%; }
.btn { font-weight: var(--weight-semibold); letter-spacing: var(--tracking-button); text-transform: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: #fff;
  border-bottom: 1px solid var(--ummu-sand-200);
}
.site-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 64px;
}
/* Checkout-header (checkout.html): hamburger, wish- en cart-icoon blijven in
   de DOM staan (identiek aan elke andere pagina) maar worden hier verborgen
   via de page-checkout body-class, i.p.v. weggelaten uit de HTML — anders
   blijven ze na een client-side navigatie weg op de eerstvolgende pagina,
   omdat site.js' router alleen #page-content vervangt, niet de header zelf.
   Logo krijgt daardoor wél de eerste (1fr) kolom i.p.v. de gecentreerde
   auto-kolom, dus expliciet opnieuw centreren. */
.page-checkout .site-header__menu,
.page-checkout .site-header__actions { display: none; }
.page-checkout .site-header__logo { grid-column: 1 / -1; justify-self: center; }
.site-header__menu, .site-header__wish, .site-header__cart {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--color-forest);
}
/* Het hamburger-icoon zelf is smaller dan de 44px tikzone — gecentreerd
   (justify-content:center hierboven) stond het daardoor zichtbaar te ver van
   de linkerrand af. Alleen hier (niet bij wish/cart) terug naar flex-start,
   dit is sowieso enkel zichtbaar op mobiel (.site-header__menu wordt op
   desktop display:none, zie @media hieronder). */
.site-header__menu { justify-content: flex-start; }
/* Wish + cart staan samen als één grid-kolom (rechts) — uit het echte
   Figma-header-frame (node 478:1872), met 20px gap ertussen en de iconen
   zelf op 20px hoogte i.p.v. los elk een eigen grid-kolom. */
.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 20px; height: 20px; }
.site-header__wish, .site-header__cart { position: relative; width: auto; height: 20px; }
.site-header__wish .icon, .site-header__cart .icon { width: 20px; height: 20px; }
.site-header__wish[aria-pressed="true"] .icon--heart { -webkit-mask-image: url("../../assets/icons/heart_filled.svg"); mask-image: url("../../assets/icons/heart_filled.svg"); }
.site-header__wish[aria-pressed="true"] { color: var(--color-rust); }
/* Cart-icoon blijft altijd donkergroen (--color-forest), ook als de
   winkelwagen gevuld is — geen rust-kleurwissel zoals bij het wishlist-
   hartje. Het gevulde-signaal is puur het mint bolletje met aantal (node
   902:2342) — geen onderdeel van het geëxporteerde icoon-asset zelf, maar
   een los element erbovenop. */
/* 21px i.p.v. 15px, zelfde op mobiel en desktop — top/right zo herrekend dat
   de linkeronderhoek van het bolletje op precies dezelfde plek blijft staan
   (was top:-6px/right:-8px bij 15px) en de vergroting dus alleen omhoog/naar
   rechts gebeurt, niet symmetrisch rondom. */
.site-header__cart-badge {
  position: absolute; top: -12px; right: -14px; min-width: 21px; height: 21px;
  border-radius: var(--radius-full); background: var(--color-mint); color: var(--color-forest);
  font-size: 15px; font-weight: var(--weight-bold); line-height: 21px; text-align: center;
  padding-inline: 4px;
}
/* Op de winkelwagen-pagina zelf (die zet aria-current="page" op haar eigen
   header-icoon, zelfde patroon als de actieve nav-link) wordt het cart-
   icoon mint i.p.v. donkergroen — puur een "je bent hier"-indicator, los
   van of de winkelwagen gevuld is. */
.site-header__cart[aria-current="page"] { color: var(--color-mint); }
/* Zelfde gevuld-hartje-feedback voor de overige wishlist-knoppen op de PDP
   (galerij, naast titel, refill-cards) — zonder deze regel toggelt de
   state wel (aria-pressed), maar is er geen enkel visueel verschil. */
.gallery__wish[aria-pressed="true"] .icon--heart,
.pdp__wish[aria-pressed="true"] .icon--heart { -webkit-mask-image: url("../../assets/icons/heart_filled.svg"); mask-image: url("../../assets/icons/heart_filled.svg"); }
.gallery__wish[aria-pressed="true"],
.pdp__wish[aria-pressed="true"] { color: var(--color-rust); }
/* Wishlist "toegevoegd"-animatie: een bounce op het hartje-icoon + een
   terracotta ripple die vanuit de knop naar buiten dijt en wegvaagt.
   site.js zet hiervoor tijdelijk .wish-added op de knop (alleen bij het
   ​toevoegen​ aan de wishlist, niet bij verwijderen). Bewust een eigen,
   tragere duur (700ms) i.p.v. --motion-slow (400ms, elders gebruikt voor
   gewone UI-transities) — dit mag zichtbaar "mooi" uitspelen. Het
   header-hartje doet hier niet aan mee, zie .wish-delta hieronder. */
:root { --wish-anim-duration: 700ms; }
@keyframes wish-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  65%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes wish-ripple {
  0%   { transform: scale(.5); opacity: .5; }
  100% { transform: scale(2.1); opacity: 0; }
}
[data-wish-id].wish-added .icon {
  animation: wish-pop var(--wish-anim-duration) var(--ease-out);
}
[data-wish-id].wish-added::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--color-rust); pointer-events: none;
  /* forwards: blijft op de eind-keyframe (opacity:0) hangen na afloop —
     zonder fill-mode valt de pseudo-element terug op zijn CSS-standaard
     (opacity:1, volle grootte) en verschijnt er even een volle, opake
     cirkel over het hartje voordat site.js de klasse weer verwijdert. */
  animation: wish-ripple var(--wish-anim-duration) var(--ease-out) forwards;
}

/* Header-wishlist: geen pop/ripple, alleen een klein "+1"/"-1"-rondje dat
   omhoog zweeft en wegvaagt — site.js voegt dit element tijdelijk toe.
   Maar 2 bewegingssegmenten (i.p.v. 4) — elk keyframe-segment herstart de
   easing-curve, dus met veel segmenten van sterk wisselende afstand/duur
   oogt de beweging hortend; met 2 segmenten (snel inpoppen, dan gelijkmatig
   uitzweven+vervagen) blijft de snelheid consistent. */
@keyframes wish-delta-float {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  25%  { transform: translateY(-2px) scale(1); opacity: 1; }
  100% { transform: translateY(-20px) scale(1); opacity: 0; }
}
.wish-delta {
  position: absolute; top: 1px; right: -8px; z-index: var(--z-raised);
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: var(--radius-full);
  background: var(--color-rust); color: #fff; font-size: 11px; font-weight: var(--weight-bold);
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
  animation: wish-delta-float 1300ms var(--ease-out) forwards;
}
.site-header__logo { justify-self: center; color: var(--color-forest); }
.site-header__logo svg, .site-header__logo img { width: 104px; height: auto; }

/* Mobiele nav-drawer (toggled via site.js): volledig scherm overlay, begint
   bovenaan (top:0, i.p.v. onder de header) met een eigen sluit-balk — de
   originele header (logo/hamburger/wish/cart) zit er dus geheel onder. De
   productcategorieën staan altijd plat uitgeklapt (geen accordion meer), en
   de secundaire links worden met margin-top:auto naar de onderkant geduwd. */
.site-nav { display: none; }
.site-nav[data-open="true"] {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--color-cream); overflow-y: auto;
}
/* <nav> zelf heeft al class="container" (dus padding-inline:var(--page-pad)
   van de ouder) — eerst "ontsnappen" via dezelfde full-bleed-truc als
   .site-nav__primary, en de 20px vanaf de rand hierna op de knop zelf
   zetten i.p.v. als padding op deze balk (zou anders bovenop de
   geërfde container-padding komen i.p.v. een vaste 20px vanaf de rand). */
.site-nav__topbar {
  flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; min-height: 64px;
  margin-inline: calc(-1 * var(--page-pad)); width: calc(100% + 2 * var(--page-pad));
}
.site-nav__close { background: none; border: 0; cursor: pointer; color: var(--color-forest); padding: 0; margin-right: 20px; }
.site-nav__close .icon { width: 14px; height: 14px; }
/* Witte achtergrond van de categorieën mag over de volle schermbreedte
   lopen, ook al staat <nav> zelf in de .container met zij-padding — de
   gebruikelijke full-bleed-truc (negative margin + bredere breedte), zodat
   de linktekst zelf wél weer op dezelfde inspring als de rest landt. */
.site-nav__primary {
  border-top: 1px solid var(--ummu-sand-200); background: #fff;
  margin-inline: calc(-1 * var(--page-pad)); width: calc(100% + 2 * var(--page-pad));
}
.site-nav__primary > a {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--space-4) var(--page-pad); text-decoration: none; text-align: left;
  font: inherit; font-size: var(--text-lg); color: var(--color-text);
  background: none; border: 0; border-bottom: 1px solid var(--ummu-sand-200); cursor: pointer;
}
.site-nav__primary .icon--chevron { width: 1em; height: 1em; transform: rotate(-90deg); }
.site-nav__secondary { margin-top: auto; padding: var(--space-6) 0; display: flex; flex-direction: column; }
.site-nav__secondary a {
  padding: var(--space-3) var(--page-pad); text-decoration: none;
  font-size: var(--text-base); color: var(--color-text);
}
.site-nav__desktop-only { display: none; }

/* --------------------------------------------------------------- Breadcrumb */
/* Rand loopt over de volle paginabreedte, ook al is .breadcrumb-row zelf
   een gecentreerde .container (i.p.v. een border die bij de container-rand
   stopt). */
.breadcrumb-row { position: relative; }
/* Het kruimelpad heeft altijd een witte achtergrond, los van de
   pagina-achtergrond eromheen (die per pagina cream of wit is) — bleedt
   met 100vw tot de volledige viewportbreedte, net als de randlijn. */
.breadcrumb-row::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; bottom: 0;
  width: 100vw; transform: translateX(-50%);
  background: #fff; border-bottom: 1px solid var(--ummu-sand-200);
}
/* Op de PDP mag de rand tussen kruimelpad en hero-afbeelding weg — elders
   (PLP, winkelwagen, etc.) blijft de rand gewoon staan. */
.breadcrumb-row--pdp::after { border-bottom: 0; }
.breadcrumb {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding-block: var(--space-3); color: var(--color-text); font-size: var(--text-sm);
}
.breadcrumb a { text-decoration: none; color: var(--color-text); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { color: var(--color-muted); }
.breadcrumb__current { color: var(--color-muted); }
.breadcrumb-back { display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; color: var(--color-text); font-size: var(--text-sm); }
.breadcrumb-back .icon--chevron { width: 0.9em; height: 0.9em; transform: rotate(90deg); }
@media (min-width: 768px) { .breadcrumb-back { display: none; } .breadcrumb { display: flex; } }
@media (max-width: 767px) {
  .breadcrumb.breadcrumb--desktop-only { display: none; }
  /* Kruimelpad-rij op mobiel: vaste 40px hoogte, tekst + pijltje verticaal
     gecentreerd (i.p.v. padding-block, die de hoogte liet meebewegen met
     de tekst). */
  .breadcrumb-row { display: flex; align-items: center; height: 40px; }
  .breadcrumb, .breadcrumb-back { padding-block: 0; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { margin-top: var(--space-12); }
/* Homepage: 40px tussen de reviews en de footer i.p.v. de opgetelde
   padding-bottom + deze margin-top (.site-footer zelf blijft ongewijzigd
   voor de andere pagina's). */
.site-footer--home { margin-top: 0; }
/* Donkere zone van de footer (nieuwsbrief + links + merk): bevat de outline
   "ummu"-watermerkafbeeldingen. Mobiel: horizontale strook bovenaan de
   donkere zone. Desktop: staand beeld tegen de rechterkant. Bron: de door de
   vormgever aangeleverde exports in assets/images/footer/. */
.site-footer__dark { background: var(--color-forest); position: relative; overflow: hidden; }
/* Eén <picture> met een <source media="(min-width:768px)"> kiest de juiste
   afbeelding op browserniveau (niet via CSS display:none) — zo kan er nooit
   per ongeluk de verkeerde variant zichtbaar zijn, ook niet als de stylesheet
   nog niet geladen is. */
.site-footer__watermark { display: block; width: 100%; height: auto; margin-top: 30px; }
/* Zij-marge (20px) staat op de losse onderdelen, niet op deze wrapper: de
   navigatie-regels (site-footer__links) moeten zelf edge-to-edge lopen (hun
   scheidingslijn hoort de volle breedte te hebben), met de 20px als eigen
   padding binnen elke regel.
   Op mobiel is dit een simpele verticale flex-volgorde (site-footer__col-*
   en de <nav> lossen zichzelf op via display:contents) zodat de volgorde
   nieuwsbrief → producten/over ons/contact → volg ons → logo blijft
   kloppen. Op desktop (zie media-query) worden diezelfde twee kolom-divs
   weer "echte" dozen naast elkaar. */
.site-footer__dark-content { position: relative; z-index: 1; display: flex; flex-direction: column; }
.site-footer__col-links, .site-footer__col-newsletter { display: contents; }
.site-footer__newsletter { order: 1; }
.site-footer__links { display: contents; }
.site-footer__links > a:nth-of-type(1) { order: 2; }
.site-footer__links > a:nth-of-type(2) { order: 3; }
.site-footer__links > a:nth-of-type(3) { order: 4; }
.foot-row { order: 5; }
.site-footer__brand { order: 6; }

.site-footer__brand {
  text-align: center; padding: 50px 20px;
  color: var(--color-cream);
}
.site-footer__brand svg, .site-footer__brand img { width: 116px; height: auto; margin: 0 auto var(--space-3); color: var(--color-cream); }
.site-footer__tag { font-size: 16px; }
.site-footer__tag strong { font-weight: var(--weight-semibold); font-style: italic; }

.site-footer__links { border-top: 0; }
.site-footer__links > a, .foot-row {
  display: flex; align-items: center; gap: var(--space-3); height: 55px;
  padding-inline: 20px;
  border-bottom: 1px solid var(--ummu-stone-400);
  text-decoration: none; font-size: 15px; color: var(--color-cream);
}
.site-footer__social { display: inline-flex; gap: 5px; align-items: center; }
.site-footer__social a { display: inline-flex; }
.site-footer__social img { width: 25px; height: 25px; }
.site-footer__legal {
  text-align: center; padding: var(--space-6) 20px;
  color: var(--ummu-stone-400); font-size: 12px; white-space: nowrap;
  background: var(--color-cream); position: relative; z-index: 1;
}
.site-footer__legal a { color: var(--ummu-stone-400); text-decoration: none; }

/* =====================================================================
   HOME — hero + dark features + thought + reviews
   ===================================================================== */
.home-hero img { width: 100%; height: auto; }

.features-dark {
  background: var(--color-forest); color: var(--color-cream);
  padding-block: clamp(var(--space-12), 9vw, var(--space-24));
}
/* Mobiel: alle directe kinderen (titel, subtitel, feature-lijst, knop) op
   een uniform 25px-ritme i.p.v. losse margins per element (desktop blijft
   de bestaande display:block + eigen margins gebruiken, zie media-query). */
.features-dark__grid { display: flex; flex-direction: column; gap: 10px; padding-inline: 20px; }
.features-dark__title { color: var(--color-mint); font-size: var(--text-2xl); }
.features-dark__subtitle { color: var(--color-mint); font-size: var(--text-2xl); font-weight: var(--weight-light);
  font-family: var(--font-display); line-height: 1.25; }
.feature-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); min-width: 0; }
.feature { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); min-width: 0; align-items: start; }
.feature .icon { color: var(--color-mint); }
/* Basis (o.a. PDP "Voordelen"): 15px bold, uit Figma. Op de homepage
   (donkergroen blok) is dit expliciet 20px — zie override hieronder. */
/* line-height:1.05 (i.p.v. de normale 1.45 body-leading) zodat de bold
   titel-regel niet met "lucht" erboven rendert — anders lijkt de tekst
   lager te staan dan het icoon links ervan, terwijl ze grid-technisch
   al top-aligned zijn (align-items:start hierboven). */
.feature__title { grid-column: 2; color: var(--color-mint); font-weight: var(--weight-semibold); font-size: var(--text-base); line-height: var(--leading-tight); }
.feature__text  { grid-column: 2; color: var(--color-mint); font-size: var(--text-base); }
.features-dark .feature__title { font-size: var(--text-xl); }
.features-dark .btn { width: 100%; margin-top: 15px; }

.lifestyle-img video { width: 100%; height: 350px; object-fit: cover; display: block; }

.thought { background: var(--color-cream); }
.thought .container--narrow { padding-inline: 20px; }
.thought h2 { font-size: var(--text-3xl); margin-bottom: var(--space-6); }
.thought p { margin-bottom: var(--space-4); max-width: 62ch; font-size: var(--text-base); }
.thought strong { font-weight: var(--weight-semibold); }

.reviews { background: #fff; padding-top: 40px; padding-bottom: 40px; }
.reviews .container { padding-inline: 20px; }
.reviews h2 { text-align: center; font-size: var(--text-3xl); margin-bottom: var(--space-8); }
.reviews__head h2 { margin-bottom: var(--space-8); }
.reviews__nav { display: none; } /* alleen op desktop: op mobiel scrollt de track met de vinger */
.reviews__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  border: 1px solid var(--ummu-stone-400); background: #fff; color: var(--color-forest);
  cursor: pointer;
}
.reviews__arrow:hover { background: var(--color-cream); border-color: transparent; }
.reviews__arrow .icon { transform: rotate(90deg); width: 0.9em; height: 0.9em; }
.reviews__arrow[data-reviews-next] .icon { transform: rotate(-90deg); }
.reviews__viewport { position: relative; }
.reviews__track {
  display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 21px; scrollbar-width: thin;
}
.reviews__track::-webkit-scrollbar { height: 6px; }
.reviews__track::-webkit-scrollbar-track { background: transparent; }
.reviews__track::-webkit-scrollbar-thumb { border-radius: var(--radius-full); background: var(--ummu-stone-400); }
.review-card {
  scroll-snap-align: start; flex: 0 0 82%; max-width: 360px; position: relative;
  background: var(--color-cream); border: 0;
  box-shadow: 0 4px 2px rgba(0, 0, 0, .15);
  border-radius: var(--radius-xl); padding: 22px; color: var(--ummu-mustard);
}
/* Fade rechts, zodat zichtbaar is dat de rij wordt afgekapt (mobiel én desktop). */
.reviews__viewport::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 21px; width: 60px;
  background: linear-gradient(to right, transparent, #fff); pointer-events: none;
}
.review-card__stars { display: inline-flex; gap: 2px; margin-bottom: var(--space-2); }
.review-card__stars img { width: 18px; height: 18px; }
.review-card__meta { font-size: var(--text-sm); color: var(--ummu-mustard); margin-bottom: var(--space-2); }

/* =====================================================================
   OVER ONS — prose + missie/visie blobs
   ===================================================================== */
.prose h1 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.prose .lead-label { font-weight: var(--weight-semibold); margin-bottom: var(--space-4); display: block; }
.prose h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.prose p { margin-bottom: var(--space-4); max-width: 64ch; }
/* Juridische tekst (privacybeleid): in Figma één doorlopend tekstblok over
   de volle 1120px-breedte, zonder aparte kopstijl per paragraaf. */
.prose--legal { background: var(--color-cream); padding: 40px 0; }
.prose--legal p { max-width: none; }
.prose--legal ul { margin: 0 0 var(--space-4); padding-left: 22px; }
.prose--legal li { margin-bottom: 2px; }

.blob {
  color: #fff; padding: clamp(var(--space-8), 7vw, var(--space-16));
  border-radius: var(--radius-2xl); margin-top: var(--space-12);
  background: var(--color-rust);
}
.blob h2 { color: #fff; font-size: var(--text-xl); margin-bottom: var(--space-3); }
.blob p { max-width: 52ch; }
.blob--mission { border-top-left-radius: var(--radius-lg); }
.blob--vision  { margin-left: clamp(0px, 8vw, 120px); }

@media (max-width: 767px) {
  /* Missie/Visie: volledig bleedende terracotta pillen (rechterkant een
     ronde pil-kap, linkerkant vlak tot de schermrand) i.p.v. de losse
     rounded-card look — uit het echte mobiele Figma-frame (node 763:3715 /
     763:3716), elk exact 360px = de volledige mobiele viewportbreedte,
     met 22px ertussen. De asymmetrische padding (20/50 vs 50/20) houdt de
     tekst weg bij de ronde kap. */
  .blob {
    background: var(--color-rust); border-radius: 0 180px 180px 0;
    margin-left: calc(-1 * var(--page-pad)); width: calc(100% + 2 * var(--page-pad));
    padding: 64px 50px 64px 20px;
  }
  .blob--vision {
    margin-left: calc(-1 * var(--page-pad)); margin-top: 22px;
    padding: 64px 20px 64px 50px;
    /* Gespiegeld t.o.v. Missie: hier is de ronde pil-kap links, niet rechts. */
    border-radius: 180px 0 0 180px;
  }
  .blob p { max-width: none; }

  /* Missie/Visie staan in de HTML naast de introtekst (voor desktop, waar
     ze als kolom ernaast horen), maar op mobiel moeten ze helemaal onderaan
     de pagina staan, ná "Low-tech/Humble high-end" — .about-top__row wordt
     dus "onzichtbaar" gemaakt (display:contents) zodat de introtekst en de
     blobs allebei rechtstreekse flex-items van .container worden, samen met
     .about-bottom, en herordenbaar zijn via order. */
  .about-top .container { display: flex; flex-direction: column; }
  .about-top__row { display: contents; }
  .about-top__row .prose { order: 1; }
  .about-bottom { order: 2; }
  .about-top__blobs { order: 3; margin-top: 0; }
}

.about-bottom { margin-top: 0; }
/* "Low-tech, high-impact." / "Humble high-end.": in Figma géén losse H2-stijl
   maar gewoon 15px bold, zoals de rest van de lopende tekst. */
.about-bottom h2 { font-size: var(--text-base); font-weight: var(--weight-bold); margin: var(--space-8) 0 var(--space-3); }

/* =====================================================================
   PDP — gallery, info, specs, customize grid
   ===================================================================== */
.breadcrumb { display: inline-flex; align-items: center; gap: var(--space-2);
  padding-block: var(--space-4); color: var(--color-muted); text-decoration: none; font-size: var(--text-sm); }

.gallery__main { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--ummu-sand-200); aspect-ratio: 4 / 3; }
/* Meerdere afbeeldingen liggen op elkaar gestapeld; site.js toont er telkens
   maar één (via data-gallery-img/-dot), zodat er geen "flits" van alle
   foto's onder elkaar ontstaat voordat JS geladen is. */
.gallery__main img[data-gallery-img] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.gallery__main img[data-gallery-img]:first-of-type { display: block; }
@media (max-width: 767px) {
  /* Mobiel: afbeelding loopt vol-bleed over de paginabreedte (geen ronde
     hoeken meer), i.p.v. binnen de container-padding te blijven. */
  .pdp__media .gallery__main { margin-inline: calc(-1 * var(--page-pad)); border-radius: 0; aspect-ratio: 6 / 5; }
  /* Geen witruimte tussen kruimelpad en productfoto. */
  .pdp-hero { padding-top: 0; }
  /* Kleurlabel + swatches op één rij (label links, bolletjes rechts) i.p.v.
     onder elkaar — uit het echte mobiele Figma-frame (node 508:1395). */
  .pdp__colorlabel {
    margin-top: 0; display: flex; align-items: center; justify-content: space-between;
  }
  .swatches { margin-top: 0; gap: 15px; }
}
@media (min-width: 768px) {
  /* Geen witruimte tussen kruimelpad en header image/infoblok, en de ruimte
     eronder (naar "Productomschrijving" toe) mag precies 40px zijn i.p.v.
     de generieke .section-ademruimte (clamp 48-96px). */
  .pdp-hero { padding-top: 0; padding-bottom: 40px; }
}
.gallery__wish {
  position: absolute; top: 20px; right: 20px; z-index: var(--z-raised);
  width: 48px; height: 48px; border-radius: var(--radius-full); border: 0;
  background: #fff; color: var(--color-forest); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
}
/* Mobiel: puntjes liggen ovér de afbeelding heen (niet er los onder), met
   een donkere, doorschijnende pil erachter — witte bolletjes, de actieve
   groter, zoals in het echte Figma-slider-component. Desktop hergebruikt
   dezelfde stijl (i.p.v. een losse rij onder de afbeelding). */
.gallery__dots {
  position: absolute; left: 0; right: 0; bottom: var(--space-3); z-index: var(--z-raised);
  display: flex; gap: 13px; align-items: center; justify-content: center;
  width: fit-content; margin-inline: auto; padding: 10px 10px;
  border-radius: var(--radius-full); background: rgba(37, 44, 38, .45);
}
.gallery__dots span {
  width: 6.2px; height: 6.2px; border-radius: 50%; background: #fff; opacity: .5;
  transition: width var(--motion-fast) var(--ease-out), height var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
/* Let op: [aria-current] zónder waarde matcht ELK element dat het attribuut
   heeft (dus ook aria-current="false") — moet dus expliciet ="true" zijn,
   anders worden alle bolletjes (niet alleen de actieve) even groot. */
.gallery__dots span[aria-current="true"] { opacity: 1; width: 8.75px; height: 8.75px; box-shadow: 0 0 0 1.25px #fff; }
/* Mobiele PDP: rij kleine thumbnails ónder de hero-afbeelding — klik
   springt naar die foto in de galerij (zelfde data-gallery-img-mechanisme
   als de dots erop). Uit het echte Figma mobile-frame (node 558:2728).
   Alleen mobiel; desktop heeft de losse pijltjes + dots op de foto zelf.
   Welke foto nu getoond wordt: een streepje ónder die ene thumbnail (10px
   eronder, zelfde breedte als de thumbnail zelf — niet breder — kleur/vorm
   uit Rectangle 34 / node 478:1924), géén rand om de thumbnail zelf. */
/* Rechts bewust GEEN padding: de rij loopt door tot de schermrand, zodat de
   laatste (7e) thumbnail — als je nog niet gescrolld hebt — gewoon
   afgesneden wordt door de viewport zelf, net als in het Figma-mockup
   (i.p.v. netjes te stoppen bij de normale page-padding). Links blijft wél
   uitgelijnd met de rest van de pagina-inhoud. */
.gallery__thumbs-wrap { position: relative; margin-top: 15px; width: calc(100% + var(--page-pad)); }
.gallery__thumbs {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* overflow-x:auto dwingt overflow-y ook impliciet naar 'auto' (CSS-spec),
     dus zonder deze padding wordt het actief-streepje (dat via top:100% +
     margin-top ónder de 45px-hoge thumbnail-knoppen uitsteekt) afgesneden
     i.p.v. gewoon zichtbaar te blijven. */
  padding-bottom: 12px;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb {
  flex: 0 0 50px; width: 50px; height: 45px; padding: 5px;
  border: 0; border-radius: 4px; background: var(--color-cream); cursor: pointer;
  position: relative;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery__thumb::after {
  content: ""; position: absolute; left: 0; width: 50px; top: 100%; margin-top: 10px;
  height: 2px; border-radius: 200px; background: var(--border-strong); opacity: 0;
}
.gallery__thumb[aria-current="true"]::after { opacity: 1; }
@media (min-width: 768px) {
  .gallery__thumbs-wrap { display: none; }
}
/* Pijltjes links/rechts op de galerij-afbeelding: alleen op desktop — op
   mobiel bevestigt de echte Figma-data géén pijl-elementen (daar is het
   swipen + de puntjes, net als bij de homepage-hero). */
.gallery__arrow { display: none; }
@media (min-width: 768px) {
  .gallery__arrow {
    display: inline-flex; position: absolute; top: 50%; transform: translateY(-50%); z-index: var(--z-raised);
    width: 44px; height: 44px; border-radius: var(--radius-full); border: 0;
    background: var(--color-cream); color: var(--color-forest);
    align-items: center; justify-content: center; cursor: pointer;
  }
  .gallery__arrow[data-gallery-prev] { left: 22px; }
  .gallery__arrow[data-gallery-next] { right: 22px; }
  .gallery__arrow .icon--chevron { transform: rotate(90deg); }
  .gallery__arrow[data-gallery-next] .icon--chevron { transform: rotate(-90deg); }
  /* Aan het begin/einde van de reeks is er geen vorige/volgende foto —
     het pijltje toont dat door te vervagen (20% opacity), i.p.v. te
     verdwijnen. site.js zet [disabled] op basis van de huidige positie. */
  .gallery__arrow[disabled] { opacity: .2; cursor: default; }
}
/* Los van het hartje op de afbeelding: op desktop staat er nóg een
   wishlist-knop naast de titel, bovenaan uitgelijnd (alleen desktop). */
.pdp__wish { display: none; }
@media (min-width: 768px) {
  .pdp__wish {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 0; right: 0; width: 48px; height: 48px;
    border-radius: var(--radius-full); border: 0; background: #fff; color: var(--color-forest);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .25); cursor: pointer;
  }
}
.pdp__title { font-size: var(--text-3xl); margin-top: var(--space-5); }
.pdp__subtitle { color: var(--color-muted); margin-top: var(--space-1); }
.pdp__price { font-size: var(--text-2xl); font-weight: var(--weight-light); margin-top: var(--space-3); }
.pdp__colorlabel { margin-top: 0; }
.pdp__colorlabel strong { font-weight: var(--weight-semibold); }
/* min-height:28px = de grootte van het actieve (grotere) bolletje, zodat de
   rij die ruimte altijd al reserveert — anders verandert de rijhoogte zelf
   mee bij het in-/uitzoomen van een swatch en schuift alles eronder tijdelijk
   mee (layout shift), wat niet de bedoeling is. */
.swatches { display: flex; align-items: center; gap: 10px; margin-top: var(--space-3); min-height: 45px; }
/* transform:scale() i.p.v. width/height animeren: die laatste groeien altijd
   vanuit de linker-/bovenrand van de eigen box (het vaste punt bij een
   box-model-wijziging), niet vanuit het midden — in een flex-rij viel dat op
   als "de een vanuit links, de ander vanuit rechts" doordat ernaast gelegen
   swatches mee opschoven. scale() verandert niets aan de layout-maat, dus
   vergroot altijd symmetrisch rond het midden (transform-origin default) en
   laat buren met rust. 400ms i.p.v. --motion-base (250ms): iets rustiger. */
.swatch {
  width: 30px; height: 30px; border-radius: var(--radius-full); border: 0; cursor: pointer;
  transition: transform 200ms var(--ease-in-out);
}
.swatch[aria-pressed="true"] { transform: scale(1.3); }
.pdp__cta { margin-top: var(--space-6); }
/* Kleur (--border-strong, #B6B0A0) exact uit het bijgewerkte Figma-frame
   (node 902:2255, "Zo werkt het:"-uitleg onder de pre-order-knop) — lichter
   dan --color-muted, dat hier eerder voor de oude "Verwachte leverdatum"
   -tekst werd gebruikt. */
.pdp__delivery { text-align: center; color: var(--border-strong); font-size: var(--text-sm); margin-top: var(--space-3); }
.pdp__delivery strong { font-weight: var(--weight-bold); }

/* gap:10px is de echte Figma-waarde (zowel mobiel als desktop) — niet
   var(--space-5) (20px), wat hier bovendien tot voor kort een niet-bestaand
   token was en dus stil terugviel op 0 (geen ruimte tussen de 3 features). */
.info-card { background: var(--bg-light-green); border-radius: var(--radius-xl);
  padding: clamp(var(--space-5), 5vw, var(--space-8)); margin-top: 40px; display: grid; gap: 10px; }
.info-card .feature .icon, .info-card .feature__title { color: var(--color-forest); }
.info-card .feature__text { color: var(--color-text); opacity: 1; }
@media (max-width: 767px) {
  /* Mobiel: geen "Voordelen"-titel, wél een off-white "tab"-achtergrond die
     links tot de schermrand bleedt met een volledig afgeronde rechterkant
     — i.p.v. de gewone titel + lichtgroen kaart. */
  .pdp__section--voordelen h2 { display: none; }
  /* Padding exact uit het echte mobiele Figma-frame (node 759:3713, 360px
     breed) — pl:17px is bewust klein t.o.v. de rest van de pagina, want dit
     blok bleedt zelf al tot de schermrand (margin-left hieronder). */
  .info-card {
    background: var(--color-cream); border-radius: 0 180px 180px 0;
    margin-left: calc(-1 * var(--page-pad)); width: calc(100% + 2 * var(--page-pad));
    padding: 47px 32px 47px 17px; gap: 24px;
  }
  /* Kleur uit hetzelfde frame: "mid green" (#425E3B), niet het donkerdere
     --color-forest dat desktop gebruikt. Lettergrootte (15px) is al de
     algemene --text-base, dus geen aparte mobiele override nodig — titel
     is wél bold (niet semibold), zoals in het bijgewerkte Figma-frame. */
  .info-card .feature .icon,
  .info-card .feature__title,
  .info-card .feature__text { color: var(--ummu-mid-green); }
  .info-card .feature__title { font-weight: var(--weight-bold); }
  /* Tekstkolom bewust smaller houden dan de beschikbare ruimte (max-width
     280px, uit hetzelfde Figma-frame) — de rechterkant van dit blok is
     afgerond, dus tekst die de volle breedte gebruikt loopt op de laatste
     regel(s) net buiten de off-white achtergrond. */
  .info-card .feature__title,
  .info-card .feature__text { max-width: 280px; }
}

.pdp__section h2 { font-size: var(--text-xl); margin: var(--space-12) 0 var(--space-4); }
.spec-list { display: grid; gap: 5px; }
.spec {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-cream); border: 0;
  border-radius: 4px; padding: var(--space-3) var(--space-4);
}
.spec .icon { color: var(--color-forest); }

/* "How to use" — stappenplan + GIF, uit het echte Figma-frame (node
   867:3880 desktop / 867:2296 mobiel — bijgewerkt: nu terracotta i.p.v.
   donkergroen, met een halfronde (200px) kant. Mobiel: schermbreed (buiten
   de .container-padding om), tekstblok boven met ronde rechterkant, 20px
   gap, dan de GIF eronder (vierkant, vaste 266px hoogte). Desktop: binnen
   de container, naast elkaar, tekstkolom vast 548px met ronde linkerkant,
   geen gap, afbeelding vierkant. */
.howto.section { padding-block: 20px; }
/* Zeep-refill PDP: description-blok krijgt een kleinere, vaste padding i.p.v.
   de standaard .section-ademruimte, en de ruimte tussen de laatste
   howto-afbeelding en de footer erna mag maar 20px zijn i.p.v. de
   standaard --space-12 die .site-footer normaal boven zich krijgt. */
.container--description-tight { padding-inline: 20px; }
.page-zeep-refill .site-footer { margin-top: 0; }
.howto__inner {
  display: flex; flex-direction: column; gap: 20px;
  margin-left: calc(-1 * var(--page-pad)); width: calc(100% + 2 * var(--page-pad));
}
.howto__text {
  background: var(--color-rust); color: var(--color-cream);
  display: flex; align-items: center; justify-content: flex-start;
  padding: 40px 20px; border-radius: 0 200px 200px 0;
  /* justify-content:flex-start (i.p.v. center): op mobiel is dit blok
     schermbreed (edge-to-edge), en het tekstblok zelf heeft een vaste
     max-width van 305px — gecentreerd zou de linker padding breder maken
     dan de bedoelde 20px zodra het scherm breder is dan de Figma-mobile-
     canvas (360px). Zo blijft de linker inzet altijd exact de padding. */
}
.howto__text-inner { width: 100%; max-width: 305px; }
.howto__text h2 { color: #fff; font-size: var(--text-xl); margin-bottom: var(--space-4); }
.howto__steps { display: flex; flex-direction: column; gap: var(--space-4); }
.howto__step { display: flex; gap: var(--space-1); align-items: baseline; }
.howto__step-num {
  flex: 0 0 60px; font-weight: var(--weight-bold); font-size: var(--text-lg);
}
.howto__step-desc { font-weight: var(--weight-regular); font-size: var(--text-base); line-height: 23.3px; }
.howto__media { height: 266px; }
.howto__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) {
  .howto.section { padding-block: 60px; }
  .howto__inner { flex-direction: row; gap: 0; margin-left: 0; width: 100%; }
  .howto__text { flex: 0 0 548px; padding: 40px; border-radius: 200px 0 0 200px; justify-content: center; }
  .howto__media { height: auto; flex: 1 1 auto; }
}

/* Off-white tagline-balk tussen "How to use" en "Customize it!" (node
   870:3805) — ontbrak volledig, alleen desktop toevoegen (mobiel-uiterlijk
   blijft dus exact hetzelfde, niets wijzigt daar). */
.soap-tagline { display: none; }
@media (min-width: 768px) {
  .soap-tagline {
    display: flex; height: 200px; align-items: center; justify-content: center;
    background: var(--color-cream);
  }
  .soap-tagline p { font-size: var(--text-3xl); color: var(--color-forest); text-align: center; }
  .soap-tagline em { font-style: italic; font-weight: var(--weight-regular); }
  .soap-tagline strong { font-weight: var(--weight-bold); }
}

/* "Customize it!" (node 867:3884 desktop / 902:2336 mobiel) — de hele
   zeep-collectie is nog niet leverbaar, dus dit zijn 6 identieke "Coming
   soon"-plekhouders (geen eigen naam/geur/wishlist meer per kaart), met een
   vaag UMMU-logo als decoratie i.p.v. een productfoto. Kaart is zelfde maat
   op mobiel en desktop (160x300), alleen de grid-indeling (2 vs 6 kolommen)
   verschilt. */
.customize-dark { background: var(--color-forest); color: var(--color-cream); text-align: left; }
.customize-dark h2 { color: var(--color-cream); font-size: var(--text-2xl); }
.customize-dark__intro { margin: var(--space-3) 0 var(--space-8); max-width: 60ch; }
.customize-dark__intro p { margin: 0; }
.refill-grid { display: grid; grid-template-columns: repeat(2, 160px); justify-content: center; gap: 15px; }
.refill-card {
  background: var(--color-cream); color: var(--color-forest); border-radius: 4px;
  overflow: hidden; position: relative; display: flex; flex-direction: column;
  width: 160px; height: 300px; box-shadow: 0 4px 2px rgba(0, 0, 0, .25);
}
.refill-card__mark { flex: 0 0 124px; display: flex; align-items: center; padding-left: 20px; opacity: .1; }
.refill-card__mark svg { width: 120px; height: auto; }
.refill-card__body { padding: 0 10px 16px; }
.refill-card__name { font-weight: var(--weight-bold); font-family: var(--font-display); font-size: var(--text-base); margin: 0; }
.refill-card__desc { font-size: var(--text-base); margin: 0; }

/* =====================================================================
   CONTACT — terracotta formulier-blob
   ===================================================================== */
.contact-hero { padding-top: var(--space-6); }
.contact-blob {
  background: var(--color-rust); color: #fff;
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-8), 7vw, var(--space-16));
  margin-top: var(--space-6);
}
@media (max-width: 767px) {
  /* Terra-blok mag op mobiel direct tegen het kruimelpad aan zitten, zonder
     ruimte erboven of eronder (i.p.v. de losse rounded-card-marges van
     desktop) — dus zowel de sectie-padding als de eigen margin-top op 0. */
  .contact-hero { padding-top: 0; padding-bottom: 0; }
  .contact-blob { margin-top: 0; }
  /* .site-footer's standaard margin-top:var(--space-12) (site-breed) zou
     hier alsnog een gat onder het terra-blok veroorzaken — alleen op deze
     pagina (page-contact) op 0 zetten. */
  .page-contact .site-footer { margin-top: 0; }
  /* Mobiel: vol-bleedende terracotta pil (rechterkant afgerond, linkerkant
     vlak tot de schermrand) i.p.v. de generieke rounded-card — uit het
     echte mobiele Figma-frame (node 440:492, 360px = volledige viewport). */
  .contact-blob {
    border-radius: 0 166px 166px 0;
    margin-left: calc(-1 * var(--page-pad)); width: calc(100% + 2 * var(--page-pad));
  }
}
.contact-blob h1 { color: #fff; font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.contact-blob__intro { margin-bottom: var(--space-6); }
.contact-blob__privacy { font-size: var(--text-sm); margin-top: var(--space-5); }
.contact-blob__privacy a { color: inherit; text-decoration: underline; }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: var(--text-base); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4);
  font: inherit; font-size: var(--text-base); color: var(--color-text);
  background: #fff; border: 1px solid var(--border-strong); border-radius: 4px;
}
.field textarea { min-height: 120px; resize: vertical; }
/* Placeholder-tekst krijgt dezelfde kleur als de border zelf (var(--border,
   #b6b0a0) in Figma) i.p.v. --color-muted — dat is een ander, donkerder grijs. */
.field input::placeholder, .field textarea::placeholder { color: var(--border-strong); }
.field select { appearance: none; background-image: url("../../assets/icons/dropdown.svg"); background-repeat: no-repeat; background-position: right var(--space-4) center; background-size: 14px; }
.field select:invalid { color: var(--color-muted); }
.contact-blob .btn { margin-top: var(--space-2); }
.contact-channels { margin-top: 40px; display: grid; gap: var(--space-4); }
.contact-channels__title { margin-bottom: var(--space-1); }
.contact-channel { display: inline-flex; align-items: center; gap: var(--space-3); color: #fff; text-decoration: none; }
.contact-channel .icon { color: #fff; }

/* =====================================================================
   COMING SOON — verticaal lint op galerij/hero-afbeeldingen
   ===================================================================== */
.coming-soon {
  position: absolute; top: 0; left: 20px; z-index: var(--z-raised);
  width: 32px; height: 125px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-mint); color: var(--color-forest);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base);
  padding: 0;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
@media (min-width: 768px) {
  .coming-soon {
    writing-mode: horizontal-tb; transform: none;
    top: 35px; left: 0; width: auto; height: auto;
    padding: var(--space-2) var(--space-4);
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
  }
}
/* PDP-desktop: het label hangt hier niet aan de linkerkant als verticaal
   lint, maar als horizontale pil rechtsboven, vlak tegen de rand van de
   galerij-afbeelding — rechts vlak/vierkant, links afgerond. Op mobiel
   gebruikt de PDP exact hetzelfde verticale lint als de homepage (zelfde
   32x125px, links) — dus geen override daar. */
@media (min-width: 768px) {
  .coming-soon--pdp {
    writing-mode: horizontal-tb; transform: none;
    top: var(--space-4); left: auto; right: 0; width: auto; height: auto;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full) 0 0 var(--radius-full);
  }
  /* Het hartje op de foto zelf is een mobiel-only patroon (net als bij de
     homepage-hero); op desktop staat de wishlist-knop alleen naast de titel. */
  .pdp__media .gallery__wish { display: none; }
}

/* =====================================================================
   PRODUCTLIJST (PLP) — grid, quick filters, productkaart, wishlist
   ===================================================================== */
.plp-intro { padding-block: var(--space-6) var(--space-4); }
.plp-intro h1 { font-size: var(--text-3xl); }
.plp-intro__count { color: var(--color-muted); margin-top: var(--space-1); }
.plp-intro__copy { margin-top: var(--space-3); color: var(--color-text); }

.quick-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-6); }
.quick-filter {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 7px 13px; border-radius: var(--radius-full); cursor: pointer;
  font-size: var(--text-base); color: var(--color-text);
  background: #fff; border: 1px solid var(--ummu-stone-400);
}
.quick-filter[aria-pressed="true"] { background: var(--ummu-cream-100); border-color: var(--ummu-cream-100); }
.quick-filter .icon--cross { width: 10px; height: 10px; display: none; }
.quick-filter[aria-pressed="true"] .icon--cross { display: inline-block; }

.product-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
  padding-bottom: var(--space-16);
}
.product-card {
  position: relative; background: #fff; border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: 0 4px 2px rgba(0,0,0,.12); text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform var(--motion-slow) var(--ease-out);
}
.product-card__media { position: relative; aspect-ratio: 150 / 130; background: var(--ummu-cream-100); }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-4); }
.product-card__wish {
  position: absolute; top: 6px; right: 5px; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-forest); box-shadow: var(--shadow-sm);
}
.product-card__wish[aria-pressed="true"] { color: var(--color-rust); }
.product-card__wish[aria-pressed="true"] .icon--heart { -webkit-mask-image: url("../../assets/icons/heart_filled.svg"); mask-image: url("../../assets/icons/heart_filled.svg"); }
.product-card__body { padding: var(--space-2) var(--space-3) var(--space-3); }
.product-card__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base); }
.product-card__variant { font-size: var(--text-base); margin-top: 2px; }
.product-card__variant span:last-child { font-size: var(--text-sm); }
.product-card__price { font-size: var(--text-2xl); font-weight: var(--weight-light); margin-top: var(--space-1); }
/* "Coming soon"-kaarten (zeep-producten: nog geen echte productfoto's) —
   uit het echte Figma-frame (node 431:536 / 506:1394 / 555:1547): geen
   wishlist-hartje, een vaag UMMU-logo i.p.v. een productfoto. */
.product-card--soon .product-card__media img { opacity: .1; }

/* =====================================================================
   PDP — "geef een seintje" modal / bottom sheet
   ===================================================================== */
.pdp-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; }
.pdp-modal[data-open="true"] { display: block; }
.pdp-modal__scrim { position: absolute; inset: 0; background: rgba(37,44,38,.55); border: 0; cursor: pointer; }
.pdp-modal__sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 480px; margin-inline: auto;
  background: var(--color-cream); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 40px 20px; max-height: 88vh; overflow-y: auto;
}
.pdp-modal__handle { width: 44px; height: 4px; border-radius: var(--radius-full); background: var(--ummu-stone-400); margin: 0 auto var(--space-3); }
.pdp-modal__close {
  position: absolute; top: var(--space-4); right: var(--space-5); width: 32px; height: 32px;
  border: 0; background: none; cursor: pointer; color: var(--color-forest); display: inline-flex; align-items: center; justify-content: center;
}
.pdp-modal h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.pdp-modal p { margin-bottom: var(--space-4); }
.pdp-modal .field { margin-bottom: var(--space-4); }
.pdp-modal .btn { margin-top: var(--space-2); }
.pdp-modal__success { display: none; }
.pdp-modal[data-state="success"] .pdp-modal__form { display: none; }
.pdp-modal[data-state="success"] .pdp-modal__success { display: block; }
@media (min-width: 768px) {
  .pdp-modal__sheet { top: 50%; bottom: auto; transform: translateY(-50%); border-radius: var(--radius-xl); padding: 40px; }
  .pdp-modal__handle { display: none; }
}

/* =====================================================================
   PDP — "toegevoegd aan winkelwagen"-popup (node 1112:6018/6386). Anders
   dan .pdp-modal hierboven: altijd gecentreerd op het scherm (geen bottom-
   sheet, ook niet op mobiel) en een 60%-zwarte overlay (bewust zwart i.p.v.
   het donkergroene .pdp-modal__scrim — expliciet zo gevraagd).
   ===================================================================== */
.cart-popup { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-5); }
.cart-popup[data-open="true"] { display: flex; }
.cart-popup__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); border: 0; cursor: pointer; }
.cart-popup__box {
  position: relative; z-index: 1; background: #fff; border-radius: 4px; padding: var(--space-4);
  width: 100%; max-width: 332px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1);
}
.cart-popup__close { background: none; border: 0; cursor: pointer; color: var(--color-forest); padding: 4px; }
.cart-popup__close .icon { width: 10px; height: 10px; }
.cart-popup__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 100%; padding: 0 var(--space-6) var(--space-5); }
.cart-popup__message {
  font-weight: var(--weight-semibold); font-size: var(--text-base); color: #34C759;
  text-align: center; letter-spacing: 0.3px;
}
.cart-popup__continue {
  background: none; border: 0; cursor: pointer; font-weight: var(--weight-semibold);
  font-size: var(--text-base); color: var(--color-forest); text-decoration: underline; letter-spacing: 0.3px;
}

/* =====================================================================
   WINKELWAGEN — uit het echte Figma-frame ("Winkelwagen 1/2 product(en)",
   node 1104:2778 / 1074:4756). Één regel per product: foto, naam/variant/
   prijs, wishlist-hartje rechtsboven, aantal-stepper rechtsonder.
   ===================================================================== */
.cart-item { display: flex; gap: var(--space-4); padding-block: var(--space-5); }
.cart-item__media {
  flex: 0 0 90px; width: 90px; height: 107px; background: var(--color-cream);
  border-radius: 4px; overflow: hidden; display: block;
}
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-2); }
/* Titel/variant/prijs losgemaakt van de qty-stepper-kolom (die eronder staat
   en veel smaller is dan de rij) — .cart-item__body is nu de volle-breedte
   flex-kolom, met de titel in een eigen bovenste rij die alleen door het
   wishlist-hartje (20px ertussen) wordt begrensd, niet door de stepper. Bij
   een langere naam mag de titel dus over twee regels vallen i.p.v. eerder af
   te breken op de (smallere) stepper-kolombreedte. */
.cart-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.cart-item__toprow { display: flex; align-items: flex-start; gap: 20px; }
.cart-item__info { flex: 1 1 auto; min-width: 0; }
.cart-item__name {
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base);
  display: block; color: inherit; text-decoration: none;
}
.cart-item__variant { font-size: var(--text-base); margin-top: 2px; }
.cart-item__wish { flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: var(--color-forest); padding: 0; }
/* Vast op 25px i.p.v. 1.4em (schaalde mee met de tekstgrootte, ~19px) —
   zelfde op mobiel en desktop. */
.cart-item__wish .icon { width: 25px; height: 25px; }
.cart-item__wish[aria-pressed="true"] { color: var(--color-rust); }
.cart-item__wish[aria-pressed="true"] .icon--heart { -webkit-mask-image: url("../../assets/icons/heart_filled.svg"); mask-image: url("../../assets/icons/heart_filled.svg"); }
/* Prijs (links) en het aantal-element (rechts) staan op dezelfde hoogte i.p.v.
   de stepper los onderaan de kolom — vandaar een eigen rij voor dit paar. */
.cart-item__bottomrow { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-1); }
.cart-item__price { font-size: var(--text-2xl); font-weight: var(--weight-light); }
.cart-item__qty { display: flex; align-items: center; gap: var(--space-4); }
.qty-btn {
  width: 31px; height: 31px; border-radius: 50%; border: 0; padding: 0;
  background: var(--color-cream); color: var(--border-strong); cursor: pointer;
  font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .25);
}
.qty-value {
  width: 32px; height: 31px; border: 1px solid var(--border-strong); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-base);
}
/* Off-white (--color-cream) i.p.v. sand-200: alle dividers in de winkelwagen
   (tussen producten én na het laatste product, vóór de samenvatting) zijn in
   Figma dezelfde lichte "light border"-kleur. */
.cart-divider { height: 1px; background: var(--color-cream); border-radius: var(--radius-full); }
.cart-summary { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); font-size: var(--text-base); }
.cart-summary__row { display: flex; justify-content: space-between; }
.cart-summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--text-2xl); font-weight: var(--weight-light); margin-top: var(--space-2);
}
.cart-summary__total small { font-size: 11px; }
/* Kleuren letterlijk uit Figma (geen bestaand token voor deze specifieke
   groentint/USP-vinkjes-kleur) — alleen hier gebruikt. */
.cart-usp {
  background: #ECF1E6; padding: var(--space-5); margin-top: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-3); align-items: center;
}
.cart-usp__item { display: flex; gap: var(--space-1); align-items: center; font-size: var(--text-sm); color: #34C759; }
.cart-usp__item .icon { width: 15px; height: 15px; }
.cart-usp__item strong { font-weight: var(--weight-bold); }
/* Divider tussen de USP-strook en de (afwijkende, zie hieronder) footer op
   de winkelwagen/checkout-pagina's — 10px ruimte aan beide kanten, kleur
   off-white (--color-cream), zoals in het Figma-component. */
.cart-divider--footer { height: 1px; margin-top: 10px; background: var(--color-cream); border-radius: var(--radius-full); }
/* Winkelwagen-pagina: het groene USP-blok mag altijd tot vlak boven de
   footer doorlopen, ook als de winkelwagen maar 1 artikel bevat — dus
   #main wordt een kolom die minstens het scherm vult. Een losse spacer
   (flex:1) tussen de primaire CTA en het USP-blok groeit mee om die extra
   ruimte op te vullen; de vaste --space-8 boven het USP-blok zelf blijft
   dus altijd als minimum-afstand staan, ook als de winkelwagen al langer
   is dan het scherm (dan is er simpelweg geen ruimte om te verdelen).
   Alleen op deze pagina (via de page-winkelwagen body-class), niet
   site-breed. */
.page-winkelwagen #page-content { display: flex; flex-direction: column; min-height: 100dvh; }
.page-winkelwagen #main { flex: 1 0 auto; display: flex; flex-direction: column; }
.page-winkelwagen .cart-spacer { flex: 1 0 auto; }

/* =====================================================================
   FOOTER — afwijkende, simpelere variant vanaf de winkelwagen/checkout-
   pagina's (node 1104:5146): off-white i.p.v. donkergroen, alleen het
   watermerk + "Everyday care, reinvented" + een donkergroene legal-balk
   (geen links-nav, geen socials/nieuwsbrief). ===================== */
.site-footer--checkout {
  margin-top: 10px; background: var(--color-cream); color: var(--color-forest);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 37px; padding-top: 100px; min-height: 319px; overflow: hidden; position: relative;
}
.site-footer--checkout .site-footer__watermark { margin-top: 0; }
.site-footer--checkout .site-footer__brand { order: initial; padding: 0; }
.site-footer--checkout .site-footer__brand svg { width: 70px; color: var(--color-forest); }
.site-footer--checkout .site-footer__tag { color: var(--color-forest); }
.site-footer--checkout .site-footer__legal {
  width: 100%; background: var(--color-forest); color: var(--color-mint);
  padding: var(--space-4) 20px;
}
.site-footer--checkout .site-footer__legal a { color: var(--color-mint); }
@media (min-width: 768px) {
  /* Op desktop een horizontale balk i.p.v. de gestapelde mobiele versie:
     logo+tag links (verticaal gecentreerd), de outline-afbeelding rechts.
     Grid i.p.v. flex-wrap: de legal-balk hoort een VASTE 50px te blijven
     (mag niet meeschalen), terwijl de content-rij erboven juist de volledige
     resterende hoogte vult (en meeschaalt) — uit het echte Figma-frame
     "footer, device=desktop, variant=checkout" (node 643:2442, 1440x450:
     400px content + 50px legal-balk). */
  .site-footer--checkout {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 50px;
    gap: 0; padding: 0 var(--page-pad); height: 450px; min-height: 0;
  }
  .site-footer--checkout .site-footer__brand {
    grid-column: 1; grid-row: 1; align-self: center; text-align: left; padding: 0;
  }
  .site-footer--checkout .site-footer__brand svg { width: 200px; margin: 0 0 var(--space-2); }
  .site-footer--checkout picture {
    grid-column: 2; grid-row: 1; align-self: stretch; min-height: 0;
    display: flex; justify-content: flex-end; align-items: center;
  }
  .site-footer--checkout .site-footer__watermark { width: auto; height: 100%; object-fit: contain; object-position: right center; }
  /* De footer heeft links/rechts padding voor het logo+watermerk-rij, maar
     de donkergroene legal-balk hoort juist full-bleed te zijn (randloos) —
     daarom breekt hij met een negatieve margin uit die padding. */
  .site-footer--checkout .site-footer__legal {
    grid-column: 1 / -1; grid-row: 2;
    width: calc(100% + 2 * var(--page-pad)); margin-inline: calc(-1 * var(--page-pad));
    padding-inline: var(--page-pad); height: 50px; box-sizing: border-box;
  }
}

/* =====================================================================
   CHECKOUT — "Mijn gegevens" (stap 1) + "Betaalwijze" (stap 2, node
   1079:5955 / 1104:5483). Hergebruikt .field/.cart-summary (winkelwagen)
   waar mogelijk — alleen de rij-layout en de foutmelding zijn nieuw.
   ===================================================================== */
.field-row { display: flex; gap: var(--space-4); }
.field-row .field { flex: 1 1 0; min-width: 0; }
.field--narrow { flex: 0 0 90px; }
.checkout-form__req { font-size: var(--text-sm); color: var(--color-muted); }
.checkout-form .btn { margin-top: var(--space-2); }
/* Kleur letterlijk uit Figma (node 1104:5584, geen bestaand token voor deze
   zachte terracotta-foutmelding-achtergrond) — alleen hier gebruikt. */
.checkout-payment-error {
  background: #FFBA9C; color: var(--color-rust); border-radius: 4px;
  padding: 40px 20px; text-align: center; font-size: var(--text-base);
  margin-top: var(--space-5);
}
/* Uitgeschakelde "Betalen met iDeal / Wero"-knop (node 1104:5584): 20%
   opacity op de hele wrapper i.p.v. de standaard .btn:disabled-opacity
   (.55) — die laatste dus hier uitzetten om dubbele verbleking te voorkomen. */
.checkout-payment-disabled { opacity: .2; padding: 30px 0 10px; }
.checkout-payment-disabled .btn:disabled { opacity: 1; cursor: not-allowed; }
.checkout-terms { font-size: var(--text-sm); color: var(--border-strong); margin-top: var(--space-2); }
.checkout-terms a { color: inherit; }
/* "Terug"-link onderaan elke checkout-stap (node 1127:8472) — 30px ruimte
   erboven én eronder, los van wat ervoor komt (button op stap 1, terms op
   stap 2), dus als vaste marge op dit blok zelf i.p.v. te leunen op de
   marge van de vorige sibling. */
.checkout-back { margin-block: 30px; }
.checkout-back__link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-weight: var(--weight-semibold); font-size: var(--text-base);
  color: var(--ummu-mid-green); text-decoration: underline; letter-spacing: 0.3px;
}
.checkout-back__link .icon--chevron { width: 0.9em; height: 0.9em; transform: rotate(90deg); }

/* =====================================================================
   RESPONSIVE — tablet & desktop vertaling
   ===================================================================== */
@media (min-width: 768px) {
  /* Header: wit (volle breedte), met de inhoud (logo + menu-items links,
     wishlist rechts) binnen dezelfde 1120px-grid als de paginacontent.
     .site-header__inner is de grid-breedte container; .site-header__bar en
     .site-nav worden daarbinnen "uitgepakt" (display:contents) zodat hun
     kinderen directe flex-items van .site-header__inner worden. */
  .site-header__bar, .site-nav { display: contents; }
  .site-header__inner {
    max-width: var(--content-box); margin-inline: auto; padding-inline: var(--page-pad);
    display: flex; align-items: center; gap: var(--space-8); min-height: 64px;
  }
  .site-header__menu { display: none; }
  .site-header__logo { order: 1; }
  .site-nav__desktop-only { order: 2; display: flex; align-items: center; gap: var(--space-6); }
  .site-nav__desktop-only a {
    text-decoration: none; font-size: var(--text-lg); color: var(--color-text);
    position: relative; padding: 8px 0; /* symmetrisch: houdt tekst verticaal
      gecentreerd t.o.v. het logo, ondanks de ruimte die de actieve-lijn
      (::after) hieronder nodig heeft */
  }
  .site-nav__desktop-only a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; border-radius: var(--radius-full); background: var(--color-forest);
  }
  /* Checkout (gegevens/betaalwijze): geen "Producten/Over ons/Contact" in de
     header — de gebruiker hoort in de checkout-flow te blijven i.p.v. weg te
     navigeren. Puur CSS, scoped aan de body-class van checkout.html — op elke
     andere pagina (gewoon los HTML-bestand, geen SPA) staat de nav gewoon
     weer gewoon, zonder dat daar iets voor hoeft te "resetten". */
  .page-checkout .site-nav__desktop-only { display: none; }
  .site-nav__topbar, .site-nav__primary, .site-nav__secondary { display: none; }
  .site-header__actions { order: 3; margin-left: auto; height: 25px; }
  .site-header__wish, .site-header__cart { height: 25px; }
  .site-header__wish .icon, .site-header__cart .icon { width: 25px; height: 25px; }

  /* "Producten"-dropdown (alleen desktop): opent bij hover, met een lichte
     vertraging (zodat 'm er niet al opent bij een toevallige muis-passage) —
     sluit wél direct zodra de muis weg is. */
  .nav-dropdown { position: relative; }
  .nav-dropdown__menu {
    position: absolute; top: 100%; left: 0; z-index: var(--z-raised);
    background: #fff; padding: var(--space-2); border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    display: flex; flex-direction: column; min-width: 170px;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity var(--motion-base) var(--ease-out),
                transform var(--motion-base) var(--ease-out),
                visibility 0s linear var(--motion-base);
  }
  .nav-dropdown__menu a {
    font-size: var(--text-base); text-decoration: none; color: var(--color-text);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  }
  .nav-dropdown__menu a:hover { background: var(--color-cream); }
  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown:focus-within .nav-dropdown__menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition-delay: 150ms, 150ms, 0s;
  }

  /* Hero: afbeelding en donkere kop-content exact 50/50 naast elkaar
     (uit het echte Figma desktop-frame "Homepage"). Vult op desktop de
     volledige viewport-hoogte minus de (sticky) header (65px), zodat de
     hero altijd helemaal in beeld staat totdat je scrollt. */
  /* min-height als vangnet op erg korte/lage vensters (bv. ingezoomde
     devtools) zodat de features-lijst niet in elkaar gedrukt wordt. */
  .hero-row { display: flex; align-items: stretch; height: calc(100vh - 65px); min-height: 640px; }
  .home-hero, .features-dark { flex: 1 1 50%; min-width: 0; }
  .home-hero { position: relative; overflow: hidden; }
  .home-hero img { height: 100%; object-fit: cover; }
  .features-dark { display: flex; align-items: center; padding-block: 0; }
  .features-dark__grid {
    width: 100%; max-width: none; margin: 0; padding: 30px 20px;
    display: block;
  }
  .feature-list { grid-template-columns: 1fr; gap: 25px; }
  .features-dark .btn { width: 324px; margin-top: var(--space-8); }
  .mobile-only { display: none; }
  .features-dark__subtitle { color: var(--color-mint); font-weight: var(--weight-light); margin-bottom: 20px; }
  .feature__text { color: var(--color-mint); opacity: 1; }

  /* "De gedachte": tekst links, vast beeld (360x200) rechts, 10px ertussen —
     mobiel staat de afbeelding als volle-breedte band vóór de tekst; op
     desktop draaien we 'm via order naar rechts, als vaste kolom. */
  .thought { background: #fff; }
  .reviews { padding-top: 0; } /* mobiel-only: daar staat "De gedachte" niet al met eigen 40px padding-block */
  .reviews .container { padding-inline: var(--page-pad); }
  .thought-row {
    display: flex; align-items: center; gap: 10px;
    max-width: var(--content-box); margin-inline: auto; padding: 40px;
  }
  .thought-row .thought { order: 1; flex: 1 1 auto; min-width: 0; padding-block: 40px; }
  .thought-row .thought .container--narrow { max-width: none; padding-inline: 0; margin: 0; }
  /* De tekst mag de volle blokbreedte gebruiken i.p.v. de 62ch leesbreedte-cap,
     met wat lucht rechts voor het beeld. */
  .thought-row .thought p { max-width: none; padding-right: 40px; }
  .thought-row .lifestyle-img { order: 2; flex: 0 0 450px; width: 450px; height: 300px; overflow: hidden; border-radius: var(--radius-md); }
  .thought-row .lifestyle-img video { width: 100%; height: 100%; object-fit: cover; }

  .reviews__head { display: flex; align-items: center; justify-content: space-between; }
  .reviews h2 { text-align: left; }
  .reviews__nav { display: flex; gap: var(--space-3); }
  .reviews__track {
    display: flex; overflow-x: auto; scroll-behavior: smooth; padding-bottom: var(--space-4);
    scrollbar-width: none; /* de pijltjes navigeren al; geen aparte scrollbar-"slider" nodig */
  }
  .reviews__track::-webkit-scrollbar { display: none; }
  .review-card { flex: 0 0 275px; max-width: none; }
  .reviews__viewport::after { bottom: var(--space-4); width: 80px; }

  /* Customize-it: 6 kaarten op één rij i.p.v. 2 kolommen, en de titel/intro
     gecentreerd (op mobiel links uitgelijnd, zie basisregel). */
  .customize-dark { text-align: center; }
  .refill-grid { grid-template-columns: repeat(6, 160px); justify-content: center; gap: 15px; max-width: var(--content-width); margin-inline: auto; }

  /* Over ons: intro-tekst links (640px) met twee terracotta "pil"-blobs
     rechts ernaast (uit het echte Figma desktop-frame "Over ons"), daarna
     het "Low-tech / Humble high-end"-blok als volle-breedte tekstkolom. */
  .about-top { padding-top: 30px; }
  .about-top__row { display: flex; align-items: flex-start; gap: var(--space-16); }
  .about-top__row .prose { flex: 1 1 auto; max-width: 640px; }
  .about-top__blobs { display: flex; gap: 20px; flex: 0 0 auto; margin-left: auto; }
  .about-top__blobs .blob {
    width: 200px; height: 350px; border-radius: 100px; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 20px;
  }
  .about-top__blobs .blob p { max-width: none; font-size: var(--text-base); }
  /* "Low-tech, high-impact." / "Humble high-end.": mag de volle 1120px-grid
     gebruiken i.p.v. de 64ch leesbreedte-cap die voor de generieke .prose-tekst
     geldt. */
  .about-bottom p { max-width: none; }

  /* De galerij-afbeelding loopt op desktop links vol-bleed tot de
     viewport-rand (i.p.v. binnen dezelfde 1120px-grid als de rest) — met
     een lichte tint-achtergrond achter de infokolom rechts, die op zijn
     beurt rechts doorloopt tot de rand. Kolomverdeling is 2/3 (foto) : 1/3
     (infokolom), niet 50/50. Uit het echte Figma desktop-frame. */
  .pdp__layout { position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: 84px; align-items: start; }
  /* left = exact de rechterrand van de 2fr-kolom (de foto), zodat de tint
     er zonder witruimte op aansluit. height:100% van .pdp__layout zelf
     (niet van de infokolom) zodat de tint even hoog is als de rij, d.w.z.
     even hoog als de foto — niet alleen zo hoog als de korte tekstinhoud. */
  .pdp__layout::after {
    content: ""; position: absolute; z-index: -1; top: 0; height: 100%;
    left: calc((100% - 84px) * 2 / 3); right: calc(-1 * var(--content-inset));
    background: rgba(241, 238, 228, .5);
  }
  .pdp__layout .pdp__media {
    position: sticky; top: 88px;
    margin-left: calc(-1 * var(--content-inset)); width: calc(100% + var(--content-inset));
  }
  /* Vaste 514px hoogte uit Figma (i.p.v. de 4:3 aspect-ratio die voor
     mobiel geldt) — de foto's zelf gebruiken object-fit:cover, dus dit
     crop't de foto lichtjes i.p.v. 'm te vervormen. */
  .pdp__media .gallery__main { border-radius: 0; aspect-ratio: auto; height: 514px; }
  /* Tekst in het off-white infoblok is links uitgelijnd op desktop (alleen
     mobiel centreert), uit het echte Figma desktop-frame (node 754:3710).
     Dat frame toont ook een ruime padding-top (123px) vóór de titel begint
     — het blok is even hoog als de foto, maar de inhoud staat niet
     bovenaan geplakt, ze staat lager, in balans met de hoogte van de foto. */
  /* Het hele infoblok centreert verticaal binnen de hoogte van de foto
     (514px) i.p.v. een vast padding-top-getal dat de inhoud te laag
     duwt — exact zoals het Figma desktop-frame (node 754:3710,
     justify-content:center over de volle 514px). */
  .pdp__info-col { display: flex; flex-direction: column; justify-content: center; height: 514px; text-align: left; }
  .pdp__title { margin-top: 0; }
  /* Wishlist-knop naast de titel (i.p.v. los absoluut-gepositioneerd) —
     titel-blok en knop zijn nu een horizontale rij, dus het hartje volgt
     automatisch mee omhoog/omlaag met de verticaal gecentreerde inhoud. */
  .pdp__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; width: 100%; }
  .pdp__wish { position: static; }
  /* Verticale ritme in de infokolom, exact uit de Figma-coördinaten
     (titel/subtitel/prijs/kleur/knop/leverdatum), i.p.v. de losse
     mobiel-marges die daar te ruim voor staan. */
  .pdp__subtitle { margin-top: 8px; }
  .pdp__price { margin-top: 0; }
  .pdp__colorlabel { margin-top: 14px; }
  .pdp__cta { margin-top: 14px; }
  /* Vaste 309x44px uit Figma — de vorige versie leunde op het niet-bestaande
     token --space-10, waardoor de padding wegviel en de knop veel te smal werd. */
  .pdp__cta .btn--block { width: 309px; height: 44px; display: inline-flex; padding-inline: 0; }
  .pdp__delivery { margin-top: 14px; color: var(--border-strong); font-size: var(--text-sm); text-align: left; }

  /* Onder de gallery/info-rij: drie kolommen naast elkaar (Specificaties,
     Productomschrijving, Voordelen) — uit het echte Figma desktop-frame.
     "Voordelen" (info-card) staat qua DOM vóór de andere twee (mobiele
     volgorde), dus visuele volgorde op desktop via `order`. Gap tussen de
     kolommen is in Figma ±28px, niet de ruimere 40px. 60px ruimte boven
     deze rij, los van de gallery/info-rij erboven. */
  .pdp__sections-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; margin-top: 60px; }
  .pdp__sections-row .pdp__section h2 { margin-top: 0; }
  .pdp__section--specs { order: 1; }
  .pdp__section--description { order: 2; }
  .pdp__section--voordelen { order: 3; }
  .info-card { background: none; padding: 0; margin-top: 0; }

  /* Breder op desktop: mag gewoon de volle 1120px-grid gebruiken i.p.v. de
     60ch leesbreedte-cap die voor mobiel bedoeld was. */
  .customize-dark__intro { max-width: var(--content-width); }

  /* Contact: brede terracotta "pil", formulier links, kanalen rechts met
     verticale scheidingslijn ertussen — uit het echte Figma desktop-frame
     (node 643:2902). Vaste 290px formulierkolom + brede 193px gap, als
     geheel gecentreerd binnen de pil (i.p.v. edge-to-edge uitgerekt).
     padding-block 59px i.p.v. 64px, anders wordt de pil hoger dan Figma's
     eigen 500px. De kanalen-kolom stretcht qua hoogte mee met het formulier
     (geen align-items:center op de rij zelf) zodat de verticale scheidings-
     lijn (border-left) over de volle hoogte blijft lopen; de content erin
     wordt met align-content:center verticaal gecentreerd. */
  .contact-blob { max-width: var(--content-width); margin-inline: auto; border-radius: 200px; padding: 59px 88px; }
  .contact-blob__inner { display: flex; gap: 193px; max-width: 810px; margin-inline: auto; }
  .contact-blob__form-col { flex: 0 0 290px; max-width: 290px; }
  .field textarea { min-height: 60px; }
  .contact-blob .btn { min-height: 48px; }
  .contact-channels {
    margin-top: 0; align-content: center; flex: 0 1 auto;
    padding-left: var(--space-16); border-left: 1px solid rgba(241, 238, 228, .35);
  }
  /* Verticaal ritme binnen het formulier zelf, exact uit de Figma-coördinaten
     (intro/labels/velden/knop) — de mobiele waarden (ruimer, voor
     touch-bediening) blijven ongemoeid. */
  .contact-blob__intro { margin-bottom: 8px; }
  .contact-blob .field { gap: 5px; margin-bottom: 8px; }
  .contact-blob .btn { margin-top: 22px; }

  .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

  /* PLP: intro/filters/kaarten op de echte Figma-maten — 4 vaste 260px
     kaarten (200px beeld) met 25px gap, samen exact 1115px breed. */
  .plp-intro { max-width: var(--content-width); margin-inline: auto; padding-block: var(--space-8) 30px; }
  .quick-filters { max-width: var(--content-width); margin-inline: auto; }
}

/* Productkaart-hover (alleen echte muis-hover, niet bij tikken op
   touch-devices): het hele blok vergroot licht — z-index erbij zodat het
   over de buurkaarten heen valt i.p.v. eronder te verdwijnen. De foto zelf
   wisselt naar de eerste PDP-afbeelding via site.js (data-hover-img),
   niet via CSS. */
@media (min-width: 768px) and (hover: hover) {
  /* scale(1.04) op een 270px-hoge kaart komt neer op ~280px in hover-state.
     Kleine transition-delay (alleen bij ín-hoveren, niet erúit — die staat
     niet op de :hover-regel dus valt terug op de instant base-transition)
     zodat een muis die er gewoon overheen beweegt 'm niet steeds triggert. */
  .product-card:hover { transform: scale(1.04); z-index: var(--z-raised); transition-delay: 80ms; }
}

@media (min-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(4, 260px); justify-content: center;
    gap: 25px; max-width: var(--content-width); margin-inline: auto;
  }
  .product-card__media { aspect-ratio: auto; height: 200px; background: var(--color-cream); }
  .product-card__media img { padding: 0; }
  .product-card { box-shadow: 0 4px 2px rgba(0,0,0,.15); }
}

/* =====================================================================
   FOOTER — nieuwsbrief-formulier (ook onderdeel van site-footer partial)
   ===================================================================== */
.site-footer__newsletter {
  background: var(--color-forest); color: var(--color-cream);
  padding: var(--space-8) 20px 65px; text-align: center;
}
.site-footer__newsletter h2 { color: var(--color-cream); font-size: 20px; margin-bottom: 0; }
.site-footer__newsletter p { color: var(--color-cream); opacity: .9; font-size: 15px; max-width: 32rem; margin: 0 auto; margin-bottom: 15px; }
.newsletter-form { display: flex; max-width: 28rem; margin: 0 auto; position: relative; }
.newsletter-form input[type="email"] {
  width: 100%; min-height: 44px; padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
  border: 0; border-radius: var(--radius-sm); font: inherit; font-size: 14px; color: var(--color-forest);
}
.newsletter-form input[type="email"]::placeholder { font-size: 14px; }
.newsletter-form button {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 36px;
  border: 0; background: none; cursor: pointer; color: var(--color-forest);
  display: inline-flex; align-items: center; justify-content: center;
}
.newsletter-form button .icon { transform: rotate(-90deg); }
.site-footer__links { background: var(--color-forest); }
.site-footer__links > a, .foot-row { color: var(--color-cream); }
.site-footer .site-footer__social a { color: var(--color-cream); }
.footer-col-sub { display: none; }
@media (min-width: 768px) {
  /* Desktop-footer: drie kolommen naast elkaar.
     Kolom 1: Producten (+Zeepdispensers|Zepen) / Over ons / Contact + logo.
     Kolom 2: Volg ons + iconen, daaronder de nieuwsbrief. Kolom 3: de
     outline-afbeelding, vol-bleed tegen de rechterrand.
     site-footer__col-links en site-footer__col-newsletter zijn op mobiel
     "opgelost" via display:contents (zie de basisregels hierboven) zodat
     hun inhoud daar gewoon in de oorspronkelijke volgorde onder elkaar
     staat; hier op desktop worden het weer gewone dozen, elk met hun eigen
     onafhankelijke hoogte — dat voorkomt dat een kort kolom-item evenveel
     verticale ruimte krijgt als een lang item in de andere kolom. */
  /* 400px donkergroen + 50px privacybeleid-balk = 450px totaal (uit het
     echte Figma desktop-frame "footer", 1440x450). */
  .site-footer__dark { display: flex; align-items: stretch; height: 400px; }
  .site-footer__dark-content {
    order: 1; flex: 1 1 auto; min-width: 0; display: grid;
    grid-template-columns: 1fr 1fr; column-gap: var(--space-8);
    /* Linker kolom lijnt uit met dezelfde 1120px-contentgrid als header/
       paginacontent — i.p.v. een vaste 80px die niet meebeweegt. */
    padding: 48px 0 0 var(--content-inset);
  }
  /* Tussen 768px en 1080px: geen derde (afbeelding-)kolom, alleen de twee
     tekstkolommen verdeeld over de volle breedte. Pas vanaf 1081px komt de
     rechterkolom met de outline-afbeelding erbij (zie media-query hieronder). */
  .site-footer__dark > picture { display: none; }

  .site-footer__col-links { grid-column: 1; display: block; }
  .site-footer__col-newsletter { grid-column: 2; display: block; }
  .site-footer__links { display: block; }

  /* Kolom 1 — Producten (+ subregel) / Over ons / Contact, geen lijnen.
     Gap tussen de subregel/Over ons/Contact = 10px; naar het logo = 95px. */
  .site-footer__links > a {
    display: block; height: auto; padding: 0; margin-top: 10px;
    border-bottom: 0; font-size: var(--text-xl); font-family: var(--font-display); font-weight: var(--weight-bold);
  }
  .site-footer__links > a:first-child { margin-top: 0; }
  .footer-col-sub {
    display: block; margin-top: var(--space-1); font-size: 15px; font-weight: var(--weight-regular);
    color: var(--color-cream);
  }
  .footer-col-sub a { color: var(--color-cream); text-decoration: none; }
  .footer-col-sub a:hover { text-decoration: underline; }
  /* padding-top zo gekozen dat de bovenkant van het logo precies uitlijnt
     met de onderkant van het e-mailveld in kolom 2 (op 1440px-breedte). */
  .site-footer__brand { text-align: left; padding: 114px 0 0; margin: 0; }
  .site-footer__brand svg, .site-footer__brand img { width: 130px; margin: 0 0 var(--space-3); }

  /* Kolom 2 — Volg ons (+15px) iconen (+30px) nieuwsbrief */
  .foot-row {
    display: flex; flex-direction: column; align-items: flex-start; gap: 15px;
    height: auto; padding: 0; margin-bottom: 30px; border-bottom: 0;
  }
  .foot-row > span:first-child {
    font-size: var(--text-xl); font-family: var(--font-display); font-weight: var(--weight-bold);
  }
  .site-footer__social img { width: 36px; height: 36px; }
  /* In het ontwerp staat Instagram vóór LinkedIn op desktop (op mobiel
     andersom) — bereikt met flex order, zonder de DOM-volgorde te wijzigen. */
  .site-footer__social a:nth-child(1) { order: 2; }
  .site-footer__social a:nth-child(2) { order: 1; }
  .site-footer__newsletter { padding: 0; text-align: left; }
  .site-footer__newsletter p { margin-inline: 0; }
  .newsletter-form { max-width: none; width: 350px; }

  .site-footer__legal { height: 50px; padding: 0 20px; display: flex; align-items: center; justify-content: center; }
  .newsletter-form { margin-inline: 0; }
}

/* 768–1080px: zonder de derde (afbeelding-)kolom hoort de rechterkant
   evenveel padding te hebben als de linker (--content-inset) — bij ≥1081px
   valt dit weer weg omdat de afbeelding daar zelf vol-bleed tegen de rand staat. */
@media (min-width: 768px) and (max-width: 1080px) {
  .site-footer__dark-content { padding-right: var(--content-inset); }
}

/* Vanaf 1081px: derde kolom met de outline-afbeelding terug, vol-bleed
   tegen de rechterrand en iets groter dan de footer zelf (bleed-effect). */
@media (min-width: 1081px) {
  .site-footer__dark > picture {
    display: block; order: 2; flex: 0 0 34%; align-self: stretch;
    overflow: hidden; margin: 0; padding: 0;
  }
  .site-footer__watermark { width: 100%; height: 100%; margin-top: 0; object-fit: cover; object-position: right center; }
}

@media (min-width: 1100px) {
  .lifestyle-img video { max-height: 560px; object-fit: cover; }
  .prose h1 { font-size: var(--text-4xl); }
}

/* =====================================================================
   WINKELWAGEN + CHECKOUT — desktop zijbalk-layout (node 1125:6906,
   1127:7245, 1127:7418). Mobiel blijft ongewijzigd: deze regels zitten
   allemaal achter min-width:768px.
   ===================================================================== */
@media (max-width: 767px) {
  /* Volledige footer (desktop-only content) mag op mobiel nooit renderen. */
  .site-footer--desktop-only { display: none; }
  /* FOUT HERSTELD: .checkout-sidebar in zijn geheel verbergen was te grof.
     Stap 1's zijbalk (samenvatting+knop) is wél nieuw voor desktop — op
     mobiel zit de submit-knop al inline in het form, dus die blijft
     verborgen. Maar stap 2's samenvatting+knop+voorwaarden-tekst bestonden
     al VOOR de desktop-zijbalk-herstructurering en hoorden gewoon op mobiel
     te blijven staan — alleen de nieuw-toegevoegde USP's (die er op mobiel
     origineel niet stonden, zie Figma node 1104:5483) blijven verborgen. */
  [data-checkout-step="1"] .checkout-sidebar { display: none; }
  [data-checkout-step="2"] .checkout-sidebar .cart-usp { display: none; }
  /* De DOM-volgorde is nu [foutmelding, spacer, Terug] gevolgd door
     [samenvatting, knop, voorwaarden] (handig voor de desktop-zijbalk, zie
     verderop), maar op mobiel hoort "Terug" weer helemaal ONDERAAN te staan
     (na de voorwaarden-tekst), zoals in het echte mobiele Figma-frame
     (node 1104:5483). .checkout-main-col ontpakken (display:contents) zodat
     de foutmelding en "Terug" los van elkaar een eigen order kunnen krijgen,
     zonder de DOM zelf aan te passen (dat zou de desktop-grid-plaatsing,
     die niet van de brondocument-volgorde afhangt, kunnen verstoren). */
  [data-checkout-step="2"]:not([hidden]) { display: flex; flex-direction: column; }
  [data-checkout-step="2"] .checkout-main-col { display: contents; }
  [data-checkout-step="2"] .checkout-payment-error { order: 1; }
  [data-checkout-step="2"] .checkout-sidebar { order: 2; display: block; }
  [data-checkout-step="2"] .checkout-back { order: 3; }
}
@media (min-width: 768px) {
  .site-footer--mobile-only { display: none; }
  .site-footer--desktop-only { display: block; }

  /* De winkelwagen gebruikt de volledige (niet-checkout) footer, die
     standaard margin-top:var(--space-12)[48px] heeft — checkout.html's
     footer gebruikt margin-top:10px. Zelfde waarde hier zodat de footer op
     beide pagina's op exact dezelfde hoogte begint. */
  .page-winkelwagen .site-footer--desktop-only { margin-top: 10px; }

  /* Winkelwagen: productenlijst links, samenvatting+knop+USP's rechts in
     een zijbalk i.p.v. alles vol-breedte onder elkaar. */
  /* .container (nu display:contents, zie hieronder) leverde eerst de
     max-width/centrering/zijpadding — die moet dus hierheen verhuizen,
     anders loopt de grid vol-breedte tot de randen van het scherm. */
  /* minmax(0,...) + min-height: zelfde reden/waarde als .checkout-step
     hierboven — consistente kolombreedte (off-white kaart) en footer die op
     dezelfde hoogte begint als op de checkout-stappen, ongeacht hoeveel
     producten er in de winkelwagen staan. */
  /* align-content:start i.p.v. de default (gedraagt zich als stretch): de
     impliciete rijen moeten op hun eigen content-hoogte blijven (anders
     duwt de min-height ook de kaart/USP's in kolom 2 uit elkaar) — de extra
     ruimte tot aan min-height hoort onzichtbaar ONDER de hele grid te vallen,
     vlak vóór de footer. */
  .page-winkelwagen #main {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 84px; align-items: start;
    align-content: start;
    width: 100%; max-width: var(--content-box); margin-inline: auto; padding-inline: var(--page-pad);
    min-height: 632px;
  }
  .page-winkelwagen #main > .container { display: contents; }
  /* .plp-intro centreert normaal (PLP-stijl, max-width+margin-inline:auto)
     — hier juist links uitlijnen, zoals het Figma desktop-frame. */
  .page-winkelwagen .plp-intro { grid-column: 1 / -1; max-width: none; margin-inline: 0; text-align: left; }
  .page-winkelwagen [data-cart-list] { grid-column: 1; grid-row: 2 / span 2; }
  .page-winkelwagen [data-cart-empty] { grid-column: 1; grid-row: 2; }
  /* Off-white kaart achter samenvatting+knop samen (node 1125:7176) i.p.v.
     losse elementen zonder achtergrond. */
  .page-winkelwagen [data-cart-summary-box] {
    grid-column: 2; grid-row: 2; background: var(--color-cream); padding: 20px 20px 40px 20px;
  }
  .page-winkelwagen [data-cart-cta] { margin-top: 20px; }
  .page-winkelwagen .cart-spacer { display: none; }
  /* USP's staan los ónder de kaart, zonder eigen achtergrond/lijn, en links
     uitgelijnd i.p.v. gecentreerd (dat laatste is de mobiele stijl). */
  .page-winkelwagen .cart-usp {
    grid-column: 2; grid-row: 3; margin-top: 20px;
    background: none; padding: 0; align-items: flex-start;
  }
  /* .cart-divider--footer (de lijn tussen de USP's en de footer) en
     .cart-divider--list-end (vóór de samenvatting, die op desktop in een
     eigen kolom naast de productenlijst staat i.p.v. eronder) horen op
     desktop allebei weg te blijven. !important nodig voor --footer: render()
     in winkelwagen.html zet daar een INLINE style.display="block" op (voor
     mobiel), wat een losse CSS-regel anders altijd verliest, ongeacht
     specificiteit. De "kale" .cart-divider tussen producten onderling blijft
     wél staan (zie hieronder) — dat is de nieuwe scheidingslijn uit het
     Figma-voorbeeld (node 1125:6906). */
  .page-winkelwagen .cart-divider--footer,
  .page-winkelwagen .cart-divider--list-end {
    display: none !important;
  }
  /* Scheidingslijn tussen producten (alleen zichtbaar vanaf 2 artikelen —
     bij 1 product wordt er geen enkele .cart-divider tussen items ingevoegd,
     zie render() in winkelwagen.html), off-white zoals de rest. */
  .page-winkelwagen .cart-list .cart-divider { margin: 30px 0; }

  /* Checkout stap 1 & 2: velden/foutmelding links, zijbalk (samenvatting +
     de werkelijke actie-knop + USP's) rechts. .checkout-form wordt
     display:contents zodat de submit-knop (die er mobiel gewoon inzit)
     niet opeens een 2-koloms blok binnen kolom 1 wordt — de echte knop
     verdwijnt op desktop (checkout-form__submit-mobile) en de zijbalk-knop
     (form="checkout-form-1") neemt het over. */
  /* align-items:stretch (i.p.v. start) zodat .checkout-main-col en
     .checkout-sidebar allebei de volledige rijhoogte krijgen — nodig om
     "Terug" met margin-top:auto naar de onderkant te duwen. */
  /* Vaste min-height zodat de footer na stap 1 ("Mijn gegevens", het langste
     form) en stap 2 ("Betaalwijze", korter) altijd op dezelfde hoogte
     begint, i.p.v. mee te bewegen met de kortere inhoud van stap 2.
     grid-template-rows:auto 1fr is nodig anders verdeelt grid (align-content:
     normaal gedraagt zich als stretch) de extra ruimte tot aan min-height
     over ALLE impliciete rijen — ook die van .plp-intro — waardoor er op
     stap 2 (met weinig inhoud) extreem veel witruimte ontstond ónder de
     titel. Nu blijft rij 1 (titel) strikt content-hoogte en vangt rij 2
     (velden/zijbalk) alle extra ruimte op. */
  /* minmax(0,...) i.p.v. kale fr-units: anders bepaalt elke kolom-item een
     eigen automatisch minimum (min-content van de velden in stap 1 is breder
     dan dat van de korte foutmelding in stap 2), waardoor de 2:1-verdeling
     per stap net iets anders uitpakte en de off-white kaart rechts op stap 1/
     winkelwagen (349px) een paar px breder werd dan op stap 2 (345px). */
  .checkout-step {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
    column-gap: 84px; align-items: stretch; min-height: 632px;
  }
  /* Eigen display:grid hierboven overschrijft anders de impliciete
     [hidden]{display:none} van de browser (author-CSS wint altijd van de
     UA-stylesheet), waardoor stap 2 zichtbaar bleef staan onder stap 1. */
  .checkout-step[hidden] { display: none; }
  .checkout-step .plp-intro { grid-column: 1 / -1; max-width: none; margin-inline: 0; text-align: left; }
  .checkout-step .checkout-form__submit-mobile { display: none; }
  /* .checkout-main-col (form/foutmelding + "Terug" samen) is nu ÉÉN grid-item
     i.p.v. de losse children uit te pakken — dat voorkwam eerder dat de
     auto-geplaatste veld-rijen door elkaar liepen met de los-geplaatste
     "Terug". Een vaste, ruimere marge duwt "Terug" sowieso verder omlaag
     (was 30px); de groeiende spacer duwt 'm bovendien tot onderaan de rij
     wanneer de zijbalk toevallig hoger is dan de linkerkolom (bv. stap 2). */
  .checkout-step .checkout-main-col { grid-column: 1; display: flex; flex-direction: column; }
  .checkout-step .checkout-spacer { flex: 1 0 auto; }
  .checkout-step .checkout-main-col .checkout-back { margin-top: 100px; }
  /* Op desktop geen eigen top-marge meer — moet bovenin gelijk uitlijnen
     met de off-white kaart in de zijbalk (die begint ook direct bovenin). */
  .checkout-step .checkout-payment-error { margin-top: 0; }
  .checkout-step .checkout-sidebar { grid-column: 2; display: flex; flex-direction: column; }
  /* Off-white kaart achter samenvatting+knop(+voorwaarden-tekst op stap 2),
     net als de winkelwagen. Stap 1 krijgt extra ruimte onderin (40px i.p.v.
     20px) — stap 2 houdt de standaard 20px rondom. */
  .checkout-step .checkout-sidebar .cart-summary-box { background: var(--color-cream); padding: 20px; }
  [data-checkout-step="1"] .checkout-sidebar .cart-summary-box { padding: 20px 20px 40px 20px; }
  .checkout-step .checkout-sidebar .pdp__cta { margin-top: 20px; }
  .checkout-step .checkout-sidebar .checkout-payment-disabled { margin-top: 0; }
  .checkout-step .checkout-sidebar .checkout-terms { margin-top: 14px; }
  /* USP's los eronder, geen achtergrond/lijn, links uitgelijnd i.p.v. de
     gecentreerde mobiele stijl, en meer witruimte erboven/eronder. */
  .checkout-step .checkout-sidebar .cart-usp {
    margin-top: 40px; margin-bottom: 30px; background: none; padding: 0; align-items: flex-start;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .btn { transition: none; }
}

/* --- Webshop "coming soon" (schakelaar SHOP_OPEN in site.js) -------------
   Zolang de webshop dicht is, verbergt site.js het winkelwagen-icoon in de
   header via de klasse shop-closed op <html>. */
html.shop-closed [data-cart] { display: none !important; }

/* --- Taalwissel (NL/EN) in de header-acties en onderin het mobiele menu --- */
.site-header__lang {
  display: inline-flex; align-items: center; height: 20px;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold);
  letter-spacing: .06em; color: var(--color-forest); text-decoration: none;
}
.site-header__lang:hover, .site-header__lang:focus-visible { color: var(--color-rust); }
.site-nav__lang { color: var(--color-forest); font-weight: var(--weight-bold); }