/* ── Spectr ───────────────────────────────────────────────────────────────

   Eén kleur, wit, en heel grote letters. Dat is het hele idee: het logo is een
   wit woord op een blauw vlak, en de site is datzelfde vlak dat doorloopt.

   Geen lettertype van buitenaf. Een streetwear-site die een halve seconde met
   onzichtbare tekst staat te wachten op Google voelt goedkoop aan, en op een
   trage verbinding in de winkelstraat is dat precies wat er gebeurt. Vette
   systeemletters met strakke spatiëring doen hier hetzelfde werk. */

*,*::before,*::after{box-sizing:border-box}
:root{
  /* Het blauw van het logo. Verander dit ene getal en de hele site volgt. */
  --blauw:#0649bd;
  --blauw-diep:#04338a;
  /* Het vlak waar de site op ligt: het merkblauw zelf. Dat is het hele idee —
     het logo is een wit woord op dít blauw, en de site is datzelfde vlak dat
     doorloopt. Het heeft een tijdje op #041e52 gestaan om contrast te winnen,
     maar dat maakte er een donkere site van in plaats van een blauwe.

     Het contrast is in plaats daarvan opgelost aan de andere kant: de aurora
     mag alleen nog vérdonkeren (zie `hangDoekOp`), zodat het helderste punt van
     de hele site dit vlak is en nooit iets lichters. Daardoor is één berekening
     genoeg — wat hierop leesbaar is, is overal leesbaar. */
  --vlak:#0649bd;
  --blauw-licht:#2f6ce8;
  --wit:#f7f7f7;
  /* ── Leesbaarheid, nagerekend ──────────────────────────────────────────
     Deze twee stonden ooit op .62 en .34. Op het merkblauw gaf dat een contrast
     van 3,8 en 2,1 — waar 4,5 de eis is voor gewone tekst. Je kón de halve site
     niet fatsoenlijk lezen, en dat is geen smaakkwestie maar een meting.

     Nu het vlak weer het merkblauw is, zijn ze opnieuw gerekend: op #0649bd
     halen .82 en .80 een contrast van 5,5 en 5,3. De vlakjes met een wit waas
     eronder (invoervelden, .06–.08) drukken dat met ongeveer een tiende, en
     daar blijft het dus ook boven 4,5.

     Het verschil tussen de drie tinten wit is daardoor klein. Dat is het
     compromis: leesbaarheid wint van hiërarchie, en de hiërarchie doet de
     lettergrootte er maar bij. */
  --wit-zacht:rgba(247,248,252,.82);
  --wit-flauw:rgba(247,248,252,.80);
  --lijn:rgba(247,248,252,.20);
  --zwart:#070a14;
  --accent:var(--wit);
  --rand:14px;
  --breed:1240px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--vlak);color:var(--wit);
  font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;min-height:100dvh;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
/* ── Tijdelijke tekst in een veld ─────────────────────────────────────────
   Eén regel voor álle velden, en niet per formulier. Zonder dit valt een veld
   terug op het grijs van de browser (#757575); op ons blauw is dat een contrast
   van 1,4 en zie je de tekst letterlijk niet staan.

   Dat was precies wat er gebeurde bij het zoekveld op `/bestelling` — de plek
   waar iemand zónder account zijn bestelling terugvindt, en dus de plek waar je
   het je het minst kan permitteren. `.inschrijf input` had wél zijn eigen
   regel, dus op de voorpagina viel het niet op.

   `opacity:1` moet erbij: Firefox zet er uit zichzelf doorzichtigheid op. */
input::placeholder,textarea::placeholder{color:var(--wit-flauw);opacity:1}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:.95}

/* ── korrel ───────────────────────────────────────────────────────────────
   Een lichte ruis over het hele vlak. Zonder dit is een egaal blauw scherm
   digitaal en plat; met korrel lijkt het bedrukt. De svg staat in de css zelf,
   dus het kost geen extra aanvraag.

   Drie dingen zijn hier niet vrijblijvend, en ze zijn alle drie met vallen en
   opstaan gevonden:

   1. `feTurbulence` levert KLEURruis — losse ruis per kanaal. Met `overlay` legt
      dat een paarsige waas over een middenblauw vlak. `feColorMatrix saturate 0`
      maakt er grijsruis van.
   2. `soft-light` mengt veel zachter dan `overlay`.
   3. En dat was nog niet genoeg: de ruis van feTurbulence ligt niet netjes rond
      het middengrijs, en dan tílt soft-light het hele vlak op. Het wit werd
      lichtblauw en de pagina zag er flets uit — twee keer achter elkaar, want
      de eerste twee ingrepen leken te werken en deden het niet.

      `feComponentTransfer` met slope .5 en intercept .25 perst de ruis samen tot
      het bereik 0,25–0,75, netjes rond het midden. Daarmee is soft-light
      gemiddeld neutraal en voegt hij alleen textuur toe. Pas dan mag de dekking
      omhoog, want hij maakt niets meer lichter. */
/* Let op de `z-index: -1`. Hij lag eerst op 9999, dus over álles heen — ook
   over de productfoto's. Met `soft-light` trok dat elke foto naar het blauw van
   de pagina: een terracotta shirt werd blauwgrijs, en dat zag je pas toen er
   echte beelden in stonden. Achter de inhoud doet hij nog steeds wat hij moet
   doen (het egale vlak textuur geven) zonder de kleuren van een foto te
   veranderen. */
.korrel{
  position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.5' intercept='.25'/%3E%3CfeFuncG type='linear' slope='.5' intercept='.25'/%3E%3CfeFuncB type='linear' slope='.5' intercept='.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
@media(prefers-reduced-motion:no-preference){
  .korrel{animation:ruis 1.2s steps(3) infinite}
  @keyframes ruis{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}}
}

.wrap{max-width:var(--breed);margin:0 auto;padding:0 28px;width:100%}
@media(max-width:640px){ .wrap{padding:0 18px} }

/* ── opstarten ────────────────────────────────────────────────────────────── */
.opstart{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;gap:9px}
.opstart .punt{width:8px;height:8px;border-radius:50%;background:var(--wit);opacity:.3;
  animation:pols 1.1s ease-in-out infinite}
.opstart .punt:nth-child(2){animation-delay:.15s}
.opstart .punt:nth-child(3){animation-delay:.3s}
@keyframes pols{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ── het merkteken ────────────────────────────────────────────────────────
   Staat als bestand apart (logo.svg), zodat het echte logo er in één keer in
   gaat zonder aan de code te komen. */
.merk{display:block;width:min(74vw,520px);height:auto}
.merk.klein{width:180px}
.merk.mini{width:140px}

/* ── aankondigingsbalk ────────────────────────────────────────────────────
   Korte zinnen die voorbijschuiven. De reeks staat er twee keer in en schuift
   precies de helft op: zo sluit het einde naadloos op het begin aan zonder dat
   er een sprong in zit. */
.aankondiging{background:var(--wit);color:var(--blauw);overflow:hidden;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 0;position:relative;z-index:70}
.aankondiging .loop{display:flex;width:max-content;animation:schuif 42s linear infinite}
.aankondiging span{padding:0 26px;white-space:nowrap;position:relative}
.aankondiging span::after{content:"●";position:absolute;right:-4px;font-size:6px;
  top:50%;transform:translateY(-50%);opacity:.45}
@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .aankondiging .loop{animation:none;width:100%;justify-content:center}
  .aankondiging span:nth-child(n+2){display:none}
}

/* ── kop ──────────────────────────────────────────────────────────────────
   Drie kolommen van gelijke breedte, met het logo in het midden. Met `1fr auto
   1fr` blijft het midden het midden, ook als er links een menu-item bijkomt —
   anders schuift het logo mee en staat het op een telefoon net niet in het
   midden, wat je wel ziet maar niet meteen kan plaatsen. */
.kop{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--vlak) 86%, transparent);
  border-bottom:1px solid var(--lijn)}
.kop .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:64px;gap:12px}
.kzijde{display:flex;align-items:center;gap:6px;min-width:0}
.kzijde.rechts{justify-content:flex-end}
.kmidden{justify-self:center;display:flex;align-items:center}
/* ── Het logo binnen de lijnen ────────────────────────────────────────────
   Op de hoogte begrenzen en niet op de breedte. Sinds 30-09-2026 is het logo
   het woordmerk `spectr.` (~3,4:1) — breed en laag. Op hoogte begrenzen houdt
   hem in de balk; op breedte zou hij te hoog worden of te klein.

   `width:auto` moet erbij, anders wint de breedte van `.merk` en doet de
   hoogte niets. */
