/* Nestell storefront — mobile-first. Every value pulls from tokens.css.
   Design intent: warm, tactile, playful organic shapes. No dashed lines,
   no boxy "AI" grids — soft asymmetric corners, wavy dividers, hand-feel. */

*, *::before, *::after { box-sizing: border-box; }
/* iOS legt bij elke tik een grijs vlak over links/knoppen; onze eigen :active- en
   hover-stijlen geven al feedback, dus die grijze flits mag weg. */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* clip, NIET hidden. `overflow-x: hidden` op body maakt van body een eigen
     scrollcontainer (overflow-y wordt dan impliciet auto). De sticky header
     plakt dan aan die container — die zelf nooit scrollt — en stond dus stil
     bovenaan het document i.p.v. bovenaan het scherm. `clip` knipt hetzelfde
     af zonder scrollcontainer, dus position: sticky werkt weer. html houdt
     hidden: dat propageert naar de viewport (en is de terugval voor browsers
     die clip niet kennen). */
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
/* Nederlands heeft lange samenstellingen ("Dekbedovertrekken"): op een telefoon
   is zo'n woord breder dan de tekstkolom en duwt het zichzelf de gutter in.
   hyphens werkt omdat <html lang="nl"> staat; break-word is het vangnet. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; margin: 0 0 calc(var(--space) * 2); letter-spacing: -0.015em;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* Zonder limiet breekt de browser ook korte woorden af ("Ka-toen"). Pas vanaf
   12 letters afbreken, met minimaal 6 letters vóór en 6 ná het koppelteken.
   Met 5 en 4 brak "Dekbedovertrek" op de kaart als "Dekbedover-trek", wat
   goedkoop oogt; zes aan weerszijden dwingt de streep naar de naad van de
   samenstelling: "Dekbed-overtrek". */
h1, h2, h3, .card__title { hyphenate-limit-chars: 12 6 6; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; border-radius: 4px; }

/* .container zet de horizontale marge (de "gutter") van de hele site.
   LET OP — dit is de valkuil die de gutter drie keer eerder heeft gesloopt:
   klassen die SAMEN met .container op één element staan (.pdp, .plp,
   .site-header__bar, .error-page, .announce__track) hebben dezelfde
   specificiteit. Schrijft zo'n klasse `padding: 40px 0`, dan wint die 0 van
   padding-inline en staat de pagina kaal tegen de schermrand — het verhogen
   van --gutter heeft dan geen enkel effect.
   Regel: gebruik op zulke klassen ALTIJD `padding-block`, nooit de shorthand.
   Onderaan dit bestand staat bovendien een vangnet dat de gutter terugzet. */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }

/* hand-drawn wavy underline accent under section headings */
.wavy { position: relative; display: inline-block; }
.wavy::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 8px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M1 5 Q 15 1 30 5 T 60 5 T 90 5 T 119 5' fill='none' stroke='%23C85A32' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--terracotta); color: #fff;
  padding: 15px 28px; border: 0; border-radius: var(--radius-pill);
  font: 600 var(--step-0)/1 var(--font-body); cursor: pointer; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
}
.btn:hover { background: var(--terracotta-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--plum); border: 2px solid var(--plum); box-shadow: none; padding: 13px 26px; }
.btn--ghost:hover { background: var(--plum); color: #fff; }
.btn--plum { background: var(--plum); }
.btn--plum:hover { background: var(--plum-soft); }
.btn--block { width: 100%; }
.btn--lg { padding: 18px 34px; font-size: var(--step-1); }
/* Op een telefoon is 20px letter + 34px padding zo breed dat "In winkelwagen"
   naast de aantalteller op twee regels breekt. Iets compacter houdt de knop
   op één regel — de knop blijft met 56px hoogte ruim boven de tikmaat. */
@media (max-width: 560px) { .btn--lg { padding: 17px 24px; font-size: var(--step-0); } }
.btn[disabled] { background: var(--line); color: var(--muted); cursor: not-allowed; box-shadow: none; transform: none; }

/* --- Actiebalk (geel) ---
   Draagt sinds 22 sep de lopende hoofdactie in plaats van de USP's. Twee
   boodschappen wisselen elkaar af: beide staan in de HTML, gestapeld op
   dezelfde plek, en een CSS-animatie kruist ze over. Geen carrousel die
   horizontaal schuift zoals de oude USP-balk deed — dat werkte daar omdat de
   items even lang waren; hier verschillen ze sterk in lengte en dan verspringt
   de regel zichtbaar. Een overvloeier staat stil op zijn plek.

   De balk is kort van opbouw met vaste hoogte: hij mag niet meegroeien met de
   langste regel, anders springt de hele pagina bij elke wissel omlaag. */
.announce { background: var(--promo); color: var(--promo-ink); font-size: var(--step--1);
  font-weight: 700; letter-spacing: .01em; }
.announce__track { position: relative; display: grid; place-items: center;
  min-height: 38px; padding-block: 10px; text-align: center; }
/* Alle boodschappen liggen op elkaar in dezelfde cel van de grid; zo bepaalt de
   langste de hoogte en verschuift er niets bij het wisselen. */
.announce__item { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; }
.announce__item::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--promo-ink); opacity: .55; flex: none; }

/* Twee boodschappen: elk 50% van de cyclus zichtbaar, met een korte overvloei.
   Zonder animatie (oude browser, "beperk beweging") blijft de eerste staan en
   is de tweede verborgen — de balk belooft dan nog steeds iets kloppends. */
.announce__track--2 .announce__item:nth-child(2) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .announce__track--2 .announce__item:nth-child(1) { animation: announce-fade 9s linear infinite; }
  .announce__track--2 .announce__item:nth-child(2) { animation: announce-fade 9s linear infinite -4.5s; }
}
@keyframes announce-fade {
  0%, 44%   { opacity: 1; }
  50%, 94%  { opacity: 0; }
  100%      { opacity: 1; }
}

/* --- USP-balk (onder de header) ---
   Lichte, neutrale strook: cream-deep is precies één stap donkerder dan de
   body-cream, dus hij zet zich af zonder een blok te worden. Op een telefoon
   passen drie claims niet naast elkaar; daar scrollt de rij met de vinger mee
   in plaats van te stapelen — gestapeld duwt hij de hero een halve schermhoogte
   naar beneden. */
.uspbar { background: var(--cream-deep); border-bottom: var(--line-h); }
.uspbar__track { display: flex; align-items: center; justify-content: center;
  gap: calc(var(--space) * 4); padding-block: 9px;
  font-size: var(--step--1); color: var(--plum); }
.uspbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 500; }
.uspbar__item .icon { width: 16px; height: 16px; stroke-width: 2; color: var(--terracotta); flex: none; }
@media (max-width: 899px) {
  .uspbar__track { justify-content: flex-start; gap: calc(var(--space) * 2.5);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .uspbar__track::-webkit-scrollbar { display: none; }
  /* De laatste claim mag niet tegen de schermrand plakken als je doorscrollt. */
  .uspbar__item:last-child { padding-right: var(--gutter); }
}

/* --- Header --- */
/* De header plakt, de USP-balk erboven bewust niet: die scrollt gewoon weg en
   de header schuift daarna tegen de bovenrand. */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: saturate(1.1) blur(8px); border-bottom: var(--line-h); }
/* padding 16 i.p.v. 14: de maansikkel hangt 0,442em onder de tekstregel uit en
   kwam anders tot op de onderrand van de header. */
.site-header__bar { display: flex; align-items: center; gap: calc(var(--space) * 2); padding-block: 16px; }
/* Optische uitlijning: de hamburger links en het winkelwagen-icoon rechts hebben
   zelf 4px padding rond hun glyph. Zonder correctie staat de header dus 4px
   ruimer dan de tekst eronder en oogt hij scheef ingesprongen. */
.site-header__bar > .hamburger:first-child { margin-left: calc(var(--icon-inset) * -1); }
.site-header__bar .header-actions > :last-child { margin-right: calc(var(--icon-inset) * -1); }
/* Merk = het Nestell-woordmerk als één inline SVG (partials/brand-logo.php).
   De 8 letterpaden hebben fill:currentColor, dus één `color` op .brand herkleurt
   het hele woord — plum in de header, wit in de footer. De 4 sterretjes boven de
   s/t/e staan los op de terracotta huiskleur (.bl__spark), in de footer naar wit
   overschreven. De hoogte staat in em, zodat één font-size op .brand het hele
   merk schaalt (incl. de responsive breakpoints hieronder). */
.brand { display: inline-flex; align-items: center; font-size: var(--step-2); line-height: 1;
  color: var(--plum); text-decoration: none; }
.brand-logo { display: block; height: 2em; width: auto; }
.bl__word  { fill: currentColor; }
.bl__spark { fill: var(--terracotta); }
.nav { display: none; gap: calc(var(--space) * 3); margin-left: calc(var(--space) * 2); }
.nav a { position: relative; padding: 6px 2px; font-size: var(--step-0); color: var(--ink); font-weight: 500; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2.5px; border-radius: 2px; background: var(--terracotta); transition: right var(--dur-md) var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }

/* "Meer"-uitklap: alles voorbij de vijf hoofdcategorieën. De knop draagt
   dezelfde onderstreep-animatie als een gewone navlink, zodat de rij één
   geheel blijft; het paneel eronder is een gewone kaart. */
.nav-more { position: relative; display: flex; align-items: center; }
.nav-more__btn { position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 2px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--step-0); font-weight: 500; color: var(--ink); }
.nav-more__btn::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2.5px; border-radius: 2px; background: var(--terracotta); transition: right var(--dur-md) var(--ease); }
.nav-more__btn:hover::after, .nav-more__btn.is-open::after { right: 0; }
.nav-more__chev { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-sm) var(--ease); }
.nav-more__btn.is-open .nav-more__chev { transform: rotate(180deg); }

/* Het paneel begint pal onder de knop; de doorzichtige bovenrand vangt de muis
   op tussen knop en menu, anders klapt hij dicht op weg naar beneden. */
.nav-more__menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  z-index: 60; min-width: 190px; margin-top: 10px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: var(--line-h); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); }
.nav-more__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-more__menu a { padding: 9px 12px; border-radius: var(--radius-sm); white-space: nowrap;
  color: var(--plum); transition: background var(--dur-xs) var(--ease), color var(--dur-xs) var(--ease); }
.nav-more__menu a::after { content: none; }
.nav-more__menu a:hover, .nav-more__menu a[aria-current="page"] { background: var(--cream); color: var(--terracotta); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: calc(var(--space) * 1.75); }
.header-actions a, .header-actions button { display: inline-flex; align-items: center; color: var(--plum); opacity: .9; background: none; border: 0; cursor: pointer; padding: 4px; position: relative; }
.header-actions a:hover, .header-actions button:hover { opacity: 1; color: var(--terracotta); }
.icon { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hamburger { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 4px; margin: 0; color: var(--plum); cursor: pointer; -webkit-appearance: none; appearance: none; }
.hamburger:hover { color: var(--terracotta); }
.cart-count { position: absolute; top: -4px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--terracotta); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; pointer-events: none; }

/* Op smalle telefoons is de headerrij (hamburger + merknaam + 4 iconen) net te
   breed, waardoor het rechtse winkelwagen-icoon — en dus het aantal-bolletje —
   voorbij de schermrand valt en door overflow-x:hidden wordt afgeknipt. Zoeken
   zit ook in het hamburger-menu, dus dat icoon mag op mobiel weg; verder krappen
   we de tussenruimtes in en laat het lockup trapsgewijs krimpen (font-size op
   .brand schaalt merk én woord mee). Op de allerkleinste schermen blijft alleen
   het maanmerk staan. */
@media (max-width: 600px) {
  .header-actions .header-search { display: none; }
}
@media (max-width: 560px) {
  .site-header__bar .brand { font-size: var(--step-1); }
}
@media (max-width: 480px) {
  .site-header__bar { gap: calc(var(--space) * 1.25); }
  .header-actions { gap: calc(var(--space) * 1.5); }
}
@media (max-width: 420px) {
  .site-header__bar .brand { font-size: var(--step-0); }
}
@media (max-width: 380px) {
  .site-header__bar { gap: var(--space); }
  .header-actions { gap: var(--space); }
}
@media (max-width: 330px) {
  /* Op de allersmalste schermen het woordmerk nog een tikje kleiner, zodat het
     naast hamburger + iconen blijft passen. */
  .site-header__bar .brand { font-size: calc(var(--step-0) * .82); }
}

