/* KUIF Conceptstore, webshop-prototype in de opbouw van de referentiesite, huisstijl Samenspel.
   Referentiematen komen uit een meting van de referentiesite op 17 september 2026 (1440 en 375 breed).
   Alle kleuren zijn KUIF-tokens; typografie Castoro (display) en Nunito Sans (body). */

@font-face{font-family:'Castoro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/castoro-regular.woff2) format('woff2')}
@font-face{font-family:'Castoro';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/castoro-italic.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/nunito-sans-var.woff2) format('woff2')}
@font-face{font-family:'Homemade Apple';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/homemade-apple.woff2) format('woff2')}
@font-face{font-family:'Castoro Fallback';src:local('Georgia');size-adjust:99.2%;ascent-override:95%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'Nunito Sans Fallback';src:local('Arial');size-adjust:101.5%;ascent-override:101%;descent-override:35%;line-gap-override:0%}

:root{
  --zand:#ede4d8;--kalk:#f7f3ee;--roze:#f9cde1;--paars:#a9519e;--paars-diep:#963f8b;
  --bruin:#4a4338;--bruin-zacht:#665d54;--steen:#6b6053;--lijn:#d6cbbd;--lijn-sterk:#b7aa9c;--kalk-gedempt:#d9cfc4;--wit:#fff;
  --font-display:'Castoro','Castoro Fallback',Georgia,serif;
  --font-body:'Nunito Sans','Nunito Sans Fallback',Arial,sans-serif;
  --gutter:30px;--gap:10px;
  /* Verticaal ritme tussen tekstsecties. De 10px tussen de beeldbanden blijft bewust staan,
     dat strakke raster is overgenomen van het voorbeeld. Alles wat TEKST is, ademt met deze maat. */
  --sectie-lucht:clamp(72px,8.6vw,132px);
  --max:1800px;--vw:min(1vw,18px); /* --vw stopt met groeien op --max, zodat vw-maten niet doorschieten op ultrawide */
  --ease-out:cubic-bezier(.165,.84,.44,1);
  --schaduw-zacht:0 12px 32px -20px rgb(74 67 56 / .35);
  --hdr:74px;--bar:40px;
}
@media (max-width:767px){:root{--gutter:15px;--hdr:50px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--kalk);color:var(--bruin);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.no-scroll{overflow:hidden}
img,video{max-width:100%;height:auto;display:block}
/* Een <picture> mag geen eigen doos maken: anders verliest een img met height:100% (hero, blok, editorial) zijn houvast. */
:where(picture){display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
:where(h1,h2,h3,h4){font-weight:400} /* Castoro heeft alleen 400; zonder dit maakt de browser nep-vet */
::selection{background:var(--roze);color:var(--bruin)}
.on-dark ::selection{background:var(--paars);color:#fff}
/* Paars op een doorzichtige header boven een foto gaf 1,01 tot 1,93 op 1: de hele header was niet
   met het toetsenbord te volgen. Een witte ring met een donkerpaarse halo is op elke ondergrond te zien.
   Ook een scroll-marge, zodat een gefocust element niet achter de vaste header of balk valt. */
:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--paars-diep);scroll-margin-top:calc(var(--hdr) + var(--bar) + 16px);scroll-margin-bottom:24px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--lijn-sterk);border-radius:99px;border:2px solid var(--kalk)}::-webkit-scrollbar-track{background:var(--kalk)}
html{scrollbar-color:var(--lijn-sterk) var(--kalk)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--paars);color:#fff;padding:10px 16px;border-radius:999px;font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.skip:focus{top:8px}

/* ---------- Typografie ---------- */
.cta{position:relative;display:inline-block;padding-bottom:2px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;line-height:normal;color:var(--bruin);white-space:nowrap;overflow:hidden}
.cta::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--paars);transform-origin:right}
.cta:hover::after,.cta:focus-visible::after{animation:cta-lijn .7s var(--ease-out)}
@keyframes cta-lijn{0%{transform:scaleX(1);transform-origin:right}50%{transform:scaleX(0);transform-origin:right}51%{transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.cta--licht{color:#fff}.cta--licht::after{background:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 28px;border-radius:999px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;transition:background-color .25s,color .25s,border-color .25s}
/* Wit op --paars is 4,34 op 1; op --paars-diep haalt het de 4,5. Zelfde palet, diepere variant. */
.btn--vol{background:var(--paars-diep);color:#fff}.btn--vol:hover,.btn--vol:focus-visible{background:#83357a}
.btn--lijn{border:1px solid var(--bruin);color:var(--bruin)}.btn--lijn:hover,.btn--lijn:focus-visible{background:var(--bruin);color:var(--kalk)}
.btn--blok{width:100%}
.label{font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:700}

/* ---------- Mededelingsbalk ---------- */
.bar{position:relative;height:var(--bar);display:flex;align-items:center;justify-content:center;background:var(--zand);color:var(--bruin);font-size:11px;text-transform:uppercase;letter-spacing:.2px;padding:0 48px;text-align:center}
.bar a{text-decoration:underline;text-underline-offset:3px}
.bar__sluit{position:absolute;right:14px;top:50%;translate:0 -50%;width:32px;height:32px;display:grid;place-items:center;color:var(--bruin)}
.bar__sluit svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4}
.bar[hidden]{display:none}

/* ---------- De drie deuren ----------
   Woordvlak op zand met daarnaast drie deuren. Dit is bewust het enige blok op de
   startpagina zonder schermvullende foto: het onderbreekt de reeks beeldbanden en
   geeft de stylingpijler een eigen vorm, zodat hij niet als koopwaar leest. */
.deuren{background:var(--zand);color:var(--bruin)}
/* Ritme (G1.3): het middenstuk van de startpagina zat met 0,26 / 0,38 / 0,65 / 0,73 / 0,81 scherm in
   een smalle band, waardoor vijf secties op rij als een grijze massa lazen. Kleinste verschil tussen
   twee buren was 0,12 waar de meetlat 0,25 vraagt (referentie haalt 0,29).
   Deze drie hoogtes zijn daarop gezet; de carrousel blijft zoals hij is, want die is bij de
   referentie ook maar 0,78 scherm (zie _audit/REFERENTIE-METING.md). */
.deuren__wrap{display:grid;grid-template-columns:minmax(280px,34%) 1fr;gap:40px;align-items:center;padding:clamp(32px,3.4vw,44px) var(--gutter) clamp(24px,2.6vw,32px)}
.deuren__kop{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:min(55px,calc(11 * var(--vw)));line-height:.94;letter-spacing:-.02em;color:var(--bruin)}
.deuren__intro{margin-top:20px;font-size:14px;line-height:1.7;color:var(--bruin-zacht);max-width:38ch}
.deuren__hand{font-family:'Homemade Apple',cursive;color:var(--paars-diep);font-size:24px;line-height:1.5;margin-top:24px}
.deuren__rij{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.deur{display:block;color:var(--bruin);text-decoration:none}
/* Bovengrens op de deurfoto's: zonder die grens groeide de sectie mee met de kolombreedte en kwam
   ze op 0,65 scherm uit, te dicht bij de carrousel ervoor en de zekerheden erna. */
.deur__beeld{display:block;position:relative;overflow:hidden;background:var(--bruin);aspect-ratio:3/4;max-height:320px}
.deuren :where(img){width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease-out)}
.deur:hover .deur__beeld img,.deur:focus-visible .deur__beeld img{transform:scale(1.04)}
.deur__tekst{display:block;padding-top:14px}
.deur__titel{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:20px;letter-spacing:-.01em;line-height:1.1}
.deur__regel{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--steen)}
.deur:hover .deur__titel,.deur:focus-visible .deur__titel{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1023px){
  .deuren__wrap{grid-template-columns:1fr;gap:32px}
  .deuren__kop{font-size:42px}
}
@media (max-width:640px){
  .deuren__rij{grid-template-columns:1fr;gap:22px}
  .deur{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center}
  .deur__beeld{aspect-ratio:1/1}
  .deur__tekst{padding-top:0}
}

/* Deuren en zekerheden staan allebei op zand. Marge ertussen liet de paginakleur zien als
   een lichte streep dwars door wat een rustig vlak hoort te zijn. Ze sluiten nu aan. */
.deuren + .zeker{margin-top:0}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;height:var(--hdr);margin-bottom:calc(-1*var(--hdr))}
.header__content{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;height:var(--hdr);padding:0 var(--gutter);border-bottom:1px solid transparent;background:transparent;color:#fff;
  transition:transform .5s var(--ease-out) .1s,opacity .1s,background-color .25s,color .25s,border-color .25s}
/* De verborgen beginstand hangt aan .js: zonder JavaScript staat de header gewoon zichtbaar. */
.js .header__content{transform:translate3d(0,-50%,0);opacity:0}
.header.is-visible .header__content{transform:translate3d(0,-1px,0);opacity:1}
.header--donker{margin-bottom:0}
.header.is-filled .header__content,.header.is-mega .header__content,.header--donker .header__content{background:var(--kalk);color:var(--bruin);border-bottom-color:var(--lijn)}
.header__menu{display:flex;align-items:center;flex:1 1 0;height:100%}
.header__menu--rechts{justify-content:flex-end}
.header__nav{display:flex;align-items:center;gap:0 30px;height:100%}
.header__nav>li{height:100%;display:flex;align-items:center;position:relative}
.header__nav>li>a,.header__nav>li>button{font-size:12px;text-transform:uppercase;letter-spacing:.2px;line-height:12px;display:inline-flex;align-items:center;gap:6px;height:100%}
.header__nav>li>a:hover,.header__nav>li>button:hover{text-decoration:underline;text-underline-offset:4px}
.header__logo{position:absolute;left:50%;top:50%;translate:-50% -50%;width:100px;display:block}
.header__logo svg{width:100%;height:auto;fill:currentColor;display:block}
.header__burger,.header__zoek-m{display:none;width:44px;height:44px;place-items:center;flex-direction:column}
.header__burger span{display:none}
.header__burger::before,.header__burger::after{content:"";display:block;width:22px;height:1px;background:currentColor;margin:4px 0}
.header__zoek-m svg,.header__icoon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4}
.header__icoon{display:none;width:44px;height:44px;place-items:center;position:relative}
.header__icoon .n{position:absolute;right:6px;bottom:6px;min-width:15px;height:15px;padding:0 4px;border-radius:99px;background:var(--paars);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center}
.n:empty,.n[data-nul]{display:none}
.header::before{content:"";position:fixed;inset:0;z-index:2;background:rgb(74 67 56 / .4);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
.header.is-mega::before{opacity:1;visibility:visible}
@media (max-width:1279px){
  .header__menu--links .header__nav{display:none}
  .header__burger,.header__zoek-m{display:grid}
  .header__nav--rechts>li:not(.header__nav-icoon){display:none}
  .header__icoon{display:grid}
  .header__logo{width:78px}
}
/* Vanaf 1280: links Nieuw binnen, Shop, Merken, Personal styling; rechts Over KUIF, Zoeken,
   Account, Verlanglijst, Tas. Personal styling stond eerst rechts, waardoor links 325 px leeg was
   en rechts maar 33 px. Met het megamenu-item links passen Verlanglijst en Tas rechts weer als
   tekst; de iconen blijven in de HTML voor onder 1280. Gemeten 20 sep 2026, zie PLAN-ELLIE-V2. */
@media (min-width:1280px){.header__nav--rechts>li.header__nav-icoon{display:none}}

/* Megamenu */
.mega{position:absolute;top:100%;left:0;width:100%;background:var(--kalk);color:var(--bruin);border-bottom:1px solid var(--lijn);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s;z-index:5;text-align:left}
.header .mega{position:fixed;top:var(--hdr);left:0;right:0}
li.heeft-mega:hover .mega,li.heeft-mega:focus-within .mega,.mega:hover{opacity:1;visibility:visible;pointer-events:auto}
.mega__wrap{display:flex;padding:40px var(--gutter);gap:40px}
.mega__kolommen{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.mega__kol-titel{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px}
.mega__kol li{margin-top:10px}
.mega__kol li a{font-size:11px;text-transform:uppercase;letter-spacing:.2px;color:var(--steen)}
.mega__kol li a:hover{color:var(--bruin);text-decoration:underline;text-underline-offset:3px}
/* Onderregel bij een megamenu-kolomtitel: maakt zichtbaar wat een dienst is
   zonder dat je de pagina hoeft te openen. */
.mega__kol-regel{display:block;margin-top:4px;font-size:11px;line-height:1.45;color:var(--steen);max-width:26ch}
.mega__kol-regel+ul{margin-top:14px}
.mega__push{width:25%;flex-shrink:0}
.mega__push a{display:block;position:relative;overflow:hidden}
.mega__push img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform 2s var(--ease-out)}
.mega__push a:hover img{transform:scale(1.05)}
/* Een staande modelfoto in dit liggende kader: vanuit het midden gesneden blijft alleen de romp over.
   Bovenkant vasthouden houdt gezicht en schouders in beeld; de zoom groeit dan ook vanaf boven. */
.mega__push--model img{object-position:50% 8%;transform-origin:50% 8%}
/* Huisstijl: witte tekst op beeld staat op een bruin verloop van onder. Alleen een tekstschaduw
   haalde op een lichte foto het contrast niet. */
.mega__push a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgb(74 67 56 / .62),rgb(74 67 56 / 0));pointer-events:none}
.mega__push span{z-index:1}
/* Modelfoto's hebben een witte studioachtergrond: daar is het standaardverloop te licht (gemeten 2,14:1). */
.mega__push--model a::after{height:62%;background:linear-gradient(to top,rgb(74 67 56 / .8) 0,rgb(74 67 56 / .76) 30%,rgb(74 67 56 / 0) 100%)}
.mega__push span{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;font-family:var(--font-display);text-transform:uppercase;font-size:28px;letter-spacing:-.02em;text-shadow:0 1px 12px rgb(74 67 56 / .4)}
.mega__maten{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mega__maten a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--lijn);font-size:11px;color:var(--bruin)}
.mega__maten a:hover{border-color:var(--bruin)}

/* Offcanvas (mobiel menu) */
.offcanvas{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
.offcanvas.is-open{visibility:visible;pointer-events:auto}
.offcanvas__achter{position:absolute;inset:0;background:rgb(74 67 56 / .45);opacity:0;transition:opacity .3s}
.offcanvas.is-open .offcanvas__achter{opacity:1}
.offcanvas__paneel{position:absolute;top:0;left:0;bottom:0;width:min(420px,calc(88 * var(--vw)));background:var(--kalk);color:var(--bruin);transform:translateX(-100%);transition:transform .5s var(--ease-out);display:flex;flex-direction:column;overflow:auto}
.offcanvas.is-open .offcanvas__paneel{transform:none}
.offcanvas__kop{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);padding:0 var(--gutter);border-bottom:1px solid var(--lijn)}
.offcanvas__kop svg{width:88px;fill:currentColor}
.offcanvas__sluit{width:44px;height:44px;display:grid;place-items:center;margin-right:-12px}
.offcanvas__sluit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
.offcanvas__nav>li{border-bottom:1px solid var(--lijn)}
.offcanvas__nav>li>a,.offcanvas__nav>li>button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:20px var(--gutter);font-size:13px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;text-align:left}
.offcanvas__nav>li>button::after{content:"+";font-family:var(--font-display);font-size:20px;line-height:1;font-weight:400}
.offcanvas__nav>li.is-open>button::after{content:"–"}
/* Uitgelichte eerste regel: "Uit het filmpje" verdween op desktop uit de nav en blijft hier staan. */
.offcanvas__uitgelicht{background:var(--zand)}
.offcanvas__sub{display:none;padding:0 var(--gutter) 18px}
li.is-open>.offcanvas__sub{display:block}
/* 44px klikdoel: de regels in het uitgeklapte submenu waren 36px hoog (gemeten 21 sep 2026 op 375). */
.offcanvas__sub a{display:flex;align-items:center;min-height:44px;padding:6px 0;font-size:12px;text-transform:uppercase;color:var(--steen)}
.offcanvas__voet{margin-top:auto;padding:24px var(--gutter);display:grid;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.2px;color:var(--steen)}

/* ---------- Hero (video / beeld) ---------- */
.hero{position:relative;display:flex;height:100svh;min-height:560px;overflow:hidden;background:var(--bruin)}
/* Ankerbeeld. De referentie zet drie beelden over de volle breedte op 1,60 scherm; daardoor
   leest een rij van 1,04 daar als rustmoment. KUIF had dat anker niet, waardoor elk blok van
   0,80 tot 1,04 als zwaar las. Gemeten 18 sep 2026, zie _audit/REFERENTIE-METING.md. */
.hero--band{height:min(100svh,900px)}
@media (max-width:767px){.hero--band{height:78svh;min-height:520px}}
/* De h1 stond hier tot 18 sep 2026 op text-indent:-9999px. Daardoor had de startpagina geen enkel
   zichtbaar orientatiepunt en was de grootste letter van de pagina een h2 op de huiskamerband. */