.kmidden .merk{width:auto;height:28px}
.kop nav.groot{display:flex;gap:20px;align-items:center;margin-left:6px}
.kop nav.groot a{font-size:12px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;
  color:var(--wit-zacht);transition:color .15s;white-space:nowrap}
.kop nav.groot a:hover,.kop nav.groot a.aan{color:var(--wit)}

/* Eén vorm voor alle knoppen in de kop, zodat ze even groot aanvoelen en op een
   telefoon allemaal een fatsoenlijk raakvlak hebben. */
.ikoon{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;
  border:0;background:transparent;color:var(--wit);cursor:pointer;border-radius:10px;
  transition:background .15s}
.ikoon:hover{background:rgba(247,248,252,.12)}
.ikoon svg{width:21px;height:21px}
.mandknop .n{position:absolute;top:3px;right:3px;background:var(--wit);color:var(--blauw);
  border-radius:999px;min-width:17px;height:17px;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;padding:0 4px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.menuknop{display:none}
@media(max-width:860px){
  .menuknop{display:inline-grid}
  .kop nav.groot{display:none}
  /* Het account-icoon blijft ook op een telefoon staan. Het stond hier op
     `display:none` en zat dan alleen nog in het uitklapmenu — maar dat is
     precies waar niemand naar je account zoekt: je zoekt naast het mandje. */
  .kmidden .merk{height:24px}
}

/* ── het schuifmenu ───────────────────────────────────────────────────────── */
body.menu-aan{overflow:hidden}
.menulaag{position:fixed;inset:0;z-index:90;background:rgba(4,10,28,.6);
  opacity:0;transition:opacity .2s}
.menulaag.zichtbaar{opacity:1}
.menupaneel{position:absolute;inset:0 auto 0 0;width:min(86vw,340px);background:var(--blauw-diep);
  border-right:1px solid var(--lijn);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.7,.3,1);
  padding-bottom:env(safe-area-inset-bottom)}
.menulaag.zichtbaar .menupaneel{transform:none}
.menukop{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
  border-bottom:1px solid var(--lijn)}
.menukop .merk{width:auto;height:22px}
.menupaneel nav{display:flex;flex-direction:column;padding:10px 6px;overflow-y:auto;flex:1}
.menupaneel nav a{padding:15px 14px;font-size:17px;font-weight:700;letter-spacing:-.01em;
  border-radius:10px}
.menupaneel nav a:hover,.menupaneel nav a.aan{background:rgba(247,248,252,.09)}
.menuvoet{display:flex;gap:16px;flex-wrap:wrap;padding:16px 20px;border-top:1px solid var(--lijn);
  font-size:12.5px;color:var(--wit-zacht)}
.menuvoet a:hover{color:var(--wit)}

/* ── de gesloten winkel ───────────────────────────────────────────────────
   Dit is de pagina die het vaakst te zien is: tussen twee drops door staat hij
   hier. Hij moet dus niet aanvoelen als een foutmelding maar als het merk. */
.poort{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:64px 22px;gap:0;position:relative}
.poort .merk{margin-bottom:38px}
.poort .label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--wit-flauw);
  margin-bottom:22px}
.poort h1{font-size:clamp(34px,7.5vw,78px);max-width:16ch;margin-bottom:18px}
.poort p.uitleg{color:var(--wit-zacht);font-size:clamp(15px,2vw,18px);max-width:46ch;margin:0 0 34px;
  line-height:1.6}

/* ── de teller ────────────────────────────────────────────────────────────
   Het grootste element op de pagina. Cijfers in vaste breedte, zodat er niets
   verspringt bij elke seconde — dat getril is precies wat een teller goedkoop
   maakt. */
.teller{display:flex;gap:clamp(10px,3vw,30px);justify-content:center;margin:12px 0 38px;
  font-variant-numeric:tabular-nums}
.teller .vak{min-width:clamp(62px,15vw,124px)}
.teller .cijfer{font-size:clamp(40px,11vw,104px);font-weight:800;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums}
.teller .eenheid{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--wit-flauw);margin-top:9px}
.teller .dubbel{font-size:clamp(30px,8vw,76px);font-weight:300;opacity:.3;line-height:1;
  align-self:flex-start;margin-top:.05em}

/* ── formulier ────────────────────────────────────────────────────────────── */
.inschrijf{display:flex;gap:10px;width:min(100%,480px);margin:0 auto}
.inschrijf input{flex:1;min-width:0;background:rgba(247,248,252,.08);border:1px solid var(--lijn);
  border-radius:999px;padding:15px 22px;font-size:15px;outline:none;transition:border-color .15s,background .15s}
.inschrijf input::placeholder{color:var(--wit-flauw)}
.inschrijf input:focus{border-color:var(--wit-flauw);background:rgba(247,248,252,.13)}
@media(max-width:520px){ .inschrijf{flex-direction:column;border-radius:var(--rand)} }

.knop{appearance:none;border:0;cursor:pointer;border-radius:999px;padding:15px 28px;
  font-size:13px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  background:var(--wit);color:var(--blauw);white-space:nowrap;
  transition:transform .12s,opacity .12s,box-shadow .15s}
.knop:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(7,10,20,.25)}
.knop:active{transform:translateY(0)}
.knop:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.knop.leeg{background:transparent;color:var(--wit);border:1px solid var(--lijn)}
.knop.leeg:hover{background:rgba(247,248,252,.09);box-shadow:none}
.knop.breed{width:100%;justify-content:center;padding:17px}
.knop.klein{padding:10px 18px;font-size:11.5px}

.melding{font-size:13.5px;margin-top:16px;min-height:20px;color:var(--wit-zacht)}
.melding.goed{color:#a8f0c6} .melding.fout{color:#ffc2c2}

/* ── de codesleuf ─────────────────────────────────────────────────────────
   Klein en onopvallend onderaan. Wie hem nodig heeft, weet dat hij bestaat. */
.sleuf{margin-top:42px;display:flex;flex-direction:column;align-items:center;gap:12px}
.sleuf > button{background:none;border:0;cursor:pointer;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wit-flauw);transition:color .15s}
.sleuf > button:hover{color:var(--wit-zacht)}
.sleuf form{display:none;gap:8px;width:min(100%,340px)}
.sleuf.open form{display:flex}
.sleuf input{flex:1;min-width:0;background:transparent;border:1px solid var(--lijn);border-radius:999px;
  padding:11px 18px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;outline:none;text-align:center}
.sleuf input:focus{border-color:var(--wit-flauw)}

/* ── sociale links ────────────────────────────────────────────────────────── */
.sociaal{display:flex;gap:26px;justify-content:center;margin-top:44px}
.sociaal a{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wit-flauw);transition:color .15s}
.sociaal a:hover{color:var(--wit)}

/* ── secties ──────────────────────────────────────────────────────────────── */
/* Alleen boven en onder. Stond hier `padding: … 0`, dan wint die van de
   zijmarge van `.wrap` — even specifiek, maar verderop in het bestand — en liep
   de inhoud op elke sectie tot tegen de rand van het scherm. */
.sectie{padding-block:clamp(56px,9vw,110px)}
.sectiekop{display:flex;align-items:flex-end;gap:18px;margin-bottom:38px;flex-wrap:wrap}
.sectiekop h2{font-size:clamp(28px,5vw,52px)}
.sectiekop .tel{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--wit-flauw);margin-left:auto;
  padding-bottom:.4em}

/* ── het rooster met stuks ────────────────────────────────────────────────── */
.stuks{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(14px,2.4vw,28px)}
.stuk{position:relative;cursor:pointer;display:block;text-align:left;background:none;border:0;padding:0;
  width:100%}
.stuk .foto{position:relative;aspect-ratio:4/5;border-radius:var(--rand);overflow:hidden;
  background:linear-gradient(150deg,var(--blauw-licht),var(--blauw-diep));
  border:1px solid var(--lijn)}