/* --- Scrollslot bij open overlays ---
   Zolang het menu, het mandje-paneel, de quick-view of het zoekvenster
   openstaat, mag de pagina eronder niet meescrollen. Het slot zit op <html>:
   dat propageert naar de viewport, dus de scrollpositie blijft staan (geen
   sprong naar boven) en de sticky header blijft gewoon zichtbaar. De regel
   staat ná de body-regel bovenaan, zodat `overflow: hidden` het `overflow-x:
   clip` daar overschrijft. Scrollen BINNEN een overlay blijft werken: dat zijn
   eigen scrollcontainers (.minicart__lines, .drawer, .quickview) met
   overscroll-behavior: contain, zodat de scroll niet doorlekt naar de pagina.
   app.js zet/haalt de klasse (Alpine-effect op de ui-store). */
html.is-locked, html.is-locked body { overflow: hidden; }
/* De klant kan onder het slot nog wél zoomen; alleen wegvegen van de pagina
   via de scrim heeft geen zin meer. */
.drawer-scrim { touch-action: none; }
.drawer, .quickview, .minicart__lines, .quickview__body { overscroll-behavior: contain; }

/* --- Mobile nav drawer --- */
.drawer-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(44,44,44,.42); backdrop-filter: blur(2px); }
.drawer { position: fixed; inset: 0 auto 0 0; z-index: 91; width: min(86vw, 360px); background: var(--cream); box-shadow: var(--shadow-lift); padding: calc(var(--space) * 3); display: flex; flex-direction: column; gap: 6px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--space) * 2); }
.drawer a { padding: 14px 12px; border-radius: var(--radius); font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); }
.drawer a:hover { background: var(--terracotta-wash); }

/* Sluitkruisje van beide drawers. Stond eerder op .header-actions, maar dat is
   de flex-container in de header — de kleur/reset zit daar in de descendant
   `.header-actions button`, die op de knop zélf niet aanslaat. Resultaat was
   een kale grijze systeemknop. */
.drawer-close { width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--plum); cursor: pointer; padding: 0;
  transition: background var(--dur-xs) var(--ease), color var(--dur-xs) var(--ease); }
.drawer-close:hover { background: var(--terracotta-wash); color: var(--terracotta); }
.drawer-close .icon { width: 21px; height: 21px; }

/* --- Mini-cart drawer (right; opens after add-to-cart) --- */
.minicart { position: fixed; inset: 0 0 0 auto; z-index: 91; width: min(92vw, 400px); background: var(--cream);
  box-shadow: var(--shadow-lift); border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  display: flex; flex-direction: column; }
/* Uitklapgreep aan de linkerrand van de mini-cart (partials/overlays.php). Zit
   op duimhoogte, in dezelfde crème als de drawer, zodat hij leest als een lipje
   van het paneel en niet als een los knopje op de pagina. */
.minicart__grip { position: absolute; top: 50%; left: 0; transform: translate(-100%, -50%);
  width: 30px; height: 64px; display: grid; place-items: center; padding: 0;
  border: 0; cursor: pointer; background: var(--cream); color: var(--plum);
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: -5px 0 14px rgba(58, 30, 45, .12); }
.minicart__grip .icon { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.minicart__grip:hover { color: var(--terracotta); }

.minicart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px dashed var(--terracotta-soft); }
.minicart__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); }
.minicart__content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.minicart__lines { flex: 1; overflow-y: auto; padding: 4px 20px; }
.minicart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: var(--line-h); }
.minicart-line:last-child { border-bottom: 0; }
.minicart-line__media { display: block; width: 56px; aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--cream-deep); }
.minicart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.minicart-line__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.minicart-line__title { font-family: var(--font-display); color: var(--plum); line-height: 1.2; }
.minicart-line__title:hover { color: var(--terracotta); }
.minicart-line__meta, .minicart-line__qty { font-size: var(--step--1); }
.minicart-line__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.minicart-line__total { font-weight: 700; color: var(--plum); white-space: nowrap; }
.js-minicart-remove button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; display: inline-flex; }
.js-minicart-remove button:hover { color: var(--terracotta); }
.js-minicart-remove .icon { width: 16px; height: 16px; }
.minicart__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: var(--line-h); display: grid; gap: 12px; }
.minicart__row { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; color: var(--ink); }
.minicart__row--muted { font-weight: 500; color: color-mix(in srgb, var(--plum) 62%, transparent); font-size: var(--step--1); }
.minicart__row--total { color: var(--plum); }
.minicart__row--total > :last-child { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.minicart__row--total strong { font-size: var(--step-1); font-weight: 700; }
.minicart__tocart { text-align: center; color: var(--terracotta); font-weight: 600; font-size: var(--step--1); }
.minicart__tocart:hover { color: var(--terracotta-strong); }
.minicart__empty { padding: 24px 20px; display: grid; gap: 10px; }
.minicart__empty-lede { margin: 0; font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); }

/* --- Quick-view modal (mandje-knop met varianten) --- */
.quickview { position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(94vw, 1040px); max-height: 92vh; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.quickview.es { opacity: 0; transform: translate(-50%, -48%) scale(.98); }
.quickview.et { transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease); }
.quickview.ee { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.quickview__close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 82%, transparent); border: 0; display: grid; place-items: center;
  color: var(--plum); cursor: pointer; box-shadow: var(--shadow-sm); }
.quickview__close:hover { color: var(--terracotta); }
.quickview__loading { padding: 48px; text-align: center; color: var(--muted); }
/* Inhoud van de quick-view (.qv) staat onderaan dit bestand: die moet ná de
   PDP-regels komen, anders winnen die in de modal. */

[x-cloak] { display: none !important; }

/* --- Hero --- */
.hero { display: grid; gap: calc(var(--space) * 4); padding-block: calc(var(--space) * 6) calc(var(--space) * 5); position: relative; }
.hero::before { /* playful blob behind copy */
  content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; left: -120px; top: -40px;
  background: var(--terracotta-wash); border-radius: var(--blob-1); filter: blur(6px); opacity: .8;
}
/* Mobiel staat de blob kleiner en hoger: op volle maat liep hij tot ver voorbij
   de linkerrand en duwde hij (met overflow-x) de pagina zijwaarts. */
@media (max-width: 899px) {
  .hero::before { left: -70px; width: 250px; height: 250px; top: -10px; }
}
.hero__eyebrow { font-family: var(--font-display); font-style: italic; font-size: var(--step-0); color: var(--terracotta); font-weight: 500; margin-bottom: calc(var(--space) * 1.5); }
.hero__title { font-size: clamp(2rem, 5vw + 1.2rem, var(--step-4)); max-width: 15ch; }
.hero__title em { font-style: italic; color: var(--terracotta); }
.hero__lede { font-size: var(--step-1); color: var(--muted); max-width: 46ch; margin-bottom: calc(var(--space) * 3); }
.hero__cta { display: flex; gap: calc(var(--space) * 1.5); flex-wrap: wrap; }
.hero__media {
  aspect-ratio: 4 / 4.4; border-radius: var(--blob-2); overflow: hidden;
  background: linear-gradient(150deg, var(--cream-deep), var(--terracotta-soft));
  box-shadow: var(--shadow); position: relative;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__visual { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero__visual .hero__media { align-self: stretch; }
.hero__badge { background: var(--surface); color: var(--plum); border-radius: var(--radius-pill); padding: 8px 16px; font-size: var(--step--1); font-weight: 600; box-shadow: var(--shadow-sm); }
/* Uitgeknipte hero (cadeau-actie): de PNG heeft geen achtergrond, dus geen
   kader — alleen een zachte wash eronder zodat het witte kussen niet zweeft.
   Als <a> is het hele kussen klikbaar (home -> actiepagina, actiepagina -> uitleg). */
.hero__cutout { position: relative; display: block; align-self: stretch; }
.hero__cutout::before {
  content: ""; position: absolute; z-index: 0; inset: 12% -4% 2%;
  background: radial-gradient(60% 55% at 50% 55%, var(--terracotta-wash), transparent 72%);
  border-radius: var(--blob-2); filter: blur(4px);
}
.hero__cutout img { position: relative; z-index: 1; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 22px 26px rgba(74, 44, 64, .22)); transition: transform var(--dur-md) var(--ease); }
a.hero__cutout:hover img { transform: translateY(-4px); }
a.hero__cutout:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 6px; border-radius: var(--radius-lg); }

/* --- 1+1-actie: hero-paar + de gele pil ---
   De pil is één klasse voor de hele site: op de hero, op elke productfoto in de
   lijsten en op de tweede pakketkeuze in de productpagina. Dat is opzet — de
   bezoeker die de gele pil op de foto ziet moet 'm herkennen op het moment dat
   hij bij de keuze "2 kussens" staat. Eén klasse betekent ook: één plek waar de
   kleur verandert als de actie ooit een andere krijgt. */
.promo-pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--promo); color: var(--promo-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px -2px rgba(58, 42, 8, .35);
}
.promo-pill--hero { position: absolute; z-index: 3; left: 4%; top: 6%;
  font-size: var(--step--1); padding: 8px 16px; transform: rotate(-6deg); }

/* Twee uitgeknipte kussens: het achterste iets kleiner en gedraaid, zodat het
   paar diepte krijgt zonder dat er een tweede foto voor nodig is. */
.hero__pair { position: relative; display: block; align-self: stretch; }
.hero__pair::before {
  content: ""; position: absolute; z-index: 0; inset: 14% -4% 2%;
  background: radial-gradient(60% 55% at 50% 55%, var(--terracotta-wash), transparent 72%);
  border-radius: var(--blob-2); filter: blur(4px);
}
.hero__pair img { position: relative; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 22px 26px rgba(74, 44, 64, .22)); }
.hero__pair-back { z-index: 1; width: 74%; margin-left: auto; transform: rotate(7deg) translateY(-6%); opacity: .92; }
.hero__pair-front { z-index: 2; margin-top: -46%; transform: rotate(-3deg); transition: transform var(--dur-md) var(--ease); }
a.hero__pair:hover .hero__pair-front { transform: rotate(-3deg) translateY(-4px); }
a.hero__pair:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 6px; border-radius: var(--radius-lg); }

/* Het gele vlaggetje boven de actiekop. Geen cursieve eyebrow zoals de gewone
   hero: dit is een aanbieding, geen merkzin. */
.hero__flag { display: inline-flex; align-items: center; margin-bottom: calc(var(--space) * 1.5);
  background: var(--promo); color: var(--promo-ink);
  font-size: var(--step--1); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill); }
.hero__code { margin-top: calc(var(--space) * 2); font-size: var(--step--1); color: var(--muted); }
.hero__code strong { color: var(--plum); background: var(--promo);
  padding: 2px 8px; border-radius: var(--radius-sm); letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .hero__pair-front { transition: none; }
  a.hero__pair:hover .hero__pair-front { transform: rotate(-3deg); }
}

/* Rond cadeau-bolletje op het kussen; het kussen eromheen is de link. */
.giftbadge { position: absolute; z-index: 2; right: 2%; top: 4%;
  display: grid; place-content: center; gap: 1px; text-align: center;
  width: 104px; height: 104px; border-radius: 50%; background: var(--terracotta); color: #fff;
  box-shadow: var(--shadow); transform: rotate(-8deg); transition: transform var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease); }