.hero__h1{font-family:var(--font-display);text-transform:uppercase;color:#fff;font-size:min(40px,calc(8.6 * var(--vw)));line-height:.95;letter-spacing:-.02em;text-wrap:balance;text-shadow:0 1px 18px rgb(74 67 56 / .45)}
@media (min-width:768px){.hero__h1{font-size:clamp(44px,calc(4.6 * var(--vw)),68px)}}
.hero__zin{margin-top:14px;max-width:46ch;color:#fff;font-size:15px;line-height:1.55;text-shadow:0 1px 14px rgb(74 67 56 / .5)}
@media (max-width:767px){.hero__zin{font-size:14px;max-width:34ch}}
.hero__video,.hero__beeld{position:absolute;inset:0;width:100%;height:100%}
.hero__video video,.hero__beeld img{width:100%;height:100%;object-fit:cover;pointer-events:none;background:var(--bruin)}
/* Livegang 23 sep 2026: de poster is een echt <img> (LCP-element), de video ligt erbovenop zonder
   eigen poster en zonder achtergrond, en komt pas in beeld zodra hij speelt (kuif.js: is-speelt).
   Zonder JS heeft de video geen bron en is hij doorzichtig: dan staat de poster er gewoon. */
.hero__video .hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;background:var(--bruin)}
.hero__video video{position:relative;background:none;opacity:0;transition:opacity .6s ease}
.hero__video video.is-speelt{opacity:1}
.hero__video--mobiel{display:none}
@media (max-width:767px){.hero__video--desktop{display:none}.hero__video--mobiel{display:block}}
.hero__beeld img{transition:transform 2s var(--ease-out)}
/* Bronvermelding campagnebeeld YAYA: verplicht bij gebruik, maar hoort niet mee te doen in de hero.
   Boven de sluier (z-index 2) zodat hij op elke breedte leesbaar blijft, rechtsonder buiten de cta. */
.hero__bron-wrap{position:absolute;z-index:2;inset:0;display:flex;justify-content:flex-end;padding:0 var(--gutter);pointer-events:none}
/* De hero is hoger dan de vouw (hero--top is 108svh en begint onder de 40px aankondigingsbalk), dus
   een vermelding op de hero-onderkant staat buiten beeld. Sticky helpt niet: .hero heeft overflow:hidden
   en is dus zelf de scrollport. Daarom rekenen: 100% is de hero-hoogte, 100svh de vouw, plus 56px lucht.
   Zo staat de vermelding op elke breedte en hoogte rechtsonder in beeld. */
.hero__bron{align-self:flex-end;position:relative;bottom:max(14px,calc(100% - 100svh + 56px));color:rgb(255 255 255 / .72);font-size:10px;letter-spacing:.06em;line-height:1;text-shadow:0 1px 6px rgb(74 67 56 / .6)}
@media (min-width:768px){.hero__bron{font-size:11px}}
.hero__content{position:absolute;z-index:1;inset:0;display:flex;text-align:center;padding:30px var(--gutter) 60px;color:#fff}
.hero__inner{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;align-self:flex-end;position:sticky;bottom:60px}
.hero__titel{font-family:var(--font-display);text-transform:uppercase;color:#fff;font-size:min(55px,calc(11.5 * var(--vw)));line-height:.92;letter-spacing:-.02em;text-wrap:balance;text-shadow:0 1px 18px rgb(74 67 56 / .35)}
@media (min-width:768px){.hero__titel{font-size:clamp(40px,calc(3.9 * var(--vw)),56px);line-height:.95}}

.hero__acties{margin-top:35px}
@media (min-width:768px){.hero__acties{margin-top:25px}}
.hero::after{content:"";position:absolute;z-index:0;inset:auto 0 0 0;height:62%;background:linear-gradient(to top,rgb(74 67 56 / .8),rgb(74 67 56 / .36) 55%,transparent);pointer-events:none}
/* Lichte foto onder witte titel: zonder extra verloop haalt het contrast de 3:1 voor grote tekst niet (gemeten 2,91). */
.hero--licht::after{height:68%;background:linear-gradient(to top,rgb(74 67 56 / .86),rgb(74 67 56 / .42) 55%,transparent)}
/* kasten-lifestyle is de lichtste hero-foto: de kleine witte cta haalde daar 4,24 op 1 (eis 4,5).
   Deze band-hero is laag, dus een hogere en zwaardere sluier kan er zonder dat het beeld dichtslaat. */
/* Eindigt op transparant: de oude stop .12 gaf een harde rand op 20% van boven, zichtbaar op lichte plafonds (22 sep 2026). */
.hero--band::after{height:80%;background:linear-gradient(to top,rgb(74 67 56 / .86),rgb(74 67 56 / .46) 55%,transparent)}

/* Staande foto waarvan de onderkant het onderwerp draagt (de gevel met de winkeldeur): het midden is
   een lichte muur en daar haalt witte tekst het contrast niet. Onderkant vasthouden bij het snijden. */
.hero--onder .hero__beeld img{object-position:50% 100%}

/* Staande portretfoto in een liggende band (Ellie op over-kuif): het gezicht zit op ~31% van de hoogte,
   het midden (50%) snijdt het hoofd af. Kader hoger leggen zodat gezicht en blazer in beeld blijven. */
.hero--gezicht .hero__beeld img{object-position:50% 28%}

/* ---------- Secties ---------- */
.sectie__kop{padding:0 var(--gutter);text-align:center;margin-top:var(--sectie-lucht)}
@media (max-width:767px){.sectie__kop{margin-top:60px}}
/* Op 320 breed past een woord van twaalf letters niet in 290px bij 45px: "VERLANGLIJST" had 322px
   nodig en werd afgekapt, want body heeft overflow-x:clip en er komt dus geen scrollbalk, alleen
   tekstverlies. Daarom meeschalen met de viewport onder ~360px, met afbreken als laatste vangnet. */
.sectie__titel{font-family:var(--font-display);text-transform:uppercase;font-weight:400;color:var(--bruin);font-size:min(45px,12.5vw);line-height:.9;letter-spacing:-1px;text-wrap:balance;hyphens:auto}
@media (min-width:768px){.sectie__titel{font-size:65px;line-height:58px;letter-spacing:-2px}}
@media (min-width:1280px) and (max-width:1439px){.sectie__titel{font-size:calc(5.08 * var(--vw));line-height:calc(4.53 * var(--vw))}}
.sectie__acties{margin-top:22px}
.sectie__rij{display:flex;gap:var(--gap);padding:0 var(--gap);margin-top:var(--gap)}
.sectie__rij--3{display:grid;grid-template-columns:repeat(3,1fr)}
@media (max-width:767px){.sectie__rij{flex-direction:column}.sectie__rij--3{grid-template-columns:1fr}}

/* Magazineblok: beeld met titel erop */
.blok{position:relative;display:block;flex:1 1 0;overflow:hidden;color:#fff;background:var(--bruin)}
.blok__beeld{position:relative;height:100%;overflow:hidden}
.blok__beeld img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 2s var(--ease-out),opacity .3s}
.blok:hover .blok__beeld img,.blok:focus-visible .blok__beeld img{transform:scale(1.05)}
.blok__content{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px 30px;text-align:center}
.blok--onder .blok__content{justify-content:flex-end;padding-bottom:34px}
.blok__titel{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:min(55px,calc(11.5 * var(--vw)));line-height:.92;letter-spacing:-.02em;color:#fff;text-shadow:0 1px 18px rgb(74 67 56 / .35);text-wrap:balance}
@media (min-width:768px){.blok__titel{font-size:min(90px,calc(11 * var(--vw)));line-height:.86}.blok--onder .blok__titel{font-size:55px;line-height:50px}}
/* Tussen 768 en 1023 staan twee blokken naast elkaar in een kolom van ~390px, terwijl de kop met de
   VIEWPORT meeschaalde (90px). "DE ZITHOEK" en "SIERADEN" werden daar geklemd. */
@media (min-width:768px) and (max-width:1023px){.blok__titel{font-size:min(56px,calc(7 * var(--vw)));line-height:.9}}
@media (min-width:1440px){.blok__titel{font-size:calc(6.25 * var(--vw));line-height:calc(5.3 * var(--vw))}.blok--onder .blok__titel{font-size:calc(3.8 * var(--vw));line-height:calc(3.5 * var(--vw))}}
/* De onderregel van 11px staat op de lichtste foto's nog onder 4,5:1, ook met een zwaardere sluier
   over het hele beeld. Een eigen, kleine verdonkering precies achter deze regel lost dat op zonder
   de foto verder dicht te zetten. Gemeten per geval, niet geschat. */
.blok__sub{display:block;margin-top:16px;font-family:var(--font-body);font-size:11px;letter-spacing:.6px;text-transform:uppercase;position:relative}
.blok__sub::before{content:"";position:absolute;inset:-9px -16px;z-index:-1;background:rgb(74 67 56 / .46);border-radius:2px}
.blok__content .cta--licht{position:relative}
.blok__content .cta--licht::before{content:"";position:absolute;inset:-8px -14px;z-index:-1;background:rgb(74 67 56 / .4);border-radius:2px}
/* Sluier zwaarder: de witte onderregel van 11px op een lichte foto haalde 2,35 tot 3,22 op 1 (eis 4,5).
   Gemeten met de tekst transparant gezet, dus op de echte pixels onder de letters. */
.blok::after{content:"";position:absolute;inset:auto 0 0 0;height:64%;background:linear-gradient(to top,rgb(74 67 56 / .82),rgb(74 67 56 / .38) 52%,transparent);pointer-events:none}
.rij-1x1 .blok{height:940px}
.rij-1x1.rij-1x1--laag .blok{height:clamp(320px,68svh,640px)}
@media (max-width:1279px){.rij-1x1.rij-1x1--laag .blok{height:calc(52 * var(--vw))}}
@media (max-width:767px){.rij-1x1.rij-1x1--laag .blok{height:400px}}
.sectie--diensten{margin-top:var(--sectie-lucht)}
@media (max-width:767px){.sectie--diensten{margin-top:60px}}
@media (max-width:1279px){.rij-1x1 .blok{height:calc(66 * var(--vw))}}
@media (max-width:767px){.rij-1x1 .blok{height:460px}}
.sectie__rij--3 .blok{height:clamp(300px,48svh,470px)}
@media (max-width:1279px){.sectie__rij--3 .blok{height:calc(43 * var(--vw))}}
/* Mobiel stapelen de drie categorietegels; op 460px werd die rij 1380px = 1,70 scherm en stond
   hij precies even hoog als de filmpje-sectie, waardoor het ritme op 0,00 verschil uitkwam. */
@media (max-width:767px){.sectie__rij--3 .blok{height:300px}}

/* ---------- Productcarrousel ---------- */
/* 12 in plaats van 24: op 1280 stond de carrousel op 0,84 scherm en dat gaf maar 0,24 verschil
   met de hero. Nu 0,83 en dus binnen de 0,25-eis. */
.producten{position:relative;margin-top:12px;padding:0 var(--gutter)}
.producten__nav{display:flex;justify-content:center;gap:40px;margin:22px 0 18px;height:10px}
.pijl{width:24px;height:24px;display:grid;place-items:center;color:var(--bruin);opacity:.3;transition:opacity .2s}
.pijl:not([disabled]){opacity:1}
.pijl svg{width:9px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}
.spoor{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.spoor::-webkit-scrollbar{display:none}
.spoor>*{flex:0 0 calc((100% - 90px)/4);scroll-snap-align:start}
@media (max-width:1023px){.spoor{gap:15px}.spoor>*{flex-basis:calc((100% - 15px)/2)}}
@media (max-width:767px){.spoor>*{flex-basis:calc(100% - 83px)}}
.paginering{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:64px;font-size:11px;letter-spacing:.2px;color:var(--bruin);font-variant-numeric:tabular-nums}
@media (max-width:767px){.paginering{margin-top:44px}}
.paginering .pijl svg{width:6px;height:11px}

/* Productkaart */
.kaart{position:relative;display:block}
.kaart__kop{position:relative;overflow:hidden;background:var(--zand)}
.kaart__beeld{display:block;position:relative;aspect-ratio:3/4;overflow:hidden}
.kaart__film{display:flex;height:100%;transition:transform .5s var(--ease-out)}
.kaart__film img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;background:var(--zand)}
/* Twee stickers kunnen samen voorkomen (nieuw EN in het filmpje), dus ze staan in een kolom in
   plaats van allebei absoluut op dezelfde plek. */
.kaart__stickers{position:absolute;z-index:2;top:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none}
@media (max-width:767px){.kaart__stickers{top:12px;right:12px}}
.kaart__sticker{padding:0 6px;line-height:18px;font-size:10px;letter-spacing:.4px;text-transform:uppercase;background:var(--roze);color:var(--bruin)}

.kaart__pijlen{position:absolute;inset:0;pointer-events:none}
.kaart__pijl{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;display:grid;place-items:center;color:#fff;pointer-events:auto;opacity:0;transition:opacity .25s;filter:drop-shadow(0 1px 4px rgb(74 67 56 / .5))}
.kaart__pijl--vorige{left:0}.kaart__pijl--volgende{right:0}
.kaart__pijl svg{width:9px;height:16px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round}
.kaart:hover .kaart__pijl,.kaart:focus-within .kaart__pijl{opacity:1}
@media (hover:none){.kaart__pijl{opacity:.9}}
/* Klikvlak 44x44 (lat WCAG 2.5.5), zichtbare cirkel blijft 26px via ::before (livegang 23 sep 2026). */
.kaart__plus{position:absolute;z-index:3;right:0;bottom:0;width:44px;height:44px;border:0;padding:0;background:none;color:#fff;display:grid;place-items:center}
.kaart__plus::before{content:"";position:absolute;left:9px;top:9px;width:26px;height:26px;box-sizing:border-box;border-radius:50%;border:1px solid rgb(255 255 255 / .9);background:rgb(74 67 56 / .18);backdrop-filter:blur(2px);transition:background-color .2s,border-color .2s}
.kaart__plus svg{position:relative;width:10px;height:10px;stroke:currentColor;stroke-width:1.2;fill:none}
.kaart__plus:hover::before{background:var(--paars);border-color:var(--paars)}
/* Stond alleen verschoven, dus alle knoppen erin zaten in de tabvolgorde: tabben scrollde de kaart
   95px, de foto schoof weg en het paneel klapte open terwijl aria-expanded "false" bleef. Met
   visibility valt het echt weg en blijft de schuifanimatie intact. */
.kaart__acties{position:absolute;z-index:4;left:0;right:0;bottom:0;background:var(--kalk);color:var(--bruin);padding:14px 14px 12px;transform:translateY(100%);visibility:hidden;transition:transform .4s var(--ease-out),visibility .4s;border-top:1px solid var(--lijn)}
.kaart.is-kiezen .kaart__acties{transform:none;visibility:visible}
.kaart__acties-rij{display:flex;justify-content:space-between;align-items:center;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen)}
.kaart__acties-rij button{color:var(--steen);text-decoration:underline;text-underline-offset:3px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;min-height:24px}
.kaart__maten{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kaart__maten button{min-width:38px;height:34px;padding:0 8px;border:1px solid var(--lijn);font-size:11px;color:var(--bruin);transition:border-color .2s,background-color .2s,color .2s}
.kaart__maten button:hover{border-color:var(--paars);background:var(--paars);color:#fff}
.kaart__maten button[disabled]{color:var(--lijn-sterk);text-decoration:line-through;cursor:not-allowed}
.kaart__maten button[disabled]:hover{background:none;border-color:var(--lijn);color:var(--lijn-sterk)}
.kaart__content{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-top:8px}
.kaart__titel{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.3px;line-height:1.35;color:var(--bruin)}
.kaart__merk{display:block;font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:var(--steen);margin-top:2px}
.kaart__prijs{display:block;font-size:11px;color:var(--bruin);margin-top:5px;font-variant-numeric:tabular-nums}
.kaart__kleuren{font-size:10px;color:var(--steen);margin-left:6px}
/* Kleurbolletjes op de overzichtskaart. Nul hoeken is de huisstijl, maar een kleurstaal is rond:
   dat leest als kleur en niet als knop. Gelijke hoogte met de titelregel, dus geen versprongen
   basislijn. */
.kaart__bollen{display:inline-flex;align-items:center;gap:4px;margin-left:8px;vertical-align:middle}
.kaart__bol{width:9px;height:9px;border-radius:50%;background:var(--bol,#cfc9bf);
  box-shadow:inset 0 0 0 1px rgba(27,25,23,.22);flex:0 0 auto}
.kaart__bol--print{background:repeating-linear-gradient(45deg,#8a6a4b 0 2px,#f2eee6 2px 4px)}
.kaart__bollen .kaart__kleuren{margin-left:2px}
/* De negatieve rechtermarge lijnt het hartje optisch uit, maar duwde op 320 breed de pagina 5px
   buiten haar oevers (en body heeft overflow-x:clip, dus dat is tekstverlies, geen scrollbalk).
   Onder 360px dus geen negatieve marge. Tikdoel blijft 44px via het pseudo-element hieronder. */
.hart{width:30px;height:30px;display:grid;place-items:center;flex:none;color:var(--bruin);margin:-6px -6px 0 0;position:relative}
@media (max-width:359px){.hart{margin-right:0}}
/* Hitbox naar binnen, niet naar buiten: gecentreerd duwde hij de pagina op 320 breed 18px uit. */
.hart::after{content:"";position:absolute;right:0;top:50%;translate:0 -50%;width:44px;height:44px}
.hart svg{width:15px;height:13px;fill:transparent;stroke:currentColor;stroke-linecap:square;transition:fill .2s}
.hart.is-actief svg{fill:var(--paars);stroke:var(--paars)}

/* ---------- Editorial: Ellie & KUIF ---------- */
.editorial{margin-top:var(--sectie-lucht);padding:0 var(--gap)}
@media (max-width:767px){.editorial{margin-top:70px}}
/* Stond op een VASTE hoogte met een tekstkolom die mocht scrollen. De inhoud paste er niet in:
   flexitems krimpen dan, en de laatste regel (de link "Plan je New You") werd van 17px naar 2px
   geperst terwijl kop, intro en handschrift in een binnenste scrollvlak verdwenen. Gemeten op alle
   18 viewports van 320 tot 3440. Een minimumhoogte houdt het ritme, maar laat de inhoud staan. */
.editorial__wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch;min-height:clamp(420px,70svh,700px)}
.editorial__beeld{min-height:clamp(300px,46svh,640px);max-height:clamp(460px,78svh,820px)}
.editorial__tekst>*{flex:0 0 auto}
@media (max-width:1023px){.editorial__wrap{grid-template-columns:1fr}}
.editorial__beeld{position:relative;overflow:hidden;background:var(--zand)}
/* Absoluut, anders bepaalt de intrinsieke hoogte van de staande foto (853x1280) de rijhoogte
   zodra de vaste hoogte van de wrap wegvalt: gemeten 1058px op 1440 breed. */
.editorial__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2s var(--ease-out)}
.editorial__beeld:hover img{transform:scale(1.04)}
.editorial__tekst{background:var(--zand);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:0;padding:clamp(28px,calc(4 * var(--vw)),60px) clamp(24px,calc(6 * var(--vw)),90px)}
.editorial__intro{font-family:var(--font-display);font-size:clamp(1.2rem,calc(1.55 * var(--vw)),1.5rem);line-height:1.3;max-width:34ch;margin-top:18px;text-wrap:pretty}
.editorial__body{font-size:14px;line-height:1.62;color:var(--bruin-zacht);max-width:58ch;margin-top:16px}
.editorial__body p+p{margin-top:10px}
.editorial__hand{font-family:'Homemade Apple',cursive;color:var(--paars-diep);font-size:1.1rem;margin-top:18px}
.editorial__tekst .cta{margin-top:20px}

/* ---------- Adressen / winkel ---------- */
.adressen{padding:var(--sectie-lucht) 15px 0;text-align:center}
@media (max-width:767px){.adressen{padding-top:70px}}
.adressen__titel{font-family:var(--font-display);text-transform:uppercase;font-size:30px;line-height:33px;letter-spacing:-.4px;margin-bottom:50px}
.adressen__lijst{display:flex;justify-content:center;flex-wrap:wrap;gap:40px 60px;max-width:1100px;margin:0 auto}
/* Tel- en maillink lagen 4px van elkaar: te dicht voor een duim (WCAG 2.5.8). */
.adres{display:block;min-width:200px}
.adres a{display:inline-block;padding-block:6px}
.adres__titel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.adres__inhoud{margin-top:8px;font-size:11px;text-transform:uppercase;letter-spacing:.2px;color:var(--steen);line-height:1.7}
.adres__inhoud b{font-weight:400;color:var(--bruin)}
.adressen .cta{margin-top:50px}

/* ---------- Zekerheden ---------- */
.zeker{margin-top:var(--sectie-lucht);background:var(--kalk);padding:32px var(--gutter)}
@media (max-width:767px){.zeker{margin-top:70px;padding:50px var(--gutter)}}
.zeker__wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1300px;margin:0 auto;text-align:center}
@media (max-width:767px){.zeker__wrap{grid-template-columns:1fr;gap:44px}}
.zeker__titel{font-family:var(--font-display);text-transform:uppercase;font-size:30px;line-height:37px;color:var(--bruin);text-wrap:balance;letter-spacing:-.01em}
.zeker__tekst{margin-top:12px;font-size:11px;text-transform:uppercase;letter-spacing:.2px;color:var(--steen);line-height:1.6}

/* ---------- Footer ---------- */
.footer{padding:60px 0 0}
.footer__main{max-width:1300px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(260px,1.2fr) repeat(3,1fr) 1.1fr;gap:20px}
@media (max-width:1023px){.footer__main{grid-template-columns:1fr;gap:0}}
.footer__nb-titel{font-family:var(--font-display);text-transform:uppercase;font-size:30px;line-height:1.1;letter-spacing:-.4px}
.footer__nb-tekst{margin-top:15px;font-size:11px;line-height:16px;color:var(--steen)}
/* Een class met een eigen `display` wint van het hidden-attribuut: zonder deze regel bleef
   het formulier na het aanmelden gewoon staan (gemeten 21 sep 2026, chromium en webkit). */
.footer__form[hidden]{display:none}
.footer__form{margin-top:16px;display:flex;border:1px solid var(--lijn);max-width:360px;background:#fff}
.footer__form input{flex:1;min-width:0;padding:12px 14px;font:inherit;font-size:12px;background:transparent;border:0;color:var(--bruin)}
.footer__form input::placeholder{color:var(--lijn-sterk)}
.footer__form button{width:44px;display:grid;place-items:center;color:var(--bruin)}
.footer__form button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2}
.footer__form:focus-within{border-color:var(--bruin)}
.footer__cnil{margin-top:14px;font-size:11px;line-height:1.55;color:var(--steen);max-width:360px}
.footer__cnil a{text-decoration:underline}
.footer__kol-titel{position:relative;display:block;width:100%;text-align:left;padding:30px 15px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--bruin)}
.footer__links{padding:0 15px 30px}
.footer__links li+li{margin-top:16px}
.footer__links a{font-size:11px;text-transform:uppercase;letter-spacing:.2px;color:var(--steen)}
.footer__links a:hover{color:var(--bruin)}
@media (max-width:1023px){
  .footer__kol--links{border-top:1px solid var(--lijn)}
  .footer__kol--links .footer__kol-titel{padding:26px 0;display:flex;justify-content:space-between}
  .footer__kol--links .footer__kol-titel::after{content:"+";font-family:var(--font-display);font-size:20px;font-weight:400;line-height:1}
  .footer__kol--links.is-open .footer__kol-titel::after{content:"–"}
  .footer__links{padding:0 0 26px}
  /* Dichtklappen alleen met JS: zonder JS was er op mobiel geen enkele footerlink te bereiken. */
  .js .footer__links{display:none}
  .js .footer__kol--links.is-open .footer__links{display:block}
  .footer__kol--nb{padding-bottom:30px}
}
@media (min-width:1024px){.footer__kol-titel{pointer-events:none}
  /* Vijf kolommen voor vijf blokken: nieuwsbrief plus vier linklijsten. Het betaalblok hoort bij de
     nieuwsbrief en staat in rij 2 van kolom 1; de linkkolommen lopen over beide rijen, zodat rij 1
     precies zo hoog is als de nieuwsbrief (auto) en de rest van de hoogte in rij 2 valt (1fr). */
  .footer__main{grid-template-columns:minmax(300px,1.3fr) repeat(5,1fr);grid-template-rows:auto 1fr;column-gap:30px}
  .footer__kol--links{grid-row:1 / span 2}
  .footer__main .footer__rechts{grid-column:1;grid-row:2;align-self:start;padding:40px 0 0}
  /* Koppen op de kolomlijn en met de kapitaalhoogte gelijk aan MEER KUIF. */
  .footer__kol-titel{padding:1px 0 34px}
  .footer__links{padding:0}}
/* Tussen 1024 en 1279 is 1.3fr te gulzig: de linkkolommen breken dan af. Vaste nieuwsbriefkolom. */
@media (min-width:1024px) and (max-width:1279px){.footer__main{grid-template-columns:260px repeat(5,1fr);column-gap:20px}}
.footer__rechts{padding:30px 0 0 15px}
@media (max-width:1023px){.footer__rechts{padding:26px 0 0;border-top:1px solid var(--lijn)}}
.footer__rechts .label{display:block}
.footer__rechts .label+.label,.footer__rechts .footer__betaal+.label{margin-top:24px}
.footer__betaal{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.footer__betaal span{display:inline-grid;place-items:center;height:24px;padding:0 8px;border:1px solid var(--lijn);font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--steen);background:#fff}
.footer__review{margin-top:10px;font-size:11px;line-height:1.6;color:var(--steen)}
.footer__review a{text-decoration:underline;text-underline-offset:3px}
.footer__woordmerk{display:block;width:min(calc(46 * var(--vw)),640px);margin:80px auto 0;color:var(--bruin)}
.footer__woordmerk svg{width:100%;height:auto;fill:currentColor;display:block}
@media (max-width:767px){.footer__woordmerk{width:calc(70 * var(--vw));margin-top:50px}}
.footer__onder{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px var(--gutter) 24px;margin-top:40px;font-size:11px;text-transform:uppercase;letter-spacing:.2px;color:var(--steen)}
.footer__onder a{text-decoration:underline;text-underline-offset:3px}
.footer__social{display:flex;gap:8px}
.footer__social a{display:grid;place-items:center;width:32px;height:32px;color:var(--bruin)}
.footer__social svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3}
@media (max-width:767px){.footer__onder{flex-direction:column;align-items:flex-start}}

/* ---------- Winkeltas (drawer) ---------- */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__achter{position:absolute;inset:0;background:rgb(74 67 56 / .45);opacity:0;transition:opacity .3s}
.drawer.is-open .drawer__achter{opacity:1}
.drawer__paneel{position:absolute;top:0;right:0;bottom:0;width:min(460px,calc(92 * var(--vw)));background:var(--kalk);color:var(--bruin);transform:translateX(100%);transition:transform .5s var(--ease-out);display:flex;flex-direction:column}
.drawer.is-open .drawer__paneel{transform:none}
.drawer__kop{display:flex;justify-content:space-between;align-items:center;padding:0 24px;height:var(--hdr);border-bottom:1px solid var(--lijn);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.drawer__kop button{width:44px;height:44px;display:grid;place-items:center;margin-right:-12px}
.drawer__kop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
.drawer__body{flex:1;overflow:auto;padding:4px 24px 20px}
.drawer__leeg{padding:40px 0;text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen)}
.tas-item{display:grid;grid-template-columns:84px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--lijn)}
.tas-item img{aspect-ratio:3/4;object-fit:cover;width:84px;background:var(--zand)}
.tas-item__geenbeeld{display:block;width:84px;aspect-ratio:3/4;background:var(--zand)}
/* Tikdoelen in de tas waren onder 44px, ook op 375 breed. De knoppen blijven optisch klein, maar
   krijgen via een pseudo-element een hitbox van 44px. */
/* Losstaande tekstlinks van 14 tot 17px hoog haalden de 24px van WCAG 2.5.8 niet (een link in
   lopende tekst is uitgezonderd, deze niet). Een pseudo-element maakt de hitbox 24px zonder de
   lay-out te verschuiven; .cta gebruikt ::after al voor de onderlijn, dus hier ::before. */
.cta,.kaart__titel,.bar a,.pdp__kruimel a,.kaart__merk{position:relative}
.cta::before,.kaart__titel::before,.bar a::before,.pdp__kruimel a::before{content:"";position:absolute;left:-3px;right:-3px;top:50%;translate:0 -50%;height:24px;min-width:24px}
.tas-item__aantal button,.tas-item__weg{position:relative}
.tas-item__aantal button::after,.tas-item__weg::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;min-width:44px;min-height:44px;width:100%;height:100%}
/* Toestemmingszin bij de nieuwsbrief. Klein maar leesbaar: de bezoeker moet hem kunnen lezen
   voor ze verstuurt, dat is de hele bedoeling van een toestemming. Contrast gemeten op AA. */
.footer__toestemming{margin-top:10px;font-size:11px;line-height:1.55;color:var(--steen);max-width:360px}
.footer__toestemming a{text-decoration:underline}
.footer__toestemming[hidden]{display:none}
/* De spamcontrole laadt pas bij aanraking; tot die tijd neemt het blokje geen ruimte in. */
.footer__spam{margin-top:10px}
.footer__spam:empty{margin-top:0}
.footer__spam[hidden]{display:none}
.footer__melding{margin-top:10px;font-size:12px;line-height:1.5;color:var(--bruin)}
.footer__melding[hidden]{display:none}
.tas-item__titel{font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.tas-item__meta{font-size:11px;color:var(--steen);margin-top:4px}
.tas-item__rij{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:11px}
.tas-item__aantal{display:inline-flex;border:1px solid var(--lijn)}
.tas-item__aantal button{width:30px;height:30px;display:grid;place-items:center}
.tas-item__aantal span{display:grid;place-items:center;min-width:30px;font-variant-numeric:tabular-nums}
.tas-item__weg{margin-top:10px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen);text-decoration:underline;text-underline-offset:3px;min-height:24px}
.drawer__voet{padding:20px 24px 28px;border-top:1px solid var(--lijn)}
.drawer__totaal{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:14px}
.drawer__voet .btn{border-radius:0}
/* Verzendregel in de tas (8 okt 2026): "Nog € x tot gratis verzending" met een dunne balk. Rustig, geen beweging. */
.verzend{margin:-4px 0 16px;font-size:12px;line-height:1.5;color:var(--bruin)}
.verzend__balk{height:3px;background:var(--lijn);margin:8px 0 6px;overflow:hidden}
.verzend__balk span{display:block;height:100%;width:calc(var(--deel,0) * 100%);background:var(--paars-diep)}
.verzend[data-gratis] .verzend__balk{display:none}
.verzend__sub{font-size:11px;color:var(--steen)}
.tas-pagina__som .verzend{margin:-12px 0 24px}
/* Kassa in de tas zelf (5 okt 2026): de tas-pagina is nu een rustige tekstlink eronder. */
.drawer__fout{margin-top:12px;font-size:12px;line-height:1.55;color:var(--paars-diep)}
.drawer__naar-tas{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:4px;font-size:13px;color:var(--bruin);text-decoration:underline;text-underline-offset:3px}
.drawer__naar-tas:hover{color:var(--paars-diep)}
.drawer__voet .btn--vol:disabled{background:var(--kalk-gedempt);color:var(--steen);cursor:not-allowed}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 20px;z-index:90;background:var(--bruin);color:var(--kalk);padding:12px 20px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;opacity:0;transition:opacity .3s,translate .4s var(--ease-out);pointer-events:none;box-shadow:var(--schaduw-zacht)}
.toast.is-zichtbaar{opacity:1;translate:-50% 0}

/* ---------- Collectiepagina ---------- */
.collectie__kop{padding:0 var(--gutter);text-align:center;margin-top:50px}
.collectie__tel{margin-top:14px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen)}
.collectie__balk{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 var(--gutter);margin-top:40px;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);height:46px;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.collectie__balk .filters{grid-column:2;display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;height:100%;justify-content:center}
.collectie__balk .filters::-webkit-scrollbar{display:none}
.collectie__balk .filters button{white-space:nowrap;color:var(--steen);font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:0;position:relative;height:100%}
.collectie__balk .filters button.is-actief{color:var(--bruin)}
.collectie__balk .filters button.is-actief::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--paars)}
.collectie__filterknop{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:8px;height:100%;color:var(--bruin);font-size:11px;text-transform:uppercase;letter-spacing:.4px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--lijn-sterk)}
.collectie__filterknop:hover,.collectie__filterknop:focus-visible{text-decoration-color:var(--paars)}
.collectie__filterbol{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--paars);color:#fff;display:inline-grid;place-items:center;font-size:10px;letter-spacing:0}
.collectie__filterbol[hidden]{display:none}
@media (max-width:767px){
  .collectie__balk{grid-template-columns:1fr auto;height:auto;padding:0;gap:0}
  .collectie__balk .filters{grid-column:1/-1;width:100%;padding:0 var(--gutter);height:46px;border-bottom:1px solid var(--lijn);justify-content:flex-start}
  .collectie__filterknop{grid-column:1/-1;justify-self:end;height:44px;padding-right:var(--gutter)}
}

