/* ==========================================================================
   New Thai Corner, Telefoonweg 75-77 in Ede.
   Bewust vlak gehouden, één op één met de referentiesites.

   Wat er met opzet NIET in zit: verschijnende secties bij het scrollen,
   bewegende banen, deeltjes, tekst die letter voor letter aankomt,
   zichzelf tekenende lijnen en video. De enige overgangen die er zijn,
   horen bij een knop of een veld waar je op klikt, want zonder dat voelt
   een knop kapot.

   Onderaan staat de merklaag: het chilirood, het citroengeel uit het logo en de
   keuzegroepen. Elke kleurkeuze hieronder is nagemeten met
   ntc-review/keur-kleuren.js, vóórdat hij in dit bestand terechtkwam;
   de uitkomst per paar staat in ntc-review/kleuren.txt.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

:root{
  --bg:#FAF6F4;
  --paneel:#FFFFFF;
  --paneel-2:#F5EEEC;
  --lijn:#EADFDB;
  --lijn-sterk:#D4C4BF;
  /* Het template gebruikt --lijn-sterk óók voor de rand van een keuzevakje en
     een keuzerondje. Dat is een bedieningselement en heeft 3:1 nodig; op wit
     haalt --lijn-sterk maar 1,7:1. Dat is een fout van het template. Hiervoor
     staat er een aparte, donkerdere randkleur: 5,15:1 op --paneel en 4,79:1 op
     --bg. De hover-randen houden --lijn-sterk, want daar verandert niets aan. */
  --rand-veld:#7A6A66;
  --tekst:#1E1614;
  --tekst-2:#675B58;
  /* HET MERK IS CHILIROOD. Het logo van New Thai Corner is een witte ronde
     sticker met zwarte letters, een rode peper, een citroen en groene blaadjes
     (ntc-review/raw/img, 1355x1306, om de twee beeldpunten gemeten: 82% wit,
     3% bijna zwart, 12% verzadigd; #F4E264 citroen en #C7322C peper zijn de twee
     grootste groepen, #87AB41 en #5D8637 het groen).

     Het rood van de peper haalt op wit 5,36:1 maar op het vel maar 4,99:1 —
     te krap voor kleine tekst. Voor tekst en voor vlakken met wit erop staat
     hier een diepere variant uit dezelfde tint: 6,62:1 op --paneel, 6,16:1 op
     het vel en 6,62:1 met wit erop. Dit is de normale stap uit regel 9. */
  --merk:#B3231C;
  --merk-zacht:#FCEDEB;
  --merk-op-zacht:#B3231C;     /* 5,81:1 op --merk-zacht */
  /* Het citroengeel zelf, ongewijzigd uit het logo, voor de donkere balken en
     de accentvlakken met donkere tekst erop: 14,16:1 als tekst op de inktbalk en
     13,19:1 met --op-geel erop. De diepe variant voor het aanwijzen haalt 8,26:1. */
  --geel:#F4E264;
  --geel-diep:#D4AF2E;         /* 8,26:1 met --op-geel erop */
  --op-geel:#1A1A1A;
  --inkt:#17110F;              /* de donkere balken; de letters van het logo zijn zwart */
  --op-inkt:#FFFFFF;
  --knop:#B3231C;
  --knop-hover:#8E1A14;
  --knop-tekst:#FFFFFF;
  /* Een tint dieper dan het #1E8E3E van het template: daar haalde wit op de
     statuspil 4,21:1. Deze haalt 5,42:1 met wit erop en 4,84:1 op --ok-zacht. */
  --ok:#197A34;
  --ok-zacht:#E9F5EC;
  /* Groen als vlák, met kleine witte tekst erop. Apart van --ok, want die
     wordt óók als tekstkleur gebruikt en moet in donker juist lichter zijn. */
  --ok-vlak:#197A34;
  --rood:#C4362B;
  --rood-zacht:#FCEEEC;
  --geel-zacht:#FBF3DD;
  /* Het geel is een vlak, geen tekstkleur, en het rood is al --merk. Voor de
     kleine accentlabels staat hier daarom het groen van de blaadjes, in een
     diepere variant (het logogroen #87AB41 haalt op wit 2,65:1): 6,35:1 op
     --paneel, 5,91:1 op het vel, 5,73:1 op --geel-zacht en 5,54:1 op --paneel-2.
     De sterretjes staan in een donker goud: 5,07:1 op --paneel, 4,72:1 op het vel.
     Dat vangt de vier plekken op waar het template op 12px tekst zakt: het label
     van de accenttegel, de dagtegel van vandaag, de sterretjes en het
     accentlabel op de dagtegel (blok I). */
  --accent-tekst:#3B6B1F;
  --ster:#8A6A08;
  --schaduw:0 1px 2px rgba(16,24,32,.05), 0 4px 12px rgba(16,24,32,.06);
  --schaduw-2:0 4px 8px rgba(16,24,32,.06), 0 14px 34px rgba(16,24,32,.10);
  --r:12px;
  --r-l:18px;
  --pad:clamp(16px,4vw,32px);
  --breed:1200px;
  --kop-h:70px;
  --f:"Poppins","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}

:root[data-theme="dark"]{
  --bg:#16110F;
  --paneel:#1F1816;
  --paneel-2:#29201E;
  --lijn:#352B28;
  --lijn-sterk:#4B3E3A;
  --rand-veld:#8B7C78;         /* 4,37:1 op --paneel, 4,68:1 op --bg — eis 3 */
  --tekst:#F4EEEC;
  --tekst-2:#AFA29E;
  /* In donker gaat het merkrood juist omhoog: als tekst op --bg haalt het
     8,12:1 en op --paneel 7,49:1. De plekken waar dit een vlak mét wit teken
     is houden de diepe kleur van --knop. */
  --merk:#FF8F84;
  --merk-zacht:#2E1614;
  --merk-op-zacht:#FF9A90;
  /* Ook het accentgoud een stap lichter: 10,46:1 op de inktbalk en met
     --op-geel erop nog altijd 9,44:1. */
  --geel:#F4E264;
  --geel-diep:#D4AF2E;
  --op-geel:#1A1A1A;
  --inkt:#120E0C;
  --op-inkt:#FFFFFF;
  --knop:#B3231C;
  --knop-hover:#CF2A22;
  --ok:#4CC26A;
  --ok-zacht:#16261B;
  /* in donker blijft het vlak diep, anders haalt wit erop maar 2,27:1 */
  --ok-vlak:#207F39;
  --rood:#E2685C;
  --rood-zacht:#2A1C1A;
  --geel-zacht:#2A2316;
  --accent-tekst:#9ED17A;      /* 8,78:1 op --geel-zacht, 9,88:1 op --paneel */
  --ster:#E7C57A;
  --schaduw:0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.26);
  --schaduw-2:0 4px 8px rgba(0,0,0,.32), 0 14px 34px rgba(0,0,0,.40);
  color-scheme:dark;
}

/* ---------- 2. Grondwerk ---------- */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--tekst);
  font-family:var(--f);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
blockquote,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4vw,2.9rem)}
h2{font-size:clamp(1.4rem,2.6vw,2rem)}
h3{font-size:1.1rem;font-weight:600}
p{margin:0}

.wrap{width:100%;max-width:var(--breed);margin-inline:auto;padding-inline:var(--pad)}
.sectie{padding-block:clamp(34px,5vw,58px)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--knop);color:var(--knop-tekst);padding:12px 18px;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--merk);outline-offset:2px;border-radius:4px}

.kopje{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tekst-2);margin-bottom:12px;
}
.lead{color:var(--tekst-2);max-width:62ch}

/* ---------- 3. Knoppen ---------- */

.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:8px;
  font-weight:600;font-size:.95rem;
  background:var(--knop);color:var(--knop-tekst);
  transition:background .15s linear;
}
.knop:hover{background:var(--knop-hover)}
.knop--rand{
  background:transparent;color:var(--tekst);
  border:1px solid var(--lijn-sterk);
}
.knop--rand:hover{background:var(--paneel-2);border-color:var(--tekst-2)}
.knop--wit{background:#fff;color:#1A1D21}
.knop--wit:hover{background:#EFEFEF}
.knop--breed{width:100%}
.knop[disabled]{opacity:.5;pointer-events:none}
@media (pointer:coarse){ .knop{min-height:44px} }

/* ---------- 4. Balk bovenaan ---------- */

.topbalk{
  background:var(--geel-zacht);
  border-bottom:1px solid var(--lijn);
  font-size:.86rem;color:var(--tekst-2);
  text-align:center;
}
.topbalk__in{padding-block:9px}
.topbalk.is-open{background:var(--ok-zacht)}

/* ---------- 5. Kop ---------- */

.kop{
  position:sticky;top:0;z-index:60;
  background:var(--paneel);
  border-bottom:1px solid var(--lijn);
}
.kop__in{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);min-height:var(--kop-h)}

.merk{display:flex;align-items:center;gap:10px;margin-right:auto;flex:none}
.merk__mark{width:34px;height:34px;flex:none;color:var(--merk)}
.merk__naam{font-weight:700;font-size:1.12rem;line-height:1.15}
.merk__sub{display:block;font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-2)}

.kop__nav{display:flex;align-items:center;gap:clamp(8px,1.8vw,26px)}
.kop__nav a{
  font-size:.94rem;font-weight:500;color:var(--tekst-2);
  padding:8px 2px;transition:color .15s linear;
}
.kop__nav a:hover{color:var(--tekst)}
.kop__nav a[aria-current="page"]{color:var(--tekst);font-weight:600}
@media (max-width:860px){ .kop__nav{display:none} }

.kop__acties{display:flex;align-items:center;gap:10px;flex:none}
.modeknop{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--lijn);color:var(--tekst-2);
  transition:background .15s linear,border-color .15s linear;
}
.modeknop:hover{background:var(--paneel-2);border-color:var(--lijn-sterk)}
.modeknop svg{width:18px;height:18px}
.modeknop .zon{display:none}
:root[data-theme="dark"] .modeknop .zon{display:block}
:root[data-theme="dark"] .modeknop .maan{display:none}

.telknop{position:relative}
.telknop__ico{width:18px;height:18px;display:none}
@media (max-width:520px){
  .telknop__l{display:none}
  .telknop__ico{display:block}
  .telknop{padding-inline:14px}
  .merk__naam{font-size:1rem}
}
.telknop__n{
  position:absolute;top:-6px;right:-6px;
  min-width:20px;height:20px;padding-inline:5px;border-radius:20px;
  background:var(--rood);color:#fff;
  font-size:.72rem;font-weight:600;
  display:grid;place-items:center;
}

/* ---------- 6. Hero ---------- */