.giftbadge__big { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.giftbadge__sub { font-size: 12px; font-weight: 600; line-height: 1.1; opacity: .95; }
a.hero__cutout:hover .giftbadge { background: var(--terracotta-strong); transform: rotate(-8deg) scale(1.06); }
@media (min-width: 900px) { .giftbadge { width: 122px; height: 122px; }
  .giftbadge__sub { font-size: var(--step--1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__cutout img, .giftbadge { transition: none; }
  a.hero__cutout:hover img { transform: none; }
}

/* --- Actiepagina: compacte actiebalk ---
   Hier stond een volledige hero (groot kussen + kop + lede + twee knoppen). Die
   vulde op mobiel het hele eerste scherm, met als gevolg dat 87% van de
   advertentiebezoekers nooit een productpagina opende. De actie past ook in een
   balk van een paar regels; de ruimte die vrijkomt is voor de productrijen. */
.promo-bar { display: grid; gap: calc(var(--space) * 2); padding-block: calc(var(--space) * 3) calc(var(--space) * 2); }
.promo-bar__main { display: flex; align-items: center; gap: calc(var(--space) * 2); }
.promo-bar__thumb { width: 76px; height: 76px; flex: none; object-fit: contain; }
.promo-bar__eyebrow { font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; margin: 0 0 2px; }
.promo-bar__title { font-size: clamp(1.2rem, 2.2vw + .75rem, var(--step-2)); margin: 0; line-height: 1.18; max-width: 38ch; }
.promo-bar__title em { font-style: italic; color: var(--terracotta); }
.promo-bar__steps { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
  gap: calc(var(--space) * 1.5) calc(var(--space) * 3); }
.promo-bar__steps li { display: flex; align-items: center; gap: 8px; font-size: var(--step--1); color: var(--muted); }
.promo-bar__steps span { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: var(--terracotta); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem; }
.promo-bar__fineprint { font-size: var(--step--1); margin: 0; max-width: 62ch; }

/* Veel rijen achter elkaar: met de normale sectiepadding wordt de pagina
   onnodig lang en verdwijnt de volgende rij weer onder de vouw. */
.section--tight { padding: calc(var(--space) * 4) 0; }
.section--tight .section__head { margin-bottom: calc(var(--space) * 3); }
.promo-gifts { display: grid; gap: calc(var(--space) * 3); }
.promo-gift { background: var(--surface); border: var(--line-h); border-radius: var(--radius-lg); overflow: hidden; }
.promo-gift__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--cream-deep); }
.promo-gift__media img { width: 100%; height: 100%; object-fit: cover; }
.promo-gift__flag { position: absolute; left: 12px; top: 12px; background: var(--terracotta); color: #fff; font-weight: 700; font-size: var(--step--1); padding: 4px 12px; border-radius: 999px; }
.promo-gift__body { padding: calc(var(--space) * 2) calc(var(--space) * 2.5) calc(var(--space) * 2.5); display: flex; flex-direction: column; gap: 4px; }
.promo-gift__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); margin: 0; line-height: 1.15; }
.promo-gift__title a:hover { color: var(--terracotta); }
.promo-gift__value { font-size: var(--step-0); }
.promo-cta { margin-top: calc(var(--space) * 4); text-align: center; }
/* Shopblok onderaan de actiepagina (alle producten door elkaar). */
.promo-shop__count { font-size: var(--step--1); white-space: nowrap; }
@media (min-width: 720px) {
  .promo-gifts { grid-template-columns: repeat(2, 1fr); }
  /* Balk wordt één regel: aanbod links, stappen rechts. */
  .promo-bar { grid-template-columns: auto 1fr; align-items: center;
    column-gap: calc(var(--space) * 4); padding-block: calc(var(--space) * 4) calc(var(--space) * 3); }
  .promo-bar__thumb { width: 96px; height: 96px; }
  .promo-bar__steps { justify-content: end; }
  .promo-bar__fineprint { grid-column: 1 / -1; }
}

/* --- Section + wavy divider --- */
.section { padding: calc(var(--space) * 6) 0; position: relative; }
.section--cream { background: var(--cream-deep); }
.section--plum { background: var(--plum); color: #fff; }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: calc(var(--space) * 4.5); }
.section__head h2 { font-size: var(--step-3); margin: 0; }
.section__link { font-size: var(--step-0); color: var(--terracotta); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.section__link:hover { color: var(--terracotta-strong); }
/* soft wavy top divider for coloured sections */
/* De golf tekent alléén de ONDERSTE helft (het vlak van de sectie eronder, via
   currentColor). De bovenste helft is transparant en liet dus de body-cream zien
   in plaats van de sectie erboven — zichtbaar als een lichte strook zodra de
   sectie erboven cream-deep of plum is. Vandaar een expliciete background die je
   per plek meegeeft. `color` = vlak eronder, `background` = vlak erboven. */
.wave-top { display: block; width: 100%; height: 28px; margin-bottom: -1px; color: var(--cream-deep); background: var(--cream); }
.wave-top--plum { color: var(--plum); }
.wave-top--bg-cream-deep { background: var(--cream-deep); }
.wave-top--bg-plum { background: var(--plum); }

/* --- Category tiles (organic, asymmetric) --- */
.tiles { display: grid; grid-template-columns: 1fr; gap: calc(var(--space) * 2); }
.tile {
  display: flex; flex-direction: column; justify-content: end; min-height: 240px;
  padding: calc(var(--space) * 3); border-radius: var(--leaf); position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--surface), var(--cream-deep)); border: var(--line-h);
  transition: transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
}
.tile::after { content: ""; position: absolute; right: -50px; top: -50px; width: 150px; height: 150px; background: var(--terracotta-wash); border-radius: var(--blob-1); opacity: .7; transition: transform var(--dur-lg) var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile:hover::after { transform: scale(1.15) rotate(8deg); }
.tile h3 { font-size: var(--step-2); margin-bottom: 4px; color: var(--plum); position: relative; }
.tile p { margin: 0; color: var(--muted); font-size: var(--step-0); position: relative; }
.tile__go { margin-top: calc(var(--space) * 1.5); font-size: var(--step--1); letter-spacing: .03em; color: var(--terracotta); font-weight: 600; position: relative; }

/* --- Product rail (mobile: swipe; desktop: grid) --- */
/* De rail breekt bewust uit de gutter (negatieve marge) zodat je kunt swipen tot
   aan de schermrand, maar zijn padding houdt de EERSTE kaart netjes op de gutter.
   Zonder scroll-padding negeert scroll-snap die padding: de browser snapt de
   kaart tegen de rand van het scrollvenster en scrollt de gutter meteen weg —
   dan plakt de eerste kaart alsnog tegen de schermrand. */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: calc(var(--space) * 2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: calc(var(--space) * 2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.grid-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--space) * 2); }

/* --- Product card ---
   Opbouw sinds 22 sep: foto, titel, één zin, prijs — alles gecentreerd. Het
   hartje, de mandje-knop, de merkregel en de voorraadregel zijn eruit; zie
   partials/product-card.php voor het waarom. Wat overblijft is een tegel met
   één taak: doorsturen naar de productpagina. */
.card { position: relative; isolation: isolate; container-type: inline-size; container-name: card;
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: var(--line-h); transition: transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Hele tegel klikbaar: de titel-link rekt met een overlay over de kaart. De
   badges liggen erboven (z-index 2) maar laten de klik door — er valt sinds de
   knoppen eraf zijn niets meer op de foto aan te klikken. */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__link { text-decoration: none; }
.card__media { position: relative; aspect-ratio: 1 / 1; background: var(--cream-deep); overflow: hidden; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-lg) var(--ease), transform .34s var(--ease); }
.card__img--hover { opacity: 0; }
.card:hover .card__img--main { transform: scale(1.04); }
.card:hover .card__img--hover { opacity: 1; }
.card__badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px; z-index: 2; pointer-events: none; }
/* Maat naast de 1+1-pil: grijs en zonder schaduw, zodat de actiepil blijft trekken. */
.size-pill { display: inline-flex; align-items: center; background: rgba(110, 101, 93, .12); color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; border-radius: var(--radius-pill);
  white-space: nowrap; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.badge { display: inline-flex; align-items: center; background: var(--terracotta); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.badge--plum { background: var(--plum); }
.badge--sale { background: var(--gold); }
.badge--out { background: var(--muted); }

.card__body { padding: calc(var(--space) * 2) calc(var(--space) * 2) calc(var(--space) * 2.5);
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; }
/* Titel: maximaal --title-lines regels, daarna een beletselteken. Geen vaste
   hoogte meer (24 sep, Lars): die liet onder korte namen een gat boven de
   omschrijving. De prijzen blijven op één lijn via margin-top:auto op de voet. */
.card__title { --title-lines: 2; font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); margin: 0; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--title-lines);
  overflow: hidden;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.card__title a:hover { color: var(--terracotta); }
/* De ene zin onder de titel. Twee regels hoog en altijd uitgeschreven (ook
   leeg), zodat kaarten naast elkaar hun prijs op dezelfde lijn houden ook als
   één van de twee geen omschrijving had. */
.card__blurb { --blurb-lines: 2; margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--blurb-lines);
  overflow: hidden; min-height: calc(var(--blurb-lines) * 1.4em); max-width: 32ch; }
/* Voetregel: prijs links, ronde oranje mandje-knop rechts (24 sep, Lars). De
   knop ligt boven de klikbare tegel-overlay (z-index 1), anders opent een tik
   erop de productpagina in plaats van het mandje. */
.card__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; min-width: 0; align-self: stretch; }
.card__price { display: inline-flex; align-items: baseline;
  justify-content: flex-start; gap: 7px; min-width: 0; }
/* Zonder knop (uitverkocht) blijft de prijs gewoon gecentreerd. */
.card__foot:not(:has(.card__cart)) { justify-content: center; }
.card__cart { position: relative; z-index: 2; flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  background: var(--terracotta); color: #fff; transition: background var(--dur-md) var(--ease), transform var(--dur-md) var(--ease); }
.card__cart:hover { background: var(--terracotta-strong); }
.card__cart:active { transform: scale(.94); }
.card__cart .icon { width: 20px; height: 20px; stroke-width: 1.9; }
.card__from { font-size: var(--step--1); color: var(--muted); }
.price { font-weight: 700; color: var(--terracotta); font-size: var(--step-1); }

/* --- Adviesprijs -----------------------------------------------------------
   Doorgestreepte prijzen en de kortingspil zijn op de hele site uit (22 sep).
   De opmaak blijft staan omdat de adviesprijs nog op de beheerschermen en in
   de feeds voorkomt; op de winkel zelf rendert er niets meer dat hem gebruikt.

   De streep is DIAGONAAL, van linksonder naar rechtsboven. text-decoration kan
   dat niet, dus het is een achtergrondverloop: `to bottom right` belooft in CSS
   dat de lijn haaks op die as precies door de twee ándere hoeken loopt. Een
   vaste rotatiehoek zou bij "9,95" te steil staan en bij "129,95" te vlak. */
.price--was {
  color: var(--muted); font-weight: 500; font-size: var(--step-0);
  text-decoration: none; padding: 0 2px;
  background-image: linear-gradient(to bottom right,
    transparent calc(50% - 0.9px), currentColor calc(50% - 0.9px),
    currentColor calc(50% + 0.9px), transparent calc(50% + 0.9px));
}

/* --- Smalle kaart ----------------------------------------------------------
   De maatstaf is de kaart zelf (container query), niet het scherm: dezelfde
   kaart in een rail is smaller dan in het PLP-raster van één kolom, en moet
   daar zijn eigen maat kiezen. */
@container card (max-width: 235px) {
  .card__title { --title-lines: 3; font-size: 1.0625rem; }
  .card__blurb { --blurb-lines: 3; }
  .card__body { padding-inline: calc(var(--space) * 1.75); }
  .card__price .price { font-size: clamp(15px, 10.2cqw, 20px); }
  .card__from { font-size: clamp(10px, 6.2cqw, 13.3px); }
  .card__foot { gap: 8px; }
  .card__cart { width: 36px; height: 36px; }
  .card__cart .icon { width: 18px; height: 18px; }
}

/* --- PLP layout --- */
.plp { display: grid; gap: calc(var(--space) * 3); padding-block: calc(var(--space) * 4) calc(var(--space) * 7); }
.plp__head h1 { font-size: var(--step-3); color: var(--plum); margin-bottom: 8px; }
.plp__intro { color: var(--muted); max-width: 62ch; }
.breadcrumb { font-size: var(--step--1); color: var(--muted); margin-bottom: calc(var(--space) * 1.5); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--terracotta); }
.breadcrumb span { color: var(--line); }

.plp__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: calc(var(--space) * 2) 0; flex-wrap: wrap; }
.plp__count { font-size: var(--step--1); color: var(--muted); }
.plp--sortbar > .plp__toolbar { margin: 0; }
.filter-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: var(--line-h); padding: 10px 16px; border-radius: var(--radius-pill); font-weight: 600; color: var(--plum); cursor: pointer; }
.select { appearance: none; background: var(--surface); border: var(--line-h); border-radius: var(--radius-pill); padding: 10px 40px 10px 16px; font: 500 var(--step-0) var(--font-body); color: var(--ink); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A2C40' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }

.facets { display: none; background: var(--surface); border: var(--line-h); border-radius: var(--radius-lg); padding: calc(var(--space) * 2.5); }
.facets.is-open { display: block; }
.facet { border-bottom: var(--line-h); padding: calc(var(--space) * 1.5) 0; }
.facet:last-child { border-bottom: 0; }
.facet > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--plum); padding: 6px 0; }
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after { content: "+"; color: var(--terracotta); font-size: var(--step-1); }
.facet[open] > summary::after { content: "–"; }
.facet__body { padding-top: calc(var(--space) * 1.25); display: flex; flex-direction: column; gap: 10px; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--step-0); color: var(--ink); }
.check input { accent-color: var(--terracotta); width: 17px; height: 17px; }
.check .n { color: var(--muted); font-size: var(--step--1); margin-left: auto; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; position: relative; }
.swatch input { position: absolute; opacity: 0; }
.swatch .dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch:has(input:checked) { border-color: var(--terracotta); }
.facet__actions { margin-top: calc(var(--space) * 2); display: flex; gap: 10px; }

.plp__results { display: grid; gap: calc(var(--space) * 3); }
/* Eén kolom op een telefoon (22 sep). Twee naast elkaar gaf een kaart van zo'n
   150px: genoeg voor een foto, te weinig voor een titel, een zin én een prijs
   zonder dat alles krimpt. Vanaf tabletbreedte passen er twee, op desktop drie. */