.stuk .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.stuk:hover .foto img{transform:scale(1.045)}
.stuk .foto .leeg{position:absolute;inset:0;display:grid;place-items:center;color:var(--wit-flauw);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.2em}
.stuk .vlag{position:absolute;top:12px;left:12px;background:var(--wit);color:var(--blauw);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.stuk .vlag.op{background:var(--zwart);color:var(--wit)}
.stuk .vlag.geheim{background:#1a1a1a;color:#ffd84d}
.stuk .naam{margin-top:14px;font-weight:700;font-size:16px;letter-spacing:-.015em}
.stuk .onder{display:flex;align-items:baseline;gap:10px;margin-top:3px}
.stuk .prijs{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;color:var(--wit-zacht)}
.stuk .rest{margin-left:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--wit-flauw)}
.stuk .rest.bijna{color:#ffd84d}
.stuk.uit .foto{opacity:.42}
.stuk.uit .naam{color:var(--wit-zacht)}

/* ── één stuk ─────────────────────────────────────────────────────────────── */
.detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,64px);padding:clamp(28px,5vw,64px) 0}
@media(max-width:900px){ .detail{grid-template-columns:minmax(0,1fr)} }
.galerij{display:grid;gap:12px}
.galerij .groot{aspect-ratio:4/5;border-radius:var(--rand);overflow:hidden;border:1px solid var(--lijn);
  background:linear-gradient(150deg,var(--blauw-licht),var(--blauw-diep))}
.galerij .groot img{width:100%;height:100%;object-fit:cover}
.galerij .strip{display:flex;gap:10px;flex-wrap:wrap}
.galerij .strip button{width:70px;aspect-ratio:1;border-radius:9px;overflow:hidden;padding:0;
  border:1px solid var(--lijn);background:none;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s}
.galerij .strip button.aan,.galerij .strip button:hover{opacity:1;border-color:var(--wit-flauw)}
.galerij .strip img{width:100%;height:100%;object-fit:cover}

.info h1{font-size:clamp(30px,4.6vw,52px);margin-bottom:10px}
.info .sub{color:var(--wit-zacht);font-size:16px;margin-bottom:22px}
.info .prijsgroot{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:24px;
  margin-bottom:28px;letter-spacing:-.01em}
.info .verhaal{color:var(--wit-zacht);line-height:1.7;margin:26px 0;white-space:pre-line}

.maten{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 24px}
.maat{min-width:60px;padding:13px 16px;border-radius:10px;border:1px solid var(--lijn);
  background:transparent;cursor:pointer;font-weight:650;font-size:14px;position:relative;
  transition:border-color .15s,background .15s,transform .1s}
.maat:hover:not(:disabled){border-color:var(--wit-flauw);background:rgba(247,248,252,.07)}
.maat.aan{background:var(--wit);color:var(--blauw);border-color:var(--wit)}
.maat:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.maat .op{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;
  letter-spacing:.08em;margin-top:3px;opacity:.7}

.kenmerken{border-top:1px solid var(--lijn);margin-top:30px;padding-top:22px;display:grid;gap:11px}
.kenmerk{display:flex;gap:16px;font-size:14px}
.kenmerk dt{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wit-flauw);min-width:110px;flex:none;padding-top:2px}
.kenmerk dd{margin:0;color:var(--wit-zacht)}

/* ── het mandje ───────────────────────────────────────────────────────────── */
.laag{position:fixed;inset:0;z-index:100;background:rgba(7,10,20,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;justify-content:flex-end;animation:vervaag .2s ease}
@keyframes vervaag{from{opacity:0}to{opacity:1}}
.mand{width:min(460px,100%);background:var(--blauw-diep);border-left:1px solid var(--lijn);
  display:flex;flex-direction:column;animation:mandin .28s cubic-bezier(.2,.8,.3,1)}
/* Heette ook `schuif`, net als de animatie van de aankondigingsbalk. De laatste
   van twee gelijke namen wint, dus schoof die balk 30 pixels op en stond hij
   daarna 42 seconden stil — precies wat er niet de bedoeling was. */
@keyframes mandin{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.mand header{display:flex;align-items:center;gap:12px;padding:22px 24px;border-bottom:1px solid var(--lijn)}
.mand header h2{font-size:20px}
.mand header button{margin-left:auto;background:none;border:0;cursor:pointer;font-size:24px;
  line-height:1;color:var(--wit-zacht);padding:0 4px}
.mand .lijst{flex:1;overflow-y:auto;padding:8px 24px}
.mandregel{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--lijn)}
.mandregel .mf{width:64px;aspect-ratio:4/5;border-radius:8px;overflow:hidden;flex:none;
  background:var(--blauw-licht)}
.mandregel .mf img{width:100%;height:100%;object-fit:cover}
.mandregel .mn{font-weight:650;font-size:14.5px}
.mandregel .mm{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  color:var(--wit-flauw);letter-spacing:.08em;margin-top:2px}
.mandregel .mp{margin-left:auto;text-align:right;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13.5px}
.mandregel .weg{background:none;border:0;cursor:pointer;color:var(--wit-flauw);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 0;margin-top:6px;text-align:left}
.mandregel .weg:hover{color:#ffc2c2}
.mand footer{padding:22px 24px;border-top:1px solid var(--lijn);display:grid;gap:14px}
.regel{display:flex;justify-content:space-between;font-size:14px;color:var(--wit-zacht)}
.regel.totaal{font-size:19px;font-weight:750;color:var(--wit);letter-spacing:-.02em}
.regel.kort{color:var(--wit);font-weight:650}
.codebalk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.codebalk input{background:rgba(247,248,252,.08);border:1px solid var(--lijn);border-radius:10px;
  padding:13px 14px;color:var(--wit);font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;min-width:0}
.codebalk input:focus{border-color:var(--wit-flauw);outline:none}
.codebalk input:disabled{opacity:.6}
.codebalk .knop{padding:13px 16px;white-space:nowrap}
.mand .veld{display:grid;gap:7px}
.mand .veld label{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wit-flauw)}
.mand .veld input{background:rgba(247,248,252,.08);border:1px solid var(--lijn);border-radius:10px;
  padding:13px 16px;font-size:15px;outline:none}
.mand .veld input:focus{border-color:var(--wit-flauw)}

/* ── het archief ──────────────────────────────────────────────────────────── */
.archief{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.oud{position:relative;aspect-ratio:3/4;border-radius:var(--rand);overflow:hidden;
  border:1px solid var(--lijn);background:linear-gradient(160deg,var(--blauw-licht),var(--blauw-diep));
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px;cursor:pointer}
.oud img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
  transition:opacity .3s,transform .5s}
.oud:hover img{opacity:.68;transform:scale(1.04)}
.oud .ov{position:relative;z-index:1}
.oud .jaar{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.2em;
  color:var(--wit-flauw);margin-bottom:6px}
.oud h3{font-size:21px}
.oud .st{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wit-flauw);margin-top:8px}

/* ── voet ─────────────────────────────────────────────────────────────────── */
.voet{border-top:1px solid var(--lijn);padding:48px 0 60px;margin-top:40px}
.voet .wrap{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start}
.voet .kolom{display:grid;gap:9px;font-size:13px}
.voet .kolom b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--wit-flauw);font-weight:500;margin-bottom:3px}
.voet a{color:var(--wit-zacht)}
.voet a:hover{color:var(--wit)}
.voet .rechts{margin-left:auto;text-align:right;color:var(--wit-flauw);font-size:12px}
@media(max-width:640px){ .voet .wrap{gap:26px} .voet .rechts{margin-left:0;text-align:left} }

/* ── tekstpagina's ────────────────────────────────────────────────────────
   Voorwaarden, privacy, verzending. Smal gezet: een regel van honderd tekens
   leest niemand uit, en dit zijn nu net de pagina's waar het op lezen aankomt. */
.maathulp{background:none;border:0;cursor:pointer;padding:0;margin-left:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wit-flauw);text-decoration:underline;text-underline-offset:3px}
.maathulp:hover{color:var(--wit)}
.maatlade .lijst{padding:22px 24px}
table.maattabel{width:100%;border-collapse:collapse;font-size:13.5px}
table.maattabel th{text-align:left;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--wit-flauw);font-weight:500;
  padding:0 10px 12px 0;border-bottom:1px solid var(--lijn)}
table.maattabel td{padding:11px 10px 11px 0;border-bottom:1px solid var(--lijn);color:var(--wit-zacht)}
table.maattabel tr td:first-child{color:var(--wit);font-weight:700}
.maatuitleg{color:var(--wit-flauw);font-size:12.5px;margin:18px 0 0;line-height:1.6}

/* De bouwstand had hier zijn eigen rijtje links onderaan. Die is weg: ook dat
   scherm gebruikt nu `.voet`, net als de deur en elke andere pagina. */