.hero{position:relative;isolation:isolate}
.hero__foto{position:relative;height:clamp(320px,46vw,480px);overflow:hidden}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(12,16,20,.55) 0%, rgba(12,16,20,.62) 100%);
}
.hero__in{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px var(--pad);
}
.hero__pil{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:100px;
  background:var(--rood);color:#fff;
  font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:16px;
}
.hero__pil.is-open{background:var(--ok-vlak)}
.hero h1{color:#fff;max-width:20ch;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero__tekst{
  color:rgba(255,255,255,.92);max-width:60ch;margin-top:14px;
  font-size:.98rem;text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.hero .knop{margin-top:22px}

/* het witte kaartje dat over de hero heen valt */
.overkaart{
  position:relative;z-index:3;
  margin-top:-40px;
  background:var(--paneel);
  border:1px solid var(--lijn);
  border-radius:var(--r-l);
  box-shadow:var(--schaduw-2);
  padding:20px clamp(18px,3vw,28px);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.overkaart__status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:600;color:var(--rood);
}
.overkaart__status.is-open{color:var(--ok)}
.stip{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.overkaart h2{font-size:1.18rem;font-weight:600;margin-top:3px}
.overkaart .knop{margin-left:auto}
@media (max-width:640px){ .overkaart .knop{margin-left:0;width:100%} }

/* ---------- 7. Rij met de vier feiten ---------- */

.feiten{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.feit{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);
  padding:18px 20px;
  display:flex;gap:14px;align-items:flex-start;
}
.feit__ico{
  width:38px;height:38px;border-radius:10px;flex:none;
  background:var(--merk-zacht);color:var(--merk);
  display:grid;place-items:center;
}
.feit__ico svg{width:19px;height:19px}
.feit > span:last-child{flex:1;min-width:0}
.feit__l{display:block;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-2)}
.feit__v{display:block;font-weight:600;font-size:1.02rem;margin-top:2px}
.feit__s{display:block;font-size:.84rem;color:var(--tekst-2);line-height:1.45}

/* ---------- 8. Blokken ---------- */

.blok{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r-l);
  padding:clamp(20px,3vw,30px);
}
.blok__kop{margin-bottom:18px}
.blok__kop h2{font-size:1.3rem}

.tweekolom{display:grid;gap:clamp(18px,3vw,34px);grid-template-columns:1fr 1fr;align-items:start}
@media (max-width:880px){ .tweekolom{grid-template-columns:1fr} }

/* ---------- 9. Openingstijden ---------- */

.uren{display:grid;gap:0}
.uur{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--lijn);font-size:.95rem;
}
.uur:last-child{border-bottom:0}
.uur__d{flex:1}
.uur__t{color:var(--tekst-2)}
.uur.is-nu{font-weight:600}
.uur.is-nu .uur__t{color:var(--tekst)}
.uur__nu{
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  /* op --merk-zacht hoort --merk-op-zacht: het merkrood zelf haalt daar
     4,41:1 en dat is voor elf beeldpunten te weinig. */
  background:var(--merk-zacht);color:var(--merk-op-zacht);
  padding:2px 8px;border-radius:100px;
}

/* ---------- 10. Recensies ---------- */

.reviews{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.review{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);
  padding:20px;
}
.review__wie{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.review__bol{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--merk-zacht);color:var(--merk);
  display:grid;place-items:center;font-weight:600;
}
.review__wie > span:last-child{flex:1;min-width:0}
.review__n{display:block;font-weight:600;font-size:.95rem;line-height:1.3}
.review__w{display:block;font-size:.8rem;color:var(--tekst-2)}
.sterren{color:var(--ster);font-size:.9rem;letter-spacing:.1em;margin-bottom:8px}
.review p{font-size:.92rem;color:var(--tekst-2)}

/* ---------- 11. Over ons ---------- */

.over__beeld{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--lijn)}
.over__beeld img{width:100%;aspect-ratio:4/3;object-fit:cover}
.over h3{margin-top:22px;margin-bottom:8px}
.over p + p{margin-top:12px}
.over p{color:var(--tekst-2);font-size:.95rem}
.over .knop{margin-top:22px}

/* ---------- 12. Bezorggebieden ---------- */

.zones{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.zone{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);
  padding:18px 20px;
}
.zone__n{font-weight:600;font-size:1rem}
.zone__rij{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:.85rem;color:var(--tekst-2)}
.zone__rij b{font-weight:600;color:var(--tekst)}
.zone__pcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--lijn)}
.pc{
  font-size:.76rem;color:var(--tekst-2);
  background:var(--paneel-2);border:1px solid var(--lijn);
  padding:3px 9px;border-radius:6px;
}

/* ---------- 13. Locatie ---------- */

.locatie{display:flex;gap:16px;align-items:flex-start}
.locatie > div{flex:1;min-width:0}
.locatie__ico{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:var(--merk-zacht);color:var(--merk);display:grid;place-items:center;
}
.locatie__ico svg{width:22px;height:22px}
.locatie p{color:var(--tekst-2);font-size:.94rem;margin-top:4px}

/* ---------- 14. Voettekst ---------- */

.voet{
  background:var(--paneel);
  border-top:1px solid var(--lijn);
  margin-top:clamp(30px,5vw,54px);
  padding-block:clamp(30px,4vw,46px) 22px;
}
.voet__grid{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:1.6fr 1fr 1.2fr 1.2fr}
@media (max-width:880px){ .voet__grid{grid-template-columns:1fr 1fr} }
@media (max-width:540px){ .voet__grid{grid-template-columns:1fr} }
.voet h4{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-2);margin-bottom:12px}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9rem;color:var(--tekst-2)}
.voet a{transition:color .15s linear}
.voet a:hover{color:var(--merk)}
.voet__p{font-size:.9rem;color:var(--tekst-2);margin-top:12px;max-width:36ch}
.voet__uren{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;color:var(--tekst-2)}
.voet__eind{
  margin-top:clamp(24px,3vw,36px);padding-top:18px;border-top:1px solid var(--lijn);
  display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center;
  font-size:.84rem;color:var(--tekst-2);
}
.voet__eind nav{display:flex;gap:18px;margin-left:auto}
.voet__melding{
  margin-top:14px;font-size:.8rem;color:var(--tekst-2);line-height:1.6;
}

/* ---------- 15. Bestelpagina ---------- */

.winkel{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:clamp(16px,2.4vw,30px);align-items:start;
  padding-block:clamp(16px,2.6vw,26px) clamp(40px,6vw,70px);
}
.winkel > *{min-width:0}
@media (max-width:1040px){ .winkel{grid-template-columns:minmax(0,1fr)} }

.banner{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--lijn)}
.banner img{width:100%;height:clamp(150px,20vw,230px);object-fit:cover;object-position:50% 58%}
.winkelkop{
  background:var(--paneel);border:1px solid var(--lijn);border-top:0;
  border-radius:0 0 var(--r-l) var(--r-l);
  padding:18px clamp(18px,2.6vw,26px) 20px;
  margin-bottom:18px;
}
.winkelkop h1{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.winkelkop p{color:var(--tekst-2);font-size:.92rem;margin-top:3px}

.zoek{position:relative;margin-bottom:14px}
.zoek svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--tekst-2)}
.zoek input{
  width:100%;padding:12px 16px 12px 42px;
  border-radius:8px;border:1px solid var(--lijn);background:var(--paneel);
  transition:border-color .15s linear;
}
.zoek input:focus{outline:none;border-color:var(--merk)}

.tabs{
  position:sticky;top:var(--kop-h);z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--lijn);
  margin-bottom:6px;
}
.tabs__scroll{
  display:flex;gap:4px;overflow-x:auto;padding-block:10px;padding-right:26px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
}
.tabs__scroll::-webkit-scrollbar{display:none}
.tab{
  flex:none;padding:8px 15px;border-radius:8px;
  font-size:.9rem;font-weight:500;color:var(--tekst-2);white-space:nowrap;
  transition:background .15s linear,color .15s linear;
}
.tab:hover{background:var(--paneel-2);color:var(--tekst)}
.tab.is-nu{background:var(--knop);color:var(--knop-tekst)}

.cat{padding-top:clamp(20px,3vw,30px);scroll-margin-top:calc(var(--kop-h) + 56px)}
.cat h2{font-size:1.25rem;margin-bottom:14px}
.cat__n{font-size:.82rem;font-weight:400;color:var(--tekst-2);margin-left:8px}

.producten{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.product{
  display:flex;width:100%;text-align:left;
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);
  overflow:hidden;
  transition:border-color .15s linear;
}
.product:hover{border-color:var(--lijn-sterk)}
.product__body{padding:14px 14px 14px 16px;flex:1;min-width:0;display:flex;flex-direction:column}
.product__n{font-weight:600;font-size:.98rem}
.product__sub{font-weight:400;font-size:.8rem;color:var(--tekst-2);margin-left:6px}
.product__d{
  font-size:.85rem;color:var(--tekst-2);margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product__voet{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px}
.product__p{font-weight:600;font-size:.98rem}
.product__img{width:104px;flex:none;align-self:stretch;background:var(--paneel-2)}
.product__img img{width:100%;height:100%;object-fit:cover}
.plus{
  margin-left:auto;width:34px;height:34px;border-radius:8px;flex:none;
  background:var(--knop);color:var(--knop-tekst);
  display:grid;place-items:center;
  transition:background .15s linear;
}
.plus:hover{background:var(--knop-hover)}
.plus svg{width:15px;height:15px}

.labels{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.label{
  font-size:.68rem;font-weight:500;
  padding:2px 8px;border-radius:5px;
  background:var(--paneel-2);border:1px solid var(--lijn);color:var(--tekst-2);
}
.label.is-pop{background:var(--merk-zacht);border-color:transparent;color:var(--merk)}

.dranken{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.drank{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:13px 18px;border-bottom:1px solid var(--lijn);
  transition:background .15s linear;
}
.drank:last-child{border-bottom:0}
.drank:hover{background:var(--paneel-2)}
.drank > span:first-child{flex:1;min-width:0}
.drank__n{display:block;font-weight:600;font-size:.95rem}
.drank__s{display:block;font-size:.82rem;color:var(--tekst-2)}
.drank__p{font-weight:600;font-size:.95rem;flex:none}
.drank .plus{margin-left:0;width:30px;height:30px}

.leeg-zoek{
  padding:34px 20px;text-align:center;color:var(--tekst-2);
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r);
}

/* ---------- 16. Winkelmandje ---------- */

.mandje{
  position:sticky;top:calc(var(--kop-h) + 14px);
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--schaduw);
  display:flex;flex-direction:column;
  max-height:calc(100vh - var(--kop-h) - 30px);
}
.mandje__kop{display:flex;align-items:center;gap:10px;padding:18px 20px 14px}
.mandje__kop h2{font-size:1.08rem;font-weight:600}
.mandje__kop svg{width:19px;height:19px;color:var(--merk)}

.wissel{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 14px}
.wissel button{
  padding:11px 8px;border-radius:8px;border:1px solid var(--lijn);
  display:grid;gap:1px;text-align:center;
  transition:border-color .15s linear,background .15s linear,color .15s linear;
}
.wissel button span{display:block;font-weight:600;font-size:.9rem}
.wissel button small{display:block;font-size:.74rem;color:var(--tekst-2)}
.wissel button.is-aan{border-color:var(--merk);background:var(--merk-zacht);color:var(--merk-op-zacht)}
.wissel button.is-aan small{color:var(--merk-op-zacht)}

.adres{padding:0 16px 16px}
.adres label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-2);margin-bottom:7px}
.adres input{
  width:100%;padding:11px 14px;border-radius:8px;
  border:1px solid var(--lijn);background:var(--paneel);
  transition:border-color .15s linear;
}
.adres input:focus{outline:none;border-color:var(--merk)}
.adres .knop{margin-top:9px}
.adres__meld{font-size:.82rem;margin-top:8px;color:var(--tekst-2);min-height:1.2em}
.adres__meld.is-goed{color:var(--merk)}
.adres__meld.is-mis{color:var(--rood)}