/* Telefoon: twee kolommen (terug sinds 24 sep). Onder 340px valt hij terug op
   één, zie onderaan het bestand. */
.grid-plp { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--space) * 1.5); }
.empty { text-align: center; padding: calc(var(--space) * 8) 0; color: var(--muted); }

/* pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: calc(var(--space) * 3); flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-pill); border: var(--line-h); background: var(--surface); font-weight: 600; color: var(--plum); padding: 0 12px; }
.pagination a:hover { border-color: var(--terracotta); color: var(--terracotta); }
.pagination .is-active { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }
/* Het "…"-teken tussen de weggelaten pagina's is geen knop: geen rand, geen vlak. */
.pagination .is-gap { border: 0; background: none; min-width: 20px; padding: 0; color: var(--muted); font-weight: 500; }

/* Infinite scroll: dit strookje onder de grid vervangt de paginering zodra JS
   het overneemt (app.js zet [hidden] van de nav aan en van dit blok af). */
.plp-more { display: grid; justify-items: center; gap: 12px; margin-top: calc(var(--space) * 3); }
.plp-more[hidden] { display: none; }
/* .pagination zet display:flex en won daarmee van [hidden]; de paginanummers
   bleven zo onder de infinite scroll staan (23 sep). */
.pagination[hidden] { display: none; }
.plp-more .btn { min-width: 240px; }
.plp-more__status { font-size: var(--step--1); min-height: 1.3em; margin: 0; text-align: center; }

/* --- PDP --- */
.pdp { display: grid; gap: calc(var(--space) * 4); padding-block: calc(var(--space) * 3) calc(var(--space) * 6); }
/* Het kruimelpad is een eigen rij bovenaan i.p.v. een regel in de rechterkolom,
   zodat het op mobiel bóven de foto staat. De negatieve marge haalt de helft van
   de grid-gap weg — 32px onder één tekstregel is te veel dode ruimte. */
.pdp__crumbs { grid-column: 1 / -1; margin-bottom: calc(var(--space) * -2); }
.gallery { display: grid; gap: calc(var(--space) * 1.5); }
.gallery__stage { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius-lg); background: var(--cream-deep); scrollbar-width: none; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow-sm); }
.gallery__stage::-webkit-scrollbar { display: none; }
/* max-height: zonder cap vult een 1/1-foto op een telefoon veel scherm bij
   first load, waardoor titel en prijs onder de vouw verdwijnen. 52vh laat de
   koopinfo meelopen. Vervalt weer op desktop (zie min-width: 900px). */
.gallery__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; max-height: 52vh; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Per-product overlay onderaan de eerste foto (bewerkbaar in /beheer/producten). */
.gallery__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1.2;
  color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(24,16,18,.35); pointer-events: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(to top, rgba(43,30,34,.74), rgba(43,30,34,.32) 55%, rgba(43,30,34,0)); }
.gallery__dots { display: flex; justify-content: center; gap: 8px; }
.gallery__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; padding: 0; transition: transform var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease); }
.gallery__dots button.is-active { background: var(--terracotta); transform: scale(1.35); }
/* Miniaturen staan nu ALTIJD, ook op een telefoon: daar als horizontale rij
   onder de foto (een stuk of vijf passen er zonder te scrollen), op desktop als
   kolom ernaast — zie de regel in het responsive-blok onderaan. De bolletjes
   zijn eruit; twee navigaties naast elkaar voor dezelfde foto's is er één te
   veel, en miniaturen zeggen meer. */
.gallery__thumbs { display: flex; gap: 8px; }
/* Vijf miniaturen naast elkaar binnen de gutter, met de tussenruimte
   meegerekend. Zijn het er meer, dan scrolt de rij horizontaal door. */
.gallery__thumbs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs button { flex: 0 0 calc((100% - 32px) / 5); aspect-ratio: 1 / 1; width: auto; height: auto;
  border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; background: var(--cream-deep); cursor: pointer; padding: 0; }
.gallery__thumbs button.is-active { border-color: var(--terracotta); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.summary { display: flex; flex-direction: column; gap: calc(var(--space) * 2); }
.summary__brand { font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; }
.summary h1, .summary__title { font-size: var(--step-3); color: var(--plum); margin: 4px 0; }
.summary__title a { color: inherit; }
.summary__title a:hover { color: var(--terracotta); }
.summary__price { display: flex; align-items: baseline; gap: 12px; }
.summary__price .price { font-size: var(--step-2); }
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--muted); }
.stars { color: var(--gold); letter-spacing: 2px; }
.opt { display: flex; flex-direction: column; gap: 10px; }
.opt__label { font-weight: 600; color: var(--plum); font-size: var(--step-0); }
.opt__label span { color: var(--muted); font-weight: 500; }
.opt__row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { border: 2px solid var(--line); background: var(--surface); border-radius: var(--radius-pill); padding: 9px 18px; cursor: pointer; font-weight: 600; color: var(--ink); transition: border-color var(--dur-xs) var(--ease), color var(--dur-xs) var(--ease); }
.pill:hover { border-color: var(--terracotta-soft); }
.pill.is-active { border-color: var(--terracotta); color: var(--terracotta); background: var(--terracotta-wash); }
.pill.is-out { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
/* Bewust géén place-items: center — de kleurstip valt links-boven in de ring en
   de sikkel die overblijft geeft de swatch een maantje. */
.opt__swatch { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; display: grid; }
.opt__swatch .dot { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.opt__swatch.is-active { border-color: var(--terracotta); box-shadow: 0 0 0 2px var(--terracotta-wash); }
.stock { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: var(--step-0); font-weight: 600; }
.stock__status { display: inline-flex; align-items: center; gap: 8px; }
.stock__delivery { font-size: var(--step--1); font-weight: 500; color: var(--muted); }
.stock--in { color: var(--sage); }
.stock--low { color: var(--terracotta); }
.stock--out { color: var(--muted); }
/* flex: 0 0 auto: bolletje blijft rond, ook als de tekst ernaast afbreekt. */
.stock .dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.qty { display: inline-flex; align-items: center; border: var(--line-h); border-radius: var(--radius-pill); overflow: hidden; }
.qty button { width: 42px; height: 46px; border: 0; background: var(--surface); font-size: var(--step-1); color: var(--plum); cursor: pointer; }
.qty button:hover { background: var(--terracotta-wash); }
.qty input { width: 44px; text-align: center; border: 0; background: transparent; font: 600 var(--step-0) var(--font-body); }
/* De knop stond eerst op een inline `style="flex:1"`, en dat is `flex: 1 1 0%`
   met min-width:auto — hij kon dus niet krimpen onder "In winkelwagen" plus zijn
   padding en schoof op smalle telefoons voorbij de rechterrand. Nu: basis 180px
   met wrap, zodat hij op krappe schermen netjes op een eigen regel valt. */
.buybar { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.buybar .btn { flex: 1 1 180px; min-width: 0; }
/* --- Beoordelingenstrook (PDP) ---
   Eén regel met een transparante PNG die in /beheer/content wordt geüpload.
   De hoogte staat vast en de breedte volgt: zo bepaalt het aangeleverde bestand
   niet hoe hoog de regel wordt. Links uitgelijnd, net als de titel eronder. */
/* Gecentreerd en groter (23 sep); de negatieve marge trekt de flex-gap van
   .summary eronder weg zodat de regel smal blijft. Het beeld wordt bij upload
   bijgesneden tot de inkt, dus 28px is echt de hoogte van de sterren. */
.trustline { display: flex; justify-content: center; align-items: center; margin-bottom: calc(var(--space) * -1.25); }
.trustline img { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain; }

/* --- Prijs klein onder de titel ---
   Op de actiepagina draagt de pakketkeuze het bedrag; de prijs boven staat er
   als referentie en hoeft dus niet op --step-2 te schreeuwen. */
.summary__price--sm .price { font-size: var(--step-1); }

/* --- Vier vinkjes onder de prijs --- */
.checklist { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--step-0); color: var(--ink); line-height: 1.4; }
.checklist .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--sage); stroke-width: 2.4; }

/* --- Pakketkeuze (1 of 2 kussens) ---
   Radio links, miniatuur ernaast, naam en prijs rechts. De hele doos is het
   klikvlak (het is een <label>), dus de radio hoeft niet geraakt te worden.
   De echte <input> is verborgen maar blijft in de tabvolgorde staan; het
   zichtbare rondje is .pack__radio en volgt hem met :checked. */
.packs { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.packs__legend { padding: 0; margin-bottom: 2px; font-weight: 700; color: var(--plum); font-size: var(--step-0); }
.pack { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--surface); transition: border-color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease); }
.pack:hover { border-color: var(--terracotta-soft); }
.pack.is-active { border-color: var(--terracotta); box-shadow: var(--shadow-sm); }
/* De input blijft bedienbaar met het toetsenbord maar is onzichtbaar; het
   zichtbare rondje ernaast doet het werk. */
.pack input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pack__radio { flex: none; width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; }
.pack__radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--terracotta); transform: scale(0); transition: transform var(--dur-sm) var(--ease); }
.pack.is-active .pack__radio, .pack input:checked ~ .pack__radio { border-color: var(--terracotta); }
.pack.is-active .pack__radio::after, .pack input:checked ~ .pack__radio::after { transform: scale(1); }
.pack input:focus-visible ~ .pack__radio { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.pack__thumb { position: relative; flex: none; width: 54px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; background: var(--cream-deep); }
.pack__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Twee kussens: dezelfde foto twee keer, de achterste iets verschoven. Er
   bestaat geen productfoto met twee exemplaren erop, en een gestapeld paar
   leest sneller als "twee" dan een cijfer in de hoek. */
.pack__thumb--double { overflow: visible; }
.pack__thumb--double img { position: absolute; border-radius: var(--radius-sm); }
.pack__thumb-back { inset: 0 8px 8px 0; width: calc(100% - 8px); height: calc(100% - 8px); opacity: .85; }
.pack__thumb-front { inset: 8px 0 0 8px; width: calc(100% - 8px); height: calc(100% - 8px); box-shadow: -2px -2px 6px -2px rgba(74,44,64,.3); }
.pack__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pack__name { font-weight: 700; color: var(--plum); font-size: var(--step-0); }
.pack__price { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 700; color: var(--terracotta); font-size: var(--step-1); }
.pack__price .price--was { font-size: var(--step--1); font-weight: 500; }
/* De pil hangt half over de bovenrand, rechts — herkenbaar uit de gele pil op
   de productfoto's. translateY(-50%) zet hem precies op de rand. */
.pack__pill { position: absolute; top: 0; right: 12px; transform: translateY(-50%); z-index: 2; }
.pack--deal { margin-top: 6px; }

/* De 1+1-pil op de grote productfoto, zelfde hoek als op de tegels. */
.promo-pill--media { position: absolute; z-index: 2; left: 14px; top: 14px; }

/* Zonder aantalkiezer mag de koopknop de volle breedte pakken. */
.buybar--single { display: block; }
.buybar--single .btn { width: 100%; }

.usp-strip { display: grid; gap: 10px; padding: calc(var(--space) * 2); background: var(--plum-wash); border-radius: var(--radius); }
.usp-strip div { display: flex; align-items: center; gap: 10px; font-size: var(--step-0); color: var(--plum); }
.usp-strip .icon { width: 20px; height: 20px; color: var(--terracotta); flex: none; }

.accordion { border-top: var(--line-h); }
.accordion summary { list-style: none; cursor: pointer; padding: calc(var(--space) * 2) 0; font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); display: flex; justify-content: space-between; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--terracotta); }
.accordion[open] summary::after { content: "–"; }
.accordion__body { padding-bottom: calc(var(--space) * 2); color: var(--ink); }
.spectable { width: 100%; border-collapse: collapse; }
.spectable th, .spectable td { text-align: left; padding: 10px 0; border-bottom: var(--line-h); font-size: var(--step-0); vertical-align: top; }
.spectable th { color: var(--muted); font-weight: 500; width: 42%; }

/* sticky mobile add-to-cart */
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(8px); border-top: var(--line-h); padding: 10px var(--gutter); display: flex; align-items: center; gap: 12px; box-shadow: 0 -10px 30px -20px rgba(74,44,64,.5); }
.sticky-buy .price { font-size: var(--step-1); }
.sticky-buy__price { display: flex; align-items: baseline; gap: 8px; }
.sticky-buy .price--was { font-size: var(--step--1); }
.sticky-buy .btn { flex: 1; }

/* --- Brand / USP block --- */
.brandblock { display: grid; gap: calc(var(--space) * 3); }
.brandblock__lede { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.32; max-width: 30ch; }
.usp-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--space) * 2.5); margin-top: calc(var(--space) * 2); }
.usp { padding-top: calc(var(--space) * 2); position: relative; }
.usp::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 3px; background: var(--terracotta); margin-bottom: calc(var(--space) * 1.5); }
.section--plum .usp::before { background: var(--terracotta-soft); }
.usp h4 { margin: 0 0 4px; font-family: var(--font-body); font-weight: 700; }
.usp p { margin: 0; color: var(--muted); font-size: var(--step-0); }
.section--plum .usp p { color: rgba(255,255,255,.75); }