/* ── de voorpagina ────────────────────────────────────────────────────────
   Het logo groot, één zin, en twee knoppen. Meer heeft een merk op zijn
   voorpagina niet nodig; wie verder wil, klikt. */
/* De hero was een leeg scherm met alleen het logo erin. Nu is hij zo hoog als
   zijn inhoud nodig heeft, met een bovengrens — zodat wat eronder staat al in
   beeld komt en je meteen ziet dat er meer is. */
.held{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(340px,54vh,520px);
  background:linear-gradient(155deg,var(--blauw-licht),var(--blauw-diep))}
.held .heldtekst{position:relative;z-index:2;width:100%;padding:clamp(28px,5vw,56px) 28px}
.heldbeeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.held.metbeeld::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,var(--blauw-diep) 4%,rgba(4,51,138,.55) 46%,transparent 78%)}
.held .label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--wit-zacht);margin-bottom:14px}
.held h1{font-size:clamp(40px,9vw,92px);letter-spacing:-.04em;margin:0}
.held .merk{width:min(66vw,380px);margin-bottom:26px}
.held .slogan{color:var(--wit-zacht);font-size:clamp(15px,2.2vw,19px);max-width:46ch;
  margin:14px 0 0;line-height:1.55}
.heldknoppen{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.teller.klein{margin:22px 0 0;gap:clamp(8px,2vw,22px)}
.teller.klein .cijfer{font-size:clamp(28px,6.5vw,56px)}
.teller.klein .vak{min-width:clamp(48px,11vw,86px)}

/* ── het tweeluik: drops naast shop ───────────────────────────────────────
   Wie hier voor het eerst komt weet niet wat het verschil is, en dat verschil
   is het hele model van het merk. Dus staat het er gewoon, in twee kaarten,
   boven de producten. */
.tweeluik{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(12px,2vw,20px)}
/* Drie kaarten die het model uitleggen: drop, essentials, archief. Op een
   telefoon onder elkaar, want drie kolommen van 110 pixels leest niemand. */
.drieluik{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(12px,1.6vw,18px)}

/* ── de teaser ────────────────────────────────────────────────────────────
   Wat er staat vóór een drop opengaat. Vakjes in de kleur van wat eronder zit,
   met een vraagteken erop en een traag pulserende gloed — genoeg om te zien dat
   er iets is, niet genoeg om te weten wat. */
.teaser{margin:clamp(24px,4vw,44px) 0 0}
.teaservakjes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(10px,1.6vw,16px)}
.vakje{position:relative;aspect-ratio:4/5;border-radius:var(--rand);overflow:hidden;
  border:1px solid var(--lijn);cursor:default;
  background:linear-gradient(150deg,color-mix(in srgb,var(--vlek) 34%,var(--blauw-diep)),
    var(--blauw-diep));
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s}
.vakje::after{content:"";position:absolute;inset:-40%;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--vlek) 55%,transparent),
    transparent 62%);
  opacity:.5;animation:ademen 5.5s ease-in-out infinite;animation-delay:var(--vertraging)}
.vakje .vraagteken{position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(34px,6vw,56px);font-weight:800;color:rgba(247,248,252,.2);
  letter-spacing:-.04em;transition:color .3s,transform .3s}
.vakje.wakker{transform:translateY(-3px);border-color:var(--wit-flauw)}
.vakje.wakker .vraagteken{color:rgba(247,248,252,.45);transform:scale(1.08)}
@keyframes ademen{0%,100%{opacity:.34;transform:scale(.92)}50%{opacity:.62;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){ .vakje::after{animation:none} }

.teaserfeiten{display:flex;gap:clamp(22px,5vw,58px);flex-wrap:wrap;margin:clamp(22px,3vw,34px) 0 0;
  padding:22px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.teaserfeiten b{display:block;font-size:26px;letter-spacing:-.03em;line-height:1.1}
.teaserfeiten span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wit-flauw);margin-top:4px;display:block}
.kleurvlekken{display:flex;gap:6px;align-items:center;height:28px}
.kleurvlekken i{width:20px;height:20px;border-radius:50%;border:1px solid var(--lijn);
  display:inline-block}
.teasertekst{color:var(--wit-zacht);max-width:52ch;margin:24px 0 0;line-height:1.7;font-size:14.5px}
.teasercode{margin-top:clamp(26px,4vw,40px);max-width:480px}
.teasercode .label{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--wit-flauw);margin-bottom:12px}
.teasercode input{text-transform:uppercase;letter-spacing:.14em;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}

/* Een voorbije drop: duidelijk dat er niets meer te halen valt. */
.archiefnoot{display:flex;gap:12px;align-items:flex-start;margin-top:clamp(30px,5vw,54px);
  padding:18px 20px;border:1px solid var(--lijn);border-radius:var(--rand);
  color:var(--wit-zacht);font-size:14px;line-height:1.65}
.archiefnoot a{text-decoration:underline;text-underline-offset:3px;color:var(--wit);
  white-space:nowrap}

/* ── de tweede foto ───────────────────────────────────────────────────────
   Ligt eronder en komt tevoorschijn bij hover. Op een aanraakscherm gebeurt er
   niets, en dat is prima: daar tik je gewoon door naar het stuk zelf. */
.stuk .foto .tweede{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.stuk:hover .foto .tweede{opacity:1}
@media(hover:none){ .stuk .foto .tweede{display:none} }

/* ── opkomen bij het scrollen ─────────────────────────────────────────────── */
.opkomst{opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--opkomst-vertraging,0s)}
.opkomst.erin{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .opkomst{opacity:1;transform:none;transition:none} }

/* ── de kluis ─────────────────────────────────────────────────────────────── */
.kluismelding{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120%);z-index:120;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;max-width:min(92vw,520px);
  background:#0a0a0c;color:#f7f7f7;border:1px solid rgba(255,216,77,.5);border-radius:14px;
  padding:16px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),opacity .3s;opacity:0}
.kluismelding.erin{transform:translate(-50%,0);opacity:1}
.kluismelding b{color:#ffd84d;font-size:15px;letter-spacing:-.01em}
.kluismelding span{color:rgba(247,247,247,.66);font-size:13px;flex:1 1 220px;line-height:1.5}
.kluismelding .knop{background:#ffd84d;color:#000}

.paginauitleg{color:var(--wit-zacht);max-width:58ch;margin:-14px 0 30px;line-height:1.7;
  font-size:14.5px}
.paginauitleg a{text-decoration:underline;text-underline-offset:3px}

/* Waar een stuk bij hoort, boven de maatknoppen. */
.herkomst{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:13.5px;
  color:var(--wit-zacht);line-height:1.6;margin:0 0 24px;padding:14px 16px;
  border:1px solid var(--lijn);border-radius:11px}
.herkomst a{text-decoration:underline;text-underline-offset:3px;color:var(--wit)}
.merkje{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 8px;border-radius:5px;background:rgba(247,248,252,.14);
  color:var(--wit);font-weight:700}
.merkje.drop{background:var(--wit);color:var(--blauw)}
.merkje.vast{background:rgba(247,248,252,.14)}

/* Het archief: de drops als kaarten met hun omslag. */
.archief{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(12px,2vw,20px)}
.oud{--accentkleur:var(--wit);position:relative;display:block;text-align:left;padding:0;
  border:1px solid var(--lijn);border-radius:var(--rand);overflow:hidden;cursor:pointer;
  background:linear-gradient(150deg,var(--blauw-licht),var(--blauw-diep));
  transition:border-color .18s,transform .18s}
.oud:hover{border-color:var(--wit-flauw);transform:translateY(-2px)}
.oud img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.72}
.oud .oudtekst{padding:16px 18px 18px;border-top:2px solid var(--accentkleur)}
.oud .naam{font-size:19px;font-weight:800;letter-spacing:-.02em}
.oud .wanneer{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wit-flauw);margin-top:5px}
.oud .st{margin-top:10px;font-size:13px;color:var(--wit-zacht)}
.luik{display:block;border:1px solid var(--lijn);border-radius:var(--rand);
  padding:clamp(22px,3vw,34px);transition:background .18s,border-color .18s}