.mandje__lijst{flex:1;overflow-y:auto;padding:0 16px;border-top:1px solid var(--lijn)}
.regel{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--lijn)}
.regel:last-child{border-bottom:0}
.regel__img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;background:var(--paneel-2)}
.regel__img--merk{display:grid;place-items:center;color:var(--merk);background:var(--merk-zacht)}
.regel__img--merk svg{width:20px;height:20px}
.regel__mid{flex:1;min-width:0}
.regel__n{font-weight:600;font-size:.9rem;line-height:1.3}
.regel__x{font-size:.78rem;color:var(--tekst-2);margin-top:2px}
.regel__r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.regel__p{font-size:.88rem;font-weight:600}
.stapper{display:flex;align-items:center;gap:2px;border:1px solid var(--lijn);border-radius:6px;padding:1px}
.stapper button{
  width:24px;height:24px;border-radius:4px;display:grid;place-items:center;color:var(--tekst-2);
  transition:background .15s linear;
}
.stapper button:hover{background:var(--paneel-2)}
.stapper span{font-size:.85rem;min-width:20px;text-align:center}
.stapper svg{width:11px;height:11px}

.mandje__leeg{padding:38px 20px;text-align:center;color:var(--tekst-2)}
.mandje__leeg svg{width:40px;height:40px;color:var(--lijn-sterk);margin:0 auto 12px}
.mandje__leeg strong{display:block;color:var(--tekst);font-weight:600;margin-bottom:4px}

.mandje__voet{border-top:1px solid var(--lijn);padding:15px 18px 18px;background:var(--paneel-2)}
.som{display:flex;justify-content:space-between;font-size:.9rem;color:var(--tekst-2);padding-block:3px}
.som--eind{color:var(--tekst);font-weight:700;font-size:1.05rem;border-top:1px solid var(--lijn);margin-top:8px;padding-top:10px}
.minbalk{margin-bottom:10px;font-size:.8rem;color:var(--tekst-2)}
.minbalk__spoor{height:4px;border-radius:4px;background:var(--lijn);overflow:hidden;margin-bottom:6px}
.minbalk__vul{height:100%;background:var(--merk);width:0}
.mandje__voet .knop{margin-top:10px}

.mandje__greep{
  display:none;align-items:center;gap:10px;height:60px;flex:none;
  padding:0 20px;width:100%;text-align:left;
  border-bottom:1px solid var(--lijn);background:var(--paneel);
  position:sticky;top:0;z-index:2;font-weight:600;
}
.mandje__greep small{margin-left:auto;font-weight:600;font-size:.9rem}

/* Deze regels staan bewust NA de basisregels hierboven, anders wint
   display:none van de greep en heeft het blad niets om aan te trekken. */
@media (max-width:1040px){
  .mandje{
    position:fixed;inset:auto 0 0 0;z-index:80;
    border-radius:var(--r-l) var(--r-l) 0 0;
    max-height:84vh;border-bottom:0;
    box-shadow:var(--schaduw-2);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(calc(100% - 60px));
  }
  .mandje.is-open{transform:translateY(0);overflow-y:auto}
  .mandje__greep{display:flex}
  .mandje .mandje__kop{display:none}
  .mandje .mandje__lijst{overflow:visible;flex:0 0 auto}
  .mandje .mandje__voet{position:sticky;bottom:0;z-index:2}
  main.winkel{padding-bottom:90px}
}

/* ---------- 17. Venster ---------- */

.venster{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(12px,3vw,28px);
}
.venster[hidden]{display:none !important}
.venster__waas{position:absolute;inset:0;background:rgba(12,16,20,.55)}
.venster__doos{
  position:relative;width:min(560px,100%);max-height:min(88vh,840px);
  background:var(--paneel);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--schaduw-2);
}
.venster__sluit{
  position:absolute;right:12px;top:12px;z-index:5;
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.9);color:#1A1D21;
  display:grid;place-items:center;
  transition:background .15s linear;
}
.venster__sluit:hover{background:#fff}
.venster__sluit svg{width:15px;height:15px}
.venster__scroll{overflow-y:auto;flex:1}
.venster__voet{padding:16px 20px;border-top:1px solid var(--lijn);background:var(--paneel-2);display:flex;gap:12px;align-items:center}
.venster__voet .knop{flex:1}

.pv__img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--paneel-2)}
.pv__body{padding:20px clamp(18px,3vw,26px) 8px}
.pv__body h2{font-size:1.4rem}
.pv__sub{font-size:.85rem;color:var(--tekst-2);margin-top:3px}
.pv__d{margin-top:12px;color:var(--tekst-2);font-size:.94rem}
.pv__all{
  margin-top:14px;padding:11px 14px;border-radius:8px;
  background:var(--paneel-2);border:1px solid var(--lijn);
  font-size:.84rem;color:var(--tekst-2);
}
.pv__all b{color:var(--tekst)}
.opties{margin-top:18px}
.opties h3{font-size:.95rem;margin-bottom:9px}
.optie{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-radius:8px;border:1px solid var(--lijn);
  margin-bottom:7px;cursor:pointer;
  transition:border-color .15s linear;
}
.optie:hover{border-color:var(--lijn-sterk)}
.optie:has(input:checked){border-color:var(--merk);background:var(--merk-zacht)}
/* padding:0 is nodig omdat .veld input hierboven al padding zet, en een
   vakje van 18px met 28px padding wordt een ovaal */
.optie input{
  appearance:none;width:18px;height:18px;flex:none;padding:0;
  border:1px solid var(--rand-veld);border-radius:4px;position:relative;cursor:pointer;
}
.optie input:checked{background:var(--knop);border-color:var(--knop)}
.optie input:checked::after{
  content:"";position:absolute;left:5.5px;top:2px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.optie__n{flex:1;font-size:.93rem}
.optie__p{font-size:.86rem;color:var(--tekst-2)}

/* afrekenen: één scherm, geen stappen */
.veld{margin-bottom:12px}
/* alleen het eigen label van het veld, niet de labels van de keuzerondjes erin */
.veld > label{display:block;font-size:.78rem;font-weight:600;color:var(--tekst-2);margin-bottom:6px}
.veld input,.veld textarea,.veld select{
  width:100%;padding:11px 14px;border-radius:8px;
  border:1px solid var(--lijn);background:var(--paneel);
  transition:border-color .15s linear;
}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--merk)}
.veld textarea{min-height:74px;resize:vertical}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:460px){ .veldrij{grid-template-columns:1fr} }
.betaalrij{display:grid;gap:7px}
.betaal{
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;border-radius:8px;border:1px solid var(--lijn);cursor:pointer;
  transition:border-color .15s linear;
}
.betaal:has(input:checked){border-color:var(--merk);background:var(--merk-zacht)}
.betaal input{appearance:none;width:17px;height:17px;border-radius:50%;flex:none;padding:0;border:1px solid var(--rand-veld);position:relative;cursor:pointer}
.betaal input:checked{border-color:var(--merk)}
.betaal input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--merk)}
.betaal > span:not([class]){flex:1;min-width:0}
.betaal__n{display:block;font-weight:600;font-size:.93rem}
.betaal__s{display:block;font-size:.8rem;color:var(--tekst-2)}
.noot{
  display:flex;gap:9px;align-items:flex-start;margin-top:14px;
  padding:11px 14px;border-radius:8px;background:var(--geel-zacht);border:1px solid var(--lijn);
  font-size:.83rem;color:var(--tekst-2);
}
.noot svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--tekst-2)}
.gelukt{padding:34px 24px;text-align:center}
.gelukt__ico{
  width:60px;height:60px;border-radius:50%;margin:0 auto 18px;
  background:var(--merk-zacht);color:var(--merk);display:grid;place-items:center;
}
.gelukt__ico svg{width:30px;height:30px}
.gelukt h2{font-size:1.4rem}
.gelukt p{color:var(--tekst-2);margin-top:10px;font-size:.94rem}

/* ---------- 18. Kleine schermen ---------- */