/* --- Search --- */
/* Stond als inline `style="padding:… 0 …"` op de sectie zelf — en inline wint van
   elke stylesheet, dus ook van het gutter-vangnet. Vandaar deze klasse. */
.searchpage { padding-block: calc(var(--space) * 4) calc(var(--space) * 7); }
/* Een <input> heeft van zichzelf een breedte van ~20 tekens; als flexitem kon hij
   daardoor niet krimpen en duwde hij de zoekknop van het scherm af. */
.searchbar { display: flex; flex-wrap: wrap; gap: 10px; margin: calc(var(--space) * 3) 0; }
.searchbar input { flex: 1 1 200px; min-width: 0; border: var(--line-h); border-radius: var(--radius-pill); padding: 15px 22px; font: 500 var(--step-1) var(--font-body); background: var(--surface); color: var(--ink); }
.searchbar input:focus { outline: 3px solid var(--terracotta-soft); border-color: transparent; }

/* --- Placeholder / errors --- */
.placeholder { padding: calc(var(--space) * 8) 0; text-align: center; }
.placeholder .tag, .tag { display: inline-block; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--plum); background: var(--plum-wash); padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: calc(var(--space) * 2); font-weight: 600; }
.placeholder p { color: var(--muted); max-width: 48ch; margin-inline: auto; }
.error-page { text-align: center; padding-block: calc(var(--space) * 12); }
.error-page .code { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 8rem); color: var(--terracotta); line-height: 1; }

/* --- Footer (plum) --- */
.site-footer { background: var(--plum); color: #fff; margin-top: 0; padding: calc(var(--space) * 7) 0 calc(var(--space) * 4); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--space) * 4); }
.footer-col h4 { font-family: var(--font-body); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta-soft); margin: 0 0 calc(var(--space) * 2); }
.footer-col a { display: block; padding: 5px 0; opacity: .85; font-size: var(--step-0); }
.footer-col a:hover { opacity: 1; color: var(--terracotta-soft); }
/* margin-bottom reserveert de overhang van de sikkel; zonder dit loopt de
   slogan eronder dwars door het merk heen. */
.footer-brand .brand { color: #fff; margin-bottom: .642em; }
/* In de footer is het hele merk wit — ook de sterretjes (i.p.v. terracotta). */
.footer-brand .bl__spark { fill: #fff; }
/* De slogan stond vroeger als <small> in het woordmerk; sinds het lockup (maan +
   woord) staat hij als eigen regel eronder, met dezelfde stijl als voorheen. */
.footer-tagline { font-family: var(--font-display); font-style: italic; font-size: 0.8125rem; font-weight: 500; margin: 3px 0 0; }
.footer-brand .footer-tagline { color: var(--terracotta-soft); }
.footer-brand p { color: rgba(255,255,255,.7); max-width: 34ch; }
/* WhatsApp-contactknop in de footer. Twee dingen die hier moeten:
   1. display:inline-flex terugzetten. `.footer-col a` zet display:block, dus
      zonder deze regel wordt de knop een balk over de hele kolombreedte en
      staan icoon en tekst niet meer naast elkaar.
   2. Wit vlak in plaats van WhatsApp-groen. Groen mét witte tekst haalt maar
      2,2:1 contrast en zakt daarmee ruim onder AA; een witte pil op de plum
      footer haalt het ruim, en het icoon draagt de herkenning al.
   Daarom hangen de regels aan `.footer-col .btn--whatsapp`: `.footer-col a`
   weegt zwaarder dan `.btn--whatsapp` alleen, en won tot 26 sep gewoon
   (display:block, padding 5px 0, opacity .85: icoon los linksboven). */
.btn--whatsapp,
.footer-col .btn--whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--plum);
  padding: 13px 24px; font-size: var(--step--1); line-height: 1; opacity: 1;
}
.btn--whatsapp:hover,
.footer-col .btn--whatsapp:hover { background: #fff; color: var(--plum); opacity: 1; }
.btn--whatsapp .wa-icon { width: 18px; height: 18px; color: #25D366; flex: none; }
.footer-bottom { margin-top: calc(var(--space) * 4); padding-top: calc(var(--space) * 3); border-top: 1px solid rgba(255,255,255,.16); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--step--1); color: rgba(255,255,255,.7); }
/* Handelsgegevens krijgen een eigen regel onder copyright + betaalmethoden;
   flex-basis 100% dwingt de wrap af zodat het geen derde kolom wordt. */
.footer-legal { flex-basis: 100%; color: rgba(255,255,255,.55); }

/* Betaalmethode-iconen. De SVG's hebben een eigen witte kaartvorm, dus ze
   staan los op de donkere footer zonder extra achtergrond. */
.payment-icons { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.payment-icons li { display: flex; }
.payment-icons img { display: block; width: 38px; height: 24px; border-radius: 3px; }
/* Zelfde lijst onder de afrekenknop in het mandje: daar staat hij op de lichte
   kaart en gecentreerd onder de knop, dus met een randje om de witte logo's
   niet in de crème te laten oplossen. */
.payment-icons--cart { justify-content: center; gap: 7px; margin-top: -2px; }
.payment-icons--cart img { box-shadow: 0 0 0 1px color-mix(in srgb, var(--plum) 10%, transparent); }

/* --- Skeleton shimmer --- */
.skeleton, .ph-shimmer { position: relative; overflow: hidden; background: var(--cream-deep); }
.skeleton::after, .ph-shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: shimmer 1.05s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skel-card { border-radius: var(--radius-lg); overflow: hidden; border: var(--line-h); background: var(--surface); }
.skel-card .skel-media { aspect-ratio: 1/1; }
.skel-card .skel-line { height: 12px; border-radius: 6px; margin: 12px 16px; }
.skel-card .skel-line.s { width: 40%; }
/* image fade-in: img starts transparent, .is-loaded reveals it */
.card__media img.card__img--main { opacity: 0; }
.card__media img.card__img--main.is-loaded { opacity: 1; }
.is-fetching { opacity: .5; transition: opacity var(--dur-sm) var(--ease); pointer-events: none; }

/* --- Toast --- */
.toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--plum); color: #fff; padding: 14px 18px; border-radius: var(--radius); box-shadow: var(--shadow-lift); display: flex; align-items: center; gap: 12px; max-width: 340px; }
.toast .icon { color: var(--terracotta-soft); }

/* --- Swup page transitions --- */
/* Swup wacht op deze transitie voordat hij de nieuwe pagina inhangt, dus de duur
   telt hier twee keer: uit én in. Op .32s kostte elke klik ~640ms bovenop het
   netwerk; dat is waar de site traag van voelde. De weg-animatie mag korter dan
   de kom-animatie: de klant heeft al geklikt en wil vooruit, niet netjes weg. */
#swup { transition: opacity var(--dur-page) var(--ease), transform var(--dur-page) var(--ease); }
html.is-leaving #swup { transition-duration: .1s; }
html.is-animating #swup { opacity: 0; transform: translateY(6px); }
html.is-rendering #swup { opacity: 0; }

/* --- Cart (Cart cell) --- */
.cart-title { font-size: var(--step-3); margin-bottom: calc(var(--space) * 3); }
.qty--sm button { width: 34px; height: 38px; font-size: var(--step-0); }
.qty--sm input { width: 40px; }

.cart-empty { text-align: center; padding: calc(var(--space) * 5) 0; }
.cart-empty__lede { font-family: var(--font-display); font-size: var(--step-2); color: var(--plum); margin-bottom: 6px; }
.cart-empty .btn { margin-top: calc(var(--space) * 3); }

/* Verlanglijst */
.wishlist__note { margin-top: calc(var(--space) * 3); font-size: var(--step--1); text-align: center; }

.cart-grid { display: grid; gap: calc(var(--space) * 4); align-items: start; }
.cart-lines { display: flex; flex-direction: column; gap: calc(var(--space) * 2); }

.cart-line { display: grid; grid-template-columns: 88px 1fr auto; gap: calc(var(--space) * 2);
  padding: calc(var(--space) * 2); background: var(--surface); border: var(--line-h);
  border-radius: var(--radius-lg); }
.cart-line__media { display: block; width: 88px; aspect-ratio: 1 / 1; border-radius: var(--radius);
  overflow: hidden; background: var(--cream-deep); }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-line__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); line-height: 1.15; }
.cart-line__title:hover { color: var(--terracotta); }
.cart-line__meta { font-size: var(--step--1); }
.cart-line__unit { font-size: var(--step--1); }
.cart-line__controls { display: flex; align-items: center; gap: calc(var(--space) * 2); margin-top: auto; padding-top: 8px; }
.cart-line__qty { display: flex; align-items: center; gap: 10px; }
.cart-line__update { background: none; border: 0; color: var(--terracotta); font: 600 var(--step--1) var(--font-body); cursor: pointer; text-decoration: underline; padding: 4px; }
.cart-line__remove button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--muted); cursor: pointer; font: 500 var(--step--1) var(--font-body); padding: 4px; }
.cart-line__remove button:hover { color: var(--terracotta); }
.cart-line__remove .icon { width: 17px; height: 17px; }
.cart-line__total { font-weight: 700; color: var(--plum); font-size: var(--step-1); text-align: right; white-space: nowrap; align-self: center; }

.cart-summary { background: var(--surface); border: var(--line-h); border-radius: var(--radius-lg);
  padding: calc(var(--space) * 3); display: flex; flex-direction: column; gap: calc(var(--space) * 1.5); }
.cart-summary__head { font-size: var(--step-2); margin: 0 0 6px; }
.cart-summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--step-0); }
/* Het totaal is het getal waar de klant op afgaat; in de referentie draagt dat
   dan ook het meeste gewicht van het hele blok. Bij een gehaalde mijlpaal staat
   het bedrag zónder korting er doorgestreept naast, zodat de winst zichtbaar is
   op de plek waar hij telt. */