.luik:hover{background:rgba(247,248,252,.06);border-color:var(--wit-flauw)}
.luik .label{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--wit-flauw);margin-bottom:12px}
.luik h2{font-size:clamp(21px,3vw,29px);margin:0 0 10px}
.luik p{color:var(--wit-zacht);margin:0 0 18px;line-height:1.65;font-size:14.5px}
.luik .meer{font-size:12.5px;font-weight:700;letter-spacing:.04em}
.sectie.kort{padding-block:clamp(28px,4vw,52px)}

/* Elke drop mag zijn eigen accentkleur hebben. Staat hij er niet, dan valt hij
   terug op wit — nooit op een lege waarde, want dan verdwijnt de rand. */
.dropblok,.dropkaart{--accentkleur:var(--wit)}
.dropkaart{border:1px solid var(--lijn);border-radius:var(--rand);padding:clamp(26px,4vw,52px);
  text-align:center;position:relative;overflow:hidden}
.dropkaart::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--accentkleur);opacity:.85}
.dropkaart h2,.dropkaart h3{font-size:clamp(28px,5.5vw,56px);margin:0}
.dropkaart .label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--wit-flauw);
  margin-bottom:16px}
.dropkaart .sub{color:var(--wit-zacht);margin-top:8px;font-size:15px}
.dropkaart .uitleg{color:var(--wit-zacht);max-width:52ch;margin:18px auto 26px;line-height:1.7}
.dropkaart .teller{margin:26px 0 22px}
.dropkaart.groot{text-align:left}
.dropkaart.groot .uitleg{margin-left:0}
.dropkaart.groot .teller{justify-content:flex-start}

.inschrijfblok{border:1px solid var(--lijn);border-radius:var(--rand);
  padding:clamp(26px,4vw,48px);text-align:center}
.inschrijfblok h2{font-size:clamp(24px,4vw,40px);margin-bottom:10px}
.inschrijfblok p{color:var(--wit-zacht);margin:0 0 24px}

/* ── rubrieken in de shop ─────────────────────────────────────────────────── */
.rubrieken{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 30px}
.rubrieken button{background:transparent;border:1px solid var(--lijn);border-radius:999px;
  padding:9px 18px;font-size:12.5px;font-weight:650;letter-spacing:.06em;cursor:pointer;
  color:var(--wit-zacht);transition:background .15s,color .15s,border-color .15s}
.rubrieken button:hover{border-color:var(--wit-flauw);color:var(--wit)}
.rubrieken button.aan{background:var(--wit);color:var(--blauw);border-color:var(--wit)}
.rubrieken button.sale{border-color:rgba(255,216,77,.5);color:#ffd84d}
.rubrieken button.sale.aan{background:#ffd84d;color:var(--zwart);border-color:#ffd84d}

.stuk .vlag.sale{background:#ffd84d;color:var(--zwart)}
.stuk .was,.wasgroot{text-decoration:line-through;color:var(--wit-flauw);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.wasgroot{font-size:.55em;margin-left:10px;vertical-align:middle}

.vroegband{background:var(--wit);color:var(--blauw);text-align:center;padding:9px 18px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em}

.terug,.tekstpagina .label,.sectiekop .label{font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--wit-flauw)}
.terug:hover{color:var(--wit)}
.dropverhaal{color:var(--wit-zacht);max-width:62ch;line-height:1.7;margin:-18px 0 38px;
  white-space:pre-line}
.dropuitleg{color:var(--wit-flauw);font-size:13.5px;max-width:60ch;margin:44px 0 0;line-height:1.7}
.dropuitleg a{text-decoration:underline;text-underline-offset:3px}
.lead{color:var(--wit-zacht);margin:10px 0 0;font-size:clamp(15px,2vw,18px);line-height:1.6}

.nietkoop{border:1px solid var(--lijn);border-radius:var(--rand);padding:18px 20px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:22px 0}
.nietkoop b{font-size:14px;font-weight:650}
.nietkoop .knop{margin-left:auto}

/* ── vaste pagina's: vragen en stappen ────────────────────────────────────── */
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{cursor:pointer;padding:18px 0;font-weight:650;font-size:16px;list-style:none;
  display:flex;align-items:center;gap:12px}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+";margin-left:auto;font-size:20px;opacity:.5;font-weight:400}
.vraag[open] summary::after{content:"−"}
.vraag > div{padding:0 0 18px}
.vraag p{margin:0 0 12px}
ol.stappenlijst{list-style:none;counter-reset:stap;margin:26px 0;padding:0;display:grid;gap:20px}
li.stap{counter-increment:stap;position:relative;padding-left:52px}
li.stap::before{content:counter(stap);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--lijn);display:grid;place-items:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--wit)}
li.stap b{display:block;margin-bottom:5px;font-size:16px}
li.stap p{margin:0;color:var(--wit-zacht)}
.tekstpagina .blok h3{margin-top:38px}

/* ── account ──────────────────────────────────────────────────────────────── */
.smal{max-width:460px}
.smal .velden{display:grid;gap:16px;margin-top:26px}
.smal .veld{display:grid;gap:7px}
.smal .veld label{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wit-flauw)}
.smal .veld input{background:rgba(247,248,252,.08);border:1px solid var(--lijn);
  border-radius:10px;padding:14px 15px;color:var(--wit)}
.smal .veld input:focus{outline:none;border-color:var(--wit-flauw)}
.smal .hint{font-size:12px;color:var(--wit-flauw);line-height:1.5}
.wissel{background:none;border:0;color:var(--wit-zacht);cursor:pointer;font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.wissel:hover{color:var(--wit)}
.mijnfeiten{display:flex;gap:clamp(20px,5vw,60px);flex-wrap:wrap;margin:0 0 34px;
  padding:22px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.mijnfeiten b{display:block;font-size:24px;letter-spacing:-.02em}
.mijnfeiten span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--wit-flauw)}

/* ── telefoon ─────────────────────────────────────────────────────────────
   Alles hier is één keer op een toestel van 375 pixels nagekeken. Het ging
   vooral mis op drie plaatsen: de kop paste nipt, het productrooster stond op
   één kolom waardoor je eindeloos moest scrollen, en de knoppen waren zo breed
   dat ze bij twee naast elkaar overliepen. */
@media(max-width:620px){
  .wrap{padding:0 16px}
  /* `padding-block` en niet de korte vorm: die zou de zijmarge van `.wrap` weer
     op nul zetten, en dan loopt alles op een telefoon tot tegen de rand. Precies
     die fout stond hier eerst. */
  .sectie{padding-block:clamp(34px,7vw,56px)}
  .sectiekop{margin-bottom:22px;gap:10px}
  .sectiekop h2{font-size:clamp(24px,7.5vw,34px)}
  /* Twee kolommen, niet één: streetwear kijk je als een rooster en niet als een
     lijst, en op één kolom zie je maar anderhalf stuk tegelijk. */
  .stuks{grid-template-columns:1fr 1fr;gap:10px}
  .stuk .naam{margin-top:10px;font-size:14px}
  .stuk .onder{gap:7px;flex-wrap:wrap}
  .stuk .prijs{font-size:12.5px}
  .stuk .rest{margin-left:0;font-size:10px}
  .stuk .vlag{top:8px;left:8px;padding:4px 8px;font-size:9px}
  .heldknoppen .knop{flex:1 1 auto;justify-content:center;text-align:center}
  .knop{padding:14px 22px;font-size:12px}
  .inschrijf{flex-direction:column}
  .inschrijf .knop{width:100%}
  .detail{grid-template-columns:1fr;gap:22px;padding:18px 0}
  .tekstpagina h2,.sectiekop h2{overflow-wrap:break-word}
  .mijnfeiten{gap:22px;padding:18px 0}
  .mijnfeiten b{font-size:20px}
  .opzoek input{flex:1 1 100%}
  .opzoek .knop{width:100%}
  .voet .wrap{gap:22px}
  .voet .kolom{flex:1 1 42%}
  .rubrieken{gap:7px;margin-bottom:22px;overflow-x:auto;flex-wrap:nowrap;
    padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rubrieken::-webkit-scrollbar{display:none}
  .rubrieken button{white-space:nowrap;padding:8px 15px;font-size:12px}
}
/* Heel smalle toestellen: dan pas terug naar één kolom, want twee kaarten van
   150 pixels tonen niets meer. */
@media(max-width:360px){
  .stuks{grid-template-columns:1fr}
  .kmidden .merk{height:22px}
}

.tekstpagina{max-width:68ch}
.tekstpagina .label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--wit-flauw);
  margin-bottom:18px}