/* Filterpaneel rechts */
.filterpaneel{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.filterpaneel.is-open{visibility:visible;pointer-events:auto}
.filterpaneel__achter{position:absolute;inset:0;background:rgb(74 67 56 / .45);opacity:0;transition:opacity .3s}
.filterpaneel.is-open .filterpaneel__achter{opacity:1}
.filterpaneel__paneel{position:absolute;top:0;right:0;bottom:0;width:min(400px,calc(92 * var(--vw)));background:var(--kalk);color:var(--bruin);transform:translateX(100%);transition:transform .5s var(--ease-out);display:flex;flex-direction:column}
.filterpaneel.is-open .filterpaneel__paneel{transform:none}
.filterpaneel__balk{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);padding:0 24px;border-bottom:1px solid var(--lijn);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.filterpaneel__balk button{width:44px;height:44px;display:grid;place-items:center;margin-right:-12px}
.filterpaneel__balk svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.filterpaneel__body{flex:1;overflow:auto;overscroll-behavior:contain;padding-bottom:20px}
.filterpaneel__sorteer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--lijn);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen)}
.filterpaneel__sorteer select{font:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--bruin);background:transparent;border:1px solid var(--lijn);padding:8px 10px;min-height:38px;border-radius:0}
.filterpaneel__groep{border-bottom:1px solid var(--lijn)}
.filterpaneel__groep h3{margin:0;font:inherit}
.filterpaneel__kop{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 24px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--bruin);text-align:left}
.filterpaneel__chevron{width:11px;height:7px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;color:var(--steen);transition:transform .3s var(--ease-out)}
.filterpaneel__groep[data-open] .filterpaneel__chevron{transform:rotate(180deg)}
.filterpaneel__opties{display:none;padding:0 24px 18px}
.filterpaneel__groep[data-open] .filterpaneel__opties{display:block}
.filterpaneel__optie{display:flex;align-items:center;gap:10px;min-height:38px;cursor:pointer;font-size:12px;letter-spacing:.2px;color:var(--bruin-zacht)}
.filterpaneel__subkop{margin:14px 0 6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--steen)}
.filterpaneel__subkop:first-child{margin-top:0}
.filterpaneel__optie input{position:absolute;opacity:0;width:0;height:0}
.filterpaneel__vink{flex:none;width:15px;height:15px;border:1px solid var(--lijn-sterk);display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.filterpaneel__optie input:checked+.filterpaneel__vink{background:var(--paars);border-color:var(--paars)}
.filterpaneel__optie input:checked+.filterpaneel__vink::after{content:"";width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.filterpaneel__optie input:focus-visible+.filterpaneel__vink{outline:2px solid var(--paars);outline-offset:2px}
.filterpaneel__optie input:checked~.filterpaneel__label{color:var(--bruin)}
.filterpaneel__stip{flex:none;width:14px;height:14px;border-radius:999px;border:1px solid var(--lijn)}
.filterpaneel__label{flex:1}
.filterpaneel__aantal{color:var(--lijn-sterk);font-size:11px}
.filterpaneel__voet{display:flex;align-items:center;gap:16px;padding:16px 24px;border-top:1px solid var(--lijn);background:var(--kalk)}
.filterpaneel__wis{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen);text-decoration:underline;text-underline-offset:4px;min-height:44px;padding-right:4px}
.filterpaneel__wis:hover,.filterpaneel__wis:focus-visible{color:var(--bruin)}
.filterpaneel__toon{flex:1;gap:.4em}
/* minmax(0,1fr) in plaats van 1fr: 1fr is minmax(auto,1fr), dus de minimumbreedte van een kaart
   (de maatknoppen staan op nowrap) duwde het raster op 320 breed 11px buiten de pagina. */
.raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:50px 30px;padding:30px var(--gutter) 0}
@media (max-width:1023px){.raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 15px}}
/* Zonder tussenstap sprong het raster bij 1024 van 2 naar 4 kolommen. */
@media (min-width:1024px) and (max-width:1279px){.raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}}
.raster .kaart[hidden]{display:none}
/* Snelheidsronde 23 sep 2026: in het grote raster (collectie, merkpagina's, 15-250 kaarten) bouwt de
   browser alleen de kaarten op die bij het beeld komen. De geschatte hoogte = kolombreedte x 4/3 (foto)
   + 62px (titel, merk, prijs), gemeten op 375/900/1100/1440; 'auto' onthoudt daarna de echte hoogte,
   zodat terugscrollen niet verspringt. Filteren zet [hidden] (display:none) en telt via de DOM, dus
   dat blijft gelijk. */
.raster>.kaart{content-visibility:auto;contain-intrinsic-size:auto 320px auto calc((100vw - 2 * var(--gutter) - 90px) / 4 * 4 / 3 + 62px)}
@media (min-width:1024px) and (max-width:1279px){.raster>.kaart{contain-intrinsic-size:auto 330px auto calc((100vw - 2 * var(--gutter) - 40px) / 3 * 4 / 3 + 62px)}}
@media (max-width:1023px){.raster>.kaart{contain-intrinsic-size:auto 170px auto calc((100vw - 2 * var(--gutter) - 15px) / 2 * 4 / 3 + 62px)}}
.raster__leeg{padding:60px var(--gutter);text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen)}

/* ---------- Productpagina ---------- */
.pdp{display:grid;grid-template-columns:65% 35%;margin-top:var(--gap)}
@media (max-width:1023px){.pdp{grid-template-columns:1fr}}
.pdp__galerij{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:0 var(--gap)}
.pdp__galerij img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--zand)}
/* Blijft er na het filteren op kleur een enkele foto over, dan bleef de tweede kolom leeg staan.
   Dan een kolom, met een bovengrens zodat het beeld niet de hele pagina vult. */
@media (min-width:768px){.pdp__galerij.is-een{grid-template-columns:minmax(0,1fr);max-width:560px}}
@media (max-width:767px){.pdp__galerij{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:0;scrollbar-width:none}.pdp__galerij::-webkit-scrollbar{display:none}.pdp__galerij img{flex:0 0 100%;scroll-snap-align:start}}
.pdp__punten{display:none;justify-content:center;gap:6px;margin-top:12px}
@media (max-width:767px){.pdp__punten{display:flex}}
.pdp__punten span{width:5px;height:5px;border-radius:50%;background:var(--lijn-sterk)}
.pdp__punten span.is-actief{background:var(--bruin)}
.pdp__zijbalk{position:sticky;top:calc(var(--hdr) + 16px);align-self:start;padding:30px 60px 40px 50px}
@media (max-width:1279px){.pdp__zijbalk{padding:30px var(--gutter)}}
@media (max-width:1023px){.pdp__zijbalk{position:static;padding-top:24px}}
.pdp__kruimel{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen)}
.pdp__kruimel a:hover{color:var(--bruin)}
.pdp__kop{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:22px}
.pdp__titel{font-family:var(--font-display);font-size:30px;line-height:1.1;font-weight:400;letter-spacing:-.005em;text-wrap:balance}
.pdp__titel small{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--steen);margin-top:8px}
.pdp__prijs{font-size:14px;white-space:nowrap;padding-top:8px;font-variant-numeric:tabular-nums}
.pdp__btw{display:block;font-size:11px;color:var(--bruin-zacht);text-align:right;margin-top:2px}
.pdp__intro{margin-top:22px;font-size:11px;letter-spacing:.4px;text-transform:uppercase;line-height:1.6;color:var(--bruin-zacht)}
.pdp__opties{margin-top:30px}
.pdp__optie+.pdp__optie{margin-top:22px}
.pdp__optie-kop{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen)}
.pdp__optie-kop button{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen);text-decoration:underline;text-underline-offset:3px;min-height:24px}
.pdp__kleuren,.pdp__maten{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pdp__kleuren label,.pdp__maten label{position:relative;display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--lijn);font-size:11px;cursor:pointer;transition:border-color .2s}
.pdp__kleuren label:hover,.pdp__maten label:hover{border-color:var(--bruin)}
.pdp__kleuren input,.pdp__maten input{position:absolute;opacity:0;pointer-events:none}
/* De radio zelf is onzichtbaar (opacity 0), dus de focusring moet op het label staan. Zonder deze regel
   gaf Tab op 276 productpagina's geen zichtbare focus (gemeten 20 sep 2026). */
.pdp__kleuren label:has(input:focus-visible),.pdp__maten label:has(input:focus-visible){outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--paars-diep)}
.pdp__optie-kop .pdp__maathulp-knop{min-height:44px;min-width:44px;padding:0 4px}
.pdp__maathulp{margin-top:8px;font-size:12px;line-height:1.5;color:var(--steen)}
.pdp__maathulp[hidden]{display:none}
.pdp__kleuren label:has(:checked),.pdp__maten label:has(:checked){border-color:var(--bruin);box-shadow:inset 0 0 0 1px var(--bruin)}
.pdp__maten label.is-uit{color:var(--lijn-sterk);text-decoration:line-through;cursor:not-allowed}
.pdp__maten label.is-uit:hover{border-color:var(--lijn)}
.pdp__fout{display:none;margin-top:10px;font-size:11px;color:var(--paars-diep)}
.pdp__fout.is-zichtbaar{display:block}
.pdp__voorraad{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:11px;letter-spacing:.2px;color:var(--steen)}
.pdp__voorraad .bol{width:7px;height:7px;border-radius:50%;background:#5a8a5c;flex:none}
.pdp__voorraad.is-laag .bol{background:#c48a2c}
.pdp__voorraad.is-uitverkocht .bol{background:#9a3a3a}
/* Een uitgeschakelde knop moet niet als een actieve knop lezen: gevuld paars met witte tekst
   oogt klikbaar, ook op 55% dekking. Dus rustig vlak met een lijn eromheen. */
.pdp__acties .btn--vol:disabled{background:var(--kalk-gedempt);color:var(--steen);border:1px solid var(--lijn-sterk);cursor:not-allowed}
.pdp__acties{display:flex;gap:10px;margin-top:20px}
.pdp__acties .btn--vol{flex:1;min-height:46px;border-radius:0}
.pdp__hart{width:46px;height:46px;flex:none;display:grid;place-items:center;border:1px solid var(--bruin);color:var(--bruin);transition:background-color .2s,color .2s}
.pdp__hart svg{width:16px;height:14px;fill:none;stroke:currentColor}
.pdp__hart.is-actief{background:var(--paars);border-color:var(--paars);color:#fff}
.pdp__hart.is-actief svg{fill:currentColor}
/* Twee lijnknoppen naast elkaar onder de koopknop: Vraag KUIF (WhatsApp) en Passen in de winkel.
   minmax(0,1fr) zodat een lang label het raster niet uit de zijbalk duwt. Past een van de twee
   labels niet meer op een regel, dan gaan ze onder elkaar (zie de media-regel hieronder). */
.pdp__hulp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.pdp__hulp[hidden]{display:none}
.pdp__hulp-knop{border-radius:0;min-height:46px;padding:0 8px;white-space:nowrap}
@media (max-width:359px){.pdp__hulp{grid-template-columns:minmax(0,1fr)}}
/* Ellie's tip. Bestaat de tip niet, dan staat dit blok er niet: geen lege kop, geen lijn. */
.pdp__tip{margin-top:30px;padding-top:22px;border-top:1px solid var(--lijn)}
.pdp__tip-label{display:block}
.pdp__tip-tekst{margin-top:10px;font-size:14px;line-height:1.7;color:var(--bruin)}
.pdp__tip-tekst p+p{margin-top:8px}
.pdp__tip-hand{font-family:'Homemade Apple',cursive;color:var(--paars-diep);font-size:1rem;margin-top:14px}
.pdp__betaal{margin-top:16px;text-align:center;font-size:10px;letter-spacing:.2px;color:var(--steen)}
.pdp__pasvorm{margin-top:36px;border-top:1px solid var(--lijn);padding-top:20px}
.pdp__pasvorm .label{display:block}
.pdp__schaal{display:flex;justify-content:space-between;margin-top:22px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen);position:relative}
.pdp__schaal::before{content:"";position:absolute;left:0;right:0;top:-10px;height:1px;background:var(--lijn)}
.pdp__schaal span{position:relative}
.pdp__schaal span.is-actief{color:var(--bruin)}
.pdp__schaal span.is-actief::before{content:"";position:absolute;left:50%;top:-13px;translate:-50% 0;width:7px;height:7px;border-radius:50%;background:var(--paars)}
.pdp__schaal-noot{margin-top:14px;font-size:12px;line-height:1.6;color:var(--bruin-zacht)}
.pdp__acc{margin-top:36px;border-top:1px solid var(--lijn)}
.pdp__acc details{border-bottom:1px solid var(--lijn)}
.pdp__acc summary{display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;list-style:none}
.pdp__acc summary::-webkit-details-marker{display:none}
.pdp__acc summary::after{content:"+";font-family:var(--font-display);font-size:20px;line-height:1;font-weight:400}
.pdp__acc details[open] summary::after{content:"–"}
.pdp__acc-body{padding:0 0 20px;font-size:13px;line-height:1.7;color:var(--bruin-zacht)}
.pdp__acc-body p+p{margin-top:8px}
.pdp__acc-body dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.pdp__acc-body dt{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen);padding-top:3px}
.pdp__acc-body dd{margin:0}
.zeker--pdp{margin-top:var(--gap);padding:36px var(--gutter)}
.zeker--pdp .zeker__wrap{gap:20px}
.zeker--pdp .zeker__titel{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.6px;line-height:1.4}
.zeker--pdp .zeker__tekst{margin-top:4px}
.pdp-ook .sectie__kop{margin-top:80px}

/* ---------- Beweging ---------- */
.js img.fade{opacity:0}
.js img.fade.is-in{animation:beeld-in .6s ease forwards}
@keyframes beeld-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .js img.fade{opacity:1}
}

/* ---------- Dienstpagina's ---------- */
.dienst__tekst{max-width:720px;margin:90px auto 0;padding:0 var(--gutter);text-align:center}
@media (max-width:767px){.dienst__tekst{margin-top:60px}}
.dienst__kop{font-family:var(--font-display);text-transform:uppercase;font-size:30px;line-height:1.1;letter-spacing:-.4px;text-wrap:balance}
.dienst__body{margin-top:26px;font-size:15px;line-height:1.7;color:var(--bruin-zacht);text-align:left}
.dienst__body p+p{margin-top:14px}
.dienst__body p:first-child{font-family:var(--font-display);font-size:clamp(1.15rem,calc(1.5 * var(--vw)),1.4rem);line-height:1.4;color:var(--bruin);text-align:center;text-wrap:pretty}
.stappen{margin:100px auto 0;padding:0 var(--gutter);max-width:1300px;text-align:center}
.stappen__lijst{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 30px;margin:44px 0 0;padding:0;counter-reset:stap;list-style:none;text-align:left}
@media (max-width:1023px){.stappen__lijst{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.stappen__lijst{grid-template-columns:1fr;gap:28px}}
.stappen__lijst li{border-top:1px solid var(--lijn);padding-top:18px;counter-increment:stap}
.stappen__lijst h3{font-family:var(--font-display);font-size:1.3rem;font-weight:400;line-height:1.2}
.stappen__lijst h3::before{content:counter(stap);display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.6px;color:var(--steen);margin-bottom:12px}
.stappen__lijst p{margin-top:10px;font-size:14px;line-height:1.65;color:var(--bruin-zacht)}
.tiers{margin-top:var(--sectie-lucht);background:var(--zand);padding:70px var(--gutter) 60px;text-align:center}
@media (max-width:767px){.tiers{margin-top:70px;padding:50px var(--gutter)}}
.tiers__wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);max-width:1300px;margin:40px auto 0;text-align:left}
@media (max-width:1023px){.tiers__wrap{grid-template-columns:1fr}}
.tier{background:var(--kalk);padding:34px 30px 30px;display:flex;flex-direction:column;min-height:300px}
.tier__label{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--steen)}
.tier__titel{font-family:var(--font-display);font-size:1.6rem;font-weight:400;line-height:1.15;margin-top:12px}
.tier__tekst{margin-top:14px;font-size:14px;line-height:1.65;color:var(--bruin-zacht);flex:1}
.tier__prijs{display:block;margin-top:22px;padding-top:16px;border-top:1px solid var(--lijn);font-family:var(--font-display);font-size:1.4rem}
.tiers__noot{max-width:720px;margin:28px auto 0;font-size:12px;line-height:1.6;color:var(--steen)}
/* Een losse tier (aan huis heeft er maar een) centreert; anders staan er twee kolommen leeg. */
.tiers--een .tiers__wrap{grid-template-columns:minmax(0,560px);justify-content:center}