.cart-summary__row--total { align-items: baseline; padding-top: 4px; font-size: var(--step-1); font-weight: 600; color: var(--plum); }
.cart-summary__row--total > :last-child { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.cart-summary__row--total strong { font-size: var(--step-2); font-weight: 700; }
.cart-summary__was { font-size: var(--step-0); font-weight: 500; text-decoration-thickness: 1.5px;
  color: color-mix(in srgb, var(--plum) 45%, transparent); }
/* Sage = de "gelukt"-kleur van het huis (tokens.css). Een korting is winst voor
   de klant, geen waarschuwing, dus bewust niet terracotta. */
.cart-summary__row--discount,
.minicart__row--discount { color: color-mix(in srgb, var(--sage) 88%, #000); font-weight: 600; }
.cart-summary .btn { margin-top: 10px; }
.cart-summary__note { font-size: var(--step--1); }
.cart-summary__continue { color: var(--terracotta); font-weight: 600; font-size: var(--step-0); margin-top: 4px; }
.cart-summary__continue:hover { color: var(--terracotta-strong); }

/* Beloningsbalk (partials/cart-milestones.php) — één spoor met een knoop per
   mijlpaal, gedeeld door de winkelwagenpagina en de minicart-drawer. Verving
   7 aug 2026 de losse .cart-free- en .cart-gift-balken: twee balken onder
   elkaar lazen als twee losse acties, terwijl de klant maar één vraag heeft
   ("wat levert doorwinkelen me op?"). Verzending staat er bewust niet meer op.

   Knopen en labels staan absoluut op hun plek op het spoor. De schaal loopt over
   "breedte min één knoopdiameter" (--knot) met een halve knoop marge aan beide
   kanten: een knoop op 100% stond anders met zijn hart op de rand en hing dus
   half buiten de kaart.

   --rail houdt het spoor extra van de kaartrand af. Dat is geen sier: de laatste
   knoop staat aan het eind van de schaal en zijn label wil daar gecentreerd
   onder hangen. Zonder die marge zou dat label buiten de kaart vallen en moest
   het rechts uitgelijnd worden — precies wat het scheef onder de knoop zette.
   Spoor én labelrij delen dezelfde marge, anders lopen hun assen uiteen. */
/* container-type maakt de kaart zelf de maatstaf voor zijn labels. Dat moet ook:
   de minicart-drawer is op élk scherm smaller dan de winkelwagenpagina, dus een
   @media-vraag over de vensterbreedte stelt hier de verkeerde vraag. */
.rewards { --knot: 28px; --rail: 13px; --pad: 16px; container-type: inline-size;
  background: var(--plum-wash); border-radius: var(--radius); padding: var(--pad) var(--pad) 14px; }
.rewards.is-complete { background: var(--sage-wash, color-mix(in srgb, var(--sage) 16%, transparent)); }
.rewards__head { margin: 0 0 18px; font-size: var(--step--1); color: var(--plum); text-align: center; line-height: 1.35; }

.rewards__track { position: relative; height: 6px; margin-inline: var(--rail);
  border-radius: 999px; background: color-mix(in srgb, var(--plum) 14%, transparent); }
.rewards__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: var(--terracotta); transition: width var(--dur-lg) var(--ease); }

.rewards__knot { position: absolute; top: 50%; width: var(--knot); height: var(--knot);
  margin: calc(var(--knot) / -2) 0 0 calc(var(--knot) / -2);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cream, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--plum) 14%, transparent);
  color: color-mix(in srgb, var(--plum) 45%, transparent); transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.rewards__knot.is-reached { color: #fff; background: var(--terracotta); box-shadow: 0 0 0 2px var(--terracotta); }
.rewards__knot .icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.rewards__knot.is-reached .icon { stroke-width: 2.1; }

/* Labels hangen gecentreerd onder hun knoop — állemaal, ook de laatste. Ze delen
   de --rail-marge met het spoor, dus staan hun assen gelijk; de tekst mag de
   rail en de kaartpadding in lopen, dat is precies waar die ruimte voor is. */
.rewards__labels { position: relative; height: 4.9em; margin-top: 14px; margin-inline: var(--rail); }
/* Twee grenzen, en de smalste wint.

   1. De ruimte rechts van de laatste knoop is rail + halve knoop + de padding van
      het vlak. Twee keer dat bedrag is precies wat een gecentreerd label daar nog
      kwijt kan zonder buiten het vlak te steken.
   2. Met meer dan twee knopen is niet de kaartrand de krapste maat maar de buur:
      de knoopafstand is (spoor - knoop) / --steps, en twee halve labels naast
      elkaar vullen die volledig. 6px eraf houdt er lucht tussen.

   Met twee knopen wint grens 1 (zoals vóór 11 aug), met drie grens 2. Wat langer
   is breekt naar een volgende regel — vandaar de 4.9em hierboven, genoeg voor
   bedrag + twee regels tekst + een note. */
/* max-width begrenst de dóós, niet de inkt: "verzending" is één woord en stak er
   op een smalle kaart gewoon uit, waardoor twee labels elkaar overlapten terwijl
   hun rechthoeken netjes uit elkaar stonden. hyphens breekt het woord netjes af
   (lang="nl" staat op <html>), break-word is het vangnet voor het geval de
   browser geen woordafbreking heeft. */
.rewards__label { position: absolute; top: 0; transform: translateX(-50%);
  width: max-content; text-align: center; line-height: 1.3;
  hyphens: auto; overflow-wrap: break-word;
  max-width: min(
    calc(2 * (var(--rail) + var(--knot) / 2 + var(--pad))),
    calc((100% - var(--knot)) / var(--steps, 2) - 6px)
  ); }
/* Smalle telefoons: iets meer spoor door de rail te verkleinen. Dit blijft een
   @media-vraag omdat een kaart zijn eigen containervraag niet kan beantwoorden. */
@media (max-width: 380px) {
  .rewards { --rail: 8px; }
}
.rewards__amount { display: block; font-size: var(--step--1); font-weight: 700; color: var(--plum); }
.rewards__what,
.rewards__note { display: block; font-size: 11px; color: color-mix(in srgb, var(--plum) 62%, transparent); }
.rewards__what { font-weight: 600; color: color-mix(in srgb, var(--plum) 78%, transparent); }
.rewards__label.is-reached .rewards__amount { color: var(--terracotta-strong); }

/* LET OP: alles hieronder moet ná de drie basisregels blijven staan. Een
   @container-blok wint niet op specificiteit maar op vololgorde, dus boven de
   basisregels gezet doet het niets — precies de val waar dit eerst in liep.

   Smalle kaart: met drie knopen krijgt elk label nog maar een derde van het
   spoor. Eerst in twee trappen kleinere tekst, breed naar smal (ook die volgorde
   telt: beide queries matchen op een smalle kaart en de laatste wint). */
@container (max-width: 420px) {
  .rewards__what, .rewards__note { font-size: 10.5px; }
}
@container (max-width: 330px) {
  .rewards__amount { font-size: 12px; }
  .rewards__what, .rewards__note { font-size: 9.5px; }
}
/* Onder deze breedtes passen er geen drie omschrijvingen meer naast elkaar — een
   320px-telefoon geeft hier een kaart van ongeveer 230px. De kop boven de balk
   noemt het eerstvolgende doel al voluit en het icoon in de knoop zegt de rest,
   dus valt eerst de waardevermelding weg en daarna de omschrijving. Het bedrag
   blijft altijd staan; dát is waar de klant naar zoekt. De labelrij krimpt mee,
   anders blijft er een gat onder de balk staan. */
@container (max-width: 300px) {
  .rewards__note { display: none; }
  .rewards__labels { height: 3.9em; }
}
@container (max-width: 265px) {
  .rewards__what { display: none; }
  /* nowrap: zonder dit brak "100,00" middenin af tot "100," / "00" zodra het
     label smaller werd dan het bedrag. Een bedrag mag nooit over twee regels —
     liever een fractie buiten zijn doos, want de 6px tussenruimte vangt dat op. */
  .rewards__amount { font-size: 10.5px; white-space: nowrap; }
  .rewards__labels { height: 1.7em; }
}

.cart-summary__row--muted { color: color-mix(in srgb, var(--plum) 62%, transparent); font-size: var(--step--1); }
.cart-line__media, .minicart-line__media { position: relative; }
.cart-line__giftflag { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--terracotta); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
.cart-line--gift, .minicart-line--gift { position: relative; }
.co-line__giftflag { display: inline-block; padding: 1px 6px; border-radius: 999px; background: var(--terracotta-wash);
  color: var(--terracotta-strong); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }

/* JS-progressive: hide the manual "Bijwerken" button when JS auto-submits qty */
.js .cart-line__update { display: none; }

/* --- Checkout (Checkout cell) --- */
.container--narrow { max-width: 760px; }
.checkout-alert { background: var(--terracotta-wash); color: var(--terracotta-strong); border-radius: var(--radius); padding: 12px 16px; margin-bottom: calc(var(--space) * 3); font-weight: 600; }
.checkout-grid { display: grid; gap: calc(var(--space) * 4); align-items: start; }
.checkout-main { display: flex; flex-direction: column; gap: calc(var(--space) * 3); }
.checkout-block { border: var(--line-h); border-radius: var(--radius-lg); padding: calc(var(--space) * 3); margin: 0; background: var(--surface); }
.checkout-block legend { font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); padding: 0 8px; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--plum); }
.field input, .field select, .checkout-block select {
  width: 100%; padding: 12px 14px; border: var(--line-h); border-radius: var(--radius);
  background: var(--bg); font: 500 var(--step-0) var(--font-body); color: var(--ink); }
.field input:focus, .field select:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-wash); }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field--grow { flex: 1 1 55%; }
.field--sm { flex: 1 1 90px; }
.field-error { color: #b3261e; font-size: var(--step--1); margin: 2px 0 0; }

.checkout-summary { background: var(--surface); border: var(--line-h); border-radius: var(--radius-lg); padding: calc(var(--space) * 3); display: flex; flex-direction: column; gap: 10px; }
.co-lines { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: var(--line-h); }
.co-line { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; font-size: var(--step--1); align-items: baseline; }
.co-line__qty { color: var(--muted); font-weight: 600; }
.co-line__title { min-width: 0; }
.co-line__price { white-space: nowrap; font-weight: 600; }
.co-total { border-top: var(--line-h); padding-top: 10px; margin-top: 2px; font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); font-weight: 600; }
.co-total span:last-child { color: var(--terracotta); }
.checkout-summary .btn { margin-top: 8px; }