.tekstpagina h2{font-size:clamp(30px,5.5vw,54px);margin-bottom:26px}
.tekstpagina h3{font-size:19px;letter-spacing:-.01em;margin:38px 0 12px}
.tekstpagina p{color:var(--wit-zacht);margin:0 0 15px;line-height:1.7}
.tekstpagina a{text-decoration:underline;text-underline-offset:3px}
.tekstpagina .onaf{color:#ffc2c2}
.tekstpagina .bijgewerkt{margin-top:44px;font-size:12px;color:var(--wit-flauw)}

.opzoek{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0}
.opzoek input{flex:1 1 210px;min-width:0;background:rgba(247,248,252,.08);
  border:1px solid var(--lijn);border-radius:999px;padding:15px 20px;color:var(--wit)}
.opzoek input:focus{outline:none;border-color:var(--wit-flauw);background:rgba(247,248,252,.13)}

.bestelkaart{border:1px solid var(--lijn);border-radius:var(--rand);padding:22px 24px;margin-top:22px}
.bestelkaart .bk{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--lijn)}
.bestelkaart .bk span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  letter-spacing:.12em;color:var(--wit-flauw)}
.bregel{display:flex;justify-content:space-between;gap:16px;font-size:14px;
  color:var(--wit-zacht);padding:5px 0}
.bregel.totaal{color:var(--wit);font-weight:700;border-top:1px solid var(--lijn);
  margin-top:10px;padding-top:12px}
.bestelkaart .spoor{margin:16px 0 0;font-size:13px;color:var(--wit-zacht)}

/* ── de kluis ─────────────────────────────────────────────────────────────
   Wat je te zien krijgt als je de code kent. Zwart in plaats van blauw, zodat
   je meteen weet dat je ergens anders bent. */