/* ---------- Drie wegen (hub Personal styling, fase 7) ---------- */
.dienst__kruimel{max-width:1300px;margin:30px auto 0;padding:0 var(--gutter)}
.wegen{margin:var(--sectie-lucht) auto 0;padding:0 var(--gutter);max-width:1300px;text-align:center}
.wegen__lijst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:40px;text-align:left}
@media (max-width:900px){.wegen__lijst{grid-template-columns:1fr;gap:50px;margin-top:34px}}
.weg{display:flex;flex-direction:column;align-items:flex-start}
.weg__beeld{display:block;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--zand)}
.weg :where(img){width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.weg:hover :where(img),.weg:focus-visible :where(img){transform:scale(1.05)}
.weg__titel{display:block;font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:min(32px,calc(3 * var(--vw)));line-height:1;letter-spacing:-.02em;margin-top:22px}
.weg__stappen{width:100%;margin-top:16px}
.weg__stappen li{border-top:1px solid var(--lijn);padding:11px 0;font-size:14px;line-height:1.55;color:var(--bruin-zacht)}
.weg .cta{margin-top:20px}
/* De kleuranalyse hoort bij New You en is los te boeken: eigen zandvlak onder de drie wegen. */
.wegen__los{margin-top:var(--gap);background:var(--zand);padding:clamp(28px,calc(3.4 * var(--vw)),48px) clamp(24px,calc(4 * var(--vw)),60px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;text-align:left}
@media (max-width:767px){.wegen__los{grid-template-columns:1fr;text-align:center;justify-items:center}}
.wegen__los-titel{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:min(32px,calc(3 * var(--vw)));line-height:1;letter-spacing:-.02em}
.wegen__los-tekst{margin-top:12px;font-size:14px;line-height:1.65;color:var(--bruin-zacht);max-width:56ch}
/* De regel boven het stijlprofiel: invullen is gratis, de fee speelt pas bij een pakket. */
.profiel__gratis{margin-top:18px;font-size:14px;line-height:1.6;color:var(--bruin);font-weight:600}
.dienst__faq{max-width:720px;margin:100px auto 0;padding:0 var(--gutter);text-align:center}
.dienst__faq .pdp__acc{text-align:left;margin-top:30px}
.dienst__faq summary{font-family:var(--font-body);font-weight:600;text-transform:none;letter-spacing:0;font-size:14px}
.cta-band{margin-top:var(--sectie-lucht);background:var(--bruin);color:var(--kalk);padding:90px var(--gutter);text-align:center}
@media (max-width:767px){.cta-band{margin-top:70px;padding:60px var(--gutter)}}
.cta-band__kop{font-family:var(--font-display);text-transform:uppercase;font-size:min(45px,12.5vw);line-height:.9;letter-spacing:-1px;color:var(--roze);text-wrap:balance;hyphens:auto}
@media (min-width:768px){.cta-band__kop{font-size:65px;line-height:58px;letter-spacing:-2px}}
.cta-band__tekst{max-width:46ch;margin:22px auto 0;font-size:15px;line-height:1.65;color:var(--kalk-gedempt)}
.cta-band .btn{margin-top:30px}
.cta-band ::selection{background:var(--paars);color:#fff}
.cta-band+.footer{padding-top:0}
.cta-band+.footer .footer__main{padding-top:60px}
/* Verlanglijst en account */
.wens__leeg{display:none;text-transform:none;letter-spacing:0;font-size:15px;line-height:1.7;color:var(--bruin-zacht);max-width:44ch;margin-inline:auto}
.wens__leeg.is-zichtbaar{display:block}
.wens__noot{max-width:60ch;margin:60px auto 0;padding:0 var(--gutter);text-align:center;font-size:12px;line-height:1.6;color:var(--steen)}
.account{padding:40px var(--gutter) 0}
.account__kaart{max-width:560px;margin:0 auto;background:var(--zand);padding:44px 40px;text-align:center}
.account__kaart p{margin-top:18px;font-size:14px;line-height:1.7;color:var(--bruin-zacht)}
.account__kaart .btn{margin-top:28px}

/* ---------- Correcties 18 sep: lucht rond de fotoband, kleinere bloktitels ---------- */
main > .hero-sectie:not(:first-child){margin-top:var(--gap)}
.rij-1x1--laag .blok__titel{font-size:min(36px,calc(8.6 * var(--vw)));line-height:.95}
@media (min-width:768px){.rij-1x1--laag .blok__titel{font-size:clamp(32px,calc(3.4 * var(--vw)),52px);line-height:.95}}
.rij-1x1--laag .blok__content{padding:25px clamp(24px,calc(6 * var(--vw)),90px)}

/* ---------- Uit het filmpje (startpagina) ---------- */
.filmpje{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--gap);padding:0 var(--gap);margin-top:var(--gap);align-items:start}
.filmpje__speler{position:relative;aspect-ratio:9/16;min-height:0}
.filmpje__video{position:absolute;inset:0;display:block;overflow:hidden;background:var(--bruin)}
.filmpje__video :where(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 2s var(--ease-out)}
.filmpje__video:hover :where(img,video),.filmpje__video:focus-visible :where(img,video){transform:scale(1.04)}
.filmpje__speler .film__geluid{z-index:2;top:auto;bottom:18px}
.filmpje__video video::cue{font-size:.85em;line-height:1.4;color:#fff;background:rgba(43,35,31,.62)}
.filmpje__video video::-webkit-media-text-track-container{font-size:15px}
.filmpje__speler.is-speelt .filmpje__play{opacity:0;visibility:hidden}
.filmpje__play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--paars);color:#fff;box-shadow:var(--schaduw-zacht);transition:background-color .25s,scale .4s var(--ease-out),opacity .4s var(--ease-out),visibility .4s}
.filmpje__play svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.filmpje__video:hover .filmpje__play{background:var(--paars-diep);scale:1.06}
.filmpje__inhoud{background:var(--zand);padding:clamp(30px,calc(4 * var(--vw)),50px) clamp(20px,calc(4 * var(--vw)),60px) clamp(30px,calc(4 * var(--vw)),50px);text-align:center;display:flex;flex-direction:column;align-items:center}
.filmpje__intro{max-width:44ch;margin-top:20px;font-size:15px;line-height:1.65;color:var(--bruin-zacht)}
.filmpje__inhoud>.cta{margin-top:20px}
.filmpje__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px;width:100%;text-align:left}
.filmpje__raster .kaart__kop{background:var(--kalk)}
@media (max-width:1279px){.filmpje__raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.filmpje__speler{min-height:0}}
@media (max-width:899px){.filmpje{grid-template-columns:minmax(0,1fr);justify-items:center}.filmpje__speler{aspect-ratio:9/16;width:min(340px,86%)}.filmpje__inhoud{width:100%}.filmpje__speler .film__geluid{top:14px;bottom:auto}}
.kaart__sticker--film{background:var(--bruin);color:var(--kalk)}

/* ---------- Filmpje-pagina ---------- */
.film{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:clamp(24px,calc(4 * var(--vw)),60px);padding:40px var(--gutter) 0;align-items:start}
.film__video{position:sticky;top:calc(var(--hdr) + 20px)}
.film__video video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--bruin)}
.film__speler{position:relative}
.film__speler video::cue{font-size:.8em;background:rgba(0,0,0,.55)}
.film__geluid{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.88);color:var(--bruin);font:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);transition:background .25s ease,opacity .25s ease}
.film__geluid:hover{background:#fff}
.film__geluid:focus-visible{outline:2px solid var(--bruin);outline-offset:3px}
.film__geluid :where(svg){display:block}
.film__geluid .film__geluid-aan{display:none}
.film__geluid[aria-pressed="true"] .film__geluid-uit{display:none}
.film__geluid[aria-pressed="true"] .film__geluid-aan{display:block}
.is-bediening .film__geluid{display:none}
@media (prefers-reduced-motion:reduce){.film__geluid{transition:none}}
.film__bij{margin-top:10px;font-size:12px;line-height:1.5;color:var(--steen)}
.film__bij a{text-decoration:underline;text-underline-offset:3px}
.film__inhoud .sectie__titel{text-align:left}
.film__intro{max-width:56ch;margin-top:20px;font-size:15px;line-height:1.7;color:var(--bruin-zacht)}
.film__inhoud .collectie__tel{margin-top:22px}
.raster--film{grid-template-columns:repeat(3,minmax(0,1fr));padding:30px 0 0}
@media (max-width:1100px){.raster--film{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.film{grid-template-columns:1fr;padding-top:var(--gap);padding-inline:0}.film__video{position:static}.film__video video{max-height:78svh}.film__bij,.film__inhoud{padding:0 var(--gutter)}.film__inhoud .sectie__titel{text-align:center}.film__intro{margin-inline:auto}.film__inhoud{text-align:center}.raster--film{text-align:left}}

/* ---------- Winkeltas-pagina en pakket ---------- */
.pakket[hidden]{display:none}
.tas-pagina,.pakket{display:grid;grid-template-columns:1fr 380px;gap:clamp(30px,calc(5 * var(--vw)),80px);max-width:1300px;margin:40px auto 0;padding:0 var(--gutter);align-items:start}
@media (max-width:1023px){.tas-pagina,.pakket{grid-template-columns:1fr}}
.tas-pagina__lijst{border-top:1px solid var(--lijn)}
.tas-pagina__lijst .tas-item{grid-template-columns:120px 1fr;gap:22px;padding:22px 0}
.tas-pagina__lijst .tas-item img{width:120px}
.tas-pagina__lijst .tas-item__titel{font-size:12px}
.tas-pagina__som,.pakket__som{position:sticky;top:calc(var(--hdr) + 20px);background:var(--zand);padding:30px}
@media (max-width:1023px){.tas-pagina__som{position:static}.pakket__som{position:sticky;top:auto;bottom:0;z-index:10;padding:18px var(--gutter);margin-inline:calc(-1*var(--gutter));border-top:1px solid var(--lijn)}.pakket__som .tas-pagina__hulp{display:none}.pakket__som dl{grid-template-columns:repeat(4,auto);font-size:11px;gap:2px 14px}}
.tas-pagina__som dl,.pakket__som dl{display:grid;grid-template-columns:1fr auto;gap:12px 20px;margin:20px 0 24px;font-size:13px}
.tas-pagina__som dt,.pakket__som dt{color:var(--bruin-zacht)}
.tas-pagina__som dd,.pakket__som dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.tas-pagina__som .btn,.pakket__som .btn{border-radius:0}
.tas-pagina__som .btn+.btn{margin-top:10px}
.tas-pagina__noot{margin-top:12px;font-size:12px;line-height:1.55;color:var(--paars-diep)}
.tas-pagina__hulp{margin-top:22px;font-size:12px;line-height:1.6;color:var(--steen)}
.tas-pagina__hulp a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pakket__vb{max-width:56ch;margin:16px auto 0;font-size:13px;line-height:1.6;color:var(--steen)}
.set+.set{margin-top:70px}
.set__kop{max-width:60ch}
.set__kop .dienst__kop{text-align:left}
.set__notitie{margin-top:14px;white-space:pre-line;font-family:var(--font-display);font-size:1.15rem;line-height:1.45;color:var(--bruin);text-wrap:pretty}
.set__wie{margin-top:8px;font-family:'Homemade Apple',cursive;color:var(--paars-diep);font-size:1rem}
.set__stuks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
@media (max-width:600px){.set__stuks{grid-template-columns:1fr 1fr;gap:24px 12px}}
.stuk__beeld{display:block;overflow:hidden;background:var(--zand)}
.stuk__beeld img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:opacity .3s,filter .3s}
.stuk.is-terug .stuk__beeld img{opacity:.45;filter:grayscale(.6)}
.stuk__info{margin-top:8px}
.stuk__keuze{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;border:1px solid var(--lijn-sterk)}
.stuk__keuze button{min-height:44px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--bruin);transition:background-color .2s,color .2s}
.stuk__keuze button+button{border-left:1px solid var(--lijn-sterk)}
.stuk__keuze button[aria-pressed=true][data-keuze=houden]{background:var(--paars);color:#fff}
.stuk__keuze button[aria-pressed=true][data-keuze=terug]{background:var(--bruin);color:var(--kalk)}

/* ---------- Persoonlijke voorstelpagina (fase 9) ----------
   Geen zijbalk zoals het pakket: hier wordt niets afgevinkt, hier wordt in de tas gelegd. De sets
   erven .set/.set__kop/.set__notitie/.set__wie van het pakket; alleen het kaartraster is anders,
   want dit zijn gewone productkaarten met een plusknop. */
.voorstel{max-width:1300px;margin:40px auto 0;padding:0 var(--gutter)}
.voorstel__kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 30px;margin-top:26px}
@media (max-width:1023px){.voorstel__kaarten{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 15px}}
.voorstel__video{max-width:900px;margin:30px auto 0;padding:0 var(--gutter)}
.voorstel__video video{display:block;width:100%;height:auto;background:var(--zand)}
.voorstel__slot{max-width:520px;margin:70px auto 0;padding:0 var(--gutter) var(--gap);text-align:center}
.voorstel__slot-tekst{margin-bottom:22px;font-size:14px;line-height:1.65;color:var(--bruin-zacht)}
.voorstel__liever{margin-top:16px;font-size:13px;line-height:1.6}
.voorstel__liever a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Inloggen ---------- */
.login{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:var(--gap) var(--gap) 0}
.login__beeld{overflow:hidden;background:var(--zand);max-height:820px}
.login__beeld img{width:100%;height:100%;object-fit:cover}
.login__paneel{background:var(--zand);padding:clamp(40px,calc(7 * var(--vw)),110px) clamp(24px,calc(6 * var(--vw)),90px);display:flex;flex-direction:column;justify-content:center}
.login__paneel .sectie__titel{text-align:left}
.login__intro{margin-top:20px;max-width:40ch;font-size:15px;line-height:1.65;color:var(--bruin-zacht)}
.login__form{margin-top:30px;max-width:420px}
.login__form label{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:8px}
.login__form input{width:100%;height:48px;padding:0 14px;font:inherit;font-size:15px;color:var(--bruin);background:#fff;border:1px solid var(--lijn-sterk);border-radius:0}
.login__form input:focus-visible{outline:2px solid var(--paars);outline-offset:1px}
.login__form .btn{margin-top:14px;border-radius:0}
.login__fout{margin-top:8px;font-size:12px;color:var(--paars-diep)}
.login__ok{margin-top:14px;font-size:13px;line-height:1.6;color:var(--bruin)}
.login__lijst{margin-top:40px;padding-top:26px;border-top:1px solid var(--lijn-sterk);max-width:420px;display:grid;gap:10px;font-size:13px;color:var(--bruin-zacht)}
.login__lijst a{text-decoration:underline;text-underline-offset:3px;color:var(--bruin)}
@media (max-width:899px){.login{grid-template-columns:1fr}.login__beeld{max-height:300px}}

@media (max-width:1023px){
  .pakket__som{padding:12px var(--gutter) 14px}
  .pakket__som .label{display:none}
  .pakket__som dl{grid-template-columns:auto auto auto auto;justify-content:space-between;margin:0 0 10px;font-size:12px;gap:0 10px}
  .pakket__som dt:nth-of-type(2),.pakket__som dd:nth-of-type(2),.pakket__som dt:nth-of-type(3),.pakket__som dd:nth-of-type(3){display:none}
  .pakket__som dd{text-align:left;font-weight:600}
  .pakket__som .btn{min-height:44px}
  .pakket{padding-bottom:0}
}

/* ---------- Zoeken ---------- */
.zoek{position:fixed;inset:0;z-index:85;visibility:hidden;pointer-events:none}
.zoek.is-open{visibility:visible;pointer-events:auto}
.zoek__achter{position:absolute;inset:0;background:rgb(74 67 56 / .45);opacity:0;transition:opacity .3s}
.zoek.is-open .zoek__achter{opacity:1}
.zoek__paneel{position:absolute;top:0;left:0;right:0;max-height:100svh;overflow:auto;background:var(--kalk);color:var(--bruin);transform:translateY(-100%);transition:transform .5s var(--ease-out);overscroll-behavior:contain}
.zoek.is-open .zoek__paneel{transform:none}
.zoek__form{display:flex;align-items:center;gap:14px;padding:0 var(--gutter);height:calc(var(--hdr) + 22px);border-bottom:1px solid var(--lijn);position:sticky;top:0;background:var(--kalk);z-index:1}
.zoek__icoon{flex:none;display:grid;place-items:center;color:var(--steen)}
.zoek__icoon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}
.zoek__veld{flex:1;min-width:0;height:100%;border:0;background:transparent;font-family:var(--font-display);font-size:clamp(1.25rem,calc(2.4 * var(--vw)),2rem);color:var(--bruin);letter-spacing:-.01em;outline:none;-webkit-appearance:none;appearance:none}
.zoek__veld::placeholder{color:var(--lijn-sterk)}
.zoek__veld::-webkit-search-cancel-button{display:none}
.zoek__form:focus-within{border-bottom-color:var(--paars)}
.zoek__sluit{width:44px;height:44px;flex:none;display:grid;place-items:center;margin-right:-12px}
.zoek__sluit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
.zoek__body{padding:34px var(--gutter) 50px;max-width:1440px;margin:0 auto}
.zoek__snel{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:30px 60px}
.zoek__snel[hidden]{display:none}
.zoek__snel ul{margin-top:14px;display:grid;gap:10px}
.zoek__snel a{font-size:12px;text-transform:uppercase;letter-spacing:.2px;color:var(--steen)}
.zoek__snel a:hover{color:var(--bruin);text-decoration:underline;text-underline-offset:3px}
.zoek__tel{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen)}
.zoek__tel b{font-weight:400;color:var(--bruin)}
.zoek__raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 16px;margin-top:22px}
@media (max-width:1279px){.zoek__raster{grid-template-columns:repeat(4,1fr)}}
@media (max-width:767px){.zoek__raster{grid-template-columns:repeat(2,1fr);gap:22px 12px}.zoek__snel{grid-template-columns:1fr 1fr;gap:24px 20px}}
.zoek__item{display:block}
.zoek__item img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--zand)}
.zoek__item .kaart__titel{margin-top:8px}
.zoek__alles{margin-top:34px}
.zoek__alles[hidden]{display:none}
.zoek__geen{max-width:52ch;font-size:15px;line-height:1.7;color:var(--bruin-zacht)}
.zoek__geen a{text-decoration:underline;text-underline-offset:3px;color:var(--bruin)}
.collectie__merklink{margin-top:10px;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.collectie__merklink a{color:var(--bruin);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:12px 0}
.collectie__merklink[hidden]{display:none}
.collectie__zoekterm{margin-top:14px;font-family:var(--font-display);font-size:1.2rem}
.collectie__zoekterm a{font-family:var(--font-body);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen);text-decoration:underline;text-underline-offset:3px;margin-left:10px}