/* --- Order confirmation --- */
.thanks { text-align: center; padding: calc(var(--space) * 4) 0 calc(var(--space) * 3); }
.thanks__badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto calc(var(--space) * 2); }
.thanks__badge .icon { width: 30px; height: 30px; color: #fff; }
.thanks.is-good .thanks__badge { background: #2e7d52; }
.thanks.is-pending .thanks__badge { background: var(--plum); }
.thanks.is-bad .thanks__badge { background: #b3261e; }
.thanks h1 { font-size: var(--step-3); }
.thanks__msg { color: var(--muted); max-width: 46ch; margin: 0 auto calc(var(--space) * 2); }
.thanks__num { font-size: var(--step-0); }
.thanks .btn { margin-top: calc(var(--space) * 2); }
.thanks-detail { display: grid; gap: calc(var(--space) * 3); margin-top: calc(var(--space) * 3); }
.thanks-card { border: var(--line-h); border-radius: var(--radius-lg); padding: calc(var(--space) * 3); background: var(--surface); }
.thanks-card h2 { font-size: var(--step-1); margin-bottom: calc(var(--space) * 2); }
.thanks-address { font-style: normal; line-height: 1.7; }

/* --- Responsive --- */
@media (min-width: 600px) {
  .grid-products { grid-template-columns: repeat(3, 1fr); }
  /* Op een tablet blijft de PLP op twee kolommen, niet drie: de tegel draagt
     een titel, een zin, een prijs én de mandje-knop. */
  .grid-plp { grid-template-columns: repeat(2, 1fr); gap: calc(var(--space) * 2.5); }
  .rail { grid-auto-columns: 42%; }
}
@media (min-width: 680px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (min-width: 900px) {
  .nav { display: flex; }
  .hamburger { display: none; }
  .hero { grid-template-columns: 1.05fr .95fr; align-items: center; gap: calc(var(--space) * 6); padding-block: calc(var(--space) * 9); }
  .hero__title { font-size: clamp(3rem, 5vw, 4.2rem); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tile--wide { grid-column: span 2; }
  .rail { display: grid; grid-auto-flow: initial; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .grid-products { grid-template-columns: repeat(4, 1fr); }
  /* Vanaf 900px komt het filterpaneel van 260px naast de resultaten te staan. Er
     blijft dan te weinig over voor vier kolommen: op 900px zelf werden dat
     kaarten van 118px, waar prijs en mandje-knop overheen elkaar heen liepen.
     Twee kolommen tot 1100px, daarboven drie. */
  .grid-plp { grid-template-columns: repeat(2, 1fr); }
  .plp { grid-template-columns: 260px 1fr; align-items: start; gap: calc(var(--space) * 4); }
  .plp__head { grid-column: 1 / -1; }
  .filter-toggle { display: none; }
  /* Sorteerbalk boven de productkolom, filterkolom begint op dezelfde hoogte. */
  .plp--sortbar > .plp__toolbar { grid-column: 2; grid-row: 2; margin: 0; justify-content: flex-end; }
  .plp--sortbar > .facets { grid-column: 1; grid-row: 2 / span 2; }
  .plp--sortbar > .plp__results { grid-column: 2; grid-row: 3; }
  .plp__toolbar--mobile { display: none; }
  .facets { display: block; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
  .cart-grid { grid-template-columns: 1fr 340px; }
  .cart-summary { position: sticky; top: 90px; }
  .checkout-grid { grid-template-columns: 1fr 360px; }
  .checkout-summary { position: sticky; top: 90px; }
  .thanks-detail { grid-template-columns: 1fr 1fr; }
  .pdp { grid-template-columns: 1.05fr .95fr; gap: calc(var(--space) * 6); align-items: start; }
  .gallery { position: sticky; top: 90px; grid-template-columns: 80px 1fr; }
  .gallery__slide { max-height: none; }
  .gallery__stage { grid-column: 2; }
  .gallery__dots { grid-column: 2; }
  .gallery__thumbs { display: flex; flex-direction: column; grid-column: 1; grid-row: 1 / 3; overflow: visible; }
  .gallery__thumbs button { flex: 0 0 auto; width: 68px; height: 68px; border-radius: var(--radius); }
  .sticky-buy { display: none; }
}
@media (min-width: 1100px) {
  .grid-plp { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  #swup { transition: none !important; }
}

/* ---------- Account (Customer cell) ---------- */
.auth-card { max-width: 480px; margin: 0 auto; }
.auth-card .cart-title { text-align: center; }
.auth-form { margin-top: calc(var(--space) * 2); }
.auth-form .btn { margin-top: 6px; }
.auth-alt { text-align: center; margin-top: calc(var(--space) * 2); font-size: var(--step--1); }
.auth-alt a { color: var(--terracotta-strong); font-weight: 600; }
.auth-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: var(--step--1); color: var(--ink); cursor: pointer; }
.auth-consent input { margin-top: 3px; accent-color: var(--terracotta); }
.auth-forgot { margin: 2px 0 0; font-size: var(--step--1); text-align: right; }
.auth-forgot a { color: var(--muted); }
.auth-forgot a:hover { color: var(--terracotta-strong); }

.acct-flash { background: var(--plum-wash); color: var(--plum); border-radius: var(--radius); padding: 12px 16px; margin-bottom: calc(var(--space) * 3); font-weight: 600; }

.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acct-head .cart-title { margin-bottom: 0; }
.acct-placed { margin: 6px 0 0; font-size: var(--step--1); }
.acct-logout { background: none; border: var(--line-h); border-radius: var(--radius-pill); padding: 8px 16px; font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--plum); cursor: pointer; }
.acct-logout:hover { border-color: var(--terracotta); color: var(--terracotta-strong); }
.acct-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: var(--step--1); }
.acct-dl dt { font-weight: 600; color: var(--plum); }
.acct-note { margin-top: 14px; font-size: var(--step--1); }

.acct-orders { display: flex; flex-direction: column; gap: 10px; }
.acct-order { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px; border: var(--line-h); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color var(--dur-xs) var(--ease); }
.acct-order:hover { border-color: var(--terracotta); }
.acct-order__num { font-weight: 700; color: var(--plum); }
.acct-order__date { font-size: var(--step--1); }
.acct-order__total { margin-left: auto; font-weight: 700; }

.acct-badge { display: inline-block; padding: 3px 11px; border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 600; line-height: 1.5; }
.acct-badge.is-open { background: var(--terracotta-wash); color: var(--terracotta-strong); }
.acct-badge.is-good { background: var(--plum-wash); color: var(--plum); }
.acct-badge.is-off { background: var(--cream-deep); color: var(--muted); }

.acct-track { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: calc(var(--space) * 3); padding: 16px 20px; background: var(--plum-wash); border-radius: var(--radius-lg); }
.acct-track p { margin: 0; }

/* ---------------- Cookie-consent banner (Analytics cell) ---------------- */
.consent { position: fixed; inset: auto 0 0 0; z-index: 95; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.consent[hidden] { display: none; }
.consent__card { pointer-events: auto; max-width: 560px; margin: 0 auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: calc(var(--space) * 3); border: var(--line-h); }
.consent__title { font-size: var(--step-1); margin: 0 0 8px; }
.consent__text { margin: 0 0 14px; font-size: var(--step--1); color: var(--muted); }
.consent__text a { text-decoration: underline; color: var(--plum); }
.consent__prefs { margin: 0 0 14px; }
.consent__prefs summary { cursor: pointer; font-size: var(--step--1); font-weight: 600; color: var(--plum); }
.consent__opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0 0; font-size: var(--step--1); color: var(--ink); }
.consent__opt input { margin-top: 3px; flex: none; accent-color: var(--terracotta); }
.consent__save { margin-top: 12px; padding: 9px 18px; font-size: var(--step--1); }
.consent__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent__actions .btn { flex: 1 1 auto; padding: 13px 18px; }

/* Footer "Cookie-instellingen": a button that reads like the footer links. */
.footer-linkbtn { display: block; padding: 5px 0; opacity: .85; font-size: var(--step-0); background: none; border: 0; color: inherit; font-family: inherit; cursor: pointer; text-align: left; }
.footer-linkbtn:hover { opacity: 1; color: var(--terracotta-soft); }

/* ---------------- Statische pagina's (/pagina/*, Content cell) ---------------- */
.legal { max-width: 780px; padding-block: calc(var(--space) * 6) calc(var(--space) * 8); }
.legal__head { margin-bottom: calc(var(--space) * 4); }
.legal__head h1 { color: var(--plum); margin-bottom: 6px; }
.legal h2 { color: var(--plum); font-size: var(--step-1); margin: calc(var(--space) * 4) 0 calc(var(--space) * 1.5); }
.legal p, .legal li { max-width: 72ch; line-height: 1.7; }
.legal p { margin-bottom: var(--space); }
.legal ul { padding-left: 1.2rem; margin: var(--space) 0 calc(var(--space) * 2); }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--terracotta); text-decoration: underline; }
/* .legal a { text-decoration: underline } zou anders elke .btn binnen een
   juridische/contentpagina (bv. de WhatsApp/mail-knoppen op /pagina/contact)
   als onderstreepte tekstlink laten ogen in plaats van als pil-knop. */
.legal a.btn { text-decoration: none; color: #fff; }
.legal a.btn.btn--ghost { color: var(--plum); }
.legal a.btn.btn--ghost:hover { color: #fff; }
.contact-options { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 3); margin: calc(var(--space) * 3) 0 calc(var(--space) * 4); }
.contact-option__hint { margin: 8px 0 0; }
/* Bedrijfsgegevens als label/waarde-grid; op mobiel stapelt hij naar één kolom. */
.company-details { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 6px 20px; margin: var(--space) 0 calc(var(--space) * 2); }
.company-details dt { color: var(--plum); font-weight: 600; }
.company-details dd { margin: 0; }
@media (max-width: 560px) { .company-details { grid-template-columns: 1fr; gap: 2px; } .company-details dd { margin-bottom: 10px; } }
.legal__tablewrap { overflow-x: auto; margin: calc(var(--space) * 2) 0; }
.legal table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--step--1); }
.legal th, .legal td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(74, 44, 64, .14); vertical-align: top; }
.legal th { color: var(--plum); font-weight: 600; }

/* --- Outlet (/outlet) ------------------------------------------------------
   Eén kolom, geen facetten-sidebar: de outlet gebruikt bewust .container en
   NIET .plp, want die laatste is op desktop een tweekolomsraster met een
   filterkolom van 260px die hier leeg zou blijven staan. De koppen erven wel
   van .plp__head, zodat de typografie identiek is aan een categoriepagina. */
/* De outlet gebruikt .plp (tweekolomsraster met filterkolom), dus padding en
   grid komen daarvandaan. Alleen de kop wijkt af: die is één regel zonder
   introtekst en heeft de ruime ondermarge van een categoriekop niet nodig. */
.outlet__head { margin-bottom: calc(var(--space) * 1.5); }
.outlet__head h1 { color: var(--terracotta); text-transform: uppercase; letter-spacing: .01em; }

/* Outlet in de navigatie. Geen categorie, dus ook niet hetzelfde gewicht: een
   klein terracotta pilletje zet hem apart zonder te schreeuwen. Alleen op
   desktop; in de drawer is het gewoon een regel als alle andere. */
.nav__outlet { color: var(--terracotta); font-weight: 600; }
.nav__outlet:hover { color: var(--terracotta-strong); }
.drawer__outlet { color: var(--terracotta); font-weight: 600; }

/* --- Gutter-vangnet (moet het LAATSTE blok van dit bestand blijven) --------
   Zie de toelichting bij .container bovenaan. Klassen die samen met .container
   op één element staan hebben dezelfde specificiteit, dus één `padding: X 0`
   verderop in dit bestand sloopt stilletjes de horizontale marge van een hele
   pagina — precies wat er op de PDP, de categoriepagina's en in de header was
   gebeurd. Deze regel staat expres als laatste en zet de gutter dus altijd
   terug, ook als er later een nieuwe sectieklasse bijkomt die de shorthand
   gebruikt. Wil je een blok bewust van rand tot rand? Zet .container--bleed
   erop (of gebruik .rail, die breekt met een negatieve marge uit).            */
.container { padding-inline: var(--gutter); }
.container--bleed { padding-inline: 0; }

/* Tweede lek: een grid-item is standaard min-width:auto, dus één lang woord
   ("Dekbedovertrek" in een productkaart) rekt zijn 1fr-kolom op en duwt het hele
   raster — inclusief alles eronder — de gutter uit. min-width:0 laat de kolom
   de beschikbare breedte volgen en het woord afbreken i.p.v. andersom. */
.pdp > *, .plp > *, .plp__results > *,
.grid-products > *, .grid-plp > *, .tiles > *, .rail > * { min-width: 0; }

/* Onder ~340px (iPhone SE-formaat) is een halve kolom te smal voor welke
   leesbare productnaam dan ook: daar één kaart per rij, dan blijft alles heel.
   Staat hier onderaan omdat .grid-plp verderop in het bestand nog twee kolommen
   zet en bij gelijke specificiteit de laatste regel wint. */
@media (max-width: 340px) { .grid-products, .grid-plp { grid-template-columns: 1fr; } }

/* --- Afrekenen, één kolom zonder header (22 sep 2026) ---------------------
   Eigen layout (layout-checkout.php). Alles hangt onder .co zodat de oude
   .co-line-regels van de bedankt- en accountpagina blijven werken. Velden
   hebben alleen een placeholder, geen label: die moet dus goed leesbaar zijn. */
.co-body { background: var(--cream); }
.co { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; }
.co-card { background: var(--surface, #fff); border: var(--line-h); border-radius: var(--radius-lg); padding: 16px; }
.co-order__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.co-order__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); margin: 0; font-weight: 600; }
.co-order__edit { font-size: var(--step--1); color: var(--plum-soft); text-decoration: underline; text-underline-offset: 3px; }
.co .co-lines { list-style: none; margin: 0 0 12px; padding: 0 0 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: var(--line-h); }
.co .co-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: var(--step-0); }
.co .co-line__media { position: relative; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--cream-deep); border: var(--line-h); }
.co .co-line__media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.co .co-line__qty { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--plum); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.co .co-line__body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.co .co-line__title { font-weight: 600; color: var(--plum); line-height: 1.3; }
.co .co-line__meta { font-size: var(--step--1); color: var(--muted); }
.co .co-line__price { font-weight: 600; white-space: nowrap; color: var(--ink); }
.promo-pill--sm { font-size: 10px; padding: 3px 8px; box-shadow: none; }

.co-sum { display: flex; flex-direction: column; gap: 6px; }
.co-sum__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--step--1); color: var(--ink); }
.co-sum__row--discount { color: var(--terracotta-strong); font-weight: 600; }
.co-sum__row--total { margin-top: 6px; padding-top: 10px; border-top: var(--line-h); align-items: baseline;
  font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); font-weight: 600; }
.co-sum__row--total strong { color: var(--terracotta); font-weight: 600; }
.co-sum__was { color: var(--muted); font-size: var(--step-0); font-weight: 400; margin-right: 6px; }

