/* ==========================================================================
   Amanos cafe en restaurant, Jan Schamhartstraat 2A in Olst.
   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 merkgoud, het diepe bruin en de
   keuzegroepen.
   ========================================================================== */

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

:root{
  --bg:#FAF7F1;
  --paneel:#FFFFFF;
  --paneel-2:#F4EFE5;
  --lijn:#E9E1D2;
  --lijn-sterk:#CFC2A9;
  --tekst:#1F1810;
  --tekst-2:#6A5F4E;
  /* Het logo is een goudverloop op een witte ondergrond. Nagemeten in
     amanos-review/raw/logo-bron.png met meet-merkkleur.ps1: 19.049 verzadigde
     beeldpunten in vier tintbakken, van #3C1702 (diep bruin, de contour) via
     #805F1F en #B49148 naar #DFBB6D (licht goud, de hooglichten). De witte
     ondergrond is 79,7% van het beeld; het logo is niet doorzichtig.

     Geen van die vier kan allebei de rollen aan. #805F1F haalt als tekst op
     wit maar 3,57:1 en #DFBB6D met wit erop 1,83:1. Daarom twee waarden:
     --merk is een diepere variant uit dezelfde tint voor tekst en voor vlakken
     met witte tekst erop (8,04:1 op wit, 8,04:1 met wit erop), --geel is de
     goudkleur zelf voor de donkere balken en de accentvlakken met donkere
     tekst. Alle paren zijn doorgerekend in amanos-review/kleurplan.js. */
  --merk:#6B4A0E;
  --merk-zacht:#FBF2DF;
  --merk-op-zacht:#6B4A0E;     /* 7,23:1 op --merk-zacht */
  /* Het goud uit de hooglichten van het logo, een tint dieper zodat donkere
     tekst erop 8,40:1 haalt en het als accent op de inktbalk 8,23:1 geeft. */
  --geel:#D6A94E;
  --geel-diep:#C1913A;         /* 6,43:1 met --op-geel erop */
  --op-geel:#1A1408;
  --inkt:#1C1610;              /* de donkere balken, warm zwart bij goud-bruin */
  --op-inkt:#FFFFFF;
  --knop:#6B4A0E;
  --knop-hover:#54390A;
  --knop-tekst:#FFFFFF;
  /* Groen voor "open" en voor bevestigingen; staat los van het merk. */
  --ok:#1B7A3C;
  --ok-zacht:#E8F4EC;
  /* 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:#1B7A3C;
  --rood:#B5382B;
  --rood-zacht:#FBEEEC;
  --geel-zacht:#FBF2DF;
  /* Het goud is bruikbaar als vlak maar veel te licht voor kleine tekst. Voor
     tekst staat hier een diepere variant uit dezelfde tint: 6,77:1 op wit en
     6,08:1 op --geel-zacht. Dat vangt de drie plekken op waar het template op
     12px tekst zakt: het label van de accenttegel, de dagtegel van vandaag en
     de sterretjes. */
  --accent-tekst:#7A5410;
  --ster:#7A5410;
  --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:#151109;
  --paneel:#1F1810;
  --paneel-2:#2A2116;
  --lijn:#39301F;
  --lijn-sterk:#544733;
  --tekst:#F5EFE3;
  --tekst-2:#B0A48D;
  /* In donker gaat het merkgoud juist omhoog: als tekst op --bg haalt het
     10,16:1 en op --paneel 9,47:1. De plekken waar dit een vlak mét wit teken
     is houden de diepe kleur van --knop; die blijft in donker gelijk. */
  --merk:#E4B863;
  --merk-zacht:#2B2011;
  --merk-op-zacht:#E4B863;     /* 8,60:1 op --merk-zacht */
  /* Ook het accentgoud een stap lichter: 9,88:1 met --op-geel erop. */
  --geel:#E4B863;
  --geel-diep:#D6A94E;
  --op-geel:#1A1408;
  --inkt:#100C06;
  --op-inkt:#FFFFFF;
  --knop:#6B4A0E;
  --knop-hover:#8A6114;
  --ok:#4FC06D;
  --ok-zacht:#14241A;
  /* in donker blijft het vlak diep, anders haalt wit erop maar 2,27:1 */
  --ok-vlak:#207F39;
  --rood:#E0705F;
  --rood-zacht:#2A1815;
  --geel-zacht:#241B0F;
  --accent-tekst:#E4B863;      /* 9,15:1 op --geel-zacht, 9,47:1 op --paneel */
  --ster:#E4B863;
  --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(--lijn-sterk);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(--lijn-sterk);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 diepe bruingoud (#6B4A0E) en het accentgoud (#D6A94E) uit
   het logo, met een warm zwarte inkt voor de balken.
   ========================================================================== */

/* ---------- 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 ----------
   HBC verkoopt menu's waar je een drankje, een saus of een formaat bij
   kiest. 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(--lijn-sterk);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 herofoto is een gedekte tafel met veel licht op de schalen, dus de
   sluier moet diep genoeg zijn om de tekst erboven te dragen. Nagemeten met
   amanos-review/meet-hero.js, dat de sluier uit deze regel uitleest en over
   de foto legt en dan het lichtste beeldpunt binnen elk tekstvak zoekt:

     1265px  h1 60px       lichtste beeldpunt rgb(90,88,85)   wit erop 7,09:1  (eis 3)
     1265px  lopende 20px  lichtste beeldpunt rgb(87,85,88)   wit erop 7,38:1  (eis 4,5)
      390px  h1 30px       lichtste beeldpunt rgb(94,93,85)   wit erop 6,62:1  (eis 3)
      390px  lopende 14px  lichtste beeldpunt rgb(87,85,87)   wit erop 7,39:1  (eis 4,5)

   De lopende tekst is het strengste geval: die is klein en heeft 4,5:1 nodig,
   en juist daar zakt de sluier van het template er meestal doorheen. Hier
   niet. */
.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 (toren-review/meet-balk.js):
   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 toren-review/voetruimte.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))}
  /* Met een leeg mandje staat de balk er niet, en dan is die onderruimte een
     gat onder de slotzin. Dezelfde klasse als bij main.winkel. */
  body.pagina-winkel:not(.heeft-mandje) .voet{padding-bottom:32px}
}