/* ---------- Cookietoestemming ----------
   Vaste band onderaan, nooit over de hero (DESIGN.md verwerpt banners over de hero).
   Staat in de HTML met [hidden]; JS haalt dat weg als er nog geen keuze bewaard is. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--kalk);color:var(--bruin);border-top:1px solid var(--lijn);box-shadow:0 -14px 40px -28px rgb(74 67 56 / .55);transform:translateY(101%);transition:transform .45s var(--ease-out)}
.consent[hidden]{display:none}
.consent.is-op{transform:none}
.consent{max-height:82svh;overflow-y:auto;overscroll-behavior:contain}
.consent__binnen{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 50px;padding-block:22px;padding-inline:max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)))}
.consent__kop{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:22px;line-height:1;letter-spacing:-.01em}
.consent__tekst p{margin-top:9px;font-size:13px;line-height:1.65;color:var(--bruin-zacht);max-width:68ch}
.consent__meer a{color:var(--bruin);text-decoration:underline;text-underline-offset:3px}
.consent__acties{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;justify-content:flex-end}
.consent__kiezen{margin-left:6px}
/* Klikvlak van 45px zonder dat de balk verschuift: padding erbij, even veel negatieve marge eraf, en de lijn blijft op zijn plek (eindtest A, 23 sep 2026). */
.consent__kiezen{padding-block:14px 16px;margin-block:-14px}
.consent__kiezen::after{bottom:14px}
.consent__kiezen[hidden]{display:none}
.consent__keuzes{grid-column:1/-1;display:grid;gap:2px;margin-top:4px;border-top:1px solid var(--lijn);padding-top:10px}
.consent__keuzes[hidden]{display:none}
.consent__rij{display:flex;align-items:flex-start;gap:14px;min-height:44px;padding:11px 0;cursor:pointer}
.consent__rij:has(input:disabled){cursor:default}
.consent__rij+.consent__rij{border-top:1px solid var(--lijn)}
@media (min-width:900px){
  .consent__keuzes{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;padding-top:14px}
  .consent__rij+.consent__rij{border-top:0}
  .consent__rij{padding:6px 0;align-items:flex-start}
}
.consent__rij input{appearance:none;flex:none;width:20px;height:20px;margin-top:1px;border:1px solid var(--lijn-sterk);background:var(--wit);transition:background-color .2s,border-color .2s}
.consent__rij input:checked{background:var(--paars);border-color:var(--paars)}
.consent__rij input:checked::after{content:"";display:block;width:6px;height:11px;margin:1px auto 0;border:solid var(--wit);border-width:0 1.5px 1.5px 0;rotate:45deg}
.consent__rij input:disabled{background:var(--lijn);border-color:var(--lijn-sterk)}
.consent__rij input:disabled:checked::after{border-color:var(--steen)}
.consent__rij input:focus-visible{outline:2px solid var(--paars);outline-offset:2px}
.consent__rij-tekst{font-size:12px;line-height:1.6;color:var(--bruin-zacht)}
.consent__rij-tekst b{display:block;font-weight:700;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--bruin)}
@media (max-width:899px){
  .consent__binnen{grid-template-columns:1fr;gap:16px;padding-block:18px}
  .consent__acties{justify-content:stretch}
  .consent__acties .btn{flex:1 1 calc(50% - 9px)}
  /* smalle telefoon: knoplabels passen niet naast elkaar op een regel */
  @media (max-width:519px){.consent__acties .btn{flex:1 0 100%}}
  .consent__kiezen{flex:1 0 100%;margin-left:0;text-align:center}
  .consent__tekst p{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.consent{transition:none}}

/* ---------- App ons: de zwevende WhatsApp-knop ---------- */
/* Staat in de HTML direct onder <body>: een ouder met transform, filter of backdrop-filter maakt
   zichzelf het containing block en breekt position:fixed. Eigen display, dus ook een
   [hidden]-regel. z-index 70 ligt onder de cookieband (80) en de panelen; zolang die open staan
   verbergt kuif.js de knop bovendien helemaal. */
.app-ons{position:fixed;right:var(--gutter);bottom:calc(var(--gutter) + var(--app-ons-extra, 0px) + env(safe-area-inset-bottom));z-index:70;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;background:var(--kalk);color:var(--bruin);border:1px solid var(--bruin);font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;box-shadow:var(--schaduw-zacht);transition:background-color .25s,color .25s}
.app-ons[hidden]{display:none}
.app-ons__icoon{display:inline-flex}
.app-ons svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.app-ons:hover,.app-ons:focus-visible{background:var(--bruin);color:var(--kalk)}
/* De eigen box-shadow van deze knop heeft dezelfde specificiteit als :focus-visible en staat later
   in het bestand: zonder deze regel wint hij en blijft er van de focusring alleen een witte lijn
   over, die op kalk vrijwel onzichtbaar is. Gemeten, niet bedacht. */
.app-ons:focus-visible{box-shadow:0 0 0 4px var(--paars-diep),var(--schaduw-zacht)}
/* Pagina's waar de knop niet hoort: de taspagina nu, straks ook de stijlquiz (fase 8 zet alleen
   de body-class, de regel staat hier al). */
body.geen-appknop .app-ons{display:none}
/* Onder 400px alleen het icoon; de naam blijft voor de voorleessoftware via aria-label. */
@media (max-width:399px){.app-ons{padding:0;width:46px;justify-content:center}
  .app-ons__tekst{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Zachte opkomst met de bestaande curve. Geen puls, geen badge. Zonder JS staat de knop er meteen. */
.js .app-ons{transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),background-color .25s,color .25s}
.js .app-ons.is-weg{opacity:0;transform:translate3d(0,10px,0);visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.app-ons,.js .app-ons{transition:none}}

/* Gecentreerde kolom: boven --max groeit de inhoud niet verder mee (21:9-schermen).
   Balken houden hun volle achtergrond, hun inhoud schuift mee naar binnen met de kolom. */
main{max-width:var(--max);margin-inline:auto}
.bar{padding-inline:max(48px,calc((100% - var(--max))/2 + 48px))}
.header__content{padding-inline:max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)))}
.mega__wrap{max-width:var(--max);margin-inline:auto}
/* Onderbalk op dezelfde 1300 px als het raster erboven; rechts ruimte voor de zwevende App ons-knop. */
.footer__onder{max-width:1300px;margin-inline:auto}
@media (min-width:768px){.footer__onder{padding-right:calc(var(--gutter) + 150px)}}
.bar__sluit{right:max(14px,calc((100% - var(--max))/2 + 14px))}
/* Blokken in een flex-rij kregen hun breedte van de foto, waardoor de rij maar ~72% gevuld was. */
.sectie__rij > .sectie__blok{flex:1 1 0;min-width:0}

/* ---------- Onthulling bij scrollen ----------
   De class .onthul staat NERGENS in de HTML: assets/kuif.js zet hem zelf, en alleen op elementen
   die bij het laden onder de vouw staan. Zonder JavaScript bestaat de class dus niet en is er ook
   geen opacity:0. De regel is daarnaast op .js gehaakt, als tweede slot. */
:root{--onthul-afstand:18px;--onthul-duur:520ms;--onthul-stap:70ms}
.js .onthul{opacity:0;transform:translate3d(0,var(--onthul-afstand),0);transition:opacity var(--onthul-duur) var(--ease-out),transform var(--onthul-duur) var(--ease-out);transition-delay:calc(var(--i,0) * var(--onthul-stap));will-change:opacity,transform}
.js .onthul--groot{--onthul-afstand:24px;--onthul-duur:640ms}
.js .onthul.is-in{opacity:1;transform:none;will-change:auto}
.js .onthul--direct{transition:none}
.js .onthul img.fade{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){.js .onthul{opacity:1;transform:none;transition:none;will-change:auto}}

/* Zolang de cookiebalk open staat, schuift de onderaan uitgelijnde hero-inhoud omhoog.
   Zonder deze regel viel de h1, de orientatieregel en de knop achter de balk. */
.consent-op .hero__inner{bottom:230px}
@media (max-width:767px){.consent-op .hero__inner{bottom:300px}}

/* ---------- Ankerblok op de startpagina (huiskamerband) ----------
   De referentie zet drie beelden over de volle breedte op 1,60 scherm; dat anker ontbrak hier,
   waardoor elk blok van 0,80 tot 1,04 als zwaar las. Zie _audit/REFERENTIE-METING.md.
   De bronfoto is 2000x1500, dus op 1440 breed is de natuurlijke hoogte 1080px = 1,20 scherm.
   Het beeld wordt daarom NIET opgerekt (dat sneed 14% van de breedte weg); de extra hoogte komt
   uit een zandvoet met de titel. Bijvangst: het donkere verloop, dat er alleen was om witte tekst
   leesbaar te maken, is hier niet meer nodig. */
.hero--anker{height:auto;min-height:0;display:block;background:var(--zand);color:var(--bruin)}
.hero--anker .hero__beeld{position:relative;height:min(120svh,1080px)}
.hero--anker::after{display:none}
.hero--anker .hero__content{position:relative;inset:auto;z-index:1;display:block;color:var(--bruin);padding:64px var(--gutter) 64px;text-align:center}
.hero--anker .hero__inner{position:static;align-self:auto;justify-content:center}
.hero--anker .hero__titel{color:var(--bruin);text-shadow:none}
.hero--anker .cta--licht{color:var(--bruin)}
.hero--anker .cta--licht::after{background:var(--bruin)}
@media (max-width:767px){.hero--anker .hero__beeld{height:min(78svh,620px)}.hero--anker .hero__content{padding:30px var(--gutter)}}

/* Hero op 1,22 scherm als eerste massa-anker. De inhoud staat GECENTREERD en niet onderaan:
   bij 1,22 scherm zou een onderaan uitgelijnde h1 onder de vouw vallen, en dan is het
   orientatiepunt dat hij moest oplossen weer weg. */
.hero--top{height:min(108svh,1040px)}
.hero--top .hero__inner{position:static;justify-content:center;align-self:center;bottom:auto}
.hero--top .hero__content{align-items:center}
@media (max-width:767px){.hero--top{height:min(100svh,820px)}}

/* De eerste carrousel volgt direct op de hero en draagt de eerste productkaart. Met het
   normale kopblok (90px marge plus 45px titel) landde die kaart op 1,54 scherm, terwijl de
   referentie hem op 1,36 heeft. Kop hier compacter; alleen dit ene blok. eerste-carrousel
   Sinds 23 sep volgt op de hero de personal-styling-band, en Nieuw binnen staat na de kleurband:
   de regel geldt daarom alleen nog direct na de topheader (:first-child) en de carrousel na de
   kleurband krijgt het normale kopblok. */
main > .hero-sectie:first-child + .sectie > .sectie__kop{margin-top:34px}
main > .hero-sectie:first-child + .sectie > .sectie__kop .sectie__titel{font-size:34px;line-height:32px}

/* Een class met een eigen display wint van het hidden-attribuut; zonder deze regel blijft een
   verborgen beeld gewoon staan. Zie gotcha display-overrulet-hidden. */
.pdp__galerij img[hidden],.pdp__punten span[hidden]{display:none}
.pdp__kleurnoot{margin-top:12px;padding:0 var(--gap);font-size:12px;line-height:1.55;color:var(--steen)}
@media (max-width:767px){.pdp__kleurnoot{padding:0 16px}}
.pdp__kleurnoot[hidden]{display:none}
/* 4 okt 2026: kleur zonder eigen foto, direct onder de kleurknoppen (zie kuif.js toonGalerij) */
.pdp__kleurgeenfoto{margin-top:12px;padding:10px 12px;background:var(--zand);font-size:13px;line-height:1.5;color:var(--bruin)}
.pdp__kleurgeenfoto[hidden]{display:none}
.pdp__kleurgeenfoto a{text-decoration:underline;text-underline-offset:3px}

/* ---------- New You online: ondertitel in de hero ---------- */
.hero__sub{margin-top:14px;max-width:34ch;text-align:center;color:#fff;font-size:13px;line-height:1.6;text-shadow:0 1px 18px rgb(74 67 56 / .45)}
@media (min-width:768px){.hero__sub{font-size:15px}}

/* ---------- Kruimels: de verwijzingen naar New You online door de reis heen ----------
   Drie vormen, meer niet: een link in lopende tekst, een regel onder een blok, en een eigen blok.
   Alle drie staan gewoon in de HTML, dus ook zonder JavaScript zichtbaar. */
.kruimel__link{text-decoration:underline;text-underline-offset:3px;color:var(--bruin)}
.kruimel__regel{margin-top:14px;max-width:62ch;font-size:13px;line-height:1.65;color:var(--bruin-zacht)}
.kruimel__regel a{text-decoration:underline;text-underline-offset:3px;color:var(--bruin)}
.kruimel__regel[hidden]{display:none}
.kruimel__regel--tas{margin:18px var(--gutter) 0}
.kruimel{margin-top:30px;padding-top:22px;border-top:1px solid var(--lijn)}
.kruimel__kop{font-family:var(--font-display);font-size:1.2rem;line-height:1.25;letter-spacing:-.01em}
.kruimel__tekst{margin:10px 0 16px;font-size:13px;line-height:1.65;color:var(--bruin-zacht)}
.zeker__link{display:block;color:inherit}
.zeker__link:hover .zeker__titel,.zeker__link:focus-visible .zeker__titel{color:var(--paars)}

/* ---------- Stijlprofiel-formulier ---------- */
.profiel{max-width:720px;margin:90px auto 0;padding:0 var(--gutter) 90px}
@media (max-width:767px){.profiel{margin-top:60px;padding-bottom:60px}}
.profiel .dienst__kop{text-align:center}
.profiel__intro{margin-top:26px;font-size:15px;line-height:1.7;color:var(--bruin-zacht)}
.profiel__melding[hidden]{display:none}
.profiel__knop{margin-top:22px;border-radius:999px;min-height:48px}
/* 23 sep 2026: knop gecentreerd onder de gecentreerde kop; de alinea's erboven blijven links. */
.profiel__wrap > .profiel__knop{display:flex;width:fit-content;margin-inline:auto}
/* Fotoverzoek in de bevestiging. Geen upload in dit formulier: het oude formulierplan weigerde
   bijlagen en verwerpt dan de hele inzending, en zo staat er ook geen klantbeeld op onze servers. */
.profiel__melding{margin-top:30px;padding:26px 24px;background:var(--zand)}
.profiel__melding h3{font-family:var(--font-display);text-transform:uppercase;font-size:22px;line-height:1.15;letter-spacing:-.01em}
.profiel__melding p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--bruin-zacht)}
.profiel__melding a{text-decoration:underline;text-underline-offset:3px;color:var(--bruin)}
.profiel__melding:focus-visible{outline:2px solid var(--paars);outline-offset:3px}

/* ---------- Startpagina fase 3 (20 september 2026) ----------
   Nieuwe volgorde: hero, filmpje, nieuw binnen, deuren, categorieen, kleuranalyse, zekerheden,
   favorieten, Ellie, huiskamer, merken, quizband, winkel. Alles hieronder gebruikt bestaande
   tokens, de ruimteschaal 5/10/15/30/50/70/90/110 en de enige curve --ease-out. */