body.kluis{--blauw:#0a0a0c;--blauw-diep:#000;--blauw-licht:#1c1c22;--accent:#ffd84d}
body.kluis .vlag{background:var(--accent);color:#000}
body.kluis .knop{background:var(--accent);color:#000}
.kluisband{background:var(--accent);color:#000;text-align:center;padding:9px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;position:relative;z-index:70}

.leegmelding{padding:70px 0;text-align:center;color:var(--wit-flauw);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase}

/* Iets wat binnenkomt mag dat rustig doen. Eén beweging, kort, en niet als je
   aangegeven hebt dat je daar niet tegen kan. */
@media(prefers-reduced-motion:no-preference){
  .binnen{animation:opkomen .5s cubic-bezier(.2,.7,.3,1) both}
  @keyframes opkomen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* Terugval als logo.svg er niet is. Zo staat er altijd iets, ook voordat het
   echte bestand erin gezet is. */
.merk-tekst{display:block;font-size:clamp(46px,11vw,96px);font-weight:800;font-style:italic;
  letter-spacing:-.05em;line-height:1}
.merk-tekst.klein{font-size:30px} .merk-tekst.mini{font-size:24px}

/* ── kleurkeuze ───────────────────────────────────────────────────────────
   Bolletjes, geen knoppen met tekst. De naam staat erboven zodat je weet wat je
   kiest: een kleur zonder naam is niet te bestellen en niet te bespreken. */
.kieskop{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--wit-flauw);margin:0 0 10px;
  display:flex;align-items:baseline;gap:8px}
.kieskop span{color:var(--wit-zacht);letter-spacing:.06em}
.kleuren{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.kleur{width:38px;height:38px;border-radius:50%;padding:3px;cursor:pointer;
  background:transparent;border:1px solid var(--lijn);transition:border-color .15s}
.kleur span{display:block;width:100%;height:100%;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.kleur:hover:not(:disabled){border-color:var(--wit-flauw)}
.kleur.aan{border-color:var(--wit);border-width:2px;padding:2px}
.kleur:disabled{opacity:.3;cursor:not-allowed}

/* ══ Twee sites, één winkel ═════════════════════════════════════════════════
   spectrbrand.com is de drop en verder niets; essentials.spectrbrand.com is de
   winkel die er altijd is. Hieronder staat wat die twee voorpagina's apart
   nodig hebben, en het blok dat naar de overkant wijst. */

/* De hero van de dropsite vult bijna het scherm — dat is de bedoeling: je komt
   binnen op een klok en niets anders. Bijna, niet helemaal: die laatste strook
   laat zien dat er nog iets onder staat, anders scrollt niemand. */
.held.vol{min-height:clamp(500px,86vh,860px);align-items:center}
.held.vol .heldtekst{padding-block:clamp(60px,10vh,120px)}
/* De essentials hebben net het omgekeerde nodig: hier kom je om iets te kopen,
   dus staat het rooster zo hoog mogelijk.

   Niet `.held.smal` noemen: `.smal` is elders een hulpklasse met max-width 460px,
   en die pakte deze hero mee — een kop van 460 pixels midden op een scherm van
   1280. Twee klassen die allebei iets over de breedte zeggen, moeten niet
   toevallig dezelfde naam hebben. */
.held.kort{min-height:0;background:none;border-bottom:1px solid var(--lijn)}
.held.kort .heldtekst{padding-block:clamp(34px,6vw,58px) clamp(26px,4vw,44px)}
.held.kort h1{font-size:clamp(32px,6vw,58px)}

.heldnoot{color:var(--wit-flauw);font-size:13.5px;margin:22px 0 0;max-width:46ch;line-height:1.6}
.sluittekst{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wit-zacht);margin-top:18px}
.heldpijl{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  font-size:19px;color:var(--wit-flauw);pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .heldpijl{animation:wip 2.4s ease-in-out infinite}
}
@keyframes wip{0%,100%{transform:translate(-50%,0);opacity:.45}
  50%{transform:translate(-50%,7px);opacity:.9}}

.dropverhaal.groot{font-size:clamp(16px,2.3vw,20px);line-height:1.75;max-width:64ch;
  color:var(--wit-zacht);white-space:pre-line;margin:0}

/* ── de oversteek ─────────────────────────────────────────────────────────
   Eén blok onderaan dat naar de andere site wijst. Het staat bewust apart van
   de voet: de voet lees je niet, dit lees je wel. */
.oversteek{position:relative;overflow:hidden;border-top:1px solid var(--lijn);
  padding-block:clamp(52px,8vw,96px)}
.oversteek.naaressentials{background:
  radial-gradient(120% 140% at 85% 0%,rgba(247,248,252,.07),transparent 60%)}
/* Hetzelfde puntenveld als op de deur, maar dan in css: één blok onderaan is
   een canvas met een animatie niet waard. De foto van de drop die hier stond is
   weg — die was lelijk en liet zien wat er nog niet te zien hoort te zijn. */
.oversteek.naardrop{
  background:
    radial-gradient(60% 90% at 78% 30%,rgba(247,248,252,.10),transparent 62%),
    linear-gradient(155deg,var(--blauw-licht),var(--blauw-diep))}
.oversteek.naardrop::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(247,248,252,.22) 1px,transparent 1px);
  background-size:26px 26px;
  /* Naar de rand toe uitdoven, anders is het behang in plaats van sfeer. */
  mask-image:radial-gradient(80% 110% at 70% 40%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(80% 110% at 70% 40%,#000 10%,transparent 72%)}
.oversteektekst{position:relative;z-index:1}
.oversteek .label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--wit-flauw);
  margin-bottom:14px}
.oversteek h2{font-size:clamp(30px,5.5vw,58px);letter-spacing:-.03em;margin:0}
.oversteek p{color:var(--wit-zacht);max-width:52ch;margin:14px 0 0;line-height:1.7;
  font-size:15px}
.oversteek .heldknoppen{margin-top:28px}
.oversteek .teller.klein{margin:24px 0 0;justify-content:flex-start}

/* Een link naar de andere site, met het pijltje erbij. Hij ziet er net iets
   zachter uit dan een gewone menuregel: het is een zijstap, geen bestemming. */
a.buiten{opacity:.82}
a.buiten:hover{opacity:1}

@media(max-width:620px){
  .held.vol{min-height:clamp(440px,76vh,640px)}
  .held.vol .heldtekst{padding-block:clamp(40px,8vh,70px)}
  .oversteek{padding-block:clamp(38px,8vw,60px)}
  .oversteek h2{font-size:clamp(26px,8vw,38px)}
  .oversteek .knop{flex:1 1 auto;justify-content:center;text-align:center}
}

/* ── de dichte dropsite ───────────────────────────────────────────────────
   Eén scherm, één ding te doen. Het beeld van de drop ligt erachter en is
   bewust ver weggedraaid: je moet vóélen dat er iets is, niet zien wát.

   `.poortmidden` staat er omdat `.poort` een flexkolom is die alles centreert:
   zonder die tussenlaag zou het streepje onderaan mee in het midden willen
   staan in plaats van onderaan te blijven plakken. */
.poortmidden{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;width:100%;margin:auto 0}
/* Hier stond de foto van de drop, wazig over het hele scherm. Die is weg: hij
   was lelijk en hij verraadde de drop op een pagina die juist niets hoort te
   verraden. Wat er nu ligt is `#doek`, een tekening die niets voorstelt en die
   achter de hele site ligt in plaats van alleen achter de deur. */
.poort .inschrijf{margin-top:14px}
.poort p.uitleg{margin:20px 0 0;font-size:14px;color:var(--wit-flauw)}
.poort p.uitleg b{color:var(--wit-zacht);font-weight:700}
.poort .melding{margin-top:18px;max-width:46ch}
.poortwanneer{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wit-flauw);margin:-18px 0 30px}

/* Het eigen streepje onderaan de deur is weg: die had zijn eigen vier kleine
   links en was daarmee een tweede soort voet op één site. De deur gebruikt nu
   `.voet`, net als elke andere pagina. */

@media(max-width:620px){
  .poort{padding:44px 16px 34px}
  .poort .merk{width:min(58vw,240px);margin-bottom:26px}
  .poortwanneer{margin:-12px 0 24px}
}
.poortcode{margin-top:36px;width:min(100%,480px)}
.poortcode .inschrijf input{text-transform:uppercase;letter-spacing:.14em;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.poortcode .melding{margin-top:12px}
.alslink{background:none;border:0;padding:0;color:var(--wit-flauw);cursor:pointer;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.alslink:hover{color:var(--wit-zacht)}

/* `hidden` is een attribuut dat de browser afhandelt met `display:none` — maar
   elke eigen `display`-regel wint daarvan. `.inschrijf{display:flex}` zette het
   codeformulier dus gewoon weer aan, terwijl het dicht hoorde te staan. Eén
   regel die dat voorgoed rechtzet, voor élk element. */
[hidden]{display:none !important}

/* ── Alles op één scherm ──────────────────────────────────────────────────
   Een dichte site waar je op moet scrollen is geen dichte site: dan is er
   blijkbaar tóch meer. Alles hieronder is er alleen om de deur op één scherm
   te laten passen — gemeten op 1280×860 en op een telefoon van 375×812.

   Het logo was de grootste boosdoener: zonder maat werd dat driehonderd pixels
   hoog, een derde van het scherm. */
.poort .merk{width:min(44vw,270px);margin-bottom:clamp(18px,3vh,30px)}
.poort .label{margin-bottom:clamp(10px,1.6vh,18px)}
.poort h1{margin-bottom:clamp(8px,1.4vh,16px)}
.poort .teller{margin:clamp(6px,1.4vh,14px) 0 clamp(14px,2.4vh,26px)}
.poort .poortwanneer{margin:0 0 clamp(18px,3vh,30px)}
.poort p.uitleg{margin-top:clamp(12px,2vh,20px)}
.poortcode{margin-top:clamp(20px,3.4vh,34px)}
/* Een lege melding is een lege regel die toch ruimte inneemt. */
.poort .melding:empty{display:none;margin:0}
.poort{padding:clamp(26px,4.5vh,54px) 22px}
.poort p.uitleg{margin-top:clamp(10px,1.6vh,16px)}
.poortcode{margin-top:clamp(16px,2.6vh,28px)}
.poort{padding-bottom:clamp(14px,2vh,34px)}

/* ══ De deur ════════════════════════════════════════════════════════════════
   De gesloten dropsite: een balk bovenaan waar je wél op kan klikken — account,
   archief, about, faq — en daaronder één scherm dat precies past. Niet ongeveer
   past: exact. Kunnen scrollen op een pagina die dicht hoort te zijn, verraadt
   dat er toch nog iets onder zit, en dan is de deur een gordijn. */
/* ── De deur vult het eerste scherm, de voet komt eronder ─────────────────
   Hier stond `overflow:hidden` op de body en een vaste `height:100dvh` op
   `#app`: de deur was exact één scherm en er viel niets te scrollen. Dat werkte
   zolang de deur zijn eigen kleine streepje links onderaan had.

   Nu hij dezelfde voet krijgt als de rest van de site kan dat niet meer — die
   voet is vier kolommen hoog en past daar niet bij in. In plaats van hem weg te
   knippen (met `overflow:hidden` zou je hem nooit te zien krijgen) staat hij nu
   gewoon ónder het eerste scherm.

   `calc(100dvh - 97px)` is de hoogte van dat eerste scherm: 32 voor de
   aankondigingsbalk plus 64 voor de kop plus haar randje. Die 97 is over alle
   breedtes gelijk — `.kop .wrap` staat vast op 64 en alleen het logo erin
   krimpt mee. Verandert een van die twee, dan moet dit getal mee. */
body.deur .poort{min-height:calc(100dvh - 97px);
  padding:clamp(10px,2vh,30px) 22px clamp(10px,1.8vh,26px)}
body.deur .poortmidden{margin:auto 0}

/* Het doek ligt achter alles en vangt geen klikken: het formulier eroverheen
   moet gewoon werken. De muisbewegingen komen van `window`, niet van dit
   element, dus `pointer-events:none` kost geen enkele reactie. */
#doek{position:fixed;inset:0;width:100%;height:100%;z-index:-2;
  pointer-events:none;display:block;background:var(--vlak)}
/* Op de deur mag het veld zich laten zien; op een pagina met tekst hoort het
   achtergrond te blijven. Eén regel verschil in plaats van twee tekeningen.

   Dit stond op .55 toen de aurora nog licht optelde en dus contrast kostte. Nu
   hij nooit lichter wordt dan het vlak, kost méér doek niets: elke stap die hij
   zet gaat van het vlak af en niet erbij. Vandaar .9 — de kleuren komen er echt
   door, en wat je eronder ziet doorschemeren is precies het merkblauw. */
body:not(.deur) #doek{opacity:.9}

/* De klok hapert als je er drie keer op tikt. Verandert niets, hoort nergens
   toe te leiden — het is er voor wie het per ongeluk vindt. */
.teller{cursor:pointer;user-select:none}
.teller .cijfer{transition:transform .12s}
@media(prefers-reduced-motion:no-preference){
  .teller.hapert .vak:nth-child(odd) .cijfer{animation:hapert .19s steps(2) 4}
  .teller.hapert .vak:nth-child(even) .cijfer{animation:hapert .23s steps(2) 3 reverse}
}
@keyframes hapert{
  0%{transform:translate(0,0);filter:none}
  40%{transform:translate(-3px,2px);filter:blur(.4px)}
  70%{transform:translate(4px,-2px)}
  100%{transform:translate(0,0)}
}

/* ══ De essentials ══════════════════════════════════════════════════════════
   Een winkel, en verder niets. De kop, de filters en de sortering staan in één
   blok bij elkaar zodat het rooster zo hoog mogelijk begint — wie hier komt wil
   de stuks zien, niet eerst een alinea. */
.winkelkop{padding:clamp(26px,5vw,52px) 0 clamp(18px,3vw,28px)}
.winkeltitel h1{font-size:clamp(30px,6vw,60px);letter-spacing:-.035em;margin:0}
.winkeltitel p{color:var(--wit-zacht);margin:10px 0 0;max-width:52ch;font-size:15px;
  line-height:1.6}
.winkelbalk{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:clamp(20px,3vw,32px);
  border-bottom:1px solid var(--lijn);padding-bottom:16px}
.sorteer{display:flex;align-items:center;gap:12px;margin-left:auto}
.sorteer span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wit-flauw);white-space:nowrap}
.sorteer select{background:rgba(247,248,252,.08);color:var(--wit);border:1px solid var(--lijn);
  border-radius:999px;padding:9px 14px;font:inherit;font-size:13px;cursor:pointer}
.sorteer select:focus{outline:none;border-color:var(--wit-flauw)}
/* De opties zelf tekent het besturingssysteem; op een lichte lijst zou witte
   tekst onleesbaar zijn, dus die krijgen expliciet donkere letters. */
.sorteer select option{background:var(--blauw-diep);color:var(--wit)}

/* Iets ruimer rooster dan bij een drop: hier staat alles naast elkaar en mag
   het ademen, terwijl een drop van drie stuks juist compact hoort. */
.stuks.ruim{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

.kleurstippen{display:flex;align-items:center;gap:5px;margin-top:9px}
.kleurstippen i{width:11px;height:11px;border-radius:50%;display:block;
  border:1px solid rgba(247,248,252,.35)}
.kleurstippen span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;
  color:var(--wit-flauw);margin-left:2px}

/* De drie dingen die iemand wil weten vóór hij bestelt. Een strook, geen
   alinea: je leest hem in één oogopslag of je leest hem niet. */
.beloftes{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  margin-top:clamp(20px,4vw,44px)}
.beloftes .wrap{display:flex;gap:clamp(18px,5vw,64px);flex-wrap:wrap;
  padding-block:clamp(22px,3.4vw,34px)}
.beloftes b{display:block;font-size:15px;letter-spacing:-.01em}
.beloftes span{display:block;color:var(--wit-flauw);font-size:13px;margin-top:3px}

@media(max-width:620px){
  .winkelkop{padding:clamp(18px,4vw,30px) 0 14px}
  .winkelbalk{margin-top:18px;padding-bottom:12px;gap:10px}
  .sorteer{margin-left:0;width:100%;justify-content:space-between}
  .stuks.ruim{grid-template-columns:1fr 1fr;gap:10px}
  .beloftes .wrap{gap:16px 26px}
  .beloftes div{flex:1 1 40%}
}

/* ── Je adres in je account ───────────────────────────────────────────────
   Eén keer invullen, en het staat bij het afrekenen al klaar. */
.adresblok{border:1px solid var(--lijn);border-radius:var(--rand);
  padding:clamp(20px,3vw,30px);margin:clamp(20px,3vw,32px) 0}
.sectiekop.klein{margin-bottom:20px;align-items:center}
.sectiekop.klein h3{font-size:clamp(19px,2.6vw,25px);letter-spacing:-.02em;margin:0}
.sectiekop.klein .label{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--wit-flauw);margin-bottom:7px}
.adresblok .velden{display:grid;gap:14px}
.adresblok .rij2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.adresblok .veld{display:grid;gap:6px;min-width:0}
.adresblok .veld > span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wit-flauw)}
.adresblok .veld > span i{font-style:normal;opacity:.6;text-transform:none;letter-spacing:.04em}
.adresblok input,.adresblok select{background:rgba(247,248,252,.08);border:1px solid var(--lijn);
  border-radius:10px;padding:13px 15px;color:var(--wit);font:inherit;font-size:15px;width:100%;
  box-sizing:border-box}