@media (max-width:640px){
  .product__img{width:88px}
  .overkaart{margin-top:-24px}
  .hero__foto{height:clamp(280px,58vw,360px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

/* ==========================================================================
   19. Onderdelen die de volledige kopie erbij heeft
   ========================================================================== */

/* de infoknop naast de restaurantnaam */
.winkelkop{display:flex;align-items:flex-start;gap:14px}
.winkelkop__tekst{flex:1;min-width:0}
.infoknop{
  width:38px;height:38px;border-radius:50%;flex:none;
  border:1px solid var(--lijn);color:var(--tekst-2);
  display:grid;place-items:center;
  transition:background .15s linear,border-color .15s linear,color .15s linear;
}
.infoknop:hover{background:var(--paneel-2);border-color:var(--lijn-sterk);color:var(--tekst)}
.infoknop svg{width:19px;height:19px}

/* mandjekop met het aantal ernaast */
.mandje__kop{justify-content:space-between}
.mandje__telling{font-size:.84rem;color:var(--tekst-2);font-weight:500}

/* regels in het mandje: "2x Dragon roll" */
.regel{align-items:flex-start}
.regel__x{
  flex:none;min-width:26px;font-weight:600;font-size:.9rem;color:var(--tekst-2);
  padding-top:1px;
}
.regel__op{font-size:.8rem;color:var(--tekst-2);margin-top:2px;line-height:1.45}

/* servicekosten met de uitleg eronder */
.som--uitleg{align-items:flex-start}
.som--uitleg small{display:block;font-size:.76rem;opacity:.85;margin-top:1px}

/* de link onder de afrekenknop */
.mandje__link{
  display:block;width:100%;margin-top:10px;padding:6px;
  font-size:.86rem;color:var(--tekst-2);text-align:center;text-decoration:underline;
  transition:color .15s linear;
}
.mandje__link:hover{color:var(--merk)}

/* Misschien ook lekker? */
.upsell{border-top:1px solid var(--lijn);margin-top:4px;padding-top:14px;padding-bottom:4px}
.upsell h3{font-size:.9rem;font-weight:600;margin-bottom:10px}
.upsell__r{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px;border-radius:8px;margin-bottom:4px;
  transition:background .15s linear;
}
.upsell__r:hover{background:var(--paneel-2)}
.upsell__r img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex:none}
.upsell__r > span:not([class]){flex:1;min-width:0}
.upsell__n{display:block;font-size:.88rem;font-weight:600;line-height:1.3}
.upsell__c{display:block;font-size:.76rem;color:var(--tekst-2)}
.upsell__p{font-size:.86rem;font-weight:600;flex:none}
.upsell__r .plus{margin-left:0;width:26px;height:26px;border-radius:6px}
.upsell__r .plus svg{width:12px;height:12px}

/* vaste balk onderaan op de telefoon */
.vastebalk{
  display:none;
  position:fixed;left:12px;right:12px;bottom:12px;z-index:70;
  align-items:center;gap:10px;
  padding:14px 18px;border-radius:10px;
  background:var(--knop);color:var(--knop-tekst);
  font-weight:600;box-shadow:var(--schaduw-2);
  transition:background .15s linear;
}
.vastebalk:hover{background:var(--knop-hover)}
.vastebalk__n{
  min-width:24px;height:24px;padding-inline:6px;border-radius:6px;
  background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:.82rem;
}
.vastebalk__p{margin-left:auto}
@media (max-width:1040px){
  .vastebalk:not([hidden]){display:flex}
  main.winkel{padding-bottom:150px}
}

/* het productvenster: prijs, extra's met "optioneel", opmerkingveld */
.pv__body h2 .pv__sub{font-size:.86rem;font-weight:400;color:var(--tekst-2)}
.pv__p{font-size:1.2rem;font-weight:700;margin-top:10px}
.opties h3{display:flex;align-items:baseline;gap:8px}
.opties h3 span{
  font-size:.74rem;font-weight:500;color:var(--tekst-2);
  background:var(--paneel-2);border:1px solid var(--lijn);
  padding:1px 8px;border-radius:100px;
}
.opmerking{margin-top:16px}
.opmerking__knop{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.9rem;font-weight:500;color:var(--merk);
  padding:8px 0;
}
.opmerking__knop svg{width:15px;height:15px}
.opmerking textarea{
  width:100%;min-height:74px;resize:vertical;
  padding:11px 14px;border-radius:8px;border:1px solid var(--lijn);background:var(--paneel);
}
.opmerking textarea:focus{outline:none;border-color:var(--merk)}
.stapper--groot{padding:3px}
.stapper--groot button{width:32px;height:32px}
.stapper--groot span{min-width:26px;font-weight:600}

/* ---------- De afrekenpagina ---------- */

.afreken{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:clamp(16px,2.4vw,30px);align-items:start;
  padding-block:clamp(20px,3vw,32px) clamp(40px,6vw,70px);
}
.afreken > *{min-width:0}
@media (max-width:940px){ .afreken{grid-template-columns:minmax(0,1fr)} }

.afreken__form h1{margin-bottom:18px}
.blok--co{margin-bottom:14px}
.blok--co h2{font-size:1.05rem;margin-bottom:14px}

.fout{
  background:var(--rood-zacht);border:1px solid var(--rood);color:var(--rood);
  padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:.9rem;font-weight:500;
}

.keuzerij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.keuze{
  padding:14px 16px;border-radius:8px;border:1px solid var(--lijn);text-align:left;
  transition:border-color .15s linear,background .15s linear;
}
.keuze:hover{border-color:var(--lijn-sterk)}
.keuze.is-aan{border-color:var(--merk);background:var(--merk-zacht)}
.keuze__n{display:block;font-weight:600;font-size:.96rem}
.keuze.is-aan .keuze__n{color:var(--merk-op-zacht)}
.keuze__s{display:block;font-size:.82rem;color:var(--tekst-2);margin-top:1px}

.adreskaart{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 16px;border-radius:8px;border:1px solid var(--lijn);
  transition:border-color .15s linear;
}
.adreskaart:hover{border-color:var(--lijn-sterk)}
.adreskaart > span:first-child{flex:1;min-width:0}
.adreskaart__n{display:block;font-weight:600;font-size:.96rem}
.adreskaart__n.is-leeg{color:var(--tekst-2);font-weight:500}
.adreskaart__s{display:block;font-size:.82rem;color:var(--tekst-2);margin-top:1px}
.adreskaart__k{flex:none;font-size:.88rem;font-weight:600;color:var(--merk)}

.codeblok{display:flex;gap:10px}
.codeblok input{
  flex:1;min-width:0;padding:11px 14px;border-radius:8px;
  border:1px solid var(--lijn);background:var(--paneel);
}
.codeblok input:focus{outline:none;border-color:var(--merk)}
.codeblok .knop{flex:none}

.knop--groot{padding:16px 24px;font-size:1rem;margin-top:16px}

.samenvatting{
  position:sticky;top:calc(var(--kop-h) + 14px);
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--schaduw);
}
.samenvatting__kop{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px 14px;
}
.samenvatting__kop h2{font-size:1.05rem;font-weight:600}
.samenvatting .mandje__lijst{max-height:none;overflow:visible;border-top:1px solid var(--lijn)}
@media (max-width:940px){ .samenvatting{position:static} }

.klaar{
  max-width:560px;margin:clamp(30px,7vw,70px) auto;text-align:center;
  background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--r-l);
  padding:clamp(26px,4vw,44px);
}
.klaar__ico{
  width:62px;height:62px;border-radius:50%;margin:0 auto 18px;
  background:var(--merk-zacht);color:var(--merk);display:grid;place-items:center;
}
.klaar__ico svg{width:31px;height:31px}
.klaar h1{font-size:clamp(1.5rem,3vw,2rem)}
.klaar p{color:var(--tekst-2);margin-top:12px}
.klaar__sub{font-size:.88rem}

.knop.is-uit{opacity:.5;pointer-events:none}

.afreken__form h1{font-size:clamp(1.6rem,2.6vw,2.1rem)}

/* de greep van het mandje doet op de telefoon dienst als "Bekijk bestelling",
   precies zoals de referentie. Een tweede vaste balk zou erbovenop vallen. */
.mandje__greep small{text-align:right;line-height:1.25;font-weight:500;color:var(--tekst-2)}
.mandje.is-open .mandje__greep small{color:var(--tekst-2)}

.terug__kort{display:none}
@media (max-width:640px){
  .terug__lang{display:none}
  .terug__kort{display:inline}
}

/* ==========================================================================
   Merklaag: alles wat deze vestiging onderscheidt van het kale template.
   Het merk is het chilirood uit het logo in een diepere variant voor tekst
   (#B3231C, --merk), het citroengeel uit datzelfde logo voor de accentvlakken
   (#F4E264, --geel), en de zwarte letters als inkt voor de balken (#17110F, --inkt).
   ========================================================================== */

/* ---------- Kop en merk ---------- */