/* Hero: twee echte routes in plaats van een hele hero die een link was. */
.hero__label{display:block;color:#fff;margin-bottom:15px;text-shadow:0 1px 14px rgb(74 67 56 / .5)}
.hero__acties--twee{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 30px;margin-top:15px}
/* Het klikdoel van een onderstreepte cta is normaal 13 px hoog. Hier dragen twee losse links de
   hele pagina, dus krijgen ze 46 px hoogte; de lijn blijft op 2 px onder de tekst staan. */
.hero__acties--twee .cta{padding:16px 0 17px}
.hero__acties--twee .cta::after{bottom:15px}

/* Deuren: wat het is boven de kop, hoe KUIF het noemt eronder, en een uitweg voor wie twijfelt. */
.deuren__label{display:block;color:var(--steen);margin-bottom:15px}
.deuren__extra{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 10px;
  padding:0 var(--gutter) clamp(24px,2.6vw,32px);text-align:center;font-size:14px;line-height:1.7;color:var(--bruin-zacht)}
/* Flex en geen inline-block: met alleen padding op de cta ging de tekstregel uit lijn met de knop. */
.deuren__extra .cta{padding:15px 0 16px}
.deuren__extra .cta::after{bottom:14px}

/* Filmpje: twee routes onder de intro en de wekelijkse Instagram-regel eronder. */
.filmpje__acties{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 30px;margin-top:15px}
.filmpje__acties .cta{padding:15px 0 16px}
.filmpje__acties .cta::after{bottom:14px}
.filmpje__insta{margin-top:15px;font-size:11px;text-transform:uppercase;letter-spacing:.2px;color:var(--steen)}
.filmpje__insta a{text-decoration:underline;text-underline-offset:3px;color:var(--bruin)}
/* Onder 900 staat de sectie in een kolom en pasten vier kaarten alleen als een 2x2-raster van
   1445 px hoog. Alle filmartikelen in een horizontale scroller met snap houdt de sectie kort en
   laat zien dat er meer dan vier zijn. overflow-x staat op de scroller zelf, nooit op de pagina. */
/* Vanaf 1280 staan er vier kaarten naast de video, zoals het altijd was. De overige filmartikelen
   staan alleen in de mobiele scroller; op desktop zou een vijfde kaart een halve rij openbreken. */
@media (min-width:1280px){.filmpje__raster>:nth-child(n+5){display:none}}
@media (max-width:1279px){
  /* 1fr is minmax(auto,1fr): de kolom nam de max-content van de scroller over en duwde de pagina
     1000 px buiten haar oevers. Met minmax(0,1fr) blijft de kolom binnen het scherm en scrollt de
     rij zelf. Zie memory gotcha-grid-1fr-minmax. */
  .filmpje__raster{margin-top:15px}
  /* De kaartbreedte staat in vw en niet in procenten: een percentage in grid-auto-columns is voor
     de browser onbepaald en werd als 1fr gelezen, waarna zeven kaarten zich tot 32 px lieten
     persen. Met flex en flex-basis in procenten ontstond hetzelfde kringetje andersom: de sectie
     groeide naar 754 px. vw is wel bepaald, dus de kaarten houden hun maat en de rij scrollt. */
  .filmpje__raster{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46vw;
    gap:15px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    padding-bottom:10px;scrollbar-width:thin}
  .filmpje__raster>*{min-width:0;scroll-snap-align:start}
}
/* Op een tablet is 46vw een halve schermbreedte per kaart; daar passen er drie in beeld. */
@media (min-width:768px) and (max-width:1279px){.filmpje__raster{grid-auto-columns:24vw}
}

/* Merkenrij: rustpunt tussen de huiskamerband en de quizband. Namen, geen logo's. */
.merkenrij{margin-top:var(--sectie-lucht);padding:0 var(--gutter);text-align:center}
@media (max-width:767px){.merkenrij{margin-top:70px}}
.merkenrij__kop{display:block;color:var(--steen)}
.merkenrij__lijst{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 30px;
  margin-top:15px;padding:15px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  max-width:1300px;margin-inline:auto;list-style:none}
.merkenrij__lijst a{display:flex;align-items:center;justify-content:center;min-height:44px;
  font-family:var(--font-display);text-transform:uppercase;font-size:clamp(16px,calc(1.55 * var(--vw)),22px);
  line-height:1.1;letter-spacing:-.01em;color:var(--bruin);transition:color .25s}
.merkenrij__lijst a:hover,.merkenrij__lijst a:focus-visible{color:var(--paars)}
@media (max-width:767px){.merkenrij__lijst{gap:0 15px}}

/* Ellie: een knop naar de kennismaking en daarnaast de bestaande tekstlink. */
.editorial__acties{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:15px 30px;margin-top:30px}
.editorial__tekst .editorial__acties .cta{margin-top:0;padding:16px 0 17px}
.editorial__tekst .editorial__acties .cta::after{bottom:15px}

/* Hero-inhoud op mobiel onderaan in plaats van gecentreerd. Gemeten 20 sep 2026: met de langere
   kop kwamen de zin en de twee knoppen boven de sluier uit en haalde wit daar 1,2:1 op de lichte
   YAYA-campagnefilm (eis 4,5). De sluier loopt van onder naar boven, dus onderaan uitlijnen, zoals
   elke andere hero op deze site al doet, zet ze in het donkerste deel van diezelfde sluier. */
@media (max-width:767px){
  /* 90 px en niet 60: op 60 raakte het knopvlak de bronvermelding "Beeld: YAYA" rechtsonder. */
  .hero--top .hero__inner{position:sticky;bottom:90px;align-self:flex-end;justify-content:flex-end}
  /* Deze regel staat later in de stylesheet dan .consent-op .hero__inner en heeft dezelfde
     specificiteit, dus zonder deze uitzondering zou de cookiebalk de hero-knoppen afdekken. */
  .consent-op .hero--top .hero__inner{bottom:300px}
}

/* Mobiele sluier onder de hero-inhoud. De campagnefilm wisselt per frame van helderheid; op de
   lichtste frames haalde de kleine witte cta 4,39:1 waar 4,5 moet. Dezelfde kleur en dezelfde
   alfawaarden als .hero--band en .hero--licht, alleen een stop lager gelegd, zodat elk frame de
   eis haalt. Gemeten 20 sep 2026 met een viewport-schermbeeld (een full-page shot verandert svh
   en meet de hero op de verkeerde plek). */
@media (max-width:767px){
  .hero--top::after{height:70%;background:linear-gradient(to top,rgb(74 67 56 / .86),rgb(74 67 56 / .8) 24%,rgb(74 67 56 / .36) 62%,transparent)}
}

/* De eerste zekerheid is een link naar personal styling, de andere twee zijn dat niet. Tot nu toe
   was dat verschil alleen bij hover te zien (.zeker__link kleurt dan paars), dus op een telefoon
   zag niemand dat hier iets te klikken viel. Een dunne lijn in --lijn maakt het in rust zichtbaar;
   bij hover en focus wint de bestaande paarse staat. Bevinding P1 uit _audit/v2/IMPECCABLE-START.md. */
.zeker__link .zeker__titel{text-decoration:underline;text-decoration-color:var(--lijn);text-decoration-thickness:1px;text-underline-offset:6px}
.zeker__link:hover .zeker__titel,.zeker__link:focus-visible .zeker__titel{text-decoration-color:var(--paars)}

/* ---------- Stijlquiz (fase 8 van PLAN-ELLIE-V2.md) ----------
   Zonder JavaScript staan alle zes de fieldsets onder elkaar en is de voet een gewone rij met de
   verzendknop. Met JavaScript is het een scherm tegelijk en plakt de voet onderaan het scherm.
   Daarom draagt elke regel die iets verbergt of vastzet de .js-voorwaarde: zonder JS is er niets
   verborgen. Elke class met een eigen display krijgt hier ook zijn [hidden]-regel.
   z-index 40 houdt de voet onder de header (50), de panelen (70 tot 90) en de cookieband. */
.quiz{max-width:720px;margin:0 auto;padding:15px var(--gutter) 90px}
.quiz__kop{margin-top:15px}
.quiz__titel{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(26px,6.6vw,42px);line-height:1.05;letter-spacing:-.01em}
.quiz__intro{margin-top:10px;font-size:14px;line-height:1.5;color:var(--bruin-zacht);max-width:52ch}
.quiz__voortgang{display:none;align-items:center;gap:10px;margin-top:15px}
.js .quiz__voortgang{display:flex}
.js .quiz__voortgang[hidden]{display:none}
.quiz__balk{flex:1 1 auto;width:auto;height:4px;appearance:none;border:0;background:var(--lijn);color:var(--paars-diep)}
.quiz__balk::-webkit-progress-bar{background:var(--lijn)}
.quiz__balk::-webkit-progress-value{background:var(--paars-diep)}
.quiz__balk::-moz-progress-bar{background:var(--paars-diep)}
.quiz__teller{flex:none;font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;color:var(--steen)}
.quiz__form{margin-top:15px}
.js .quiz__form{padding-bottom:100px}
.quiz__pot{position:absolute!important;left:-9999px;width:1px;height:1px}

/* Een fieldset krijgt van de browser een minimumbreedte uit zijn inhoud; zonder min-width:0 duwt
   een lang label het hele raster buiten de pagina (en overflow-x:clip maakt daar tekstverlies van). */
.quiz__stap{margin:0 0 30px;padding:30px 0 0;border:0;border-top:1px solid var(--lijn);min-width:0}
.js .quiz__stap{margin:0;padding-top:10px;border-top:0}
.js .quiz__stap[hidden]{display:none}
.quiz__vraag{padding:0;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(20px,5.4vw,28px);line-height:1.15;letter-spacing:-.01em}
.quiz__vraag:focus{outline:0}
.quiz__hulp{margin-top:6px;font-size:13px;line-height:1.5;color:var(--steen);max-width:56ch}
.quiz__groep{margin-top:10px;min-width:0}
.quiz__groep-kop{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.quiz__ster{color:var(--paars-diep)}
.quiz__fout{margin-top:8px;font-size:13px;line-height:1.5;color:var(--paars-diep);font-weight:700}
.quiz__fout[hidden]{display:none}
.quiz__noot{margin-top:15px;font-size:13px;line-height:1.6;color:var(--steen)}
.quiz__hand{font-family:'Homemade Apple',cursive;color:var(--paars-diep);font-size:17px;line-height:1.4;margin-top:5px}

/* Keuzetegels. Het vakje ligt onzichtbaar over de hele tegel; de zichtbare toestand zit op de span
   ernaast, zodat er niets nagebouwd hoeft te worden en het toetsenbord gewoon werkt. */
.quiz__tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.quiz__tegels--kort{grid-template-columns:repeat(auto-fit,minmax(94px,1fr))}
.quiz__tegel{display:block;position:relative;min-width:0}
.quiz__tegel input{z-index:1;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.quiz__tegel-in{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:8px 10px;border:1px solid var(--lijn-sterk);background:var(--wit);font-size:14px;line-height:1.3;transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out),color .25s var(--ease-out)}
.quiz__tegel input:checked+.quiz__tegel-in{background:var(--bruin);border-color:var(--bruin);color:var(--kalk)}
.quiz__tegel input:focus-visible+.quiz__tegel-in{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--paars-diep)}
@media (hover:hover){.quiz__tegel:hover .quiz__tegel-in{border-color:var(--bruin)}}

/* Stijltegels: werken met beeld en zonder. --quiz-beeld is gemeten op 375x812, zodat scherm 1 met
   kop, voortgang en voet in een telefoonscherm past. */
/* Drie per rij op 375: met twee per rij haalt een 3:4-beeld nooit drie rijen binnen een
   telefoonscherm (gemeten: 131 px te veel). Drie per rij houdt de tegel op 108x124 px, dus het
   beeld blijft staand zoals het plan vraagt en het scherm past zonder scrollen. */
.quiz__stijlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;--quiz-beeld:124px}
.quiz__stijl{display:block;position:relative;min-width:0}
.quiz__stijl input{z-index:1;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.quiz__stijl-in{display:block;border:1px solid var(--lijn-sterk);background:var(--zand);transition:box-shadow .25s var(--ease-out)}
/* z-index:1 op het vakje: img.fade draagt een opacity-animatie met fill-mode forwards en maakt
   daarmee een eigen stapelcontext. Die schildert dan over het absoluut geplaatste vakje heen, want
   het beeld staat later in de DOM. Voor een bezoeker maakt dat niets uit (een klik op een kind van
   een label bedient het label), maar een meetinstrument dat op elementFromPoint let, komt er niet
   meer bij. Gevonden 20 sep 2026 met Playwright. */
.quiz__stijl-beeld{display:block;aspect-ratio:2/3;overflow:hidden}
.quiz__stijl-beeld :where(img){width:100%;height:100%;object-fit:contain;background:var(--zand)}
.quiz__stijl-naam{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 4px;background:var(--wit);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;text-align:center;line-height:1.2;transition:background-color .25s var(--ease-out),color .25s var(--ease-out)}
.quiz__stijl-naam--kaal{min-height:56px}
.quiz__stijl input:checked+.quiz__stijl-in{box-shadow:inset 0 0 0 3px var(--bruin)}
.quiz__stijl input:checked+.quiz__stijl-in .quiz__stijl-naam{background:var(--bruin);color:var(--kalk)}
.quiz__stijl input:focus-visible+.quiz__stijl-in{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--paars-diep)}
@media (min-width:600px){.quiz__stijlen{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;--quiz-beeld:230px}.quiz__stijl-naam{font-size:12px;min-height:34px}}

/* Kleurbolletjes: dezelfde kleurgroepen en dezelfde waarden als het filterpaneel. */
.quiz__kleuren{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:6px}
.quiz__kleur{display:block;position:relative;min-width:0}
.quiz__kleur input{z-index:1;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.quiz__kleur-in{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:44px;padding:4px 2px;border:1px solid transparent;transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out)}
.quiz__stip{width:22px;height:22px;border-radius:50%;background:var(--bol,#cfc9bf);border:1px solid var(--lijn-sterk);flex:none}
.quiz__stip--print{background:linear-gradient(135deg,#b9a88f 0 33%,#7f6c58 33% 66%,#2c2823 66%)}
.quiz__kleur-naam{font-size:10px;line-height:1.2;text-align:center;color:var(--bruin)}
.quiz__kleur input:checked+.quiz__kleur-in{border-color:var(--bruin);background:var(--zand)}
.quiz__kleur input:checked+.quiz__kleur-in .quiz__stip{box-shadow:0 0 0 2px var(--kalk),0 0 0 4px var(--bruin)}
.quiz__kleur input:focus-visible+.quiz__kleur-in{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--paars-diep)}
@media (min-width:600px){.quiz__kleuren{grid-template-columns:repeat(6,minmax(0,1fr))}.quiz__kleur-naam{font-size:11px}}

/* Velden: recht, over de volle breedte, label boven het veld. */
.quiz__veld{margin-top:15px;min-width:0}
.quiz__veld label{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.quiz__veldhulp{margin-top:5px;font-size:12px;line-height:1.5;color:var(--steen)}
.quiz__veld :where(input,textarea){width:100%;margin-top:8px;min-height:48px;padding:12px 14px;font:inherit;font-size:15px;color:var(--bruin);background:var(--wit);border:1px solid var(--lijn-sterk);border-radius:0;appearance:none}
.quiz__veld textarea{min-height:84px;line-height:1.6;resize:vertical}
/* Stap 5: het kleurseizoen (27 sep 2026). Keuzelijst in dezelfde vorm als de velden; het palet eronder
   in tien kolommen, rechte stippen die het vlak vullen. */
.quiz__seizoen{margin-top:30px;padding-top:15px;border-top:1px solid var(--lijn)}
.quiz__veld :where(select){width:100%;margin-top:8px;min-height:48px;padding:12px 40px 12px 14px;font:inherit;font-size:15px;color:var(--bruin);background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a4338' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid var(--lijn-sterk);border-radius:0;appearance:none}
.quiz__paletten{margin-top:15px}
.quiz__palet{background:var(--zand);padding:15px}
.quiz__palet--tekst{background:none;padding:0}
.quiz__palet-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 10px}
.quiz__palet-naam{font-family:var(--font-display);font-size:30px;line-height:1.05;text-transform:uppercase;letter-spacing:-.02em;color:var(--bruin)}
.quiz__palet-kenmerk{font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--steen)}
.quiz__palet-stippen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
.quiz__palet-stippen span{display:block;aspect-ratio:1;background:var(--k);box-shadow:inset 0 0 0 1px rgba(74,67,56,.12)}
@media (min-width:600px){.quiz__palet-stippen{grid-template-columns:repeat(10,minmax(0,1fr))}}
.quiz__palet .quiz__veldhulp{margin-top:10px}
.quiz__veld :where(input,textarea)[aria-invalid="true"]{border-color:var(--paars-diep);border-width:2px}
.quiz__rij{display:grid;gap:10px}
@media (min-width:600px){.quiz__rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quiz__meer{margin-top:10px}
.quiz__meer summary{display:flex;align-items:center;min-height:44px;font-size:13px;color:var(--steen);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.quiz__akkoord{margin-top:15px;padding-top:15px;border-top:1px solid var(--lijn)}
.quiz__vinkje{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:6px 0;font-size:14px;line-height:1.5;cursor:pointer}
.quiz__vinkje input{flex:0 0 auto;width:20px;height:20px;min-height:0;margin:2px 0 0;accent-color:var(--paars-diep)}
.quiz__vinkje a{text-decoration:underline;text-underline-offset:3px}

/* Voet. Zonder JS een gewone rij met alleen de verzendknop; met JS vast onderaan. */
.quiz__voet{display:flex;gap:10px;align-items:center;margin-top:30px}
.js .quiz__voet{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;background:var(--kalk);border-top:1px solid var(--lijn);padding:10px max(var(--gutter),calc((100% - 720px)/2)) calc(10px + env(safe-area-inset-bottom))}
/* Zolang de cookieband openstaat, dekt die de vaste voet af: de knoppen Terug en Verder zaten
   erachter en waren niet aan te klikken (gemeten 20 sep 2026 met Playwright). Tijdens die keuze
   staat de voet daarom gewoon in de tekststroom, net als zonder JavaScript. `.js` en `.consent-op`
   staan allebei op <html>, vandaar de samengestelde selector. */
.js.consent-op .quiz__voet{position:static;border-top:0;padding-left:0;padding-right:0}
.js.consent-op .quiz__form{padding-bottom:0}
.quiz__knop{display:none}
.js .quiz__knop{display:inline-flex}
.js .quiz__knop[hidden]{display:none}
.quiz__over{display:none;min-height:46px;padding:0 8px;font-size:12px;color:var(--steen);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.js .quiz__over{display:inline-flex;align-items:center}
.js .quiz__over[hidden]{display:none}
.quiz__terug,.quiz__verder,.quiz__verstuur{border-radius:0}
.quiz__verstuur{width:100%}
.js .quiz__verstuur{width:auto;flex:1 1 auto}
.js .quiz__verder{flex:1 1 auto}
.js .quiz__verstuur[hidden]{display:none}

/* Eindscherm en foutscherm. Staan als gewone inhoud in de HTML en zijn hidden tot ze nodig zijn. */
.quiz__eind{margin-top:30px;padding:30px var(--gutter);background:var(--zand)}
.quiz__eind[hidden]{display:none}
.quiz__eind--fout{background:var(--wit);border:1px solid var(--lijn-sterk)}
.quiz__eind:focus-visible{outline:2px solid var(--paars-diep);outline-offset:3px}
.quiz__eind-kop{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(26px,6.4vw,38px);line-height:1.1;letter-spacing:-.01em}
.quiz__eind-tekst{margin-top:12px;font-size:15px;line-height:1.7;color:var(--bruin-zacht);max-width:52ch}
.quiz__hand--eind{font-size:19px;margin-top:15px}
.quiz__eind-knoppen{display:grid;gap:10px;margin-top:30px}
.quiz__eind-knoppen .btn{width:100%;border-radius:0}
.quiz__eind-link{margin-top:15px;font-size:14px}
.quiz__eind-link a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:600px){.quiz__eind-knoppen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Beweging tussen twee schermen: een zachte opkomst met de curve die de site al gebruikt.
   De inhoud staat nooit standaard op opacity 0; dit is alleen de van-stand van een animatie die
   uitsluitend draait wanneer JS een scherm toont. */
@keyframes quiz-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.js .quiz__stap:not([hidden]){animation:quiz-in .3s var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.js .quiz__stap:not([hidden]){animation:none}}

/* Met JavaScript hoort de paginakop bij scherm 1: vanaf scherm 2 is de vraag zelf de kop.
   Zonder JavaScript blijven kop en kruimelpad gewoon staan. Beide dragen een eigen display,
   dus allebei een [hidden]-regel. */
.quiz__kop[hidden]{display:none}
.quiz .dienst__kruimel[hidden]{display:none}

/* ---------- Aanvraag: foto's en de slotkeuze (stap 1.3 New You backoffice, 21 sep 2026) ----------
   Elke class hieronder met een eigen `display` krijgt een [hidden]-regel: een class met een eigen
   display wint van het hidden-attribuut, en dan blijft een verborgen blok gewoon staan terwijl de
   DOM netjes hidden:true meldt. Dat is op deze site al drie keer misgegaan. */
.quiz__fotos{margin-top:10px}
/* Het bestandsveld zelf is onzichtbaar maar WEL bereikbaar met de tab-toets en met een schermlezer:
   geen display:none, want dan verdwijnt het uit de tabvolgorde en is de knop een dood label. */
.quiz__fotoveld{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.quiz__fotoknop{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid var(--bruin);background:var(--wit);color:var(--bruin);font-size:14px;line-height:1.3;cursor:pointer;transition:background-color .25s var(--ease-out),color .25s var(--ease-out)}
.quiz__fotoveld:focus-visible+.quiz__fotoknop{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--paars-diep)}
@media (hover:hover){.quiz__fotoknop:hover{background:var(--bruin);color:var(--kalk)}}
.quiz__fotostand{margin-top:10px;font-size:13px;line-height:1.5;color:var(--steen)}
.quiz__fotostand[hidden]{display:none}
.quiz__mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:15px;list-style:none;padding:0}
.quiz__mini[hidden]{display:none}
@media (min-width:600px){.quiz__mini{grid-template-columns:repeat(5,minmax(0,1fr))}}
.quiz__mini li{position:relative;min-width:0}
.quiz__mini img{display:block;width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;background:var(--zand);border:1px solid var(--lijn-sterk)}
.quiz__minuit{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--kalk);border:1px solid var(--lijn-sterk);color:var(--bruin);font-size:18px;line-height:1;cursor:pointer}
@media (hover:hover){.quiz__minuit:hover{background:var(--bruin);color:var(--kalk);border-color:var(--bruin)}}

/* De slotkeuze: twee kaarten met een radio erin. Zelfde vorm als de keuzetegels, maar met ruimte
   voor de uitleg eronder, want de voorwaarden van een pakket horen bij de keuze te staan. */
.quiz__wensen{display:grid;gap:10px;margin-top:10px}
.quiz__wens{display:block;position:relative;min-width:0}
.quiz__wens input{z-index:1;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.quiz__wens-in{display:block;padding:15px;border:1px solid var(--lijn-sterk);background:var(--wit);transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.quiz__wens-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 10px}
.quiz__wens-titel{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.quiz__wens-label{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--paars-diep)}
.quiz__wens-tekst{display:block;margin-top:8px;font-size:14px;line-height:1.6;color:var(--bruin-zacht)}
.quiz__wens input:checked+.quiz__wens-in{border-color:var(--bruin);box-shadow:inset 0 0 0 2px var(--bruin)}
.quiz__wens input:focus-visible+.quiz__wens-in{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--paars-diep)}
@media (hover:hover){.quiz__wens:hover .quiz__wens-in{border-color:var(--bruin)}}
.quiz__spam{margin-top:15px;min-height:1px}
/* Melding zonder JavaScript: de spamcontrole van Cloudflare is een JS-widget, dus versturen kan
   dan niet. Staat bovenaan het formulier, met WhatsApp als echte uitweg. */
.quiz__geenjs{margin-bottom:30px;padding:30px var(--gutter);background:var(--zand)}
.quiz__geenjs-kop{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(22px,5.4vw,30px);line-height:1.15;letter-spacing:-.01em}
.quiz__geenjs-tekst{margin:12px 0 30px;font-size:15px;line-height:1.7;color:var(--bruin-zacht);max-width:52ch}
.quiz__geenjs .btn{border-radius:0}

/* Fase 2: een keuze in de aanvraag die nog niet open staat (pakket thuis passen). */
.quiz__wens--uit{opacity:.55}
.quiz__wens--uit .quiz__wens-in{cursor:not-allowed}
/* Een settitel of notitie is vrije invoer van een medewerker. Een lang woord zonder spaties
   duwde de pagina anders breder dan het scherm (gemeten 21 sep 2026 op 375 px). */
.set__kop .dienst__kop,.set__notitie,.set__wie{overflow-wrap:anywhere}

/* ---------- Hulp en juridisch (22 sep 2026): klantenservice, verzenden, retour, maten, voorwaarden, privacy ----------
   Tekstpagina's zonder hero. Links een vaste zijnavigatie tussen de zes pagina's, rechts een leeskolom
   van 680px. Op de telefoon staat de navigatie onder de tekst. */
.hulp{padding:0 var(--gutter)}
.hulp__kop{text-align:center;margin-top:34px}
.hulp__kop .dienst__kruimel{margin:0 0 26px;padding:0}
.hulp__intro{max-width:56ch;margin:22px auto 0;font-size:15px;line-height:1.7;color:var(--bruin-zacht);text-wrap:pretty}
.hulp__wrap{display:grid;grid-template-columns:minmax(0,200px) minmax(0,680px);justify-content:center;gap:70px;max-width:1000px;margin:70px auto 110px}
.hulp__nav ul{position:sticky;top:calc(var(--hdr) + var(--bar) + 24px);border-top:1px solid var(--lijn)}
.hulp__nav li{border-bottom:1px solid var(--lijn)}
.hulp__nav a{display:flex;align-items:center;min-height:44px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--bruin-zacht)}
.hulp__nav a:hover{color:var(--bruin)}
.hulp__nav a[aria-current="page"]{color:var(--paars-diep);font-weight:700}
.hulp__body{min-width:0}
.hulp__sectie+.hulp__sectie{margin-top:48px}
.hulp__h2{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:22px;line-height:1.15;letter-spacing:-.2px;color:var(--bruin);margin:0 0 14px;text-wrap:balance}
.hulp__body :where(p,li){font-size:15px;line-height:1.7;color:var(--bruin-zacht);overflow-wrap:anywhere}
.hulp__body :where(p,ul,ol)+:where(p,ul,ol){margin-top:12px}
.hulp__body :where(ul){list-style:disc;padding-left:1.2em}
.hulp__body :where(ol){list-style:decimal;padding-left:1.3em;margin:0}
.hulp__body :where(li)+li{margin-top:6px}
.hulp__body :where(strong){color:var(--bruin)}
.hulp__body :where(a:not(.btn)){color:var(--paars-diep);text-decoration:underline;text-underline-offset:2px}
.hulp__body :where(a:not(.btn)):hover{color:var(--bruin)}
.hulp__body .pdp__acc{margin-top:0}
.hulp__body .pdp__acc-body p{font-size:14px}
.hulp__formulier{border:1px solid var(--lijn);padding:22px 24px;background:var(--wit)}
@media (max-width:767px){
  .hulp__wrap{grid-template-columns:minmax(0,1fr);gap:56px;margin:44px auto 80px}
  .hulp__nav{order:2}
  .hulp__nav ul{position:static}
}
/* Maattabellen per merk op maten-en-pasvorm.html. Brede tabellen scrollen binnen hun eigen kader,
   nooit de pagina. */
.hulp__tabel{overflow-x:auto;margin:4px 0 14px;-webkit-overflow-scrolling:touch}
.hulp__tabel table{border-collapse:collapse;width:100%;font-size:13px;color:var(--bruin)}
.hulp__tabel caption{caption-side:top;text-align:left;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--steen);padding-bottom:8px}
.hulp__tabel :where(th,td){padding:9px 12px 9px 0;border-bottom:1px solid var(--lijn);text-align:left;white-space:nowrap;font-weight:400}
.hulp__tabel thead th{font-size:10px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;color:var(--bruin-zacht)}
.hulp__tabel tbody th{font-weight:700}
/* Herroepingsformulier (herroepen.html, 22 sep 2026) */
.hulp__form{display:grid;gap:20px;margin-top:6px}
.hulp__veld{display:grid;gap:6px}
.hulp__veld label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--bruin)}
.hulp__optioneel{font-weight:400;text-transform:none;letter-spacing:0;color:var(--steen)}
.hulp__veld :where(input,textarea){width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--lijn-sterk);border-radius:0;background:var(--wit);color:var(--bruin);font:inherit;font-size:16px}
.hulp__veld textarea{resize:vertical}
.hulp__veld :where(input,textarea):focus-visible{outline:2px solid var(--paars-diep);outline-offset:1px;box-shadow:none}
.hulp__veld [aria-invalid="true"]{border-color:#b3261e}
.hulp__veldhulp{font-size:13px!important;color:var(--steen)!important}
.hulp__form .btn{justify-self:start;min-height:44px}
.hulp__fout{color:#b3261e!important}
.hulp__ok{border:1px solid var(--lijn);background:var(--wit);padding:22px 24px}

/* Korte, echte intro onder de eerste band (startpagina, winkel) en op de collectie; merkpagina's (23 sep 2026) */
.intro-kort{max-width:720px;margin:clamp(50px,calc(6 * var(--vw)),90px) auto 0;padding:0 var(--gutter);text-align:center}
.intro-kort p{font-family:var(--font-display);font-size:clamp(1.1rem,calc(1.4 * var(--vw)),1.35rem);line-height:1.45;text-wrap:pretty}
.intro-kort a,.collectie__intro a,.editorial__body a,.wegen__los-tekst a{text-decoration:underline;text-underline-offset:3px}
.collectie__intro{max-width:62ch;margin:12px auto 0;font-size:14px;line-height:1.62;color:var(--bruin-zacht)}
.merk__maat{padding:30px var(--gutter) 0;text-align:center}
.wegen__los+.wegen__los{margin-top:15px}

/* Filmpje-sectie op desktop (23 sep 2026): rechterblok even hoog als de video. De rij krijgt zijn hoogte van de
   video (9:16 bij 340px); het blok rekt mee en de vier kaarten krimpen op HOOGTE, zodat de productfoto's heel
   blijven (3:4, niet bijgesneden). Zie ook het filter op de vijfde kaart hierboven. */
@media (min-width:1280px){
  .filmpje{align-items:stretch;grid-template-rows:calc(340px * 16 / 9)}
  .filmpje__speler{height:100%;aspect-ratio:auto}
  .filmpje__inhoud{min-height:0;height:100%;overflow:hidden;padding-top:30px;padding-bottom:26px}
  .filmpje__intro{margin-top:12px}
  .filmpje__acties{margin-top:6px}
  .filmpje__raster{flex:1 1 auto;min-height:0;margin-top:14px;grid-template-rows:minmax(0,1fr);align-items:stretch}
  .filmpje__raster .kaart:nth-child(-n+4){display:flex;flex-direction:column;min-height:0}
  .filmpje__raster .kaart__kop{flex:1 1 auto;min-height:0;display:flex}
  .filmpje__raster .kaart__beeld{height:100%;width:100%;aspect-ratio:auto;background:var(--kalk)}
  .filmpje__raster .kaart__beeld :where(img){object-fit:contain}
  .filmpje__raster .kaart:nth-child(-n+4) .kaart__titel{min-height:calc(2 * 1.35em)}
  .filmpje__insta{margin-top:10px}
}

/* ---------- Keuring 23 sep 2026 ---------- */
/* Punt 1: wat klikt en wat uitleg is. Links in bruin met een pijltje dat bij hover/focus opschuift en
   een onderstreping; onderregels (uitleg) blijven steen, kleiner, zonder hoofdletters en zonder pijl.
   Een titel die een link is krijgt ook het pijltje; een titel die alleen een kop is (span) niet. */
.mega__kol li a,a.mega__kol-titel{color:var(--bruin);display:inline-flex;align-items:center;gap:6px;min-height:24px}
.mega__kol li a::after,a.mega__kol-titel::after,.offcanvas__sub a::after{content:"→";font-family:var(--font-body);font-weight:400;font-size:11px;line-height:1;opacity:.55;transition:transform .2s var(--ease-out),opacity .2s}
.mega__kol li a:hover,.mega__kol li a:focus-visible,a.mega__kol-titel:hover,a.mega__kol-titel:focus-visible{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mega__kol li a:hover::after,.mega__kol li a:focus-visible::after,a.mega__kol-titel:hover::after,a.mega__kol-titel:focus-visible::after,.offcanvas__sub a:hover::after,.offcanvas__sub a:focus-visible::after{opacity:1;transform:translateX(3px)}
.mega__kol-regel{font-size:11px;font-style:normal;text-transform:none;letter-spacing:0;color:var(--steen);cursor:default}
.offcanvas__sub a{color:var(--bruin);gap:8px}
@media (prefers-reduced-motion:reduce){.mega__kol li a::after,a.mega__kol-titel::after,.offcanvas__sub a::after{transition:none}}
/* Zoekveld (testers 29 sep 2026): Castoro in gewone schrijfwijze oogde als een kop en was te groot.
   Bediening is Nunito op deze site, dus het veld volgt de bodytekst: 16px (ook geen iOS-inzoom).
   De balk is zo hoog als de header die hij vervangt. Placeholder in steen voor AA-contrast.
   Focus: alleen de paarse onderlijn (2px), niet ook nog de algemene focusring om het veld. */
.zoek__form{height:var(--hdr)}
.zoek__veld{font-family:var(--font-body);font-size:16px;letter-spacing:0;line-height:1.5}
.zoek__veld::placeholder{color:var(--steen);opacity:1}
.zoek__form .zoek__veld:focus-visible{outline:none;box-shadow:none}
.zoek__form:focus-within{box-shadow:inset 0 -1px 0 var(--paars)}
/* Punt 14: one size alleen als Shopify dat zo noemt. */
.pdp__one-size{margin-top:22px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--steen)}
/* Punt 8: tweede beeld bij hover (alleen muis). Het beeld wordt pas bij de eerste hover geladen. */
.kaart__wissel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease-out);pointer-events:none;background:var(--zand)}
.kaart.is-wissel .kaart__wissel{opacity:1}
@media (prefers-reduced-motion:reduce){.kaart__wissel{transition:none}}
/* Punt 16: terug naar de winkel en hulp in de tas. */
.drawer__verder{margin-top:10px}
.drawer__hulp{margin-top:15px;font-size:13px;line-height:1.5;color:var(--bruin)}
.drawer__hulp a,.tas-pagina__hulp a{text-decoration:underline;text-underline-offset:3px}
.tas-pagina__terug{margin-top:10px}
.login__noot{margin-top:14px;font-size:14px;line-height:1.6;color:var(--bruin-zacht)}
/* Last Chance (23 sep 2026): oude prijs doorgestreept naast de nieuwe prijs, op kaart, PDP en in de tas. */
.prijs__oud{color:var(--steen);text-decoration:line-through;text-decoration-thickness:1px;margin-right:.35em;font-weight:400}
.is-korting .prijs__nu{color:var(--paars-diep)}
/* 23 sep 2026: winkel.html-hero (winkel-voorkant). Op de telefoon staat de titel voor de witte gevel;
   de standaard hero--licht haalde daar 2,8:1. Scrim over de volle hoogte, alleen hier. */