.adresblok input:focus,.adresblok select:focus{outline:none;border-color:var(--wit-flauw);
  background:rgba(247,248,252,.13)}
.adresblok select option{background:var(--blauw-diep);color:var(--wit)}
.adresblok .smalveld{max-width:170px}
.adresknoppen{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* De regel onder het e-mailveld in het mandje: gast of ingelogd, en wat dat
   scheelt. Klein gezet — het is uitleg, geen aanbod. */
.mandnoot{font-size:12px;color:var(--wit-flauw);line-height:1.55;margin:-4px 0 12px}
.mandnoot b{color:var(--wit-zacht);font-weight:600}
.mandnoot a{color:var(--wit-zacht);text-decoration:underline;text-underline-offset:3px}
.mandnoot a:hover{color:var(--wit)}

@media(max-width:620px){
  .adresblok{padding:18px 16px}
  .adresblok .rij2{grid-template-columns:1fr}
  .adresblok .smalveld{max-width:none}
  .adresknoppen .knop{flex:1 1 auto;justify-content:center;text-align:center}
}

/* ── Het lookbook ─────────────────────────────────────────────────────────
   De foto's bij een drop die geweest is. Niet allemaal even groot: elke vijfde
   loopt over twee kolommen, zodat het een reeks wordt in plaats van een raster.
   Dat is het verschil tussen een archief en een productlijst. */
.lookbook{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(10px,1.6vw,18px);margin:clamp(28px,4vw,48px) 0 0}
.lookbook .lb{margin:0;border-radius:var(--rand);overflow:hidden;background:var(--blauw-licht);
  border:1px solid var(--lijn)}
.lookbook .lb.breed{grid-column:span 2}
.lookbook img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  transition:transform .5s ease}
.lookbook .lb.breed img{aspect-ratio:16/10}
@media(hover:hover){ .lookbook .lb:hover img{transform:scale(1.03)} }
@media(max-width:620px){
  .lookbook{grid-template-columns:1fr 1fr;gap:8px}
  /* Op een telefoon is "twee kolommen breed" het hele scherm — dat is precies
     goed voor een enkele grote foto tussen de kleine. */
  .lookbook .lb.breed{grid-column:span 2}
}

/* ══ Symmetrie ══════════════════════════════════════════════════════════════
   Een smal blok in een brede pagina hoort in het midden te staan, niet tegen de
   linkerrand. Dat gold voor het inlogscherm, de tekstpagina's en het zoeken van
   een bestelling: alles kleefde links en de halve pagina rechts bleef leeg.

   De tekst zelf blijft links uitgelijnd — gecentreerde alinea's lezen slecht,
   want je oog moet elke regel opnieuw zoeken. Alleen korte blokken (een
   inlogformulier, een bevestiging) staan helemaal in het midden. */
.smal,.tekstpagina{margin-inline:auto}

/* Het inlogscherm en het opzoeken van een bestelling: kort, dus helemaal
   gecentreerd. Het formulier eronder houdt zijn eigen uitlijning. */
.sectie.binnen.smal{text-align:center}
.sectie.binnen.smal .lead,
.sectie.binnen.smal .hint{margin-inline:auto}
.sectie.binnen.smal .veld{text-align:left}
.sectie.binnen.smal .velden{margin-inline:auto}

/* De tekstpagina's — about, faq, voorwaarden — staan gecentreerd op de pagina
   met de tekst links. Dat is de leesbare combinatie. */
.tekstpagina .label,.tekstpagina h2{text-align:left}

/* ══ Foto met tekst ═════════════════════════════════════════════════════════
   Een beeldblok op een tekstpagina: de foto naast de tekst, en om en om links
   en rechts. Dat laatste doet het werk — een kolom met vier foto's aan dezelfde
   kant leest als een catalogus, afwisselend leest als een verhaal.

   De tekstpagina is smal (68 tekens), dus een beeldblok breekt daar bewust
   uit: het loopt door tot de rand van de kolom en voelt daardoor ruimer dan de
   alinea's eromheen. */
.beeldblok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,36px);align-items:center;margin:clamp(34px,5vw,60px) 0}
.beeldblok.omgekeerd figure{order:2}
.beeldblok.alleenbeeld{grid-template-columns:minmax(0,1fr)}
.beeldblok figure{margin:0;border-radius:var(--rand);overflow:hidden;
  border:1px solid var(--lijn);background:var(--blauw-licht)}
.beeldblok img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transition:transform .6s ease}
.beeldblok.alleenbeeld img{aspect-ratio:16/9}
@media(hover:hover){ .beeldblok:hover img{transform:scale(1.03)} }
.beeldtekst h3{font-size:clamp(20px,2.8vw,28px);letter-spacing:-.02em;margin:0 0 12px}
.beeldtekst p{color:var(--wit-zacht);margin:0 0 13px;line-height:1.7}

/* Eén zin die eruit springt. Geen aanhalingstekens in de tekst zelf — die
   staan hier, zodat ze niet per ongeluk in de databank belanden. */
.citaat{margin:clamp(34px,5vw,56px) 0;padding:0 0 0 clamp(16px,3vw,28px);
  border-left:2px solid var(--wit-flauw)}
.citaat p{font-size:clamp(19px,2.6vw,26px);line-height:1.45;letter-spacing:-.02em;
  color:var(--wit);margin:0 0 10px}
.citaat cite{font-style:normal;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--wit-flauw)}

@media(max-width:720px){
  .beeldblok{grid-template-columns:minmax(0,1fr);gap:16px}
  /* Op een telefoon staat de foto altijd boven: afwisselen heeft daar geen zin,
     en `order` zou de tekst boven de foto zetten bij de helft van de blokken. */
  .beeldblok.omgekeerd figure{order:0}
  .beeldblok img{aspect-ratio:3/2}
}