/* 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}
}
/* ---------- Het mandje op de telefoon: een balk, geen blad ----------

   HOE HET WAS EN WAAROM DAT FOUT WAS. Het mandje was onder 768 px een blad dat
   16 px boven de onderrand zweefde en met `translateY(calc(100% - 72px))` naar
   beneden was geschoven, zodat alleen de greep van 72 px bleef staan. Die som
   klopt niet: het blad wordt over zijn EIGEN hoogte verschoven, maar het staat
   16 px boven de onderrand van het scherm. Die 16 px vult het blad met wat er
   ná de greep komt — de wissel bezorgen/afhalen. Gemeten op 390x844
   (amanos-review/mandje-meten.js):

     blad         top  756  bottom 1465  hoogte 709   zichtbaar  88 px
     greep        top  757  bottom  829  hoogte  72   zichtbaar  72 px
     wissel       top  829  bottom  910               zichtbaar  15 px  <- lekt
     voet + knop  top 1131  bottom 1464               zichtbaar   0 px

   Je zag dus onder "Bekijk bestelling" twee knoppen half opduiken die je niet
   kon aantikken, en de knop "Afrekenen" zat 558 px buiten beeld.

   HOE HET NU IS. Onder 768 px is het mandje een vaste balk over de volle
   breedte, tegen de onderrand, met alleen de greep erin. De greep is een link
   naar de afrekenpagina. Er is niets meer om open te schuiven, dus er kan ook
   niets meer onderuit steken. Alles wat in het blad stond staat op de
   afrekenpagina: de wissel bezorgen/afhalen, het bezorgadres, de regels met
   hun aantallen, de bedragen en de betaalknop.

   Boven 768 px verandert er niets: daar is het mandje het vaste paneel rechts
   en is deze balk verborgen. */
@media (max-width:767px){
  .mandje{
    inset:auto 0 0 0;
    border:0;border-top:1px solid var(--lijn);border-radius:0;
    overflow:hidden;transform:none;max-height:none;
    box-shadow:0 -4px 16px rgba(0,0,0,.14);
    padding-bottom:env(safe-area-inset-bottom);
  }
  /* alles behalve de balk zelf hoort hier niet thuis */
  .mandje > *:not(.mandje__greep){display:none}
  .mandje__greep{
    display:flex;height:72px;border-bottom:0;border-radius:0;
    padding:0 18px;position:static;color:inherit;text-decoration:none;
  }
  /* een leeg mandje heeft niets om te bekijken; dan zou de balk naar een lege
     afrekenpagina sturen. tekenMandje() zet de klasse. */
  .mandje.is-leeg{display:none}
  main.winkel{padding-bottom:104px}
  body:not(.heeft-mandje) main.winkel{padding-bottom:32px}
}

/* 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:#463A26}
: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 #EBDCB6;
  padding:12px 16px;text-align:center;
  font-size:.875rem;color:var(--accent-tekst);   /* 6,08:1 op --geel-zacht */
}
.melding.is-open{background:var(--ok-zacht);border-bottom-color:#BFE3C8;color:#186B31}
:root[data-theme="dark"] .melding{
  background:#241B0F;border-bottom-color:#40331D;color:#E4B863;   /* 9,15:1 */
}
:root[data-theme="dark"] .melding.is-open{background:#14241A;border-bottom-color:#2A4A33;color:#7FD494}

/* ---------- Het logo op een witte ondergrond ----------
   Het merk van Amanos is een gouden sierletter A met "manos" in diep bruin
   (#3C1702 tot #805F1F, nagemeten in amanos-review/meet-merkkleur.ps1). Die
   letters zijn donker, en het template zet het logo op de donkere kopbalk, op
   de donkere voettekst en op --paneel — dat laatste is in donker ook bijna
   zwart. Daar zou het woord "manos" verdwijnen. Vandaar overal een wit
   plaatje eronder, in beide thema's. De bronafbeelding heeft zelf al een
   witte ondergrond (79,7% van de beeldpunten is #FFFFFF), dus dit sluit
   naadloos aan.

   En de maat: het bronbestand is 465x320 met veel witruimte; bijgesneden op
   het omhullende vak van alles wat niet wit is (amanos-review/snij-beelden.ps1)
   houdt het 311x197 over, dus 1,58:1. Op 46px hoog is dat 73px breed, ruim
   binnen de 150px van het vakje. Op de 38px van het template werd "manos" te
   klein om te lezen; regel 8 staat het vergroten uitdrukkelijk toe en het
   staat in het verslag. */
.merk__logo{height:46px;background:#FFFFFF;border-radius:6px;padding:3px 6px}
@media (min-width:768px){ .merk__logo{height:52px} }
@media (max-width:520px){ .merk__logo{height:40px} }
.voet__merk img{background:#FFFFFF;border-radius:8px;padding:6px 10px}
.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}