.kop{background:var(--inkt);border-bottom:0}
.kop__nav a{color:rgba(255,255,255,.72)}
.kop__nav a:hover,.kop__nav a[aria-current="page"]{color:#fff}
.kop__nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--geel)}
.kop .merk__naam{color:#fff}
.kop .merk__sub{color:var(--geel)}
.kop .modeknop{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
.kop .modeknop:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.kop .telknop{background:var(--geel);color:var(--op-geel)}
.kop .telknop:hover{background:var(--geel-diep)}
.kop .telknop__n{background:var(--knop);color:#fff}

.merk__logo{height:38px;width:auto;flex:none}
@media (max-width:520px){ .merk__logo{height:32px} }
.merk__naam{letter-spacing:-.015em}

.topbalk{background:var(--geel);color:var(--op-geel);border-bottom:0;font-weight:500}
.topbalk.is-open{background:var(--geel)}

/* ---------- Koppen in de huisstijl ----------
   Bij de referentie staan alleen de kleine bovenschriften in kapitaal, met
   brede spatiëring: "OPENINGSTIJDEN", "BEZORGGEBIEDEN", "MISSCHIEN OOK
   LEKKER?", de kolomkopjes in de voettekst en de kickers op de tekstpagina's.
   De koppen zelf (h1 en h2) blijven gewoon zinsvorm. */

h1,h2{letter-spacing:-.02em}
.kopje{color:var(--merk);letter-spacing:.14em}

/* ---------- Hero ---------- */

.hero__foto::after{
  background:linear-gradient(105deg, rgba(20,17,18,.86) 0%, rgba(20,17,18,.62) 46%, rgba(20,17,18,.45) 100%);
}
/* De pil is een vlák met wit erop, dus hier --knop en niet --merk: in donker
   wordt --merk juist lichter en zakte wit erop naar 2,32:1. Met --knop staat
   het in beide thema's op 5,07:1, en in licht ziet het er hetzelfde uit. */
.hero__pil{background:var(--knop)}
.hero__pil.is-open{background:var(--ok-vlak)}
.hero .knop{background:var(--geel);color:var(--op-geel)}
.hero .knop:hover{background:var(--geel-diep)}

/* ---------- Gele accenten ---------- */

.feit__ico{background:var(--geel-zacht);color:var(--geel-diep)}
:root[data-theme="dark"] .feit__ico{color:var(--geel)}
.label.is-pop{background:var(--geel);border-color:transparent;color:var(--op-geel);font-weight:600}
.product__p{font-weight:700}
.product__vanaf{font-weight:500;color:var(--tekst-2);font-size:.82rem;margin-right:4px}
.plus{background:var(--merk);color:#fff}

/* ---------- Voet ---------- */

.voet{background:var(--inkt);color:rgba(255,255,255,.72);border-top:0}
.voet h4{color:var(--geel)}
.voet ul,.voet__p,.voet__uren{color:rgba(255,255,255,.7)}
.voet a:hover{color:var(--geel)}
.voet .merk__naam{color:#fff}
.voet .merk__sub{color:var(--geel)}
.voet__eind{border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55)}
.voet__melding{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}

/* ---------- Keuzegroepen in het productvenster ----------
   Bij een kaart als deze kies je een bijgerecht, een formaat, de soort vlees
   of een ijsje erbij. Verplichte groepen zijn keuzerondjes, optionele zijn
   vinkjes.
   De regel hieronder staat bewust ná .veld input, want een basisregel die
   eerder staat verliest het van de latere. */

.groep{margin-top:20px}
.groep__kop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.groep__kop h3{font-size:.95rem;text-transform:none}
.groep__pil{
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 9px;border-radius:100px;
}
.groep__pil--moet{background:var(--merk-zacht);color:var(--merk-op-zacht)}
.groep__pil--mag{background:var(--paneel-2);color:var(--tekst-2);border:1px solid var(--lijn)}
.groep__fout{color:var(--merk);font-size:.84rem;margin-top:7px}

.keus{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-radius:8px;border:1px solid var(--lijn);
  margin-bottom:7px;cursor:pointer;
  transition:border-color .15s linear,background .15s linear;
}
.keus:hover{border-color:var(--lijn-sterk)}
.keus:has(input:checked){border-color:var(--merk);background:var(--merk-zacht)}
.keus > input{
  appearance:none;width:18px;height:18px;flex:none;padding:0;margin:0;
  border:1px solid var(--rand-veld);background:var(--paneel);
  position:relative;cursor:pointer;
}
.keus > input[type="radio"]{border-radius:50%}
.keus > input[type="checkbox"]{border-radius:4px}
.keus > input[type="radio"]:checked{border-color:var(--merk)}
.keus > input[type="radio"]:checked::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--merk);
}
.keus > input[type="checkbox"]:checked{background:var(--merk);border-color:var(--merk)}
.keus > input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:5.5px;top:2px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.keus__n{flex:1;font-size:.93rem;min-width:0}
.keus__p{font-size:.86rem;color:var(--tekst-2);flex:none}

/* ---------- Kaartregels met de gekozen opties ---------- */

.regel__op{display:block}


/* In donker is --merk lichter rood, prima voor tekst maar te zwak onder wit.
   De plusknop en het aantal in de kop houden daarom het diepe merkrood. */
.plus,.telknop__n{background:var(--knop);color:#fff}

/* De kaartjes klemmen hun foto af, anders steekt het witte vlak met een
   rechte hoek buiten de afgeronde rand uit. In donker is het wit iets
   gedempt, want een echt wit blok schreeuwt naast een donkere kaart. */
.product{overflow:hidden}


/* De gevelfoto is lichter dan het beeld in het template (hout en lucht),
   dus de sluier gaat iets dieper zodat de herotekst leesbaar blijft.
   Nagemeten: het lichtste beeldpunt achter de kop zakt van 133 naar 105. */
.hero__foto::after{
  background:linear-gradient(to bottom, rgba(14,12,16,.66) 0%, rgba(14,12,16,.72) 100%);
}

/* ==========================================================================
   Startpagina één op één met de referentie
   --------------------------------------------------------------------------
   Op nefertitipizzeria-utrecht.nl zitten de status, de vier feiten en de
   openingstijden in ÉÉN witte kaart die over de hero heen valt. De dagen zijn
   zeven tegels naast elkaar met de dag afgekort, niet zeven regels onder
   elkaar. De sectiekoppen zijn een accentbalkje met een kop ernaast, geen
   bovenschrift.
   ========================================================================== */

.kaartblok{position:relative;z-index:3}

.overkaart{
  display:block;                 /* de kaart is nu een stapel, geen rij */
  margin-top:-40px;
  padding:clamp(20px,3vw,32px);
}
.overkaart__kop{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:22px;
}
.overkaart__kop > div{min-width:0}
.overkaart__kop .knop{flex:none;padding:12px 22px;font-size:.9rem;box-shadow:var(--schaduw)}
.overkaart__kop .knop svg{width:15px;height:15px}

/* de vier feiten zijn tegels binnen de kaart, twee op de telefoon en vier op
   het brede scherm, precies zoals de referentie */
.feiten{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.feit{
  background:var(--paneel-2);border:0;border-radius:12px;
  padding:14px;gap:12px;
}
.feit__ico{width:34px;height:34px;border-radius:9px;background:var(--merk-zacht)}
.feit__ico svg{width:17px;height:17px}
.feit__l{font-size:.72rem;letter-spacing:.02em;text-transform:none;font-weight:500;color:var(--tekst-2)}
.feit__v{font-size:.9rem;font-weight:600;margin-top:1px;line-height:1.35}
.feit--accent{background:var(--geel-zacht)}
.feit--accent .feit__ico{background:var(--geel);color:var(--op-geel)}
.feit--accent .feit__l{color:var(--accent-tekst)}
a.feit{transition:background .15s linear}
a.feit:hover{background:var(--lijn)}
@media (max-width:760px){ .feiten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:400px){ .feiten{grid-template-columns:minmax(0,1fr)} }

/* de openingstijden, gescheiden door een lijn, met zeven dagtegels */
.urenblok{margin-top:22px;padding-top:22px;border-top:1px solid var(--lijn)}
.urenblok__kop{display:flex;align-items:center;gap:8px;margin-bottom:14px;color:var(--tekst-2)}
.urenblok__kop svg{width:15px;height:15px;flex:none}
.urenblok__kop span{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.dagen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.dag{
  text-align:center;padding:12px 8px;border-radius:12px;
  background:var(--paneel-2);border:1px solid transparent;
}
.dag__d{display:block;font-weight:600;font-size:.9rem}
.dag__t{display:block;font-size:.76rem;color:var(--tekst-2);margin-top:2px}
.dag.is-nu{background:var(--geel-zacht);border-color:var(--geel)}
.dag.is-nu .dag__t{color:var(--accent-tekst)}
.dag.is-dicht .dag__t{color:var(--rood)}
@media (max-width:900px){ .dagen{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:520px){ .dagen{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* sectiekop: een accentbalkje met de kop ernaast */
.sectiekop{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.sectiekop__balk{width:4px;height:30px;border-radius:4px;background:var(--merk);flex:none}
.sectiekop h2{font-size:clamp(1.25rem,2.2vw,1.6rem)}

.tekstblok p{color:var(--tekst-2);font-size:.96rem;max-width:78ch}
.tekstblok p + p{margin-top:14px}
.tekstblok h2{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:12px}
.tekstblok .knop{margin-top:20px}
.tweekolom--om > *:first-child{order:2}
@media (max-width:880px){ .tweekolom--om > *:first-child{order:0} }

/* bezorggebieden: één kaart met rijen, gescheiden door dunne lijnen */
.blok__kop--klein{display:flex;align-items:center;gap:8px;color:var(--tekst-2);margin-bottom:18px}
.blok__kop--klein svg{width:15px;height:15px;flex:none}
.blok__kop--klein h2{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-2);
}
.zones{display:block}
.zone{
  background:transparent;border:0;border-bottom:1px solid var(--lijn);
  border-radius:0;padding:16px 0;
}
.zone:first-child{padding-top:0}
.zone:last-child{border-bottom:0;padding-bottom:0}
.zone__kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.zone__n{font-weight:600;font-size:.96rem}
.zone__rij{margin-top:0;gap:6px 14px}
.zone__pcs{margin-top:8px;padding-top:0;border-top:0}
.zones__noot{margin-top:18px;font-size:.85rem;color:var(--tekst-2)}

/* de kaart bij "Onze locatie" */
.kaartje{
  border-radius:var(--r-l);overflow:hidden;border:1px solid var(--lijn);
  box-shadow:var(--schaduw);background:var(--paneel-2);
}
.kaartje iframe{display:block;width:100%;height:clamp(260px,38vw,420px);border:0}

/* De referentie houdt de feiten ook op een telefoon twee naast elkaar en
   knipt het adres af op twee regels; dat doen wij dus ook. */
@media (max-width:400px){ .feiten{grid-template-columns:repeat(2,minmax(0,1fr))} }
.feit__v{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}


/* ==========================================================================
   Bestelpagina één op één met de referentie
   --------------------------------------------------------------------------
   Nagemeten op nefertitipizzeria-utrecht.nl bij 1265, 1085, 885 en 390 px:

   main            margin-right 400px vanaf 768px, daaronder nul
   het mandje      fixed rechts, 400px breed, schermhoog, grijs vlak
   de container    20px zijruimte, vanaf 1024px 80px
   de banner       180px hoog, vanaf 768px 350px, vanaf 1024px 420px, geen rand
   het logovakje   80x80 wit, radius 16, 8px lucht, over de onderrand van de banner
   de gerechten    ÉÉN kolom, 16px ertussen, elke regel een kaart van 20px
                   met radius 12, naam 20px/600, omschrijving 14px grijs op twee
                   regels, prijs 18px/700, en rechts een donkere pil met een +
   de tabs         onderstreept, niet als pil: 8px 16px, 14px/500, actief krijgt
                   een merkkleurige onderrand en een licht vlak
   ========================================================================== */

.winkel{
  display:block;padding:0;
  padding-bottom:clamp(90px,12vw,40px);
}
.winkel__kolom{min-width:0}

/* de container binnen de kolom */
.vak{padding-inline:20px}
@media (min-width:1024px){ .vak{padding-inline:80px} }

@media (min-width:768px){
  .winkel{margin-right:400px;padding-bottom:40px}
}

/* ---------- banner met het logovakje ---------- */

.banner{
  position:relative;width:100%;border:0;border-radius:0;overflow:hidden;
  height:180px;
}
@media (min-width:768px){ .banner{height:350px} }
@media (min-width:1024px){ .banner{height:420px} }
.banner img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.banner__vak{position:absolute;inset:auto 0 16px 0;pointer-events:none}
@media (min-width:768px){ .banner__vak{bottom:24px} }
.bannerlogo{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;padding:8px;
  background:var(--paneel);border:1px solid var(--lijn);border-radius:16px;
  box-shadow:var(--schaduw);
}
@media (min-width:768px){ .bannerlogo{width:80px;height:80px} }
.bannerlogo img{width:100%;height:auto;object-fit:contain}

/* ---------- naam van de zaak ---------- */

.winkelkop{
  background:transparent;border:0;border-radius:0;
  padding:12px 0;margin-bottom:0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
@media (min-width:768px){ .winkelkop{margin-top:24px} }
.winkelkop h1{font-size:1.25rem;line-height:1.2}
@media (min-width:768px){ .winkelkop h1{font-size:1.875rem} }
.winkelkop p{color:var(--tekst-2);font-size:.875rem;margin-top:4px;text-transform:none}
@media (min-width:768px){ .winkelkop p{font-size:1rem} }
.infoknop{
  width:36px;height:36px;flex:none;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--lijn);color:var(--tekst-2);
}
@media (min-width:768px){ .infoknop{width:40px;height:40px} }
.infoknop svg{width:19px;height:19px}

/* ---------- de plakkende balk met zoeken en tabs ---------- */

.balk{
  position:sticky;top:var(--kop-h);z-index:40;
  background:color-mix(in srgb, var(--paneel) 95%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lijn);
  margin-bottom:24px;
}
.balk .vak{padding-block:12px 4px}

.wissel--mobiel{margin-bottom:8px}
@media (min-width:768px){ .wissel--mobiel{display:none} }

.zoek{margin-bottom:0}
.zoek input{
  height:44px;padding:0 16px 0 42px;
  border-radius:12px;border:2px solid var(--lijn);background:var(--paneel-2);
}
.zoek svg{left:16px}

.tabs{
  position:static;background:transparent;border-bottom:0;margin-bottom:0;
}
.tabs__scroll{gap:8px;padding-block:12px;padding-right:0;mask-image:none;-webkit-mask-image:none}
.tab{
  padding:8px 16px;border-radius:0;
  border-bottom:2px solid transparent;
  font-size:.875rem;font-weight:500;color:var(--tekst-2);
}
.tab:hover{background:transparent;color:var(--tekst);border-bottom-color:var(--lijn-sterk)}
.tab.is-nu{
  background:var(--merk-zacht);color:var(--tekst);
  border-bottom-color:var(--merk);
}

/* ---------- categorie en gerechten ---------- */

.cat{padding-top:0;margin-bottom:24px;scroll-margin-top:calc(var(--kop-h) + 130px)}
.catkop{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.catkop__balk{width:4px;height:32px;border-radius:9999px;background:var(--merk);flex:none}
.cat h2{font-size:1.5rem;font-weight:700;margin-bottom:0;text-transform:none}

.producten{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.product{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;text-align:left;
  padding:20px;border-radius:12px;
  background:var(--paneel);border:1px solid var(--lijn);
  overflow:visible;
  transition:border-color .2s linear,box-shadow .2s linear,background .2s linear;
}
.product:hover{background:var(--paneel-2);border-color:var(--lijn-sterk);box-shadow:var(--schaduw-2)}
.product__body{padding:0;flex:1;min-width:0;display:block}
.product__kop{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.product__n{font-weight:600;font-size:1.25rem;line-height:1.375}
.product__d{
  font-size:.875rem;color:var(--tekst-2);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product__voet{display:block;margin-top:12px;padding-top:0}
.product__p{font-size:1.125rem;font-weight:700}
.product__vanaf{font-size:.875rem;font-weight:500}
.labels{margin-top:0}

/* de plusknop is een donkere pil met een plusteken, geen rond icoontje */
.plus{
  margin-left:16px;width:auto;height:auto;flex:none;
  padding:10px 20px;border-radius:8px;
  background:var(--inkt);color:#fff;
  font-size:.875rem;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.product:hover .plus{background:var(--merk)}
.plus svg{width:14px;height:14px}
@media (max-width:767px){ .plus{padding:8px 12px} }

/* ---------- het mandje als vast paneel rechts ---------- */

@media (min-width:768px){
  .mandje{
    position:fixed;right:0;top:0;bottom:0;width:400px;
    display:flex;flex-direction:column;
    background:var(--bg);border:0;border-left:1px solid var(--lijn);border-radius:0;
    box-shadow:none;z-index:70;max-height:none;
  }
  .mandje .mandje__kop{
    background:var(--paneel);border-bottom:1px solid var(--lijn);
    padding:16px 20px;flex:none;
  }
  .mandje .mandje__scroll{flex:1;overflow-y:auto;min-height:0}
  .mandje .mandje__blok{background:var(--paneel);border-bottom:1px solid var(--lijn);padding:16px}
  .mandje .mandje__lijst{flex:none;overflow:visible;padding:16px;border-top:0}
  .mandje .mandje__voet{background:var(--paneel);border-top:1px solid var(--lijn);padding:20px;flex:none}
}

/* Op de bestelpagina van de referentie is niets plakkerig: de kopbalk is
   64px hoog en scrollt gewoon weg, de balk met zoeken en tabs ook, en het
   mandje ligt er als vast paneel overheen vanaf de bovenrand van het scherm.
   Er staat daar ook geen statusbalk. */
.pagina-winkel .kop{position:static}
.pagina-winkel .kop__in{min-height:64px}
.pagina-winkel .balk{position:relative;top:auto}
.pagina-winkel .cat{scroll-margin-top:16px}
/* De voettekst moet vrij blijven van het mandje. Boven de 768px staat dat als
   zijbalk van 400px rechts, dus schuift de voettekst er met een marge langs.
   Daaronder ligt het mandje als vaste balk over de ONDERkant, en daar hoorde
   dezelfde bescherming — die ontbrak.

   TEMPLATEFOUT. Het template gaf de onderruimte alleen aan main.winkel
   (104px bij ≤767px), maar de voettekst staat ná <main> en kreeg dus niets.
   Gevolg op de telefoon: zodra er iets in het mandje zat, verdween de slotzin
   half achter de balk en was de link "HapNu B.V." niet meer aan te tikken.

   Nagemeten zichtbare strook van de balk (het meetscript uit de reviewmap):
   72px greep plus de 16px die de balk van de onderrand af staat = 88px. Hier
   staat 104px, hetzelfde getal dat het template voor main gebruikt, zodat er
   marge overblijft, plus de veilige zone van de telefoon.

   Alleen onder 768px: daarboven is het mandje een zijbalk en zou onderruimte
   enkel een gat maken. Nagemeten op 390, 600, 767, 768, 885, 1040 en 1265px
   met ntc-review/overloop.js. */
@media (min-width:768px){
  .pagina-winkel .voet{margin-right:400px}
}
@media (max-width:767px){
  .pagina-winkel .voet{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
}

/* Het omslagpunt van het mandje ligt bij de referentie op 768px, niet op 1040.
   Boven die grens is het een vast paneel, eronder een blad dat opkomt met een
   zwevende balk eronder: fixed bottom-4 left-4 right-4, dus met lucht rondom. */
@media (min-width:768px){
  .mandje{transform:none;inset:0 0 0 auto;max-height:none;padding-bottom:0}
  .mandje__greep{display:none}
  .mandje .mandje__kop{display:flex}
  .mandje .mandje__voet{position:static}
}
/* TEMPLATEFOUT, hier gerepareerd — de dichtgeklapte balk liep onder het scherm
   door. Het template klapte het mandje op de telefoon dicht met
   `transform:translateY(calc(100% - 72px))`. Die 100% is de eigen hoogte van het
   paneel, en die is `max-height:84vh` uit het blok hierboven: op een scherm van
   844px is dat 709px. Het paneel staat met `inset:auto 16px 16px 16px` zestien
   beeldpunten van de onderrand af, dus na het verschuiven lag zijn onderrand op
   1465 en zijn bovenrand op 756 — en de zichtbare strook was niet 72px maar 88px.
   Die extra zestien beeldpunten vielen precies over de wissel Bezorgen/Afhalen
   heen, zodat er onder de balk "Bekijk bestelling" twee half afgesneden knoppen
   stonden die je niet kon indrukken.

   Gemeten vóór de reparatie, op 390x844 met één gerecht in het mandje:
     .mandje        top=756  bottom=1465  h=709   (scherm is 844 hoog)
     greep          top=757  bottom= 829  h= 72   zichtbaar
     "Bezorgen"     top=829  bottom= 896         15px zichtbaar, niet aantikbaar
     "Afhalen"      top=829  bottom= 896         idem
   Dezelfde fout is nagemeten in het template waaruit deze site is gekopieerd én
   in de bouw daarvóór; hij komt dus uit het template en niet uit deze bouw.
   Welke dat zijn, staat in het verslag.

   De reparatie laat de transform los: dichtgeklapt bestáát het mandje alleen uit
   zijn greep, want al zijn andere kinderen staan dan op `display:none`. Het vak
   is daarmee vanzelf zo hoog als de greep — geen magisch getal dat naast de
   werkelijke hoogte kan gaan staan — en er kan per definitie niets onder
   uitsteken. Dat de knoppen echt wég zijn in plaats van afgeknipt is bovendien
   beter dan alleen verbergen: met de tabtoets kom je er nu ook niet meer op uit
   terwijl je ze niet ziet. `.is-open` klapt het blad open tot 84vh.

   Let op de valkuil die deze reparatie er eerst bíj maakte: `.mandje__voet`
   staat op `position:sticky;bottom:0`, dus zodra het vak nog maar 72px hoog was,
   plakte de voet met "Subtotaal" en "Afrekenen" over de greep heen. Vandaar dat
   het niet genoeg is om de hoogte te begrenzen; de inhoud moet er echt uit.

   Er stond geen overgang op `transform`, dus er gaat visueel niets verloren.
   Nagemeten op 320, 360, 390, 414, 430 en 767px breed en op schermhoogtes van
   568 tot 932px: ntc-review/onderbalk.txt. */
@media (max-width:767px){
  .mandje{
    inset:auto 16px 16px 16px;border-radius:16px;overflow:hidden;
    border:1px solid var(--lijn);
    transform:none;max-height:84vh;
  }
  /* dichtgeklapt is het mandje niets anders dan zijn greep */
  .mandje:not(.is-open) > *:not(.mandje__greep){display:none}
  .mandje__greep{
    display:flex;height:72px;border-bottom:0;border-radius:16px;
    padding:0 18px;position:static;
  }
  .mandje.is-open{overflow-y:auto;border-radius:16px}
  .mandje__scroll{max-height:56vh;overflow-y:auto}
  main.winkel{padding-bottom:104px}
}

/* Nagemeten puntjes: de plusknop is bij de referentie 40px hoog omdat text-sm
   daar een regelhoogte van 20px heeft, en de regel lijnt op de telefoon onderaan
   uit in plaats van in het midden. */
.plus{line-height:1.43}
@media (max-width:767px){ .product{align-items:flex-end} }

/* De kopbalk is donker, dus een knop met alleen een rand moet daar witte
   letters hebben; anders staat er zwart op zwart. */
.kop .knop--rand{color:#fff;border-color:rgba(255,255,255,.34)}
.kop .knop--rand:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* In donker valt de bijna zwarte plusknop weg tegen de kaart; daar krijgt hij
   een opgetild vlak zodat het plusteken zichtbaar blijft. */
:root[data-theme="dark"] .plus{background:#3B3946}
:root[data-theme="dark"] .product:hover .plus{background:var(--knop)}

/* De referentie zet "Misschien ook lekker?" als klein grijs kapitaalkopje
   boven de suggesties, niet als gewone tussenkop. */
.upsell h3{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tekst-2);margin-bottom:8px;
}
.upsell__r .plus{margin-left:0;width:auto;height:auto;padding:6px 12px;border-radius:8px}

/* ==========================================================================
   Voettekst één op één met de referentie
   --------------------------------------------------------------------------
   Nagemeten bij 1265px: 500px hoog, een accentstreep van 4px bovenaan, dan
   py-12 met een raster van vijf kolommen en 48px ertussen waarvan het merkblok
   er twee beslaat. Kopjes 12px/700 in kapitaal met brede spatiëring en 24px
   eronder. Daaronder een streep met 48px lucht erboven en 32px eronder, met de
   auteursrechtregel links, drie links rechts, en nog 24px lager de
   geautoriseerde-bestelwebsitezin.
   ========================================================================== */

.voet{padding-block:0;margin-top:clamp(30px,5vw,54px);border-top:0}
.voet__streep{height:4px;background:linear-gradient(90deg,var(--geel) 0%,var(--geel) 34%,var(--merk) 34%,var(--merk) 100%)}
.voet__in{padding-block:48px}

.voet__grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:48px;
}
@media (min-width:768px){ .voet__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){
  .voet__grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .voet__merk{grid-column:span 2}
}
.voet__merk img{height:40px;width:auto;margin-bottom:24px}
.voet__p{font-size:.875rem;line-height:1.7;max-width:28rem;margin-top:0}

.voet h3{
  font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--geel);margin-bottom:24px;
}
.voet__links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.voet__links a{font-size:.875rem;color:rgba(255,255,255,.72)}
.voet__links a:hover{color:#fff}

.voet__contact{display:grid;gap:16px}
.voet__contact > div{display:flex;align-items:flex-start;gap:12px}
.voet__contact svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--geel)}
.voet__contact span,.voet__contact a{font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.78)}
.voet__contact a:hover{color:#fff}

.voet__urenlijst{display:grid;gap:10px}
.voet__uren{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;color:rgba(255,255,255,.82)}
.voet__uren .uur__d{color:rgba(255,255,255,.55)}
/* De tijd erft niet van .voet__uren: .uur__t zet zelf --tekst-2, en dat haalt
   op de donkere voetbalk maar 2,84:1. Hier de lichte variant, net als hierboven. */
.voet__uren .uur__t{color:rgba(255,255,255,.82)}

.voet__onder{margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.voet__rij{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  font-size:.75rem;color:rgba(255,255,255,.6);
}
.voet__rij nav{display:flex;flex-wrap:wrap;gap:8px 32px}
.voet__rij a:hover{color:#fff}
.voet__melding{
  margin-top:24px;font-size:.75rem;line-height:1.7;color:rgba(255,255,255,.6);
}
.voet__melding a{color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:2px}
.voet__melding a:hover{color:#fff}

/* De hero volgt bij de referentie een beeldverhouding in plaats van een vaste
   hoogte: 3/4 op de telefoon, 16/9 vanaf 640px en 21/9 vanaf 1024px. */
.hero__foto{height:auto;aspect-ratio:3/4}
@media (min-width:640px){ .hero__foto{aspect-ratio:16/9} }
@media (min-width:1024px){ .hero__foto{aspect-ratio:21/9} }

/* Het beeld naast de tekst is 4:3; het logoblok houdt zijn eigen verhouding. */
.over__beeld img{aspect-ratio:4/3}
.over__beeld--logo{
  aspect-ratio:auto;height:auto;object-fit:contain;
  background:var(--paneel);padding:clamp(24px,5vw,56px);
}

/* De melding onderaan had nog een eigen vlak uit de merklaag. */
.voet__melding{background:transparent;border:0;padding:0}

/* ==========================================================================
   Kopbalk één op één met de referentie
   --------------------------------------------------------------------------
   Nagemeten bij 1265px: 64px hoog, niet plakkerig, en op breed scherm een
   raster van drie gelijke kolommen. Links het logo op 24px van de rand, in het
   midden vier links van 14px/500 met 8px 16px lucht en een afgeronde hover, en
   rechts een knopje van 36x36 met daarnaast de bestelknop (14px/600, 8px 20px,
   radius 8). Op de telefoon alleen het logo met dat knopje en een menuknop.

   Let op de vololgorde: de basisregels staan hier vóór de media query, anders
   wint de basisregel van de query en staan beide kopvarianten tegelijk aan.
   ========================================================================== */

.kop{position:relative;height:64px;border-bottom:1px solid var(--lijn)}
.kop__in{display:none}

.merk{margin-right:0}
.merk__logo{height:34px;width:auto;max-width:150px;object-fit:contain}

.kop__mobiel{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding-inline:16px;
}
.kop__grid{display:none}
.kop__links{display:flex;justify-content:flex-start;align-items:center;height:64px;padding-inline:24px}
.kop__rechts{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding-inline:24px}

.kop__nav{display:flex;justify-content:center;gap:4px}
.kop__nav a{
  font-size:.875rem;font-weight:500;padding:8px 16px;border-radius:8px;
  color:rgba(255,255,255,.7);box-shadow:none;
}
.kop__nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.kop__nav a[aria-current="page"]{color:#fff;font-weight:500;box-shadow:none}

.kop .modeknop{width:36px;height:36px;border-radius:8px;border:0}
.kop .telknop{padding:8px 20px;font-size:.875rem;font-weight:600;border-radius:8px}
.kop .knop--rand{padding:8px 20px;font-size:.875rem;font-weight:600;border-radius:8px}
.telknop__n{top:-7px;right:-7px}

.menuknop{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  color:rgba(255,255,255,.8);
}
.menuknop:hover{background:rgba(255,255,255,.1);color:#fff}
.menuknop svg{width:20px;height:20px}

.mobielmenu{
  position:absolute;left:0;right:0;top:64px;z-index:65;
  background:var(--inkt);border-bottom:1px solid rgba(255,255,255,.14);
  padding:12px 16px 18px;display:grid;gap:4px;
  box-shadow:var(--schaduw-2);
}
.mobielmenu nav{display:grid;gap:2px}
.mobielmenu a{
  font-size:.95rem;font-weight:500;padding:11px 12px;border-radius:8px;
  color:rgba(255,255,255,.8);
}
.mobielmenu a:hover{background:rgba(255,255,255,.1);color:#fff}
.mobielmenu .knop,.mobielmenu .telknop{margin-top:10px;width:100%;justify-content:center}

@media (min-width:768px){
  .kop__mobiel{display:none}
  .menuknop{display:none}
  .mobielmenu{display:none !important}
  .merk__logo{height:38px}
  .kop__grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;width:100%;height:64px;
  }
}

/* De melding dat het restaurant gesloten is, staat onder de kopbalk als eerste
   blok binnen main: een zacht vlak met een lijn eronder, geen felle balk. */
.melding{
  background:var(--geel-zacht);
  border-bottom:1px solid #E4D5B8;
  padding:12px 16px;text-align:center;
  font-size:.875rem;color:var(--accent-tekst);   /* 5,73:1 op --geel-zacht */
}
.melding.is-open{background:var(--ok-zacht);border-bottom-color:#BFE3C8;color:#186B31}
:root[data-theme="dark"] .melding{
  background:#2A2316;border-bottom-color:#3D3322;color:#F4E264;   /* 11,78:1 */
}
:root[data-theme="dark"] .melding.is-open{background:#16261B;border-bottom-color:#2A4A33;color:#7FD494}

/* ---------- Het logo op een witte ondergrond ----------
   Het logo van New Thai Corner is een ronde witte sticker met ZWARTE letters.
   Op de zwarte kopbalk, de zwarte voettekst en op --paneel in donker valt de
   tekst weg, dus het logo houdt overal zijn witte ondergrond, in beide thema's
   (blok G van de opdracht). Die ondergrond zit in het bestand zelf: een
   vierkant van 320x320 rond de cirkel, uitgesneden uit het bronbestand van hun
   FoodTicket-site (ntc-review/raw/img). Hier wordt het vak rond gemaakt, zodat
   de hoeken van dat vierkant niet als wit blokje op de balk staan.

   De maat: het logo is 1:1, en de letters NEW THAI CORNER zijn op 46px nog geen
   vier beeldpunten hoog. Daarom staat de naam er als tekst naast
   (.merk__naam, een element dat het template zelf al opmaakt). De hoogte
   blijft 46px, boven 768px 52px en op de telefoon 40px — binnen de kopbalk van
   64px. Regel 8 staat dat toe; het staat in het verslag. */
.merk__logo{height:46px;width:auto;background:#FFFFFF;border-radius:50%}
.merk__naam{white-space:nowrap}
@media (min-width:768px){ .merk__logo{height:52px} }
@media (max-width:520px){ .merk__logo{height:40px} }
.voet__merk img{background:#FFFFFF;border-radius:50%}
.bannerlogo,.over__beeld--logo{background:#FFFFFF}

/* De hero-inhoud op de maten van de referentie, nagemeten bij 1265px:
   pil 12px/700 met 4px 12px lucht en radius 4, kop 60px/800 met regelhoogte 1
   en 16px eronder, lopende tekst 20px met regelhoogte 28 en 32px eronder in een
   baan van 672px, knop 18px/700 met 14px 32px lucht. De secties krijgen 64px
   lucht boven en onder, net als py-16 daar. */

.hero__in{padding-inline:20px}
.hero__pil{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;
  padding:4px 12px;border-radius:4px;margin-bottom:16px;
}
.hero h1{
  font-size:clamp(1.875rem,5vw,3.75rem);line-height:1;font-weight:800;
  max-width:896px;margin-bottom:16px;text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.hero__tekst{
  font-size:clamp(.875rem,1.7vw,1.25rem);line-height:1.4;
  max-width:672px;margin-top:0;margin-bottom:32px;color:#E5E7EB;
}
.hero .knop{
  font-size:1.125rem;font-weight:700;padding:14px 32px;border-radius:8px;margin-top:0;
}

.sectie{padding-block:64px}

/* De kaart over de hero is bij de referentie smaller dan de rest van de pagina
   (max-w-5xl, dus 1024px met 16px zijruimte) en valt 32px over het beeld heen. */
.kaartblok .wrap{max-width:1024px;padding-inline:16px}
.overkaart{margin-top:-32px}
.overkaart{border-radius:16px}
.sectiekop{gap:12px;margin-bottom:24px}
.sectiekop__balk{width:4px;height:32px}
.sectiekop h2{font-size:1.5rem;font-weight:700}
.tekstblok h2{font-size:1.5rem;font-weight:700}

/* ==========================================================================
   Breedtes één op één met de referentie
   --------------------------------------------------------------------------
   Nagemeten bij 1905, 1265, 885 en 390 px:

   secties op de startpagina  max 1280px met 16px zijruimte (max-w-7xl px-4)
   de kaart over de hero      max 1024px met 16px zijruimte (max-w-5xl px-4)
   de VOETTEKST               géén maximum: over de volle breedte van het
                              venster, met 20px zijruimte en vanaf 1024px 80px

   Dat laatste is waarom de voettekst bij ons krap oogde: die zat in dezelfde
   baan als de rest van de pagina, terwijl hij bij de referentie helemaal
   doorloopt. Op een breed scherm scheelt dat honderden pixels.
   ========================================================================== */

:root{--breed:1280px}
.wrap{padding-inline:16px}

.voet__in{max-width:none;padding-inline:20px;padding-block:48px}
@media (min-width:1024px){ .voet__in{padding-inline:80px} }

/* ==========================================================================
   Tekst- en contactpagina's, opgezet als bij de referentie
   --------------------------------------------------------------------------
   Privacybeleid en voorwaarden: een baan van 768px met witte kaarten onder
   elkaar. Elke kaart heeft radius 16, een dunne rand en 24px lucht (32px vanaf
   640px). Kicker 12px/600 in kapitaal in de merkkleur, kop 36px/700, tekst
   14px in de rustige tekstkleur. De contactpagina heeft een eigen kopvlak op
   wit en daaronder een baan van 1024px op een grijs veld.
   ========================================================================== */

.tekstpagina .wrap{max-width:768px}
.blad{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:16px;
  padding:24px;box-shadow:var(--schaduw);margin-bottom:16px;
}
@media (min-width:640px){ .blad{padding:32px} }
.blad:last-child{margin-bottom:0}
.blad__kicker{
  font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--merk);margin-bottom:8px;
}
.blad h1{font-size:clamp(1.6rem,3.4vw,2.25rem);font-weight:700;margin-bottom:12px}
.blad h2{font-size:1.125rem;font-weight:700;margin-bottom:16px;text-transform:none}
.blad h3{font-size:1.125rem;font-weight:700;margin-bottom:6px}
.blad__lead{font-size:.95rem;color:var(--tekst-2);line-height:1.7}
.blad__datum{margin-top:12px;font-size:.8rem;color:var(--tekst-2)}
.blad__body{font-size:.875rem;line-height:1.7;color:var(--tekst-2)}
.blad__body p + p{margin-top:12px}
.blad__body ul{margin:0;padding-left:20px;display:grid;gap:8px}
.blad__body b{color:var(--tekst);font-weight:600}
.blad__body a{color:var(--merk);font-weight:600}
.blad__body a:hover{text-decoration:underline}
.blad--kaart .kaartje{margin-top:16px}

/* ---------- contactpagina ---------- */

.contactpagina{background:var(--paneel-2)}
.contactkop{background:var(--paneel);border-bottom:1px solid var(--lijn);padding-block:48px}
@media (min-width:640px){ .contactkop{padding-block:64px} }
.contactkop .wrap{max-width:1024px}
.contactkop h1{font-size:clamp(1.75rem,3.6vw,2.25rem);font-weight:700;margin-bottom:12px}
.contactkop p{color:var(--tekst-2);max-width:62ch;line-height:1.7}

.contactlijf{max-width:1024px;padding-block:40px}
.contactkaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:40px}
.contactkaart--breed{grid-column:1 / -1}
@media (max-width:640px){ .contactkaarten{grid-template-columns:minmax(0,1fr)} }
.contactkaart{
  background:var(--paneel);border:1px solid var(--lijn);border-radius:16px;
  padding:20px;box-shadow:var(--schaduw);
}
.contactkaart__ico{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--merk-zacht);color:var(--merk);margin-bottom:12px;
}
.contactkaart__ico svg{width:18px;height:18px}
.contactkaart h3{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tekst-2);margin-bottom:6px;
}
.contactkaart p{font-size:.95rem;font-weight:600}
.contactkaart a{color:var(--merk)}
.contactkaart a:hover{text-decoration:underline}

.contactpartijen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:40px}
@media (max-width:640px){ .contactpartijen{grid-template-columns:minmax(0,1fr)} }
.contactpartijen .blad{margin-bottom:0}

.contactnoot{
  background:var(--lijn);border-radius:16px;padding:24px;margin-bottom:40px;
}
.contactnoot h2{font-size:1.125rem;font-weight:700;margin-bottom:12px;text-transform:none}
.contactnoot p{font-size:.875rem;line-height:1.7;color:var(--tekst-2)}
.contactlijf .blad{margin-bottom:40px}
.contactlijf .blad:last-child{margin-bottom:0}
/* het grijze blok was net te donker onder de rustige tekstkleur (4,34:1) */
.contactnoot{background:var(--paneel-2);border:1px solid var(--lijn)}
/* "Bestel bij ..." is bij de referentie text-lg/sm:text-xl en font-bold */
.overkaart__kop h2{font-size:1.125rem;font-weight:700}
@media (min-width:640px){ .overkaart__kop h2{font-size:1.25rem} }

/* ==========================================================================
   Prozablokken op de startpagina
   --------------------------------------------------------------------------
   Nagemeten bij 1265px: "Over ..." en "Populaire gerechten" staan bij de
   referentie in een container met 80px extra inspringing, zónder accentbalkje.
   De kop is daar 30px/700 en de tekst 18px, en kop en alinea's beginnen op
   precies dezelfde linkerrand. Het omgekeerde beeldblok heeft daar alleen een
   knop, geen kop en geen tekst.
   ========================================================================== */

.proza{padding-inline:80px}
@media (max-width:1023px){ .proza{padding-inline:20px} }
@media (max-width:639px){ .proza{padding-inline:0} }
.proza h2{
  font-size:1.875rem;font-weight:700;line-height:1.25;
  margin-bottom:16px;text-transform:none;
}
.proza p{font-size:1.125rem;line-height:1.7;color:var(--tekst-2);max-width:none}
.proza p + p{margin-top:16px}
.proza .knop{margin-top:24px}
.proza--knop{display:flex;align-items:center}
/* de regel onder "Onze locatie" loopt bij de referentie over de volle baan */
#contact .lead{max-width:none}
.blok__kop--klein h2{font-size:.75rem}

/* De tekstpagina's krijgen dezelfde opzet als de contactpagina: een grijs vel
   met bovenaan een witte band. Nagemeten bij 1265px: baan van 768px met 16px
   zijruimte, 48px lucht (64px vanaf 640px), kicker 12px/600 in kapitaal,
   accentbalkje van 4x32 voor de kop van 36px/700, inleiding 18px in een baan
   van 672px, datum 12px. */

.tekstpagina{background:var(--paneel-2)}
.tekstpagina .wrap{max-width:768px}
.tekstkop{background:var(--paneel);border-bottom:1px solid var(--lijn);padding-block:48px}
@media (min-width:640px){ .tekstkop{padding-block:64px} }
.tekstkop .blad__kicker{margin-bottom:8px}
.tekstkop .sectiekop{margin-bottom:12px}
.tekstkop h1{font-size:clamp(1.6rem,3.4vw,2.25rem);font-weight:700}
.tekstkop__lead{font-size:1.125rem;line-height:1.6;color:var(--tekst-2);max-width:672px}
.tekstkop__datum{margin-top:12px;font-size:.75rem;color:var(--tekst-2)}
.tekstlijf{padding-block:40px}

/* de maten op de contactpagina, ook nagemeten */
.contactkaart--breed{grid-column:auto}
.contactpartijen .blad h3{font-size:1rem}
.contactpartijen .blad .blad__lead{font-size:.75rem;line-height:1.5}
.contactnoot h2{font-size:.875rem}
.blad--kaart .blad__lead{font-size:.875rem}
/* laatste maten van de contactpagina, nagemeten bij de referentie */
.contactkop p{font-size:1.125rem;max-width:672px}
.contactkaart h3{font-size:.75rem;font-weight:600}
.contactkaart p{font-size:.875rem;font-weight:500}

/* In donker kleurde het icoonvakje van "Afhalen" geel op geel, waardoor het
   tasje onzichtbaar werd: `:root[data-theme="dark"] .feit__ico` heeft een
   hogere soortelijkheid dan `.feit--accent .feit__ico` en won dus altijd. */
:root[data-theme="dark"] .feit--accent .feit__ico{color:var(--op-geel)}

/* De twee beeldblokken lijnen bij de referentie verticaal uit op het midden,
   en de knop in het logoblok staat tegen de rand van zijn kolom, zonder de
   inspringing die de prozablokken wel hebben. */
.tweekolom{align-items:center}
.proza--knop{padding-inline:0;display:block}

/* ==========================================================================
   Bezorgadres zoeken
   --------------------------------------------------------------------------
   Zoals bij de referentie: één veld voor straat en huisnummer met een
   pin-icoon, een suggestielijst eronder, daarna een veld voor de toevoeging,
   en na bevestigen een vaste regel met "Wijzig". Valt het adres buiten het
   bezorggebied, dan verschijnt de melding met de knop "Wissel naar afhalen".
   ========================================================================== */

.adresform{display:grid;gap:12px}
.adresvak{display:grid;gap:6px}
.adresvak label{
  font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tekst-2);margin-bottom:0;
}
.adresveld{position:relative}
.adresveld > svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--tekst-2);pointer-events:none;
}
.adresvak input{
  width:100%;height:40px;padding:0 14px 0 36px;
  border-radius:12px;border:2px solid var(--lijn);background:var(--paneel-2);
  transition:border-color .15s linear,background .15s linear;
}
.adresvak input:focus{outline:none;border-color:var(--merk);background:var(--paneel)}
.adresvak > input{padding-left:14px}

.adreslijst{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  list-style:none;margin:0;padding:6px;
  background:var(--paneel);border:1px solid var(--lijn);border-radius:12px;
  box-shadow:var(--schaduw-2);max-height:260px;overflow-y:auto;
}
.adreslijst button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:8px;font-size:.875rem;
}
.adreslijst button:hover,.adreslijst button:focus-visible{background:var(--merk-zacht)}
.adreslijst svg{width:15px;height:15px;flex:none;color:var(--merk)}

.adres__meld{font-size:.82rem;display:grid;gap:4px}
.adres__meld:empty{display:none}
.adres__meld strong{font-weight:600}
.adres__meld.is-mis{color:var(--merk)}
.adres__meld.is-mis span{color:var(--tekst-2)}
.adres__wissel{
  justify-self:start;margin-top:4px;
  font-size:.82rem;font-weight:600;color:var(--merk);text-decoration:underline;
}

.adresklaar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:12px;
  background:var(--paneel-2);border:1px solid var(--lijn);
}
.adresklaar__tekst{min-width:0}
.adresklaar__kop{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tekst-2);
}
.adresklaar__regel{display:block;font-size:.875rem;font-weight:600;margin-top:2px}
.adresklaar__wijzig{flex:none;font-size:.82rem;font-weight:600;color:var(--merk)}
.adresklaar__wijzig:hover{text-decoration:underline}

/* het venster "Waar mogen we bezorgen?" */
.venster--klein .venster__doos{max-width:460px}
.venster--klein .venster__scroll{max-height:none}
.avenster{padding:24px}
.avenster h2{font-size:1rem;font-weight:700;text-transform:none}
.avenster__lead{font-size:.875rem;color:var(--tekst-2);margin-top:4px;margin-bottom:16px;line-height:1.6}
.avenster .adresform{margin-bottom:4px}
.ofstreep{position:relative;display:flex;align-items:center;justify-content:center;margin:16px 0 12px}
.ofstreep::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--lijn)}
.ofstreep span{
  position:relative;background:var(--paneel);padding-inline:16px;
  font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-2);
}

/* "Open tot 22:45" stond op 4,21:1 tegen wit — net onder de eis voor 12px.
   Het groen is een tint dieper; wit erop blijft ruim voldoende (5,2:1). */
:root{--ok:#1A7D36}

/* Leeg mandje op de telefoon: de balk "Bekijk bestelling 0 items" verdwijnt,
   en de kaart houdt er geen ruimte meer voor vrij (blok I en K; gemeten in
   ntc-review/mandje-mobiel-leeg.txt). */
@media (max-width:767px){
  .mandje.is-leeg{display:none}
  body:not(.heeft-mandje) main.winkel{padding-bottom:32px}
}