@media (max-width:767px){.hero--winkelvoorkant::after{height:100%;background:linear-gradient(to top,rgb(74 67 56 / .86),rgb(74 67 56 / .62) 55%,rgb(74 67 56 / .5))}}
/* 23 sep 2026: foto-blokken zonder titel (winkel.html, rondje door de winkel): geen scrim nodig. */
.blok--kaal::after{content:none}
/* 23 sep 2026: op desktop staat de gecentreerde titel over Ellies gezicht in de deur; tekst naar links, over de etalage. */
@media (min-width:768px){.hero--winkelvoorkant .hero__content{text-align:left}.hero--winkelvoorkant .hero__inner{align-items:flex-start;width:auto;max-width:34%;margin-left:clamp(20px,4vw,72px)}.hero--winkelvoorkant .hero__inner>*{text-align:left}}
/* 23 sep 2026: over-kuif, "Elke week laat ik zien wat er binnen is": ook de slotregel op de middenas. */
.dienst__tekst--midden .dienst__body p{text-align:center;margin-inline:auto}

/* Keuring deel 2: afhaalregel in tas en drawer */
.tas__afhaal{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--steen)}
.kruimel__regel[data-kruimel="verlanglijst"],.kruimel__regel[data-kruimel="kleur-online"]{text-align:center;margin-left:auto;margin-right:auto}
/* Keuring deel 2: private shopping-blok en handschriftlabel op de Boutique-editie */
.prive{max-width:880px;background:var(--zand);padding:60px var(--gutter)}
.prive .dienst__body p{margin-top:14px}
.prive__punten{list-style:none;margin:24px auto 0;padding:0;display:grid;gap:10px;max-width:520px;text-align:left}
.prive__punten li{padding-left:22px;position:relative;line-height:1.55}
.prive__punten li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--bruin)}
.prive .btn{margin-top:30px}
@media (max-width:767px){.prive{padding:40px 20px;margin-left:15px;margin-right:15px}}
.tier__hand{display:block;font-family:'Homemade Apple',cursive;color:var(--paars-diep);font-size:17px;line-height:1.6;margin:-6px 0 8px}
/* Keuring deel 2: klantpagina's, vaste opmaak voor de openingszin en de keuzefase */
.voorstel__opening{text-align:center;max-width:62ch;margin:18px auto 0;font-size:15px;line-height:1.65;color:var(--bruin)}
.linkknop{background:none;border:0;padding:12px 0;font:inherit;color:var(--bruin);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
[data-kz-ok][hidden],[data-kz-fout][hidden],[data-kz-noot][hidden],.pakket[hidden]{display:none}
.pakket__niets{margin:6px 0 0;text-align:center;font-size:12px}
@media (max-width:1023px){.pakket__niets{margin:0}.pakket__niets .linkknop{padding:4px 0;min-height:44px}}
/* Personal Styling Online (24 sep 2026): een betaald stuk en een stuk dat weer in de winkel hangt */
.stuk__besteld{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;background:var(--zand);color:var(--bruin)}
.stuk__keuze button:disabled{cursor:default}
.stuk__terug{display:block;margin-top:8px}
/* Reden bij "Niet voor mij" en het eindscherm na alles afwijzen (15 okt 2026).
   Het paneel is een eigen rij (li) in het raster van de set, direct na de kaart waar het om gaat, over
   de volle breedte: grid-auto-flow dense houdt de buurkaart naast de kaart staan. Geen pop-up.
   Kleuren alleen uit de tokens. scroll-margin-bottom houdt het paneel boven de vaste keuzebalk
   (.pakket__som) op de telefoon. */
.set__stuks{grid-auto-flow:row dense}
.stuk__reden{grid-column:1/-1;padding:18px 18px 20px;background:var(--zand);border:1px solid var(--lijn)}
@media (max-width:1023px){.stuk__reden,.stuk__reden-vraag{scroll-margin-bottom:220px}}
.stuk.is-reden-open .stuk__beeld{box-shadow:0 0 0 2px var(--bruin)}
.stuk__keuze button[aria-expanded=true]{background:var(--bruin);color:var(--kalk)}
.stuk__reden-groep{min-width:0;margin:0;padding:0;border:0}
.stuk__reden-vraag{padding:0;font-family:var(--font-display);font-size:1.2rem;line-height:1.25;color:var(--bruin)}
.stuk__reden-stuk{display:block;margin-top:4px;font-family:var(--font-body);font-size:13px;line-height:1.4;color:var(--bruin)}
.stuk__reden-hulp{display:block;margin-top:2px;font-family:var(--font-body);font-size:12px;line-height:1.4;color:var(--bruin-zacht)}
.stuk__reden-keuzes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.stuk__chip{position:relative;display:block;flex:0 0 auto;max-width:100%}
.stuk__chip :where(input){position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.stuk__chip-in{display:flex;align-items:center;min-height:44px;padding:8px 14px;background:var(--wit);border:1px solid var(--lijn-sterk);font-size:13px;line-height:1.35;color:var(--bruin);transition:border-color .2s,box-shadow .2s}
.stuk__chip input:checked+.stuk__chip-in{border-color:var(--bruin);box-shadow:inset 0 0 0 1px var(--bruin);font-weight:600}
.stuk__chip input:focus-visible+.stuk__chip-in{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--paars-diep)}
@media (hover:hover){.stuk__chip:hover .stuk__chip-in{border-color:var(--bruin)}}
.stuk__reden-veld{max-width:520px;margin-top:14px}
.stuk__reden-label,.voorstel__eind-label{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--bruin)}
.stuk__reden-veld :where(textarea),.voorstel__eind-veld :where(textarea){display:block;width:100%;margin-top:8px;min-height:84px;padding:10px 12px;font:inherit;font-size:16px;line-height:1.5;color:var(--bruin);background:var(--wit);border:1px solid var(--lijn-sterk);border-radius:0;resize:vertical}
.stuk__reden-veld :where(textarea)::placeholder,.voorstel__eind-veld :where(textarea)::placeholder{color:var(--steen);opacity:1}
.stuk__reden-regel{margin-top:14px;font-size:12px;line-height:1.55;color:var(--bruin-zacht)}
.stuk__reden-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.stuk__reden-knoppen .btn{flex:0 1 auto;min-width:130px;padding:8px 20px;border-radius:0;text-align:center;line-height:1.3}
.stuk__reden-knoppen .btn:disabled{opacity:.6;cursor:default}
.pakket--klaar{grid-template-columns:1fr}
.voorstel__eind{width:calc(100% - 2*var(--gutter));max-width:640px;margin:34px auto 0;padding:28px 24px 30px;background:var(--zand);text-align:center}
.voorstel__eind :where(.dienst__kop){text-align:center}
.voorstel__eind-tekst{margin-top:14px;font-size:15px;line-height:1.65;color:var(--bruin)}
.voorstel__eind-veld{margin-top:26px;text-align:left}
.voorstel__eind-hulp{margin-top:4px;font-size:12px;line-height:1.5;color:var(--bruin-zacht)}
.voorstel__eind-vraag{min-width:0;margin:26px 0 0;padding:0;border:0}
.voorstel__eind-vraag .voorstel__eind-label{padding:0;text-align:center}
.voorstel__eind-knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.voorstel__eind-knoppen .btn{flex:1 1 150px;max-width:240px;border-radius:0}
.voorstel__eind-knoppen .btn:disabled{opacity:.6;cursor:default}
.voorstel__eind :where(.tas-pagina__noot){text-align:center}
.voorstel__eind :where(.voorstel__liever){text-align:center}
[data-kz-noot][hidden],[data-kz-verzend][hidden],[data-kz-afrekenen][hidden]{display:none}
/* Keuring deel 2: het ene New You-formulier */
.quiz__lichamen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.quiz__lichaam{display:block;position:relative;min-width:0}
.quiz__lichaam input{z-index:1;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.quiz__lichaam-in{display:block;border:1px solid var(--lijn-sterk);background:var(--wit);transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.quiz__lichaam-beeld{display:block;aspect-ratio:425/587;background:var(--zand);overflow:hidden}
.quiz__lichaam-beeld :where(img){display:block;width:100%;height:100%;object-fit:contain;background:var(--zand)}
.quiz__lichaam-naam{display:block;padding:10px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;text-align:center}
.quiz__lichaam input:checked+.quiz__lichaam-in{border-color:var(--bruin);box-shadow:inset 0 0 0 2px var(--bruin)}
.quiz__lichaam input:focus-visible+.quiz__lichaam-in{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--paars-diep)}
@media (min-width:600px){.quiz__lichamen{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
.quiz__huiskamer{padding:15px;border:1px solid var(--lijn);border-top:0;margin-top:-10px;background:var(--kalk)}
.quiz__huiskamer[hidden]{display:none}
.quiz__huiskamer input[type=date]{min-height:44px}

/* ---------- Startpagina-flow 24 sep 2026 (schema Martijn) ----------
   02 filmpje rustig (kalk), 03 New You uitgelegd (zand), 04 een carrousel.
   Versie 2: routesblok geschrapt (dubbel met de hero).
   Afwisseling zand/kalk geeft het ritme; geen beeldbanden tussen 02 en 04, alleen het filmpje.
   Staat onderaan zodat hij de oudere .filmpje-regels (ook de >=1280-rekregel) overschrijft. */
.filmpje--rustig{margin-top:0;padding:clamp(40px,calc(5 * var(--vw)),72px) var(--gutter);grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-rows:auto;gap:clamp(24px,calc(4 * var(--vw)),64px);align-items:center}
.filmpje--rustig .filmpje__speler{height:auto;aspect-ratio:9/16}
.filmpje--rustig .filmpje__inhoud{background:none;padding:0;height:auto;overflow:visible;text-align:left;align-items:flex-start}
.filmpje__label{display:block;color:var(--steen);margin-bottom:14px}
.filmpje--rustig .sectie__titel{text-align:left}
.filmpje--rustig .filmpje__raster{flex:none;margin-top:28px;width:100%}
/* Vanaf 600 drie kaarten naast elkaar; daaronder de bestaande scrollrij (46vw per kaart), want drie
   kaarten op 375 breed persten de titels tot vijf regels. */
@media (min-width:600px){.filmpje--rustig .filmpje__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;gap:16px;max-width:680px;overflow:visible;padding-bottom:0}}
.filmpje--rustig .filmpje__raster .kaart__kop{background:var(--zand);display:block}
.filmpje--rustig .filmpje__raster .kaart__beeld{height:auto;aspect-ratio:3/4}
.filmpje--rustig .filmpje__raster .kaart__beeld :where(img){object-fit:cover}
.filmpje__cta{margin-top:26px}
@media (max-width:899px){
  .filmpje--rustig{grid-template-columns:minmax(0,1fr);justify-items:stretch}
  .filmpje--rustig .filmpje__speler{width:min(300px,78%);justify-self:center}
  .filmpje--rustig .filmpje__inhoud{align-items:center;text-align:center}
  .filmpje--rustig .sectie__titel{text-align:center;margin-inline:auto}
}

/* Blok 3, versie 3 (24 sep 2026): kop gecentreerd, twee kalkvlakken op zand met echt beeld.
   Links de foto van het rek, rechts een klein echt voorbeeld van de voorstelpagina. */
.nyzo{background:var(--zand);padding:clamp(70px,calc(8 * var(--vw)),110px) var(--gutter)}
.nyzo__kopblok{max-width:720px;margin:0 auto;text-align:center}
.nyzo .sectie__titel{text-align:center}
.nyzo__intro{max-width:46ch;margin:22px auto 0;font-size:15px;line-height:1.7;color:var(--bruin-zacht);text-wrap:pretty}
.nyzo__hand{margin-top:16px;font-family:'Homemade Apple',cursive;font-size:24px;line-height:1.5;color:var(--paars-diep)}
.nyzo__wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);max-width:1200px;margin:50px auto 0}
.nyzo__kant{display:flex;flex-direction:column;align-items:center;min-width:0;padding-bottom:clamp(30px,calc(4 * var(--vw)),50px);background:var(--kalk);text-align:center}
.nyzo__beeld{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--bruin)}
.nyzo__beeld>:where(img),.nyzo__beeld :where(picture>img){width:100%;height:100%;object-fit:cover;object-position:50% 64%;transition:transform 2s var(--ease-out)}
.nyzo__kant:hover .nyzo__beeld>:where(img),.nyzo__kant:hover .nyzo__beeld :where(picture>img){transform:scale(1.04)}
.nyzo__titel{margin-top:clamp(26px,calc(3 * var(--vw)),40px);font-family:var(--font-display);font-size:30px;line-height:1.1;letter-spacing:-.4px;text-transform:uppercase;color:var(--bruin)}
.nyzo__stappen{counter-reset:stap;width:100%;max-width:36ch;margin:18px auto 0;padding:0 var(--gutter);list-style:none;text-align:left}
.nyzo__stappen li{counter-increment:stap;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:baseline;gap:8px;padding:11px 0;font-size:15px;line-height:1.5;color:var(--bruin-zacht)}
.nyzo__stappen li+li{border-top:1px solid var(--lijn)}
.nyzo__stappen li::before{content:counter(stap);font-family:var(--font-display);font-size:22px;line-height:1;color:var(--paars-diep)}
.nyzo__kant .btn{margin-top:auto;transform:translateY(0)}
.nyzo__stappen+.btn{margin-top:26px}
/* Het voorbeeld: een vel op gedempte kalk, zoals de voorstelpagina er echt uitziet (rechte knoppen). */
.nyzo__voorbeeld{display:grid;place-items:center;background:var(--kalk-gedempt)}
.nyzo__vel{width:min(78%,380px);padding:20px 20px 18px;background:var(--wit);box-shadow:var(--schaduw-zacht);text-align:left;transition:transform 1.4s var(--ease-out)}
.nyzo__kant:hover .nyzo__vel{transform:translateY(-4px)}
.nyzo__voor{font-family:'Homemade Apple',cursive;font-size:17px;line-height:1.4;color:var(--paars-diep)}
.nyzo__set{margin-top:4px;font-family:var(--font-display);font-size:22px;line-height:1;letter-spacing:-.3px;text-transform:uppercase;color:var(--bruin)}
.nyzo__stukken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.nyzo__stuk{display:flex;flex-direction:column;min-width:0}
.nyzo__stuk :where(img){width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--zand)}
.nyzo__stuknaam{margin-top:7px;overflow:hidden;font-size:10px;letter-spacing:.4px;line-height:1.3;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;color:var(--bruin)}
.nyzo__keuze{display:grid;grid-template-columns:1fr 1fr;margin-top:7px;border:1px solid var(--lijn-sterk)}
.nyzo__knop{padding:6px 2px;font-size:9px;letter-spacing:.3px;text-align:center;text-transform:uppercase;white-space:nowrap;color:var(--bruin)}
.nyzo__knop+.nyzo__knop{border-left:1px solid var(--lijn-sterk)}
.nyzo__knop.is-aan{background:var(--bruin);color:var(--kalk)}
.nyzo__los{max-width:1200px;margin:40px auto 0;text-align:center;font-size:14px;line-height:2;color:var(--bruin-zacht)}
.nyzo__los .cta{margin-left:18px}
@media (max-width:767px){
  .nyzo__wrap{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .nyzo__voorbeeld{aspect-ratio:auto;padding:30px 0}
  .nyzo__vel{width:min(84%,340px)}
  .nyzo__los .cta{margin:0 9px}
}
@media (prefers-reduced-motion:reduce){.nyzo__kant:hover .nyzo__vel{transform:none}}

/* Ellie kort: een alinea, dus het blok hoeft niet meer schermvullend te zijn. */
.editorial--kort .editorial__wrap{min-height:clamp(380px,60svh,600px)}

/* ---------- Kort formulier kleuranalyse (24 sep 2026) ----------
   Hergebruikt .quiz__veld voor labels en invoer; eigen raster en keuzepillen. */
.kleurform{margin-top:var(--sectie-lucht);background:var(--zand);padding:clamp(48px,calc(6 * var(--vw)),96px) var(--gutter)}
.kleurform__wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px clamp(28px,calc(5 * var(--vw)),90px);max-width:1200px;margin:0 auto;align-items:start}
.kleurform__intro .sectie__titel{text-align:left;hyphens:manual;overflow-wrap:normal;font-size:clamp(32px,calc(3.4 * var(--vw)),48px)}
@media (max-width:899px){.kleurform__intro .sectie__titel{font-size:min(45px,9.2vw)}}
.kleurform__intro p{margin-top:18px;max-width:40ch;font-size:15px;line-height:1.65;color:var(--bruin-zacht)}
.kleurform__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.kleurform__breed{grid-column:1/-1}
.kleurform :where(select){width:100%;margin-top:8px;min-height:48px;padding:12px 14px;font:inherit;font-size:15px;color:var(--bruin);background:var(--wit);border:1px solid var(--lijn-sterk);border-radius:0}
.kleurform__groep{border:0;padding:0;margin:18px 0 0;min-width:0}
.kleurform__groep legend{padding:0;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.kleurform__keuzes{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.kleurform__keuze{position:relative;display:inline-flex}
.kleurform__keuze input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.kleurform__keuze span{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border:1px solid var(--bruin);border-radius:999px;font-size:14px;color:var(--bruin);background:var(--wit);transition:background-color .2s,color .2s}
.kleurform__keuze input:checked+span{background:var(--bruin);color:var(--kalk)}
.kleurform__keuze input:focus-visible+span{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--paars-diep)}
.kleurform__spam:empty{display:none}
.kleurform__spam{margin-top:16px}
.kleurform__verstuur{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}
.kleurform__klein{font-size:12px;line-height:1.5;color:var(--steen);max-width:36ch}
.kleurform__klein a,.kleurform__fout a{text-decoration:underline;text-underline-offset:3px}
.kleurform__fout{margin-top:16px;font-size:14px;line-height:1.6;color:var(--bruin)}
.kleurform__let{margin-top:6px;font-size:12px;line-height:1.5;color:#b3261e}  /* 5,2:1 op --zand */
.kleurform__let:empty{display:none}
.kleurform__ok{background:var(--kalk);padding:28px}
.kleurform__ok h3{font-family:var(--font-display);font-size:24px;line-height:1.2}
.kleurform__ok p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--bruin-zacht)}
@media (max-width:899px){.kleurform__wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:599px){.kleurform__form{grid-template-columns:minmax(0,1fr)}}

