/* ==========================================================================
   Johnny's Burger Co. Den Bosch, Monseigneur van Roosmalenplein 6.
   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 Johnny's-laag: het merkrood, het lichtere rood op de
   zwarte balken en de keuzegroepen.
   ========================================================================== */

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

:root{
  --bg:#F6F5F3;
  --paneel:#FFFFFF;
  --paneel-2:#F1EFEC;
  --lijn:#E5E2DD;
  --lijn-sterk:#CBC6BE;
  --tekst:#16161A;
  --tekst-2:#66646C;
  --merk:#E51919;              /* het rood van johnnys.nl; het logo is #E02227 */
  --merk-zacht:#FDECEC;
  --merk-op-zacht:#B31313;
  --geel:#FF3B30;              /* lichter rood: het accent op de zwarte balken */
  --geel-diep:#E51919;
  --op-geel:#FFFFFF;
  --inkt:#141414;              /* het zwart van het merk */
  --op-inkt:#FFFFFF;
  --knop:#E51919;
  --knop-hover:#C21414;
  --knop-tekst:#FFFFFF;
  --ok:#1E8E3E;
  --ok-zacht:#E9F5EC;
  --rood:#C4362B;
  --rood-zacht:#FCEEEC;
  --geel-zacht:#FFEDEC;
  --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:"Open Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}

:root[data-theme="dark"]{
  --bg:#141317;
  --paneel:#1D1C22;
  --paneel-2:#26252C;
  --lijn:#33313A;
  --lijn-sterk:#4A4854;
  --tekst:#F0EEF2;
  --tekst-2:#A29EAB;
  --merk:#FF5A50;
  --merk-zacht:#2B1614;
  --merk-op-zacht:#FF8A82;
  --geel:#FF3B30;
  --geel-diep:#E51919;
  --op-geel:#FFFFFF;
  --inkt:#0D0D0D;
  --op-inkt:#FFFFFF;
  --knop:#E51919;
  --knop-hover:#FF3B30;
  --ok:#4CC26A;
  --ok-zacht:#16261B;
  --rood:#E2685C;
  --rood-zacht:#2A1C1A;
  --geel-zacht:#2B1614;
  --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)}
.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;
  background:var(--merk-zacht);color:var(--merk);
  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:#E8A33D;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}
}

/* ==========================================================================
   Johnny's-laag: alles wat deze vestiging onderscheidt van het kale template.
   Het merk is rood (#D3112B) met geel (#FFC222) en een bijna zwarte 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-diep);color:var(--op-geel)}
.kop .telknop:hover{background:var(--knop-hover)}
.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-diep);color:var(--op-geel);border-bottom:0;font-weight:500}
.topbalk.is-open{background:var(--geel-diep)}

/* ---------- 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%);
}
.hero__pil{background:var(--merk)}
.hero__pil.is-open{background:var(--ok)}
.hero .knop{background:var(--geel-diep);color:var(--op-geel)}
.hero .knop:hover{background:var(--knop-hover)}

/* ---------- 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-diep);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 ----------
   Johnny's 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 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(--geel-diep)}
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(--geel-diep)}
.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}
@media (min-width:768px){
  .pagina-winkel .voet{margin-right:400px}
}

/* 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}
}
@media (max-width:767px){
  .mandje{
    inset:auto 16px 16px 16px;border-radius:16px;overflow:hidden;
    border:1px solid var(--lijn);
    transform:translateY(calc(100% - 72px));
  }
  .mandje__greep{
    display:flex;height:72px;border-bottom:0;border-radius:16px;
    padding:0 18px;position:static;
  }
  .mandje.is-open{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:var(--geel-diep)}
.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)}

.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 #F5D98A;
  padding:12px 16px;text-align:center;
  font-size:.875rem;color:#8A5A0B;
}
.melding.is-open{background:var(--ok-zacht);border-bottom-color:#BFE3C8;color:#186B31}
:root[data-theme="dark"] .melding{
  background:#2A2416;border-bottom-color:#4A3F1F;color:#F0C558;
}
:root[data-theme="dark"] .melding.is-open{background:#16261B;border-bottom-color:#2A4A33;color:#7FD494}
.merk__logo{height:38px}
@media (min-width:768px){ .merk__logo{height:44px} }

/* 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);
}