.co-coupon { margin-top: 12px; font-size: var(--step--1); }
.co-coupon summary { cursor: pointer; color: var(--plum); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; width: max-content; }
.co-coupon__form { display: flex; gap: 8px; margin-top: 10px; }
.co-coupon__form input { flex: 1; min-width: 0; }
.co-coupon__form .btn { padding: 10px 16px; font-size: var(--step--1); }
.co-coupon--on { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.co-link { background: none; border: 0; padding: 0; font: inherit; color: var(--plum-soft); text-decoration: underline; cursor: pointer; }
.co-coupon__msg { margin: 8px 0 0; font-size: var(--step--1); color: var(--sage, #5F7A52); font-weight: 600; }
.co-coupon__msg.is-error { color: #b3261e; }

.co-timer { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius); text-align: center;
  background: var(--promo); color: var(--promo-ink); font-size: var(--step--1); font-weight: 600; }
.co-timer strong { font-variant-numeric: tabular-nums; font-weight: 800; }

.co-form { margin-top: 8px; }
.co-h { font-family: var(--font-display); font-size: var(--step-1); color: var(--plum); font-weight: 600; margin: 24px 0 10px; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-row--house { grid-template-columns: 1.3fr 1fr; }
.co-field { margin-bottom: 10px; min-width: 0; }
.co input[type="text"], .co input[type="email"], .co input[type="tel"], .co select {
  width: 100%; height: 50px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--plum) 22%, var(--line));
  border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: 500 16px/1.2 var(--font-body); }
.co input::placeholder { color: color-mix(in srgb, var(--ink) 55%, transparent); opacity: 1; }
.co input:focus, .co select:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-wash); }
.co input[aria-invalid="true"] { border-color: #b3261e; }
.co select { appearance: none; padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A2C40' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; }
.co .field-error { margin-top: 4px; }
.co-pay { margin-top: 14px; height: 54px; font-size: var(--step-0); }
.co .payment-icons { margin-top: 12px; }
.co-note { text-align: center; font-size: var(--step--1); color: var(--muted); margin: 10px 0 0; }
.co-back { display: block; text-align: center; margin-top: 24px; font-size: var(--step--1); color: var(--plum-soft); }
@media (min-width: 700px) { .co { padding-top: 40px; } .co-card { padding: 22px; } }

/* Aantal-stepper (− cijfer +) in winkelwagen en mini-cart; partials/qty-stepper.php */
.js-qty { margin: 0; }
.qty__n { min-width: 34px; text-align: center; font-weight: 700; color: var(--plum); font-variant-numeric: tabular-nums; }
.qty button:disabled { color: var(--muted); cursor: default; background: var(--surface); }
.qty--xs button { width: 30px; height: 32px; font-size: var(--step-0); }
.qty--xs .qty__n { min-width: 26px; font-size: var(--step--1); }
.js-qty.is-busy .qty__n { opacity: .8; }
.minicart-line__qty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* Winkelwagen mobiel: de middenkolom is smal (prijs staat ernaast). De stepper
   krimpt nooit (anders knipt overflow:hidden de + weg); de regel mag afbreken
   en "Verwijderen" wordt op smal scherm alleen het prullenbakje. */
.js-qty { flex-shrink: 0; }
.cart-line__controls { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 560px) {
  .cart-line__controls { gap: 10px; }
  .cart-line__remove span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cart-line__remove .icon { width: 19px; height: 19px; }
}
/* Touch: :hover blijft na een tik "hangen" tot je elders tikt, waardoor de
   − of + ingekleurd bleef. Op apparaten zonder echte hover alleen kleur
   zolang de vinger erop staat. */
.qty button { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .qty button:hover { background: var(--surface); }
  .qty button:active { background: var(--terracotta-wash); }
}

/* --- Quick-view: de PDP in één scherm (24 sep) ------------------------------
   Dezelfde galerij- en koopblok-partials als de productpagina, met .pdp op de
   wrapper. Hier alleen wat de modal anders nodig heeft: kleiner, geen sticky
   galerij, en alles past zonder verticaal scrollen. Op een telefoon die dat
   toch niet haalt blijft de koopknop onderaan in beeld plakken. */
.qv.pdp { padding: 16px 16px 0; gap: 14px; }
.qv .gallery { position: static; gap: 8px; }
.qv .gallery__slide { max-height: 30vh; max-height: 30dvh; }
.qv .gallery__thumbs button { flex-basis: calc((100% - 48px) / 7); }
.qv .summary { gap: 12px; padding-bottom: 16px; }
.qv .summary__title { font-size: var(--step-2); line-height: 1.12; margin: 0; }
.qv .summary__price .price { font-size: var(--step-1); }
.qv .trustline { justify-content: flex-start; margin-bottom: -4px; }
.qv .trustline img { height: 22px; }
.qv .checklist { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.qv .checklist li { font-size: var(--step--1); gap: 6px; line-height: 1.3; }
/* Kleurlabel en bolletjes op één regel: scheelt een hele rij hoogte. */
.qv .opt:has(.opt__swatch) { flex-direction: row; align-items: center; gap: 12px; }
.qv .checklist .icon { width: 15px; height: 15px; margin-top: 1px; }
.qv .opt { gap: 6px; }
.qv .opt__row { gap: 8px; }
.qv .pill { padding: 7px 14px; }
.qv .opt__swatch { width: 36px; height: 36px; }
.qv .opt__swatch .dot { width: 27px; height: 27px; }
.qv .packs { gap: 8px; }
.qv .stock { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--step--1); }
.qv .buybar { position: sticky; bottom: 0; z-index: 2; background: var(--surface);
  margin-inline: -16px; padding: 10px 16px 12px; box-shadow: 0 -6px 14px -10px rgba(43,30,34,.35); }
.qv__full { text-align: center; font-size: var(--step--1); color: var(--terracotta); font-weight: 600; }
.qv__full:hover { color: var(--terracotta-strong); }
@media (max-width: 899px) {
  .quickview { max-height: 96vh; max-height: 96dvh; width: min(96vw, 560px); }
  .qv .gallery__slide { max-height: 27vh; max-height: 27dvh; }
  .qv.pdp { gap: 10px; padding-top: 12px; }
  .qv .summary__title { font-size: var(--step-1); }
  .qv .summary { gap: 10px; }
}
@media (min-width: 900px) {
  .qv.pdp { grid-template-columns: 1.05fr .95fr; gap: 28px; padding: 24px; align-items: start; }
  .qv .gallery { grid-template-columns: 68px 1fr; }
  .qv .gallery__slide { max-height: calc(92vh - 48px); max-height: calc(92dvh - 48px); }
  /* Kolom miniaturen even hoog als de foto (height 0 + min-height 100% volgt
     de rij die de foto bepaalt); meer foto's scrollen binnen de kolom. */
  .qv .gallery__thumbs { grid-row: 1; height: 0; min-height: 100%;
    overflow-y: auto; scrollbar-width: none; padding-bottom: 0; }
  .qv .gallery__thumbs button { width: 64px; height: 64px; flex: 0 0 auto; }
  .qv .summary { padding: 8px 36px 0 0; }
  .qv .checklist { grid-template-columns: 1fr; }
  .qv .buybar { position: static; margin: 0; padding: 0; box-shadow: none; background: none; }
}

/* --- Sterren boven de prijs (test, zie rating_preview()) --- */
.stars { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.stars__row { position: relative; display: inline-block; }
.stars__base, .stars__fill { display: flex; gap: 1px; }
.stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; }
.stars svg { flex: none; width: 15px; height: 15px; }
.stars__base svg { fill: var(--line); }
.stars__fill svg { fill: var(--gold); }
.stars__num { font-size: var(--step--1); font-weight: 600; color: var(--plum); }
.card .stars { margin-bottom: 1px; }
/* Op het kaartje alleen de sterren, zonder cijfer (Lars, 24 sep). Maat schaalt
   mee met de kaart zodat de rij niet breder wordt dan de prijs eronder. */
.card .stars__num { display: none; }
.card .stars svg { width: clamp(16px, 6.7cqw, 23px); height: clamp(16px, 6.7cqw, 23px); }
.summary .stars svg { width: 17px; height: 17px; }
.card__pricecol { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.summary .stars { margin-top: -6px; }

/* ---- /nieuwsbrief: aanmelden met welkomstkorting (30 sep 2026) ----
   Alleen padding-block op .nb: .container regelt de zijmarge (zie de
   gutter-val van aug, een padding-shorthand zette die op 0). */
.nb { padding-block: calc(var(--space) * 3) calc(var(--space) * 8); }
.nb__card { display: grid; background: var(--surface); border: var(--line-h); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.nb__visual { position: relative; aspect-ratio: 5 / 3; background: var(--cream-deep); }
.nb__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nb__badge { position: absolute; right: 16px; bottom: -34px; width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; background: var(--terracotta); color: #fff;
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.05;
  box-shadow: 0 8px 22px rgba(74, 44, 64, .22); border: 4px solid var(--surface); }
.nb__badge small { display: block; font-family: var(--font-body); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.nb__body { padding: calc(var(--space) * 5) calc(var(--space) * 3) calc(var(--space) * 4); min-width: 0; }
.nb__eyebrow { margin: 0 0 8px; font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta); }
.nb__title { margin: 0 0 12px; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.15; color: var(--plum); }
.nb__lede { margin: 0 0 18px; color: var(--ink); line-height: 1.6; }
.nb__points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.nb__points li { position: relative; padding-left: 28px; line-height: 1.45; }
.nb__points li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.nb__form { display: grid; gap: 14px; }
.nb__field { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--plum); }
.nb__field em { font-style: normal; font-weight: 400; color: var(--muted); }
.nb__field input { width: 100%; min-width: 0; font: inherit; font-weight: 400; font-size: 16px; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; }
.nb__field input:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-wash); }
.nb__field input[aria-invalid="true"] { border-color: var(--sale); }
.nb__err { color: var(--sale); font-weight: 600; font-size: .85rem; }
.nb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nb__fine { margin: 4px 0 0; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.nb__fine a { color: inherit; }
.nb__code { margin: 0 0 22px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--cream-deep); color: var(--plum); overflow-wrap: anywhere; }
.nb__code strong { font-family: var(--font-display); letter-spacing: .05em; }
.nb__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.nb__body > .btn { margin-top: 6px; }
@media (min-width: 860px) {
  .nb { padding-block-start: calc(var(--space) * 6); }
  .nb__card { grid-template-columns: 1fr 1fr; }
  .nb__visual { aspect-ratio: auto; min-height: 100%; }
  .nb__badge { right: auto; left: 28px; bottom: 28px; width: 128px; height: 128px; font-size: 2.1rem; }
  .nb__body { padding: calc(var(--space) * 7) calc(var(--space) * 6); align-self: center; }
}

/* =====================================================================
   Apokruid-laag (6 okt 2026). De basis hierboven is van Nestell: warm,
   speels, met golven en blobs. Apokruid is rustiger en zakelijker, als een
   apotheketiket: wit vlak, donkerblauwe koppen, groene knoppen, de oranje
   boog uit het logo als enige versiering. Deze laag staat bewust onderaan,
   zodat hij wint zonder dat de basisregels herschreven hoeven te worden.
   Let op: nooit de padding-shorthand op een element dat ook .container is.
   ===================================================================== */
body { line-height: 1.6; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; color: var(--plum); line-height: 1.15; }
.section--plum h1, .section--plum h2, .section--plum h3 { color: #fff; }

/* De handgetekende golflijn onder koppen wordt de oranje boog uit het logo. */
.wavy::after {
  bottom: -14px; height: 10px; left: 0; right: auto; width: 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='10' viewBox='0 0 72 10'%3E%3Cpath d='M2 8 Q 36 -2 70 8' fill='none' stroke='%23E8901A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Geen golven tussen secties: een rechte, rustige overgang. */
.wave-top { display: none; }
.hero::before, .tile::after, .hero__cutout::before, .hero__pair::before { display: none; }

/* Knoppen: stevig en groot genoeg voor een minder vaste hand. */
.btn { border-radius: 10px; min-height: 52px; font-weight: 700; }
.btn--lg { min-height: 58px; }
.btn--ghost { border-radius: 10px; }

/* Header: wit, met het logo als beeldmerk. */
.site-header { background: color-mix(in srgb, #fff 94%, transparent); }
.brand { font-size: 1rem; }
.brand-logo { height: 46px; width: auto; }
@media (min-width: 900px) { .brand-logo { height: 58px; } }
.nav a { font-weight: 600; color: var(--plum); }

/* Hero */
.hero__eyebrow { font-family: var(--font-body); font-style: normal; font-weight: 700; color: var(--terracotta);
  text-transform: uppercase; letter-spacing: .08em; font-size: var(--step--1); }
.hero__title em { font-style: normal; color: var(--terracotta); }
.hero__lede { color: var(--muted); }
.hero__media { border-radius: var(--radius-lg); background: var(--cream-deep); aspect-ratio: 4 / 3.4; }
.hero__media img { object-fit: contain; }

/* Kaarten en tegels */
.tile { border-radius: var(--radius-lg); }
.card__title, .accordion summary, .cart-line__title, .minicart-line__title { font-weight: 700; }

/* Merkblok en footer: donkerblauw. Het logo is donkerblauw op transparant en
   staat daarom op een wit plaatje, net als op het etiket van het potje. */
.section--plum { background: var(--plum); }
.brandblock__lede { font-weight: 600; }
.site-footer { background: var(--plum); }
.footer-brand .brand { background: #fff; border-radius: var(--radius); padding: 10px 14px; }
.footer-brand .brand-logo { height: 52px; }
.footer-tagline { font-family: var(--font-body); font-style: normal; font-size: var(--step--1); }
.footer-brand .footer-tagline { color: var(--terracotta-soft); }

/* Productpagina: supplementinformatie */
.supp-claims { margin: 0; padding-left: 1.2em; }
.supp-claims li { margin: 4px 0; }
.supp-note { margin-top: 10px; font-size: var(--step--1); color: var(--muted); }
.supp-warn { background: var(--promo); color: var(--promo-ink); border-radius: var(--radius-sm); padding: 12px 14px; }

/* Homepage-blokken van Apokruid */
.apo-products { display: grid; gap: calc(var(--space) * 3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .apo-products { grid-template-columns: repeat(3, 1fr); } }
.apo-steps { display: grid; gap: calc(var(--space) * 3); grid-template-columns: 1fr; counter-reset: stap; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .apo-steps { grid-template-columns: repeat(3, 1fr); } }
.apo-steps li { background: #fff; border: var(--line-h); border-radius: var(--radius-lg); padding: calc(var(--space) * 3); }
.apo-steps li::before { counter-increment: stap; content: counter(stap); display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--terracotta-wash); color: var(--terracotta);
  font: 700 var(--step-1)/1 var(--font-display); margin-bottom: 12px; }
.apo-steps h3 { font-size: var(--step-1); margin-bottom: 6px; }
.apo-steps p { margin: 0; color: var(--muted); }
.apo-faq { max-width: 760px; }

/* Productpagina (7 okt): kruimelpad leesbaar, titel-subtitel-prijs dichter op
   elkaar, prijs groter (60-plussers zoeken eerst de prijs). */
.breadcrumb span { color: var(--muted); }
.breadcrumb span:not(:last-child) { color: var(--line); }
.summary__sub { margin: -10px 0 0; font-size: var(--step-0); }
.summary__price--sm .price { font-size: var(--step-2); font-weight: 700; }
.hero__media { background: #fff; border: var(--line-h); }