/* ---------- Startpagina-flow v4 (voorstel 24 sep 2026, marketing council) ----------
   De pagina is de herozin, uitgevouwen. Volgorde 123546 (keuze Martijn): 1 hero stelt de vraag (zelf of
   laat ons), de subregel noemt beide plekken. 2 filmpje = zelf, online. 3 winkelband = zelf, in de winkel.
   5 collectie met de zekerheden als regel = zelf, online. 4 Laat ons voor je shoppen = New You in de winkel
   en online. 6 Ellie. apply.py --volgorde 123456 zet 4 weer voor 5; deze CSS werkt voor beide.
   Rapport: _audit/home-flow-v4/COUNCIL-FLOW.md. Staat onderaan, zodat hij de oudere regels voor
   .filmpje--rustig overschrijft. */

/* 02: vier filmkaarten vullen vanaf 1280 de breedte naast de video (was drie op max 680 px, met een
   lege strook rechts). Tussen 600 en 1279 blijven het er drie op een rij. */
@media (min-width:1280px){.filmpje--rustig .filmpje__raster{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}}
@media (min-width:600px) and (max-width:1279px){.filmpje--rustig .filmpje__raster>:nth-child(n+4){display:none}}

/* 03: winkelband. Beeldband met de voeg van 10 px rondom. Vanaf 1100 staat de kaart op de straatkant
   van de foto (rechts), zodat etalage, deur en woordmerk vrij blijven. Daaronder staat de tekst onder
   het beeld, gecentreerd zoals de andere secties op de telefoon. Telefoon: staande uitsnede van
   dezelfde gevel (gevel-leeg-mobiel), zonder mensen, want Ellie staat verderop al in de deur. */
.winkelband{position:relative;padding:0 var(--gap);margin-bottom:var(--gap)}
.winkelband__beeld{position:relative;overflow:hidden;background:var(--bruin);aspect-ratio:3/2}
.winkelband__beeld :where(img){width:100%;height:100%;object-fit:cover;object-position:40% 40%;transition:transform 2s var(--ease-out)}
.winkelband:hover .winkelband__beeld :where(img){transform:scale(1.04)}
.winkelband__kaart{display:flex;flex-direction:column;align-items:center;padding:34px calc(var(--gutter) - var(--gap)) 34px;background:var(--kalk);color:var(--bruin);text-align:center}
.winkelband .sectie__titel{text-align:center}
.winkelband__zin{max-width:40ch;margin:16px auto 0;font-size:15px;line-height:1.7;color:var(--bruin-zacht);text-wrap:pretty}
.winkelband__uren{display:grid;grid-template-columns:auto auto;gap:3px 22px;width:max-content;max-width:100%;margin:22px auto 0;padding-top:18px;border-top:1px solid var(--lijn);font-size:11px;line-height:1.7;letter-spacing:.2px;text-transform:uppercase;text-align:left;color:var(--steen);font-variant-numeric:tabular-nums}
.winkelband__uren dt{font-weight:400}
.winkelband__uren dd{margin:0;color:var(--bruin)}
.winkelband__adres{display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px;margin-top:6px}
.winkelband__adres .cta{padding:14px 0 15px}
.winkelband__adres .cta::after{bottom:13px}
.winkelband__kaart .btn{margin-top:12px}
@media (max-width:767px){.winkelband__beeld{aspect-ratio:870/1333;max-height:74svh}}
@media (min-width:1100px){
  .winkelband__beeld{aspect-ratio:auto;height:clamp(620px,calc(66 * var(--vw)),1000px)}
  .winkelband__kaart{position:absolute;z-index:1;right:calc(var(--gap) + clamp(30px,calc(3.5 * var(--vw)),60px));bottom:clamp(30px,calc(3.5 * var(--vw)),60px);width:min(460px,33%);padding:clamp(32px,calc(3 * var(--vw)),46px);align-items:flex-start;text-align:left}
  .winkelband .sectie__titel{text-align:left}
  .winkelband__zin{margin-left:0}
  .winkelband__uren{margin-left:0}
  .winkelband__adres{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.winkelband:hover .winkelband__beeld :where(img){transform:none}}
/* 06: Ellie sluit de pagina nu af; iets meer lucht tussen haar zandvlak en de footer (die zelf 60 px heeft). */
body.start main > .editorial--kort:last-child{margin-bottom:clamp(30px,calc(4 * var(--vw)),60px)}

/* 05: de zekerheden als een regel onder de prijzen, waar het bezwaar ontstaat (was een eigen blok
   onderaan, met een titel die elke webshop kan voeren). Ondermarge omdat in 123546 het zandvlak van
   New You (zonder eigen bovenmarge) er direct onder begint; voor Ellie valt hij samen met haar bovenmarge. */
.zeker-regel{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 44px;max-width:1100px;margin:40px auto var(--sectie-lucht);padding:0 var(--gutter);list-style:none;font-size:11px;line-height:1.6;letter-spacing:.6px;text-transform:uppercase;text-align:center;color:var(--steen)}
@media (max-width:767px){.zeker-regel{flex-direction:column;gap:6px;margin-top:30px}}

/* ---------- Uitlegfilmpje New You (27 sep 2026) ----------
   Een per dienstpagina. 9:16 bij een staand scherm, 16:9 bij een liggend scherm (zelfde query als <source media>,
   dus geen verspringing). De ondertitels zijn ingebrand onderin het beeld: er ligt daarom niets over de video,
   de bediening staat eronder. Zonder JS: de eigen bediening van de browser, de balk bestaat dan niet. */
/* Zandvlak over de volle breedte: het filmpje zelf is kalk, zonder vlak eromheen valt het beeld weg in de pagina. */
.uitleg{margin-top:var(--sectie-lucht);padding:90px var(--gutter);background:var(--zand)}
.uitleg__wrap{display:grid;gap:30px;justify-items:center;max-width:1300px;margin:0 auto}
.uitleg__kop{text-align:center}
.uitleg__meta{margin-top:10px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--steen);font-variant-numeric:tabular-nums}
.uitleg__media{width:100%;min-width:0}
.uitleg__beeld{position:relative;aspect-ratio:16/9;background:var(--bruin);overflow:hidden}
.uitleg__beeld :where(video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
/* Poster achter de video: de <picture> kiest per stand, de video is transparant tot het eerste beeld. */
.uitleg__poster :where(img){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Volledig scherm: alleen staand op een touchscherm (daar is de hoek rechtsonder altijd vrij van ondertitels). */
.uitleg__vol{display:none;position:absolute;right:10px;bottom:10px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;place-items:center;background:rgb(74 67 56 / .72);color:#fff;cursor:pointer}
.uitleg__vol svg{width:20px;height:20px}
@media (orientation:portrait) and (pointer:coarse){.js .uitleg__vol{display:grid}}
.uitleg__vol[hidden],.is-klaar .uitleg__vol{display:none}
@media (orientation:portrait){
  .uitleg__beeld{aspect-ratio:9/16}
  .uitleg__media{width:min(100%,calc((100vh - var(--hdr) - 170px) * 9 / 16),460px);width:min(100%,calc((100svh - var(--hdr) - 170px) * 9 / 16),460px)}
}
@media (orientation:landscape){
  .uitleg__media{width:min(100%,calc((100vh - var(--hdr) - 100px) * 16 / 9));width:min(100%,calc((100svh - var(--hdr) - 100px) * 16 / 9))}
}
@media (max-width:767px){.uitleg{margin-top:60px;padding-block:60px}}

/* Grote afspeelknop: alleen als het filmpje niet vanzelf start (beweging beperkt, databesparing, autoplay geweigerd). */
.uitleg__start{display:none;position:absolute;left:50%;top:50%;translate:-50% -50%;width:74px;height:74px;border:0;border-radius:50%;place-items:center;background:var(--paars-diep);color:#fff;box-shadow:var(--schaduw-zacht);cursor:pointer;transition:background-color .25s}
.uitleg__start svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.uitleg__start:hover{background:#83357a}
.is-wacht .uitleg__start{display:grid}
/* Na afloop: het slotbeeld toont kop en knop, dus het hele beeld wordt die knop. De echte knop staat in de balk. */
.uitleg__eind{display:none;position:absolute;inset:0;cursor:pointer}
.is-klaar .uitleg__eind{display:block}

.uitleg__bar{display:none}
.js .uitleg__bar{display:block}
.uitleg__rij{display:flex;align-items:center;gap:15px;margin-top:5px}
.uitleg__knop{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--lijn-sterk);border-radius:50%;background:none;color:var(--bruin);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.uitleg__knop:hover{background:var(--bruin);border-color:var(--bruin);color:var(--kalk)}
.uitleg__knop svg{width:16px;height:16px;fill:currentColor}
.uitleg__knop .uitleg__i-opnieuw svg{fill:none}
.uitleg__knop>span{display:none}
.uitleg__knop .uitleg__i-speel{display:block;margin-left:2px}
.is-speelt .uitleg__knop .uitleg__i-speel{display:none}
.is-speelt .uitleg__knop .uitleg__i-pauze{display:block;margin-left:0}
.is-klaar .uitleg__knop .uitleg__i-speel,.is-klaar .uitleg__knop .uitleg__i-pauze{display:none}
.is-klaar .uitleg__knop .uitleg__i-opnieuw{display:block}
.uitleg__tijd{font-size:11px;letter-spacing:.4px;color:var(--steen);font-variant-numeric:tabular-nums;white-space:nowrap}
.uitleg__geluid,.uitleg__cta{margin-left:auto}
.uitleg__geluid{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--paars-diep);border-radius:999px;background:var(--paars-diep);color:#fff;font:inherit;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.uitleg__geluid:hover{background:#83357a;border-color:#83357a}
.uitleg__geluid[aria-pressed="true"]{background:none;border-color:var(--lijn-sterk);color:var(--bruin)}
.uitleg__geluid[aria-pressed="true"]:hover{background:var(--bruin);border-color:var(--bruin);color:var(--kalk)}
.uitleg__geluid .film__geluid-aan{display:none}
.uitleg__geluid[aria-pressed="true"] .film__geluid-uit{display:none}
.uitleg__geluid[aria-pressed="true"] .film__geluid-aan{display:block}
.uitleg__cta{display:none}
.is-klaar .uitleg__cta{display:inline-flex}
.is-klaar .uitleg__geluid{display:none}

/* Tijdlijn: een lijn van 2px direct onder het beeld, met een raakvlak van 28px. */
.uitleg__tijdlijn{--pct:0%;display:block;width:100%;height:28px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.uitleg__tijdlijn::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--paars-diep) var(--pct),var(--lijn) var(--pct))}
.uitleg__tijdlijn::-moz-range-track{height:2px;background:linear-gradient(to right,var(--paars-diep) var(--pct),var(--lijn) var(--pct))}
.uitleg__tijdlijn::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border:0;border-radius:50%;background:var(--paars-diep);transition:scale .2s var(--ease-out)}
.uitleg__tijdlijn::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--paars-diep)}
.uitleg__tijdlijn:hover::-webkit-slider-thumb,.uitleg__tijdlijn:focus-visible::-webkit-slider-thumb{scale:1.25}
.uitleg__tijdlijn:focus-visible{outline:2px solid var(--paars);outline-offset:2px}

/* Tekstversie: dicht bij het laden; alleen wat de pagina zelf nog niet zegt. */
.uitleg__tekst{width:100%;max-width:720px;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.uitleg__tekst summary{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:44px;padding:12px 0;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;list-style:none}
.uitleg__tekst summary::-webkit-details-marker{display:none}
.uitleg__tekst summary::after{content:"+";font-family:var(--font-display);font-size:20px;line-height:1;font-weight:400}
.uitleg__tekst[open] summary::after{content:"\2013"}
.uitleg__tekst-body{padding:0 0 20px;font-size:15px;line-height:1.7;color:var(--bruin-zacht);max-width:62ch}
.uitleg__tekst-body p+p{margin-top:10px}
.uitleg__tekst-body .uitleg__tekst-noot{margin-top:15px;font-size:12px;color:var(--steen)}
@media (prefers-reduced-motion:reduce){.uitleg__tijdlijn::-webkit-slider-thumb{transition:none}}

/* Aanvraag: melding dat de antwoorden van de vorige keer er nog staan (27 sep 2026). */
.quiz__hersteld{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 15px;padding:12px 15px;background:var(--zand)}
.quiz__hersteld p{margin:0;font-size:14px;line-height:1.5;color:var(--bruin)}
.quiz__hersteld-knop{min-height:44px;padding:0 4px;border:0;background:none;color:var(--bruin);font:inherit;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--paars);text-underline-offset:4px;cursor:pointer}