:root{--ink:#0e0a06;--paper:#fdf8f2;--cream:#f5ede0;--red:#8b1a1a;--red2:#c0392b;--gold:#c9952a;--gold2:#e8c06a;--muted:#7a6a58;--line:#e4d9cc;--radius:14px;--shadow:0 8px 32px rgba(14,10,6,.12);--font-head:'Playfair Display',Georgia,serif;--font-body:'DM Sans',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden;overflow-x:clip}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.5;min-height:100vh;width:100%;max-width:100%}
a{color:inherit;text-decoration:none}
nav{position:sticky;top:0;z-index:100;background:rgba(14,10,6,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(201,149,42,.25)}
.nav-inner{max-width:1440px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:22px;font-weight:900;color:#fff;letter-spacing:-.3px;white-space:nowrap}
.nav-brand .dot{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--gold));flex-shrink:0}
.nav-links{display:flex;gap:20px;align-items:center;list-style:none}
.nav-links a{color:rgba(255,255,255,.72);font-weight:500;font-size:14px;transition:color .2s}
.nav-links a:hover{color:var(--gold2)}
.nav-right{display:flex;gap:8px;align-items:center}
.nav-left{display:flex;gap:12px;align-items:center;flex-shrink:0}
.nav-brand{text-decoration:none}
.app-nav-wrap{position:relative;flex-shrink:0}
.app-nav-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:9px;border:1px solid rgba(232,192,106,.55);background:rgba(201,149,42,.18);color:#fff;font-family:var(--font-body);font-size:13px;font-weight:900;cursor:pointer;line-height:1;transition:background .15s,border-color .15s}
.app-nav-toggle:hover,.app-nav-toggle[aria-expanded="true"]{background:rgba(201,149,42,.18);border-color:var(--gold)}
.app-nav-menu{position:absolute;top:calc(100% + 8px);left:0;width:min(238px,calc(100vw - 24px));max-height:min(62vh,440px);overflow:auto;background:rgba(20,14,8,.98);backdrop-filter:blur(10px);border:1px solid rgba(201,149,42,.28);border-radius:12px;padding:34px 6px 6px;box-shadow:0 16px 38px rgba(0,0,0,.42);display:none;z-index:260}
.app-nav-menu.open{display:block}
.app-nav-close{position:absolute;right:7px;top:6px;width:27px;height:27px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:19px;line-height:1;cursor:pointer}
.app-nav-menu-title{display:none;padding:5px 8px 8px;color:rgba(255,255,255,.55);font-family:var(--font-body);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.app-nav-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:none;border-radius:8px;background:transparent;color:rgba(255,255,255,.86);font-family:var(--font-body);font-size:13px;font-weight:800;text-align:left;cursor:pointer;transition:background .12s,color .12s}
.app-nav-item:hover{background:rgba(201,149,42,.18);color:#fff}
.app-nav-item.on{background:var(--gold);color:var(--ink)}
.app-nav-sep{height:1px;background:rgba(255,255,255,.12);margin:6px 4px}
.app-nav-title{padding:7px 12px 5px;color:rgba(255,255,255,.48);font-size:10.5px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}
.app-nav-cats-toggle .app-nav-caret{font-size:11px;transition:transform .15s}
.app-nav-cats-toggle[aria-expanded="true"] .app-nav-caret{transform:rotate(180deg)}
.app-nav-cats,.app-nav-lang{display:none;padding:2px 0 4px 10px;border-left:1px solid rgba(201,149,42,.28);margin-left:12px}
.app-nav-cats.open,.app-nav-lang.open{display:block}
.lang-switcher{position:relative;margin-right:4px}
.lang-toggle{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font-family:var(--font-body);font-size:12px;font-weight:800;cursor:pointer;transition:all .15s;line-height:1}
.lang-toggle:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.28)}
.lang-toggle[aria-expanded="true"]{background:rgba(201,149,42,.18);border-color:var(--gold)}
.lang-caret{font-size:10px;opacity:.7;transition:transform .15s}
.lang-toggle[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:rgba(20,14,8,.98);backdrop-filter:blur(10px);border:1px solid rgba(201,149,42,.28);border-radius:10px;padding:5px;box-shadow:0 12px 32px rgba(0,0,0,.4);display:none;flex-direction:column;gap:1px;z-index:250}
.lang-menu.open{display:flex}
.lang-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;border:none;background:transparent;color:rgba(255,255,255,.82);font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;text-align:left;transition:background .12s,color .12s;width:100%}
.lang-opt:hover{background:rgba(201,149,42,.18);color:#fff}
.lang-opt.on{background:var(--gold);color:var(--ink)}
.lang-opt-flag{font-size:15px;line-height:1}
.nav-lang-flags{display:flex;align-items:center;gap:4px}
.nav-lang-flag{width:34px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.07);font-size:17px;cursor:pointer}
.nav-lang-flag.on{border-color:var(--gold);background:rgba(201,149,42,.24);box-shadow:inset 0 0 0 1px var(--gold)}
.app-nav-menu .nav-lang-flags{padding:9px 10px;justify-content:flex-start;gap:8px;margin:2px 4px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(255,255,255,.035)}
.app-nav-menu .nav-lang-flag{width:40px;height:38px;flex:0 0 40px;font-size:20px;border-color:rgba(255,255,255,.27);background:rgba(255,255,255,.09)}
@media(max-width:560px){.nav-lang-flags{gap:2px}.nav-lang-flag{width:29px;height:30px;padding:0;font-size:15px}}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;font-family:var(--font-body);font-weight:700;font-size:13px;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn-ghost{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--ink)}
.btn-red{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff}
.cart-badge{position:absolute;top:-5px;right:-5px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:900;width:18px;height:18px;border-radius:50%;display:none;align-items:center;justify-content:center}
.hero{min-height:90vh;background:#0e0a06;position:relative;overflow:hidden;display:flex;align-items:center;padding:80px 20px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(139,26,26,.55),transparent 60%),radial-gradient(ellipse 60% 80% at 20% 70%,rgba(201,149,42,.18),transparent 55%),radial-gradient(ellipse 100% 100% at 50% 50%,rgba(14,10,6,1),rgba(30,15,10,1))}
.hero-pattern{position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.6) 39px,rgba(255,255,255,.6) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.6) 39px,rgba(255,255,255,.6) 40px)}
/* grote sfeerfoto achter de hero (per restaurant gezet via applyHeroMedia) */
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .7s ease}
.hero-photo.on{opacity:.92}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(14,10,6,.80) 0%,rgba(14,10,6,.52) 38%,rgba(14,10,6,.12) 74%,rgba(14,10,6,.20) 100%),linear-gradient(0deg,rgba(14,10,6,.55),transparent 46%)}
.hero-content{position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%}
/* kleine keuken-/personeelsvideo onderaan de hero-tekst */
.hero-video{margin-top:30px;width:188px;border-radius:16px;overflow:hidden;position:relative;border:1px solid rgba(201,149,42,.45);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.hero-video video{display:block;width:100%;height:124px;object-fit:cover}
.hero-video .vlabel{position:absolute;left:0;right:0;bottom:0;padding:7px 10px;font-size:10.5px;font-weight:700;letter-spacing:.3px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent)}
@media(max-width:600px){.hero-video{width:100%;max-width:340px;margin-top:22px}.hero-video video{height:172px}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(201,149,42,.15);border:1px solid rgba(201,149,42,.3);color:var(--gold2);font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;border-radius:999px;padding:6px 14px;margin-bottom:24px}
.hero h1{font-family:var(--font-head);font-size:clamp(40px,5.5vw,78px);color:#fff;line-height:1.0;letter-spacing:-1px;margin-bottom:8px;white-space:nowrap;max-width:none}
.hero h1 em{font-style:italic;background:linear-gradient(135deg,var(--gold),var(--gold2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{color:rgba(255,255,255,.65);font-size:18px;font-weight:400;max-width:480px;margin-bottom:36px;line-height:1.6}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:32px;margin-top:56px;padding-top:32px;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.stat-val{font-family:var(--font-head);font-size:32px;font-weight:900;color:var(--gold2)}
.stat-lab{font-size:12px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.6px}
.section{padding:72px 20px;max-width:1280px;margin:0 auto}
.section-tag{display:inline-flex;align-items:center;gap:6px;background:var(--cream);border:1px solid var(--line);color:var(--red);font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;border-radius:999px;padding:5px 12px;margin-bottom:14px}
.section-title{font-family:var(--font-head);font-size:clamp(28px,4vw,48px);letter-spacing:-.5px;margin-bottom:8px}
.section-sub{color:var(--muted);font-size:15px;max-width:55ch}
.menu-wrap{padding:24px 0 48px;background:var(--cream)}
.menu-inner{max-width:1440px;margin:0 auto}
.menu-layout{display:grid;grid-template-columns:220px 1fr;gap:18px;margin-top:32px;align-items:start}
.sidebar{position:sticky;top:var(--menu-side-top,190px);max-height:calc(100vh - var(--menu-side-top,190px) - 12px);overflow-y:auto;overscroll-behavior:contain}
@media(min-width:1200px){
  .menu-layout{grid-template-columns:220px 1fr 320px}
}
@media(max-width:899px){
  .menu-layout{grid-template-columns:1fr}
  .sidebar{display:none}
  /* .mobile-bar tonen gebeurt nu via de @media(max-width:1199px)-regel bij de .mobile-bar-definitie
     (moet ná de basis display:none staan, anders wint die in de cascade) */
}
.sidebar-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.sidebar-card h3{font-family:var(--font-head);font-size:16px;margin-bottom:14px}
.filter-group{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.filter-group:first-of-type{border-top:none;padding-top:0;margin-top:0}
.filter-label{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .15s;user-select:none}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.chip.warn.on{background:rgba(139,26,26,.1);border-color:var(--red);color:var(--red)}
.search-input{width:100%;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;font-family:var(--font-body);font-size:14px;outline:none;transition:border-color .2s}
.search-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,149,42,.18)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.result-count{font-size:13px;font-weight:700;color:var(--muted)}
.sort-sel{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;color:var(--ink)}
.active-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.active-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:700;color:var(--muted)}
.active-pill b{color:var(--ink)}
/* sticky toolbar — 2 rijen */
.menu-toolbar{
  position:sticky;
  top:64px;                 /* exact onder nav (.nav-inner height:64px) zodat afstand constant blijft */
  z-index:80;
  background:var(--cream);
  border-top:1px solid var(--line);
  border-bottom:2px solid var(--line);
  padding:0 20px 6px;
  box-shadow:0 3px 10px rgba(14,10,6,.07);
}
.cat-count-bar{
  display:flex;
  align-items:center;
  gap:10px;
}
.toolbar-cats{
  display:flex;gap:0;overflow-x:auto;
  flex:1;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.toolbar-cats::-webkit-scrollbar{display:none}
.tcat{
  flex-shrink:0;
  padding:10px 16px;
  border:none;border-bottom:3px solid transparent;
  background:transparent;
  font-size:14px;font-weight:800;color:var(--muted);
  line-height:1.25;
  cursor:pointer;transition:all .15s;white-space:nowrap;
  font-family:var(--font-body);
}
.tcat:hover{color:var(--ink)}
.tcat.on{color:var(--red);border-bottom-color:var(--red);font-weight:800}
.toolbar-count{
  flex-shrink:0;white-space:nowrap;
  font-size:.8rem;font-weight:700;color:var(--muted);
  padding:0 4px;border-left:1px solid var(--line);padding-left:12px;
}
@media(max-width:640px){
  .menu-toolbar{padding:8px 12px}
  .cat-count-bar{padding:0 12px}
  .tcat{padding:9px 12px;font-size:.75rem}
  .toolbar-count{display:none}
}
/* --- Verticale categorieën (sidebar, desktop) --- */
.sidebar-cats{display:flex;flex-direction:column;gap:2px}
.sidebar-cats .tcat{
  width:100%;text-align:left;justify-content:flex-start;
  padding:11px 14px;
  border:none;border-left:3px solid transparent;border-bottom:none;
  border-radius:6px 0 0 6px;
  background:transparent;
  font-size:14px;font-weight:800;color:var(--muted);
  line-height:1.35;
  cursor:pointer;transition:all .15s;white-space:normal;
}
.sidebar-cats .tcat:hover{background:var(--cream);color:var(--ink)}
.sidebar-cats .tcat.on{
  color:var(--red);border-left-color:var(--red);
  background:rgba(139,26,26,.06);font-weight:800;
}
/* --- Horizontale filterbar (toolbar, desktop) — gecentreerd --- */
.toolbar-filters{display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;padding:6px 0 4px;flex:1;min-width:0;overflow:visible}
.toolbar-filters .filter-bar-group{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:center;min-width:0}
.toolbar-filters .filter-bar-label{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;line-height:1;max-width:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fffdf9;color:var(--ink);box-shadow:0 1px 5px rgba(14,10,6,.06)}
.toolbar-filters .filter-bar-group:first-of-type .filter-bar-label{border-color:rgba(201,149,42,.5);background:linear-gradient(135deg,#fffdf6,#fdf1d4);color:#8a6a12}
.toolbar-filters .filter-bar-group:last-of-type .filter-bar-label{border-color:rgba(192,57,43,.42);background:linear-gradient(135deg,#fff8f6,#fde9e3);color:var(--red)}
.toolbar-filters .chips{display:flex;flex-wrap:nowrap;gap:6px;justify-content:center;white-space:nowrap}
.toolbar-filters .filter-extra-chips{max-width:176px;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:thin}
/* Chromium 109 (Windows 7) kent scrollbar-width niet en toont een volle balk
   die in deze smalle chiprij hoogte opeet. -webkit-scrollbar werkt daar wél. */
.toolbar-filters .filter-extra-chips::-webkit-scrollbar{height:6px}
.toolbar-filters .filter-extra-chips::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:999px}
.toolbar-filters .filter-extra-chips::-webkit-scrollbar-track{background:transparent}
.toolbar-filters .quick-allergen-chips{justify-content:flex-start}
.toolbar-filters:has(#extraDietChips .chip) .quick-allergen-chip[data-priority="5"]{display:none}
.toolbar-filters:has(#extraDietChips .chip:nth-child(2)) .quick-allergen-chip[data-priority="4"]{display:none}
.toolbar-filters:has(#extraDietChips .chip:nth-child(3)) .quick-allergen-chip[data-priority="3"]{display:none}
.toolbar-filters .sort-sel{padding:4px 7px;font-size:11px}
.filter-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.filter-actions .allergy-mode{max-width:142px}
.toolbar-filters .reset-btn{padding:7px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:800;color:var(--muted);cursor:pointer;white-space:nowrap}
.toolbar-filters .reset-btn:hover{color:var(--red);border-color:var(--red)}
.menu-published-meta{font-size:12px;color:rgba(0,0,0,.62);margin-bottom:10px;text-align:right;font-weight:700}
/* Algemene, eenmalige melding dat foto's illustratief zijn (niet per foto). */
.menu-photo-note{font-size:12px;color:rgba(0,0,0,.64);margin:0 0 12px;display:flex;align-items:center;gap:6px;line-height:1.4}
.menu-photo-note::before{content:"\1F4F7";font-size:13px;opacity:.85}
/* Snelle allergeenchips vallen één voor één weg als de balk te krap wordt.
   Een chip die AAN staat blijft altijd zichtbaar, anders zou een via de
   dropdown gekozen allergeen onzichtbaar actief zijn. */
@media(max-width:1500px){.toolbar-filters .quick-allergen-chip[data-priority="5"]{display:none}}
@media(max-width:1330px){.toolbar-filters .quick-allergen-chip[data-priority="4"]{display:none}}
@media(max-width:1180px){.toolbar-filters .quick-allergen-chip[data-priority="3"]{display:none}}
.toolbar-filters .quick-allergen-chip.on{display:inline-flex!important}
/* --- Zoekbalk: zit nu IN de sticky toolbar → altijd zichtbaar, vaste positie --- */
.menu-search-row{padding:8px 0 2px;margin:0 auto;max-width:820px;width:100%}
.menu-smart-row{max-width:820px;margin:8px auto 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.smart-status{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(201,149,42,.28);background:linear-gradient(135deg,#fff,#fff8ea);border-radius:10px;color:var(--ink);font-size:13px;font-weight:800;line-height:1.3;box-shadow:0 2px 8px rgba(14,10,6,.05)}
.smart-status-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12);flex-shrink:0}
.smart-status.closed .smart-status-dot{background:#d97706;box-shadow:0 0 0 4px rgba(217,119,6,.14)}
.surprise-btn{flex-shrink:0;border:1px solid rgba(139,26,26,.18);background:linear-gradient(135deg,var(--ink),#3a2414);color:#fff;border-radius:10px;padding:10px 14px;font-family:var(--font-body);font-size:13px;font-weight:900;cursor:pointer;box-shadow:0 5px 14px rgba(14,10,6,.14);transition:transform .15s,box-shadow .15s}
.surprise-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(14,10,6,.2)}
.mood-row{max-width:820px;margin:8px auto 0;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.mood-row::-webkit-scrollbar{display:none}
.mood-chip{flex-shrink:0;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:7px 11px;font-family:var(--font-body);font-size:12px;font-weight:900;cursor:pointer}
.mood-chip:hover,.mood-chip.on{border-color:var(--gold);background:#fff8ea;color:var(--ink)}
.browse-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:260;background:transparent;pointer-events:none}
.browse-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold2));box-shadow:0 0 10px rgba(201,149,42,.5);transition:width .12s linear}
.cart-burst{position:fixed;width:7px;height:7px;border-radius:50%;background:var(--gold2);z-index:9999;pointer-events:none;animation:cartBurst .65s ease-out forwards}
@keyframes cartBurst{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.menu-card.wow-pick{animation:wowPick 1.05s ease;border-color:var(--gold2);box-shadow:0 0 0 4px rgba(201,149,42,.2),0 10px 24px rgba(14,10,6,.16)}
@keyframes wowPick{0%{transform:scale(.98)}35%{transform:scale(1.018)}100%{transform:none}}
/* #4 slimme mand-voortgangsbalk (zelfhelend: bezorgdrempel indien geconfigureerd, anders smaak-meter) */
.cart-progress{padding:12px 14px 10px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#fff,#fffaf0)}
.cart-progress-label{font-size:12px;font-weight:800;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.cart-progress-track{height:7px;border-radius:999px;background:var(--cream);overflow:hidden}
.cart-progress-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .55s cubic-bezier(.4,0,.2,1)}
.cart-progress.done .cart-progress-fill{background:linear-gradient(90deg,#16a34a,#4ade80)}
/* #5 feest-moment bij bestelling: confetti + ETA-shimmer */
.confetti-pc{position:fixed;top:-14px;width:9px;height:14px;border-radius:2px;z-index:100000;pointer-events:none;opacity:.95;animation:confettiFall var(--d,2.4s) cubic-bezier(.3,.5,.5,1) forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotateZ(0);opacity:1}100%{transform:translateY(var(--fall,90vh)) rotateZ(var(--rot,540deg));opacity:0}}
.modal-success .success-icon{display:inline-block;animation:successPop .6s cubic-bezier(.2,1.3,.5,1)}
@keyframes successPop{0%{transform:scale(0) rotate(-12deg)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.cook-line{margin:10px auto 2px;max-width:220px;height:6px;border-radius:999px;background:var(--cream);overflow:hidden;position:relative}
.cook-line::after{content:"";position:absolute;left:-42%;top:0;height:100%;width:42%;background:linear-gradient(90deg,transparent,var(--gold2),transparent);animation:cookShimmer 1.6s linear infinite}
@keyframes cookShimmer{to{left:120%}}
@media(prefers-reduced-motion:reduce){.confetti-pc{display:none}.cook-line::after{animation:none}}
/* Compacte order-toolbar: alles op één horizontale lijn om hoogte te besparen.
   Eén rij: zoekbalk + dieet + allergenen (+ status rechts). */
@media(min-width:900px){
  .menu-wrap{padding-top:0}
  /* Eén horizontale lijn over de volle breedte (categorie → cart):
     zoekbalk + dieet + allergenen naast elkaar; status rechts.
     Bespaart een toolbar-rij, dus meer ruimte voor het menu eronder. */
  .menu-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 16px;
    border-top:0;
    border-bottom:1px solid var(--line);
    padding:8px max(20px, calc((100vw - 1440px) / 2 + 20px));
  }
  .menu-search-row{order:1;flex:0 1 300px;min-width:210px;max-width:340px;margin:0;padding:0;width:auto}
  .cat-count-bar{order:2;flex:1 1 360px;min-width:0;width:auto;gap:8px;overflow:visible}
  .menu-smart-row{order:3;flex:0 1 auto;margin:0 0 0 auto;max-width:none;display:flex;align-items:center;gap:10px}
  .mood-row{order:4;flex:1 1 100%;max-width:none;margin:0;padding-top:2px;gap:6px}
  .toolbar-filters{justify-content:flex-start;align-items:center;gap:6px 20px;padding:0;min-width:0;width:100%;flex-wrap:wrap;overflow:visible}
  .toolbar-filters .filter-bar-group{justify-content:flex-start;gap:7px;flex:0 1 auto;width:auto;flex-wrap:wrap}
  .toolbar-filters .filter-bar-group + .filter-bar-group{margin-left:auto;padding-left:24px;border-left:1px solid var(--line)}
  .toolbar-filters .filter-bar-label{white-space:nowrap;max-width:none}
  .toolbar-filters .chips{gap:6px;justify-content:flex-start;flex-wrap:wrap}
  .toolbar-filters .filter-extra-chips{max-width:none;overflow:visible}
  .filter-actions{margin-left:8px}
  .chip{padding:5px 10px;min-height:30px;display:inline-flex;align-items:center}
  .search-input{padding:9px 14px;border-radius:10px}
  .smart-status{padding:8px 11px;line-height:1.25}
  .surprise-btn{padding:9px 14px;min-height:36px}
  .mood-chip{padding:5px 9px;min-height:29px}
  .toolbar-filters .sort-sel{padding:3px 7px;min-height:26px;border-radius:8px;font-size:11px}
  .toolbar-filters .reset-btn{padding:6px 12px;min-height:30px}
}
@media(min-width:1200px){
  .menu-layout{grid-template-columns:220px minmax(0,1fr) 320px;gap:18px}
  .menu-inner{padding:16px 20px 0!important}
  .sidebar-card,.cart-panel{border-radius:10px}
}
@media(min-width:1600px){
  .menu-layout{grid-template-columns:220px minmax(0,1fr) 320px;gap:20px}
  .menu-grid{gap:14px}
}
@media(max-width:899px){
  .menu-toolbar{display:block;padding:6px 8px 8px}
  .menu-search-row{padding:6px 0 2px;max-width:none}
  .menu-smart-row{margin:6px 0 0;max-width:none}
  .mood-row{margin:6px 0 0;max-width:none}
}
/* Urgentie-accent op de bestaande smart-status balk */
.smart-status.urgent{border-color:rgba(192,57,43,.45);background:linear-gradient(135deg,#fff,#fdeee9);color:var(--red)}
.smart-status.urgent .smart-status-dot{background:#c0392b;animation:livePulseB 1.6s ease-out infinite}
@keyframes livePulseB{0%{box-shadow:0 0 0 0 rgba(192,57,43,.4)}70%{box-shadow:0 0 0 8px rgba(192,57,43,0)}100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}}
@media(max-width:640px){
  .menu-smart-row{align-items:stretch}
  .smart-status{font-size:12px;padding:8px 10px}
  .surprise-btn{padding:9px 11px;font-size:12px}
}
/* --- Betaalmethode-knoppen --- */
.pay-btn{position:relative;padding:10px 34px 10px 10px;border:2px solid #ccc;background:#fff;color:#333;font-weight:800;border-radius:10px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;font-family:var(--font-body)}
.pay-btn:hover{border-color:var(--gold);color:var(--ink)}
.pay-btn.on{border-color:var(--gold2);background:var(--gold2);color:#000}
.payment-choice-hint{display:none;position:relative;margin-top:9px;padding:9px 11px;border-radius:9px;background:#fff3cd;border:1px solid #d6a91f;color:#6b4e00;box-shadow:0 7px 18px rgba(76,55,0,.16);font-size:12px;font-weight:800;text-align:center}
.payment-choice-hint.show{display:block}
.payment-choice-hint::before{content:'';position:absolute;top:-6px;left:50%;width:10px;height:10px;background:#fff3cd;border-left:1px solid #d6a91f;border-top:1px solid #d6a91f;transform:translateX(-50%) rotate(45deg)}
.cash-delivery-note{display:none;margin-top:7px;padding:8px 10px;border-radius:8px;background:#eef6ff;border:1px solid #91bde8;color:#174b7a;font-size:11.5px;font-weight:800;text-align:center}
.cash-delivery-note.show{display:block}
.choice-check{position:absolute;right:10px;top:50%;width:17px;height:17px;border:2px solid currentColor;border-radius:4px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;background:rgba(255,255,255,.75)}
.choice-check::after{content:'✓';opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.on>.choice-check::after{opacity:1;transform:scale(1)}
#checkoutForm.checkout-service-step>*:not(#checkoutServiceField):not(#checkoutServiceNext){display:none!important}
#checkoutForm.checkout-service-step #checkoutServiceField{min-height:260px;display:flex;flex-direction:column;justify-content:center;margin:0}
#checkoutForm.checkout-service-step #serviceChoice{width:100%}
#checkoutServiceNext{display:none}
#checkoutForm.checkout-service-step #checkoutServiceNext{display:block}
#checkoutForm.checkout-details-step>#checkoutServiceField{display:none!important}
/* Toon verticale cats in sidebar + horizontale filters in toolbar op desktop */
@media(min-width:900px){
  .toolbar-cats{display:none}
}
/* Verberg horizontale filters op mobiel (drawer is daar de plek) */
@media(max-width:899px){
  .toolbar-filters{display:none}
}
.cat-tab{white-space:nowrap;padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .15s}
.cat-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-header{
  /* Blijft exact tegen de onderkant van de sticky filterbalk plakken. De top komt uit
     --menu-cat-top (gemeten in _syncMenuSideTop), NIET uit een vaste 104px: de balk is
     1 of 2 rijen hoog afhankelijk van scherm/taal/filters. Met de vaste waarde ontstond
     er een strookje tussen balk en kop waar de gerechten doorheen schoven — dat zag
     eruit als een gat in de pagina. De -4px laat de kop nét onder de balk (z-index 80)
     wegschuiven, zodat afrondingsverschillen nooit een randje kunnen tonen. */
  position:sticky;top:calc(var(--menu-cat-top,104px) - 4px);z-index:5;
  display:flex;align-items:center;gap:10px;
  margin:0 0 12px;padding:14px 0 8px;
  background:var(--cream);
}
.cat-header .cat-emoji{font-size:22px;flex-shrink:0}
.cat-header h3{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--ink);white-space:nowrap}
.cat-header .cat-count{font-size:11px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 8px;flex-shrink:0}
.cat-divider{flex:1;height:2px;background:linear-gradient(to right,var(--gold2),transparent);border-radius:1px}
.cat-section{scroll-margin-top:140px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.cat-section:last-child{border-bottom:none}
.cat-section + .cat-section{margin-top:6px}
html{scroll-behavior:smooth}
/* Desktop: laat de pagina zelf doorlopen tot footer/reservatie.
   De eerdere interne scrollbar op .menu-main stopte bij de laatste items en voelde alsof de pagina daar eindigde. */
@media(min-width:900px){
  .menu-main{
    max-height:none;
    overflow:visible;
    overscroll-behavior:auto;
    padding-right:8px;
    scroll-behavior:smooth;
  }
  .cat-section{scroll-margin-top:140px}
  .cat-header{top:calc(var(--menu-cat-top,104px) - 4px)}
}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* Blok binnen een drankcategorie (aperitieven / bieren / wijnen / ...): kopje met lijn. */
.grp-sep{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:10px 0 -2px}
.grp-sep.first{margin-top:0}
.grp-sep span{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.grp-sep::before{content:"";width:18px;height:2px;border-radius:1px;background:var(--gold2);flex:0 0 auto}
.grp-sep::after{content:"";flex:1;height:1px;background:var(--line)}
@media(max-width:599px){.grp-sep span{font-size:12px}}
@media(max-width:899px){.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.menu-grid{grid-template-columns:1fr}}
@media(max-width:599px){
  /* Lange categorienamen (o.a. Boutersem) mogen de mobiele pagina niet breder
     trekken dan de viewport. De header blijft leesbaar en breekt indien nodig. */
  .cat-header{min-width:0;max-width:100%}
  .cat-header h3{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.15}
  .cat-divider{min-width:0}
}
.menu-card{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 2px 6px rgba(14,10,6,.05);
  display:grid;grid-template-columns:172px minmax(0,1fr);
  grid-template-areas:"photo body" "photo bottom";align-items:stretch;
  gap:16px;padding:14px;min-height:162px;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  cursor:pointer;
}
.menu-card-photo{grid-area:photo;width:100%;height:134px;align-self:center;border-radius:8px;background-color:#f6ead8;background-size:cover;background-position:center;background-repeat:no-repeat;flex-shrink:0;cursor:zoom-in}
.menu-card-emoji{grid-area:photo;width:100%;height:134px;border-radius:8px;background:linear-gradient(135deg,#fde8cb,#f5d5a8);display:flex;align-items:center;justify-content:center;font-size:42px;flex-shrink:0;cursor:zoom-in}
/* Item-gallerij (foto vergroten + vegen tussen gerechten + Toevoegen). */
.photo-lightbox{position:fixed;inset:0;background:rgba(10,8,6,.94);display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:99999;padding:10px;overscroll-behavior:contain;backdrop-filter:blur(3px)}
.photo-lightbox.show{display:flex}
.photo-lightbox-stage{display:flex;align-items:center;justify-content:center;max-width:100%;overflow:visible}
/* Foto zo groot mogelijk: breedte/hoogte worden in JS op de pasvorm van het scherm gezet
   (zelfde kader voor items zónder foto). Pinch / dubbel-vinger = zoomen, vegen = ander gerecht. */
.lb-media{border-radius:14px;background:#15100a center/contain no-repeat;box-shadow:0 24px 70px rgba(0,0,0,.55);user-select:none;-webkit-user-drag:none;touch-action:none;transform-origin:center center;transition:transform .14s ease-out;will-change:transform;cursor:grab}
.lb-media.is-emoji{background:linear-gradient(135deg,#fde8cb,#f5d5a8);display:flex;align-items:center;justify-content:center;font-size:clamp(72px,20vw,140px)}
.photo-lightbox.zoomed .lb-media{cursor:grabbing;transition:none}
.photo-lightbox-cap{position:relative;z-index:3;color:#fff;font-size:18px;font-weight:800;text-align:center;max-width:min(720px,92vw);letter-spacing:.2px}
.photo-lightbox-desc{position:relative;z-index:3;color:rgba(255,255,255,.82);font-size:14px;font-weight:500;text-align:center;max-width:min(640px,92vw);line-height:1.5;max-height:16vh;overflow:auto}
.photo-lightbox-desc:empty{display:none}
.lb-actions{display:flex;align-items:center;gap:14px;margin-top:2px}
.lb-price{color:#fff;font-weight:900;font-size:18px}
.lb-add{padding:12px 26px;border-radius:999px;border:none;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-family:var(--font-body);font-weight:800;font-size:15px;cursor:pointer;transition:transform .1s,box-shadow .15s}
.lb-add:active{transform:scale(.95)}
.lb-add:disabled{opacity:.6;cursor:default}
.lb-add.in-cart{background:linear-gradient(135deg,#16794a,#1f9d5f)}
.lb-cart{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);padding:8px 16px;border-radius:999px;cursor:pointer}
.lb-cart.empty{display:none}
.lb-cart .lb-cart-total{color:var(--gold2)}
.photo-lightbox-close{position:absolute;top:14px;right:18px;z-index:4;width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;line-height:1;background:rgba(255,255,255,.12);border:none;border-radius:50%;cursor:pointer;transition:background .15s}
.photo-lightbox-close:hover{background:rgba(255,255,255,.26)}
/* Vorig/volgend gerecht — kleine ronde pijlknoppen links/rechts */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:400;line-height:1;padding-bottom:4px;background:rgba(255,255,255,.14);border:none;border-radius:50%;cursor:pointer;transition:background .15s,opacity .15s;-webkit-tap-highlight-color:transparent}
.lb-nav:hover{background:rgba(255,255,255,.28)}
.lb-prev{left:14px}
.lb-next{right:14px}
.lb-nav[disabled]{opacity:0;pointer-events:none}
@media(max-width:600px){.lb-nav{width:40px;height:40px;font-size:26px;background:rgba(255,255,255,.18)}.lb-prev{left:6px}.lb-next{right:6px}}
.menu-card:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(14,10,6,.1);
  border-color:rgba(139,26,26,.2);
}
.menu-card-body{
  grid-area:body;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;min-width:0;
}
.menu-card h4{
  font-family:var(--font-body);font-size:18px;font-weight:900;
  letter-spacing:0;line-height:1.25;color:var(--ink);
  white-space:normal;overflow-wrap:break-word;word-break:normal;
}
.menu-card h4 .item-name-tail{white-space:nowrap}
.card-emoji{font-size:22px;flex-shrink:0}
.menu-card-desc{font-size:14px;font-weight:600;color:var(--muted);line-height:1.4;
  white-space:normal;overflow-wrap:break-word;word-break:normal;}
.menu-tags{display:flex;flex-wrap:wrap;gap:5px}
.menu-tag{padding:4px 7px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid var(--line);color:var(--muted);background:#fff}
.menu-tag.halal{border-color:rgba(34,139,34,.3);color:#166534;background:rgba(34,139,34,.06)}
.menu-tag.vegan{border-color:rgba(22,163,74,.3);color:#166534;background:rgba(22,163,74,.06)}
.menu-tag.veggie{border-color:rgba(22,163,74,.3);color:#166534;background:rgba(22,163,74,.06)}
.menu-tag.spicy{border-color:rgba(185,28,28,.25);color:var(--red);background:rgba(185,28,28,.05)}
.menu-tag.conflict{border-color:rgba(185,28,28,.3);color:var(--red);background:rgba(185,28,28,.07)}
.menu-tag.safe{border-color:rgba(22,163,74,.3);color:#166534;background:rgba(22,163,74,.06)}
/* "Kan bevatten" = typisch recept, niet door de zaak bevestigd. Oranje, nooit groen. */
.menu-tag.maybe{border-color:rgba(217,119,6,.35);color:#b45309;background:rgba(217,119,6,.08)}
.menu-tag.autosafe{border-color:rgba(22,163,74,.22);color:#3f6212;background:rgba(22,163,74,.04);font-weight:700}
.allergy-note{flex-basis:100%;font-size:11.5px;font-weight:700;color:#b45309;background:rgba(217,119,6,.08);
  border:1px solid rgba(217,119,6,.25);border-radius:8px;padding:5px 9px;margin-top:5px;line-height:1.35}
.menu-bottom{grid-area:bottom;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.menu-price-action{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;min-width:0}
.menu-price{font-family:var(--font-body);font-size:19px;font-weight:900;white-space:nowrap;text-align:right;color:var(--ink)}
.menu-price small{display:block;font-family:var(--font-body);font-size:9px;font-weight:700;color:var(--muted);text-align:right}
.qty-row{display:flex;align-items:center;gap:5px}
.qty-btn{width:31px;height:31px;border-radius:7px;border:1px solid var(--line);background:#fff;font-weight:900;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qty-btn:hover{background:var(--cream)}
/* Staat er nog maar één van, dan wordt de min-knop een verwijderknop: een verkeerd
   aangetikt gerecht gaat zo met dezelfde tik weg als waarmee je afbouwt. */
.qty-btn.del{border-color:rgba(139,26,26,.35);color:var(--red);font-size:14px}
.qty-btn.del:hover{background:rgba(139,26,26,.08)}
.qty-num{font-weight:800;font-size:15px;min-width:20px;text-align:center}
.add-btn{width:31px;height:31px;padding:0;border-radius:50%;border:none;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-weight:900;font-size:20px;line-height:1;cursor:pointer;white-space:nowrap;min-height:31px;align-items:center;justify-content:center;transition:box-shadow .15s,transform .12s}
.add-btn:hover{box-shadow:0 5px 14px rgba(139,26,26,.32);transform:translateY(-1px)}
.no-results{grid-column:1/-1;padding:32px;text-align:center;background:var(--cream);border-radius:var(--radius);color:var(--muted);font-weight:700}
/* Toevoegen-knop ALTIJD zichtbaar (geen hover-reveal meer). De vorige hover-reveal liet de
   knop pas bij hover verschijnen, waardoor de kaart op dat moment hoger werd en de hele
   grid-rij verschoof → "alles beweegt" bij muisbeweging. Altijd tonen = stabiele hoogte. */
.qty-row{display:none!important}
.add-btn{display:inline-flex!important;opacity:1;visibility:visible;pointer-events:auto}
/* Mobiel/tablet (<=1199px): NOOIT op hover leunen. Sommige touch-toestellen melden
   valselijk "hover", waardoor de Toevoegen-/+knop onzichtbaar bleef → klant kon niets
   toevoegen. Hier altijd tonen, los van hover-capaciteit. */
@media(max-width:1199px){
  .menu-card .add-btn{opacity:1!important;visibility:visible!important;pointer-events:auto!important;animation:none!important}
}
@media(max-width:599px){
  .menu-card{grid-template-columns:132px minmax(0,1fr);grid-template-areas:"photo body" "photo bottom";align-items:stretch}
  .menu-card-photo,.menu-card-emoji{grid-area:photo;width:100%;height:132px;min-height:132px}
  .menu-card-body{grid-area:body;justify-content:flex-start}
  .menu-bottom{grid-area:bottom;align-items:flex-start;justify-content:flex-end}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.menu-card:hover{box-shadow:0 6px 18px rgba(14,10,6,.12);border-color:rgba(139,26,26,.18)}
.menu-card .qty-row.in-cart{display:flex!important}
/* Cart Panel — sticky sidebar op desktop, slide-in drawer op mobiel */
.cart-panel{display:none;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
@media(min-width:1200px){
  /* Compact wanneer leeg, groeit mee met gekozen items. Alleen wanneer de volledige
     cart niet meer in het scherm past, krimpt het itemgedeelte en krijgt dat scroll. */
  .cart-panel{display:flex;position:sticky;top:var(--menu-side-top,190px);height:auto;max-height:calc(100vh - var(--menu-side-top,190px) - 8px)}
}
@media(max-width:1199px){
  .cart-panel.open{display:flex;position:fixed;top:0;right:0;bottom:0;height:100dvh;width:min(380px,100vw);z-index:201;border-radius:0;border:none;box-shadow:-20px 0 60px rgba(14,10,6,.25);max-height:none;animation:cartSlideIn .28s ease-out}
  .cart-panel.open .cart-items{flex:1 1 auto}
}
@keyframes cartSlideIn{from{transform:translateX(100%)}to{transform:none}}
.cart-backdrop{display:none;position:fixed;inset:0;background:rgba(14,10,6,.45);z-index:200;backdrop-filter:blur(2px)}
.cart-backdrop.open{display:block;animation:fadeIn .2s ease-out}
@media(min-width:1200px){.cart-backdrop,.cart-backdrop.open{display:none}}

.cart-head{padding:10px 12px;background:linear-gradient(135deg,var(--ink),#2a1f14);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px}
.cart-head h3{font-family:var(--font-head);font-size:14px;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px;line-height:1.15}
.cart-back{width:30px;height:30px;flex:0 0 30px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
.cart-back:hover{background:rgba(255,255,255,.14)}
.cart-back:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.cart-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0}
.cart-head-orders{display:none;padding:7px 10px;font-size:11.5px;max-width:132px;overflow:hidden;text-overflow:ellipsis}
.cart-head-count{background:var(--gold);color:var(--ink);font-size:10.5px;font-weight:900;padding:2px 9px;border-radius:999px;min-width:22px;text-align:center}
.cart-clear{display:none;position:relative;min-height:32px;padding:6px 10px;border-radius:8px;border:1px solid #d7a39b;background:#fff0ee;color:#8b1a1a;font-family:var(--font-body);font-size:11px;font-weight:900;cursor:pointer;align-items:center;justify-content:center;gap:5px;line-height:1;flex-shrink:0;white-space:nowrap}
.cart-clear.show{display:flex}
.cart-clear:hover{background:#8b1a1a;color:#fff;border-color:#8b1a1a}
.cart-close{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.cart-close:hover{background:rgba(255,255,255,.18)}
@media(min-width:1200px){.cart-close{display:none}}

.cart-svc{padding:11px 14px;border-bottom:1px solid var(--line);background:#fff}
.cart-auth{padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;font-size:12px}
.cart-auth.signed{background:linear-gradient(135deg,#fef9ef,#faf3e0)}
.cart-auth-text{flex:1;min-width:140px;color:var(--muted);font-weight:600;line-height:1.35;font-size:11.5px}
.cart-auth-text b{color:var(--ink);font-weight:800;display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.cart-auth-btn{padding:7px 12px;border-radius:8px;border:none;font-family:var(--font-body);font-size:12px;font-weight:800;cursor:pointer;background:var(--gold);color:var(--ink);transition:all .15s;white-space:nowrap;flex-shrink:0}
.cart-auth-btn:hover{background:var(--gold2)}
.service-toggle{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#faf7f2}
.service-btn{position:relative;flex:1;padding:10px 34px 10px 10px;text-align:center;font-size:12.5px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:background .15s,color .15s,box-shadow .15s}
.service-btn+.service-btn{border-left:1px solid var(--line)}
.service-btn:hover:not(.on):not(.closed){background:#f3ead9;color:var(--ink)}
.service-btn.on{background:var(--ink);color:#fff;box-shadow:inset 0 -2px 0 var(--gold)}
.service-btn.closed{opacity:.55}
.cart-svc .choice-check{right:6px;width:15px;height:15px;border-width:1.5px;font-size:10px}
.dpa-dine-hint{display:none;position:relative;margin-top:8px;padding:8px 10px;border:1px solid #e0b45c;border-radius:9px;background:#fff8e8;color:#704d0d;font-size:11px;font-weight:750;line-height:1.35}
.dpa-dine-hint.show{display:block}.dpa-dine-hint:before{content:"";position:absolute;top:-6px;left:15%;width:10px;height:10px;background:#fff8e8;border-left:1px solid #e0b45c;border-top:1px solid #e0b45c;transform:rotate(45deg)}
.delivery-delay-note{display:none;margin-top:9px;padding:10px 12px;border:1px solid #d8665d;border-radius:9px;background:#fff0ee;color:#8b1a1a;font-size:13px;font-weight:850;line-height:1.4;text-align:center;box-shadow:0 3px 10px rgba(139,26,26,.08)}
.delivery-delay-note.show{display:block}
.service-toggle.needs-choice{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,149,42,.16)}
/* "Mand leegmaken" vraagt om bevestiging IN het paneel. Vroeger was dat een
   window.confirm() — dat toont "dilivorno.be says" in systeemstijl, staat los
   van de zaak en kaapt op mobiel het hele scherm. */
.cart-confirm{display:none;padding:11px 12px;background:#fff0ee;border-bottom:1px solid #e7c3bd}
.cart-confirm.show{display:block;animation:cartConfirmIn .18s ease}
@keyframes cartConfirmIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.cart-confirm-title{font-size:12.5px;font-weight:900;color:#8b1a1a;text-align:center;margin-bottom:9px;line-height:1.35}
.cart-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cart-confirm-actions button{min-height:38px;padding:9px 7px;border-radius:9px;font:900 12px var(--font-body);cursor:pointer;line-height:1.2}
.cart-confirm-no{border:1px solid var(--line);background:#fff;color:var(--ink)}
.cart-confirm-no:hover{background:#f6efe4}
.cart-confirm-yes{border:1px solid #8b1a1a;background:#8b1a1a;color:#fff}
.cart-confirm-yes:hover{background:#701414;border-color:#701414}
.cart-suggest{display:none;margin-top:10px}
.cart-suggest-head{font-size:13px;font-weight:900;color:var(--ink);margin-bottom:7px}
/* Verticale, doorloopbare lijst i.p.v. horizontale rij: laat zoveel mogelijk hoogte vrij voor
   .cart-items (de mand zelf) door hier een eigen, beperkte scrolhoogte te zetten. */
.cart-suggest-row{display:flex;flex-direction:column;gap:8px;max-height:126px;overflow-y:auto;overflow-x:hidden;padding-right:2px;-webkit-overflow-scrolling:touch}
.cart-suggest-row::-webkit-scrollbar{width:5px}
.cart-suggest-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.cart-suggest-card{display:flex;align-items:center;gap:12px;border:1px solid rgba(201,149,42,.45);background:linear-gradient(135deg,#fff8ea,#fff);border-radius:14px;padding:10px 12px;flex:0 0 auto;width:100%}
.cart-suggest-thumb{width:58px;height:58px;border-radius:11px;background-size:cover;background-position:center;background-color:#f6ead8;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px}
.cart-suggest-info{flex:1;min-width:0}
.cart-suggest-name{font-size:14.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-suggest-price{font-size:13.5px;color:var(--muted);font-weight:700;margin-top:2px}
.cart-suggest-add{flex-shrink:0;border:none;background:linear-gradient(135deg,var(--gold),#b5831f);color:#fff;border-radius:10px;padding:10px 16px;font-family:var(--font-body);font-size:13.5px;font-weight:900;cursor:pointer;transition:transform .15s,box-shadow .15s}
.cart-suggest-add:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(14,10,6,.12)}

.cart-items{flex:0 1 auto;overflow-y:auto;padding:6px 14px;min-height:80px;overscroll-behavior:contain}
.cart-items::-webkit-scrollbar{width:6px}
.cart-items::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.cart-empty{text-align:center;padding:32px 16px;color:var(--muted);font-weight:500}
.cart-empty .empty-icon{font-size:40px;margin-bottom:10px}
.cart-empty p{font-size:13px;line-height:1.4}
.cart-item{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.cart-item:last-child{border-bottom:none}
.cart-item-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#fde8cb,#f5d5a8);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:12.5px;font-weight:700;margin-bottom:2px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-item-price{font-size:11px;color:var(--muted);font-weight:700}
.cart-item-qty{display:flex;align-items:center;gap:6px;flex:0 0 auto}

.cart-foot{padding:7px 16px 10px;border-top:1px solid var(--line);background:var(--cream)}
.cart-subtotal{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:1px}
.cart-total{display:flex;justify-content:space-between;font-family:var(--font-head);font-size:16px;font-weight:800;margin:2px 0 6px;color:var(--ink)}
.cart-note{font-size:10.5px;color:var(--muted);text-align:center;margin-top:8px;margin-bottom:0;line-height:1.4}
.checkout-btn{width:100%;padding:13px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-family:var(--font-body);font-size:14px;font-weight:800;cursor:pointer;transition:transform .15s,box-shadow .15s}
.checkout-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(139,26,26,.35)}
.checkout-btn:disabled{opacity:1;background:#ded7cb;color:#5a5145;cursor:not-allowed;transform:none;box-shadow:none}

/* Order-voor-later blok — eigen kaart onder de mand */
.cart-schedule{padding:12px 14px;border-top:2px solid var(--line);background:#fff}
.cart-schedule-label{font-size:12px;font-weight:900;color:var(--ink);margin-bottom:7px;letter-spacing:.3px}
.cart-schedule-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cart-schedule-toggle button{padding:9px 8px;border:2px solid #ccc;background:#fff;color:#333;font-weight:800;border-radius:10px;cursor:pointer;font-size:12.5px;font-family:var(--font-body);transition:all .15s}
.cart-schedule-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cart-schedule-hint{font-size:11px;color:var(--muted);font-weight:600;margin-top:6px;line-height:1.35}

/* Mobile filter drawer */
.filter-overlay{position:fixed;inset:0;background:transparent;z-index:200;display:none;pointer-events:none}
.filter-overlay.open{display:block}
.filter-drawer{position:fixed;top:0;left:0;right:0;width:100%;height:min(34dvh,300px);background:#fff;z-index:201;box-shadow:0 18px 42px rgba(14,10,6,.22);display:flex;flex-direction:column;transform:translateY(-105%);transition:transform .25s ease;border-radius:0 0 14px 14px;pointer-events:auto}
.filter-overlay.open .filter-drawer{transform:none}
.filter-head{padding:9px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.filter-head h3{font-family:var(--font-head);font-size:16px}
.filter-close{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.filter-body{flex:1;overflow-y:auto;padding:7px 12px 10px}
#mobileFilterOverlay .filter-group{border-top:1px solid rgba(228,217,204,.75);padding-top:7px;margin-top:7px}
#mobileFilterOverlay .filter-group:first-of-type{border-top:none;padding-top:0;margin-top:0}
#mobileFilterOverlay .filter-label{font-size:9.5px;margin-bottom:5px;letter-spacing:.45px}
#mobileFilterOverlay .chips{gap:4px;align-items:center;max-height:54px;overflow:hidden}
#mobileFilterOverlay .chip{padding:4px 6px;min-height:24px;font-size:10px;border-radius:999px}
#mobileFilterOverlay .sort-sel{width:auto!important;max-width:142px;margin-top:6px!important;padding:5px 8px;min-height:28px;border-radius:8px;font-size:11px}
#mobileFilterOverlay .chips .sort-sel{margin-top:0!important;max-width:82px;min-height:24px;padding:3px 6px;font-size:10px;border-radius:999px;flex:0 0 auto}

.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:32px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.info-card .ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--red),var(--red2));display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.info-card h4{font-family:var(--font-head);font-size:18px;margin-bottom:8px}
.info-card p,.info-card li{font-size:14px;color:var(--muted);line-height:1.7}
.info-card ul{list-style:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:12px;font-weight:800;color:rgba(255,255,255,.55);letter-spacing:.4px}
.form-input,.form-select,.form-textarea{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#fff;font-family:var(--font-body);font-size:14px;outline:none;transition:border-color .2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,149,42,.2)}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(255,255,255,.3)}
.form-select option{background:#1a1008;color:#fff}
.form-textarea{resize:vertical;min-height:80px}
.form-submit{margin-top:8px;width:100%;padding:16px;border:none;border-radius:var(--radius);background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--ink);font-family:var(--font-head);font-size:18px;font-weight:700;cursor:pointer}
.form-success{display:none;padding:24px;border-radius:var(--radius);background:rgba(34,139,34,.15);border:1px solid rgba(34,139,34,.3);color:#86efac;font-weight:700;font-size:15px}
footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.08);padding:40px 20px 24px;color:rgba(255,255,255,.5)}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;margin-bottom:32px}
.footer-brand{font-family:var(--font-head);font-size:24px;color:#fff;margin-bottom:6px}
.footer-tagline{font-size:13px}
.footer-links h5{color:rgba(255,255,255,.8);font-size:13px;margin-bottom:10px}
.footer-links ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.footer-links li,.footer-links a{font-size:13px}
.footer-links a{color:rgba(255,255,255,.58)}
.footer-links a:hover{color:var(--gold2)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;font-size:12px;text-align:center;color:rgba(255,255,255,.5)}
.legal-link{border:0;background:none;padding:0;color:rgba(255,255,255,.58);font:inherit;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:2px}
.legal-link:hover{color:var(--gold2)}
.checkout-legal-links{margin-top:7px;display:flex;flex-wrap:wrap;gap:4px 12px}
.checkout-legal-links button{border:0;background:none;padding:0;color:var(--red);font:inherit;font-weight:750;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.legal-document{font-size:13px;line-height:1.6;color:var(--ink)}
.legal-document h4{font:800 17px/1.3 var(--font-head);margin:17px 0 6px}
.legal-document h4:first-child{margin-top:0}.legal-document ul{padding-left:20px}.legal-document p{margin:6px 0}
.menu-tools{display:flex;gap:8px;align-items:flex-start;flex-direction:column;margin:12px 0 0;padding-top:12px;border-top:1px dashed rgba(255,255,255,.12)}
.menu-tools .btn{font-size:12.5px;padding:9px 13px;border-radius:10px;width:100%;justify-content:center}
.menu-tools .btn-ghost{background:transparent;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.18)}
.menu-tools .btn-ghost:hover{border-color:var(--gold2);color:var(--gold2)}
.mobile-bar{display:none;position:sticky;bottom:0;z-index:90;background:rgba(14,10,6,.95);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);padding:10px 16px}
.mobile-bar-inner{display:flex;gap:10px;align-items:center;justify-content:space-between}
/* FIX (mobiel+tablet bestelflow): de onderbalk is de enige permanente cart-toegang onder 1200px.
   Deze toon-regel MOET ná de basis `.mobile-bar{display:none}` (hierboven) staan, anders wint die
   in de cascade en is de balk op ELK toestel onzichtbaar → mandje onbereikbaar zodra de drawer sluit. */
@media(max-width:1199px){.mobile-bar{display:block}}
/* 900–1199px (tablet-landschap): filters zitten al in de top-toolbar → enkel de mand-knop, schermvullend */
@media(min-width:900px) and (max-width:1199px){.mobile-bar .btn-ghost{display:none}}
/* Compact desktop / kassavenster: de mand hoort visueel bij de productkolom, niet
   bij de categoriezijbalk. Geen brede donkere footer meer over het hele scherm. */
@media(min-width:900px) and (max-width:1199px){
  .mobile-bar{background:transparent;backdrop-filter:none;border-top:0;padding:8px 2% 10px;pointer-events:none}
  .mobile-bar-inner{width:calc(100% - 252px);margin-left:252px;pointer-events:auto}
  .mobile-bar .btn-red{max-width:100%;min-height:42px;border-radius:13px;box-shadow:0 8px 22px rgba(139,26,26,.24)}
}
@media(max-width:899px){
  .mobile-bar{background:transparent;backdrop-filter:none;border-top:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));pointer-events:none}
  .mobile-bar-inner{width:100%;pointer-events:auto}
  .mobile-bar .btn-red{border-radius:13px;box-shadow:0 8px 22px rgba(139,26,26,.24)}
}
.mobile-cart-summary{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-width:0}
.mobile-cart-part{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.mobile-cart-part+.mobile-cart-part{padding-left:14px;border-left:1px solid rgba(255,255,255,.32)}
.mobile-cart-label{font-size:11px;font-weight:650;opacity:.84}
.mobile-cart-value{font-size:13px;font-weight:900}
/* pointer-events:none — de melding zweeft vlak boven "Bestelling plaatsen";
   zonder dit slikte ze taps op die knop op tijdens de seconden dat ze zichtbaar is. */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:500;transition:transform .35s ease;white-space:nowrap;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}
/* ── Account knop + dropdown ── */
.account-wrap{position:relative;flex-shrink:0}
.account-toggle{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font-family:var(--font-body);font-size:12px;font-weight:800;cursor:pointer;transition:all .15s;line-height:1;white-space:nowrap;max-width:210px}
.account-toggle:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.28)}
.account-toggle.signed{background:rgba(201,149,42,.18);border-color:var(--gold)}
/* Sessie nog aan het herstellen: plaats vasthouden, maar niets beweren over inloggen. */
.account-toggle.acc-unknown{visibility:hidden}
.account-toggle .acc-email{max-width:142px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.account-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(14,10,6,.18);overflow:hidden;z-index:120}
.account-menu.open{display:block}
.account-menu-head{padding:10px 14px;font-size:11px;color:var(--muted);font-weight:700;background:var(--cream);border-bottom:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-item{display:block;width:100%;padding:11px 14px;background:transparent;border:none;text-align:left;font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.account-menu-item:hover{background:var(--cream)}
.account-menu-item.danger{color:var(--red)}
@media(max-width:640px){
  .account-toggle .acc-label-text{display:none}
  .account-toggle{padding:7px 10px}
  .account-toggle .acc-email{max-width:80px}
  .myorders-modal{max-width:100%;height:94vh}
  .myorders-modal .myorders-list{max-height:calc(94vh - 92px)}
}
/* ── Auth modal (login/signup) ── */
.auth-tabs{display:flex;gap:0;margin-bottom:14px;background:var(--cream);border-radius:10px;padding:4px}
.auth-tab{flex:1;padding:10px;border:none;background:transparent;border-radius:8px;font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.auth-tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(14,10,6,.08)}
.auth-msg{display:none;padding:10px 12px;border-radius:8px;font-size:12.5px;font-weight:600;margin-bottom:8px;line-height:1.4}
.auth-msg.err{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;display:block}
.auth-msg.ok{background:#dcfce7;color:#15803d;border:1px solid #86efac;display:block}
.auth-link{background:none;border:none;color:var(--red);font-size:12px;font-weight:700;cursor:pointer;text-decoration:underline;padding:4px 0}
.auth-info{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center;line-height:1.5}
/* v196: signup-only velden — alleen zichtbaar in registratiemodus */
.auth-signup-fields{display:none}
#authForm.auth-form-signup .auth-signup-fields{display:block}
#authForm.auth-form-signup #authForgotRow{display:none}
.auth-row{display:flex;gap:8px}
.auth-row .modal-field{flex:1}
/* ── My orders list ── */
.myorders-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;margin-top:8px}
.myorder-row{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.myorder-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;flex-wrap:wrap;gap:6px}
.myorder-num{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink)}
.myorder-date{font-size:11.5px;color:var(--muted);margin-top:2px}
.myorder-status{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
.myorder-status.new{background:#fef3c7;color:#92400e}
.myorder-status.preparing{background:#dbeafe;color:#1e40af}
.myorder-status.ready{background:#dcfce7;color:#15803d}
.myorder-status.delivered,.myorder-status.completed{background:#e5e7eb;color:#374151}
.myorder-status.canceled,.myorder-status.cancelled{background:#fee2e2;color:#991b1b}
.myorder-items{font-size:12px;color:var(--muted);line-height:1.5;margin:6px 0}
.myorder-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line);padding-top:8px;margin-top:6px;gap:8px;flex-wrap:wrap}
.myorder-total{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink)}
.myorder-pay{font-size:11px;color:var(--muted);font-weight:600}
.myorder-actions{display:flex;justify-content:flex-end;margin-top:8px;gap:6px}
.myorder-btn{padding:7px 14px;border:none;border-radius:8px;background:var(--gold);color:var(--ink);font-family:var(--font-body);font-size:12px;font-weight:800;cursor:pointer;transition:all .15s}
.myorder-btn:hover{background:var(--gold2)}
.myorders-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:13px;line-height:1.5}
.myorders-modal{max-width:min(1040px,calc(100vw - 32px))}
.myorders-modal .myorders-list{max-height:76vh}
.modal-overlay{position:fixed;inset:0;background:rgba(14,10,6,.65);z-index:300;display:none;backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:20px;padding:20px 26px;max-width:480px;width:100%;box-shadow:0 24px 60px rgba(14,10,6,.3);max-height:96vh;overflow-y:auto;overscroll-behavior:contain}
.modal h3{font-family:var(--font-head);font-size:22px;margin-bottom:12px}
.checkout-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.checkout-context{display:none;min-width:0;text-align:center;font-size:14px;font-weight:850;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dpa-table-order .checkout-head{display:grid;grid-template-columns:minmax(64px,1fr) minmax(0,2fr) minmax(44px,1fr)}
body.dpa-table-order .checkout-context{display:block}
body.dpa-table-order .checkout-x{justify-self:end}
.checkout-modal{border-radius:20px;clip-path:inset(0 round 20px)}
.checkout-modal::-webkit-scrollbar-track{background:transparent;margin:12px 0}
.checkout-modal .checkout-head{position:sticky;top:-20px;z-index:12;margin:-20px -26px 10px;padding:13px 26px 10px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 5px 10px rgba(14,10,6,.04)}
.checkout-x{border:none;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px;font-family:var(--font-body)}
.checkout-x:hover{color:var(--ink);background:var(--cream)}
.checkout-back{padding:4px 0;border:none;background:transparent;color:var(--muted);font-weight:700;border-radius:0;cursor:pointer;font-size:12px;font-family:var(--font-body);line-height:1.3}
.checkout-back:hover{color:var(--ink);text-decoration:underline}
.modal-close{float:right;cursor:pointer;font-size:22px;color:var(--muted)}
.modal-form{display:flex;flex-direction:column;gap:9px}
.modal-field{display:flex;flex-direction:column;gap:4px}
.checkout-contact-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px}
@media(max-width:520px){.checkout-contact-row{grid-template-columns:1fr}}
.modal-label{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.4px}
.modal-input{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--paper);font-family:var(--font-body);font-size:14px;outline:none}
.modal-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,149,42,.18)}
.menu-food-info{font-size:10.5px;line-height:1.4;color:var(--muted);margin-top:7px;padding-top:6px;border-top:1px dashed var(--line)}
.menu-food-info b{color:var(--ink);font-weight:800}
.menu-food-info .food-auto{display:block;font-size:9.5px;opacity:.8;margin-top:2px}
.modal-order-sum{background:var(--cream);border-radius:12px;padding:11px 14px;margin:4px 0}
.modal-order-sum h4{font-size:13px;font-weight:800;margin-bottom:7px;color:var(--muted)}
.modal-order-item{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.modal-total{display:flex;justify-content:space-between;font-family:var(--font-head);font-size:18px;font-weight:700;border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.modal-submit{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-family:var(--font-head);font-size:18px;font-weight:700;cursor:pointer;margin-top:4px;position:sticky;bottom:0;z-index:3;box-shadow:0 -10px 16px 8px rgba(255,255,255,.96)}
.modal-success{text-align:center;padding:32px 0}
.modal-success .success-icon{font-size:56px;margin-bottom:16px}
.modal-success h4{font-family:var(--font-head);font-size:24px;margin-bottom:8px}
.modal-success p{color:var(--muted);font-size:14px}
/* Optiekeuze (saus, garnituur ...): klikbare knoppen i.p.v. een nummer typen */
.menu-price-choose{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}
/* Keuzevenster moet ALTIJD bovenaan staan — ook boven de schermvullende fotoweergave (99999). */
.modal-overlay.opt-overlay{z-index:100005}
.opt-modal{max-width:420px}
.opt-group{margin:10px 0 14px}
.opt-glabel{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.4px;margin-bottom:7px;text-transform:uppercase}
.opt-grid{display:grid;grid-template-columns:1fr;gap:8px}
.opt-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:14px 16px;min-height:52px;border:2px solid var(--line);border-radius:12px;background:var(--paper);font-family:var(--font-body);font-size:16px;font-weight:600;color:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.opt-btn:hover{border-color:var(--gold);background:var(--cream)}
.opt-btn:active{transform:scale(.98)}
.opt-btn.sel{border-color:var(--red);background:var(--cream)}
.opt-btn .opt-extra{font-size:14px;font-weight:800;color:var(--muted);white-space:nowrap}
.opt-hint{color:var(--red);font-size:13px;font-weight:700;min-height:18px}
.opt-actions{display:flex;gap:10px;margin-top:6px}
.opt-cancel{flex:0 0 auto;padding:13px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;font-family:var(--font-body);font-size:15px;font-weight:700;color:var(--muted);cursor:pointer;min-height:50px}
.opt-add{flex:1;padding:13px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-family:var(--font-head);font-size:17px;font-weight:700;cursor:pointer;min-height:50px}
.opt-modal.opt-compact{max-width:680px}
.opt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.opt-head h3{margin:0}
.opt-close{width:36px;height:36px;flex:0 0 36px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.opt-compact .opt-group{margin:8px 0 12px;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.48)}
.opt-compact .opt-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.opt-compact .opt-btn{min-height:40px;padding:8px 10px;border-width:1px;border-radius:9px;font-size:13px}
.opt-compact .opt-btn .opt-extra{font-size:12px}
.opt-compact .opt-group.opt-without{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.25)}
.opt-compact .opt-group.opt-extra-group{background:rgba(201,149,42,.07);border-color:rgba(201,149,42,.3)}
@media(max-width:600px){.opt-compact .opt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.opt-modal.opt-compact{padding:14px}.opt-compact .opt-btn{font-size:12px;padding:7px 8px}}
/* ── HERO 2-KOLOM ── */
.hero-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
  width:100%;max-width:1280px;margin:0 auto;
  padding:0 20px;
  position:relative;z-index:2;
}
@media(min-width:900px){
  .hero-inner{
    grid-template-columns:1fr 380px;
    gap:48px;
    align-items:center;
  }
}
@media(min-width:1100px){
  .hero-inner{grid-template-columns:1fr 420px}
}

/* hero reservation card */
.hero-res-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius);
  backdrop-filter:blur(12px);
  overflow:hidden;
  position:relative;
}
@media(max-width:899px){.hero-res-card{display:none}}
.hero-res-title{
  font-family:var(--font-head);font-size:1.15rem;
  color:#fff;margin-bottom:4px;
}
.hero-res-sub{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:18px}
.hero-res-card .rlabel{color:rgba(255,255,255,.5)}
.hero-res-card .rinput{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15);
  color:#fff;
}
.hero-res-card .rinput:focus{border-color:var(--gold)}
.hero-res-card .rinput::placeholder{color:rgba(255,255,255,.25)}
.hero-res-card .qpick{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15);
  color:rgba(255,255,255,.65);
}
.hero-res-card .qpick:hover{border-color:var(--gold);color:#fff}
.hero-res-card .qpick.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hero-res-divider{height:1px;background:rgba(255,255,255,.1);margin:14px 0}
.hero-tel{text-align:center;font-size:12px;color:rgba(255,255,255,.58);margin-top:10px}
.hero-tel a{color:var(--gold2);font-weight:700}
.ir-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:start;
}
@media(min-width:960px){
  .ir-layout{grid-template-columns:1fr 400px}
}
@media(min-width:1100px){
  .ir-layout{grid-template-columns:1fr 430px}
}

/* sticky reservation card on desktop */
.res-sticky{
  position:relative;
}
@media(min-width:960px){
  .res-sticky{position:sticky;top:80px}
}

/* reservation card */
.res-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;
  box-shadow:0 12px 40px rgba(14,10,6,.12);
}
.res-card-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:16px;margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.res-head-ico{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.res-card-title{font-family:var(--font-head);font-size:1.15rem;font-weight:700;margin-bottom:2px}
.res-card-sub{font-size:12px;color:var(--muted)}

/* form fields */
.rfield{display:flex;flex-direction:column;gap:5px}
.rlabel{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.rinput{
  width:100%;padding:10px 12px;
  border-radius:var(--r-sm, 10px);border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:.9rem;outline:none;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;
}
.rinput:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,149,42,.15)}
.rinput::placeholder{color:rgba(122,106,88,.4)}

/* quick-pick buttons */
.qpick-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.qpick{
  padding:7px 12px;border-radius:8px;
  border:1.5px solid var(--line);background:#fff;
  font-size:12px;font-weight:800;color:var(--muted);
  cursor:pointer;transition:all .15s;
  font-family:var(--font-body);
}
.qpick:hover{border-color:var(--gold);color:var(--ink)}
.qpick.on{background:var(--ink);border-color:var(--ink);color:#fff}


/* success state */
.res-success{text-align:center;padding:20px 0}

/* btn-outline */
.btn-outline{
  background:#fff;color:var(--ink);
  border:1px solid var(--line) !important;
}

/* translations */
[data-i18n="resTitle"],[data-i18n="resSub"]{}

/* ── SLIDER ─────────────────────────────────── */
.slider-outer{position:relative;overflow:hidden;padding:0 0 48px}
.sl-track{
  display:flex;
  gap:20px;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  cursor:grab;
}
.sl-track.dragging{cursor:grabbing;transition:none;user-select:none}
.sl-slide{
  flex:0 0 min(480px,85vw);
  width:min(480px,85vw);
}
@media(min-width:600px){.sl-slide{flex:0 0 460px;width:460px}}
.sl-info-card{height:100%;box-sizing:border-box}
.sl-info-body{padding-top:4px}

/* hero slider inside card */
.hero-res-card{
  overflow:hidden;
  position:relative;
}
.hero-sl-track{
  display:flex;
  flex-wrap:nowrap;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.hero-sl-slide{
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  padding:24px 24px 52px;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
  max-height:600px;
  scrollbar-width:none;
}
.hero-sl-slide::-webkit-scrollbar{display:none}
.hero-sl-nav{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;z-index:10;
}
.hero-sl-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.25);border:none;cursor:pointer;
  transition:all .2s;padding:0;
}
.hero-sl-dot.on{background:var(--gold);transform:scale(1.3)}
.hero-sl-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;z-index:10;
}
.hero-sl-arrow:hover{background:rgba(255,255,255,.25)}
.hero-sl-prev{left:8px}
.hero-sl-next{right:8px}
.hero-hours-row{
  display:flex;justify-content:space-between;
  font-size:.8rem;color:rgba(255,255,255,.65);
  padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-hours-row:last-child{border-bottom:none}
.ci-block{display:flex;gap:12px;align-items:flex-start}
.ci-block-ico{font-size:1.25rem;width:28px;text-align:center;flex-shrink:0;margin-top:1px}
.ci-block-title{font-size:.9375rem;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:2px}
.ci-block-sub{font-size:.8125rem;color:var(--muted);line-height:1.4;margin-bottom:4px}
.ci-link{font-size:.8125rem;color:var(--red);font-weight:700;text-decoration:underline}

/* compact hours */
.hours-compact{display:flex;justify-content:space-between;font-size:.8125rem;padding:5px 0;border-bottom:1px solid var(--line)}
.hours-compact:last-of-type{border-bottom:none}
.hv{font-weight:700;color:var(--ink)}
.hours-compact.closed .hv{color:var(--red)}

/* remove old unused */
.sl-photo-grid,.sl-photo,.contact-row,.contact-ico,.contact-label,.contact-val,.hours-row,.hours-val{}

/* arrows */
.sl-arrow{
  position:absolute;top:50%;transform:translateY(-60%);
  z-index:10;
  width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh);
  font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .15s,transform .15s;
  color:var(--ink);
}
.sl-arrow:hover{box-shadow:var(--sh-lg);transform:translateY(-60%) scale(1.05)}
.sl-prev{left:-16px}
.sl-next{right:-16px}
@media(max-width:540px){.sl-prev{left:0}.sl-next{right:0}}

/* dots */
.sl-dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.sl-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--line);border:none;cursor:pointer;
  transition:background .2s,transform .2s;padding:0;
}
.sl-dot.on{background:var(--red);transform:scale(1.3)}

@media(max-width:900px){.sl-arrow{display:none}}

@media(max-width:600px){.hero h1{font-size:42px;white-space:normal}.hero-stats{gap:20px}.menu-grid{grid-template-columns:1fr}.footer-top{flex-direction:column}}
@media(max-width:959px){.ir-layout{padding:40px 20px !important}}

/* ──────────────────────────────────────────────────────────
   MOBILE-FIRST ENHANCEMENTS — 2026-04-25
   phones get priority (touch targets ≥44px, larger fonts,
   no hover-dependent controls, full-width drawers/modals)
   ────────────────────────────────────────────────────────── */

/* touch feedback + prevent double-tap zoom */
button,.btn,.chip,.qpick,.tcat,.cat-tab,.menu-card,.add-btn,.qty-btn,.service-btn,.checkout-btn,.modal-submit,.form-submit{
  -webkit-tap-highlight-color:rgba(201,149,42,.22);
  touch-action:manipulation;
}

/* Touch devices: always show Add-button (hover never fires on touch) */
@media (hover:none){
  .menu-card .add-btn{display:inline-flex!important;opacity:1;visibility:visible;pointer-events:auto;animation:none}
  .menu-card:hover{transform:none;box-shadow:0 2px 6px rgba(14,10,6,.05)}
}

@media (max-width:768px){
  /* iOS: 16px inputs to avoid focus-zoom */
  .modal-input,.rinput,.form-input,.form-select,.form-textarea,.search-input{font-size:16px!important}

  /* NAV — compacter, links verbergen, kassa + taal blijven */
  .nav-inner{padding:0 12px;height:56px;gap:6px}
  .nav-left{flex:1 1 auto;min-width:0}
  .nav-brand{font-size:17px;gap:8px;min-width:0;max-width:100%}
  .nav-brand .dot{width:26px;height:26px}
  #bizNameNav{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app-nav-toggle{padding:9px 11px;font-size:12px}
  .app-nav-menu{left:-2px}
  .nav-links{display:none}
  .nav-right{gap:6px}
  .lang-toggle{padding:7px 8px;font-size:11px}
  .lang-toggle #langCode{display:none}
  .btn{padding:8px 12px;font-size:12px;min-height:40px}
  .nav-right .btn-gold{display:none} /* Reserveer-knop verbergen — reserveren via menu-link */
  #cartCountNav{display:none}
  .cart-badge{top:-4px;right:-4px}

  /* HERO — minder hoog, mobiele typografie */
  .hero{min-height:auto;padding:36px 16px 28px;align-items:flex-start}
  .hero-inner{gap:20px;padding:0}
  .hero-content{width:100%}
  .hero-eyebrow{font-size:11px;padding:5px 11px;margin-bottom:14px}
  .hero h1{font-size:clamp(34px,9vw,52px);line-height:1.05;margin-bottom:8px;letter-spacing:-.5px}
  .hero-sub{font-size:14px;margin-bottom:20px;max-width:100%;line-height:1.5}
  .hero-actions{gap:8px;flex-wrap:nowrap}
  .hero-actions .btn{flex:1;justify-content:center;padding:13px 10px!important;font-size:13px!important;min-height:48px;white-space:nowrap}
  .hero-stats{gap:14px 24px;margin-top:28px;padding-top:22px}
  .hero-stats .stat-item{flex:1 1 40%}
  .stat-val{font-size:22px}
  .stat-lab{font-size:10px;letter-spacing:.4px}

  /* SECTIONS — minder padding */
  .section{padding:40px 16px}
  .menu-wrap{padding:16px 0 40px}
  .section-title{font-size:clamp(24px,6vw,34px);line-height:1.15}
  .section-sub{font-size:14px}
  .section-tag{font-size:10px;padding:4px 10px;margin-bottom:10px}

  /* MENU-TOOLBAR sticky exact onder de mobiele nav (.nav-inner height:56px).
     Stond op 64px terwijl de mobiele nav 56px is → 8px spleet waar de menu
     doorheen scrolde. Nu sluit hij naadloos aan. */
  .menu-toolbar{top:56px;padding:0 0 4px}
  .cat-count-bar{padding:0 8px}
  .toolbar-cats{gap:0}
  .tcat{padding:12px 14px;font-size:13px;min-height:44px;display:flex;align-items:center}
  .toolbar-count{display:none}
  /* Zoekbalk zit in de sticky toolbar → blijft vanzelf zichtbaar tijdens scrollen */
  .menu-search-row{padding:6px 0 2px;max-width:none}

  /* MENU-GRID — 1 kolom, COMPACTE cards zodat er meerdere netjes op het telefoonscherm
     passen (foto links, naam/uitleg rechts, prijs+knop eronder). */
  .menu-grid{grid-template-columns:1fr;gap:10px}
  .menu-card{grid-template-columns:108px minmax(0,1fr);grid-template-areas:"photo body" "photo bottom";padding:10px;gap:11px;align-items:stretch;min-height:0}
  .menu-card-photo,.menu-card-emoji{grid-area:photo;width:100%;height:100%;min-height:96px;align-self:stretch}
  .menu-card-body{grid-area:body;gap:4px;justify-content:flex-start}
  .menu-card h4{font-size:16px;white-space:normal;line-height:1.2;-webkit-line-clamp:2}
  .card-emoji{font-size:24px}
  .menu-card-desc{
    font-size:13px;line-height:1.3;white-space:normal;overflow-wrap:anywhere;-webkit-line-clamp:2;
  }
  .menu-tags{gap:5px}
  .menu-tag{font-size:11px;padding:3px 7px}
  .menu-bottom{grid-area:bottom;gap:8px;align-items:center;justify-content:space-between}
  .menu-price{font-size:17px}
  .menu-price small{font-size:9px}
  .add-btn{
    padding:7px 14px;font-size:13px;
    min-height:34px;min-width:auto;border-radius:999px;
    display:inline-flex!important;align-items:center;justify-content:center;
  }
  .qty-btn{width:32px;height:32px;font-size:17px;border-radius:8px}
  .qty-num{font-size:15px;min-width:20px}
  .qty-row{gap:6px}

  /* CART PANEL full-width met safe-area */
  .cart-panel.open{width:100vw;max-width:100vw}
  .cart-head{padding:14px 16px}
  .cart-head h3{font-size:17px}
  .cart-close{width:38px;height:38px;font-size:20px}
  .cart-confirm{padding:13px 14px}
  .cart-confirm-title{font-size:14px}
  .cart-confirm-actions button{min-height:46px;font-size:13.5px}
  .cart-svc{padding:8px 14px}
  .cart-items{padding:6px 14px}
  .cart-item{padding:8px 0;gap:9px}
  .cart-item-icon{width:34px;height:34px;font-size:17px}
  .cart-item-name{font-size:14px}
  .cart-item-price{font-size:12px}
  .cart-item-qty .qty-btn{width:32px;height:32px;font-size:15px}
  .cart-foot{padding:9px 16px calc(9px + env(safe-area-inset-bottom)) 16px}
  .cart-subtotal{font-size:12px}
  .cart-total{font-size:17px;margin-bottom:7px}
  .cart-note{font-size:11px}
  .checkout-btn{padding:15px;font-size:15px;min-height:52px;border-radius:12px}
  .service-toggle{border-radius:12px}
  .service-btn{padding:11px 23px 11px 5px;font-size:11.5px;min-height:46px;white-space:nowrap}

  /* MOBILE-BAR (onder) met safe-area */
  .mobile-bar{padding:10px 12px calc(10px + env(safe-area-inset-bottom)) 12px}
  .mobile-bar .btn{min-height:46px;font-size:13px;padding:11px 14px}

  /* CHECKOUT MODAL — bottom-sheet stijl */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal{
    border-radius:20px 20px 0 0;max-width:100%;width:100%;
    padding:20px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
    max-height:94vh;
  }
  .modal h3{font-size:20px;margin-bottom:14px}
  .modal-close{font-size:30px;width:44px;height:44px;line-height:1;display:flex;align-items:center;justify-content:center;margin:-8px -8px 0 0}
  .checkout-head{margin-bottom:8px}
  .checkout-modal .checkout-head{margin:-20px -16px 10px;padding:10px 16px 8px}
  .checkout-back{padding:4px 0;font-size:12px;min-height:0;border-radius:0}
  /* Op een telefoon moet het kruisje een echt aanraakdoel zijn, geen speldenprik. */
  .checkout-x{font-size:32px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;margin-right:-6px}
  .modal-form{gap:11px}
  .modal-field{gap:4px}
  .modal-input{padding:13px 14px;min-height:48px;border-radius:10px}
  .modal-label{font-size:12px}
  .modal-order-sum{padding:12px;margin:6px 0}
  .modal-order-item{font-size:13px;margin-bottom:4px}
  .modal-total{font-size:17px}
  .modal-submit{padding:16px;font-size:16px;min-height:54px;border-radius:12px}
  #svcTakeaway,#svcDelivery{padding:14px 8px!important;font-size:14px!important;min-height:52px;border-radius:10px!important}

  .form-grid{grid-template-columns:1fr;gap:10px}
  .form-input,.form-select,.form-textarea{padding:14px;min-height:48px}
  .form-submit{padding:16px;min-height:54px;font-size:16px}

  /* INFO-cards */
  .info-grid{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .info-card{padding:18px}
  .info-card h4{font-size:16px}
  .info-card p,.info-card li{font-size:13.5px;line-height:1.6}

  /* FOOTER */
  footer{padding:28px 16px calc(18px + env(safe-area-inset-bottom)) 16px}
  .footer-top{gap:20px;margin-bottom:20px;flex-direction:column}
  .footer-brand{font-size:20px}
  .footer-tagline{font-size:12px}
  .footer-links h5{font-size:12px;margin-bottom:8px}
  .footer-links li,.footer-links a{font-size:12.5px}
  /* TOAST boven mobile-bar */
  .toast{bottom:calc(74px + env(safe-area-inset-bottom));font-size:13px;padding:10px 18px}

  /* FILTER-drawer op mobiel */
  .filter-drawer{height:min(32dvh,280px);max-width:100vw;width:100vw}
  .filter-body .filter-group:last-child{display:none}
}

/* Smalle telefoon: kopbalk houdt enkel ☰-icoon + logo-bolletje over — de
   zaaknaam staat dan als titel bovenaan het ☰-menu (net als de startpagina). */
@media (max-width:520px){
  .app-nav-toggle{width:40px;height:40px;padding:0;justify-content:center;font-size:18px}
  .app-nav-toggle #appNavOptLabel{display:none}
  .nav-brand span{display:none}
  .app-nav-menu-title{display:block}
}

/* XS — heel kleine telefoons */
@media (max-width:380px){
  .btn{padding:7px 10px;font-size:11px}
  .hero h1{font-size:32px}
  .hero-actions .btn{font-size:12px!important;padding:12px 8px!important}
  .stat-val{font-size:20px}
}

/* Visuele integratie Home ↔ Bestellen: gedeelde premium restaurantstijl */
body{background:#faf6ef}
.nav-inner{width:96%;max-width:1800px;padding-left:0;padding-right:0}
nav{background:rgba(14,10,6,.96);box-shadow:0 4px 18px rgba(14,10,6,.12)}
.app-nav-toggle{border-radius:10px;background:rgba(201,149,42,.10)}
.menu-inner{width:96%;max-width:1800px}
.menu-wrap{background:#faf6ef}
.menu-toolbar{background:rgba(250,246,239,.96);backdrop-filter:blur(16px);border-color:rgba(122,106,88,.16);box-shadow:0 5px 18px rgba(14,10,6,.06)}
.menu-search-row .search-input{min-height:44px;border-radius:12px;border-color:rgba(122,106,88,.22);box-shadow:0 2px 10px rgba(14,10,6,.035)}
.menu-search-row .search-input:focus{box-shadow:0 0 0 3px rgba(201,149,42,.16),0 4px 14px rgba(14,10,6,.06)}
.toolbar-filters .chip,.toolbar-filters .sort-sel,.toolbar-filters .reset-btn{border-radius:999px;background:#fffdf9;border-color:rgba(122,106,88,.22)}
/* Actieve filterchip MOET de rode vulling houden. '.toolbar-filters .chip' hierboven
   heeft dezelfde specificiteit als '.chip.on' maar staat later, dus die won met een
   bijna-witte achtergrond terwijl de tekst wit bleef -> label onleesbaar (verdween).
   Deze selector is specifieker (0-3-0) en zet achtergrond + tekst weer samen. */
.toolbar-filters .chip.on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 3px 10px rgba(139,26,26,.16)}
/* Allergeen-chips blijven hun eigen zachte rode stijl houden (tekst in rood, niet wit). */
.toolbar-filters .chip.warn.on{background:rgba(139,26,26,.1);border-color:var(--red);color:var(--red)}
.menu-layout{grid-template-columns:230px minmax(0,1fr);gap:22px}
.sidebar-card{border-radius:16px;border-color:rgba(122,106,88,.18);padding:18px;background:rgba(255,255,255,.86);box-shadow:0 8px 28px rgba(14,10,6,.055)}
.sidebar-card h3{font-size:18px}
.sidebar-cats{gap:4px}
.sidebar-cats .tcat{border-radius:10px;padding:10px 12px}
.sidebar-cats .tcat.on{border-left-color:transparent;background:linear-gradient(135deg,var(--red),#a92720);color:#fff;box-shadow:0 5px 14px rgba(139,26,26,.17)}
.menu-main{min-width:0}
.cat-section{scroll-margin-top:190px}
.cat-header{top:calc(var(--menu-cat-top,174px) - 4px);z-index:79;margin-left:-4px;margin-right:-4px;padding:15px 4px 9px;background:rgba(250,246,239,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(122,106,88,.12)}
.cat-header h3{font-size:24px;letter-spacing:-.2px}
.cat-divider{opacity:.65}
.menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.menu-card{border-radius:16px;border-color:rgba(122,106,88,.18);box-shadow:0 6px 22px rgba(14,10,6,.055);padding:14px;min-height:190px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.menu-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(14,10,6,.10);border-color:rgba(201,149,42,.42)}
.menu-card-photo,.menu-card-emoji{border-radius:12px}
.menu-card h4{font-family:var(--font-head);font-size:18px;line-height:1.18;letter-spacing:-.1px}
.menu-card-desc{font-size:13px;font-weight:500;color:#75685c;line-height:1.45}
.menu-price{font-size:18px}
.add-btn{box-shadow:0 5px 13px rgba(139,26,26,.20)}
.menu-published-meta{opacity:1;font-size:11px;margin-right:2px}
.cart-panel{border-radius:16px;border-color:rgba(122,106,88,.18);box-shadow:0 12px 34px rgba(14,10,6,.10);background:#fffdf9}
.cart-head{padding:10px 12px;background:#fffdf9;color:var(--ink);border-bottom:1px solid var(--line)}
.cart-head h3{font-size:15px;color:var(--ink)}
.cart-head .cart-back:hover{background:#f3ead9}
.cart-head-count{background:var(--red);color:#fff}
.cart-head .cart-clear{border-color:var(--line);background:#fff;color:var(--muted)}
.cart-head .cart-clear:hover{background:#fff0ee;color:var(--red);border-color:#d7a39b}
.cart-close{border-color:var(--line);background:#fff;color:var(--ink)}
.cart-foot{background:#f8f0e3}
.checkout-btn{border-radius:12px;background:linear-gradient(135deg,var(--red),var(--red2));box-shadow:0 7px 18px rgba(139,26,26,.18)}
@media(min-width:1200px){
  .menu-layout{grid-template-columns:230px minmax(0,1fr) 350px}
}
/* Met 125% Windows-schaal is een fysiek 1920px-scherm ongeveer 1536 CSS-pixels
   breed. Op die veelgebruikte desktopmaat laten sidebar + cart onvoldoende ruimte
   voor drie fotokaarten; gebruik daar twee leesbare kaarten. */
@media(min-width:1200px) and (max-width:1749px){
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1199px){
  .cat-section{scroll-margin-top:158px}
  .cat-header{top:calc(var(--menu-cat-top,142px) - 4px)}
}
/* Compact desktop / liggend tablet: de categoriezijbalk neemt al 230px in.
   Drie kaarten met elk een foto van 172px lieten daardoor nauwelijks tekstbreedte
   over en braken productnamen letter per letter af. */
@media(min-width:900px) and (max-width:1099px){
  .menu-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .menu-card{grid-template-columns:150px minmax(0,1fr);min-height:158px}
  .menu-card-photo,.menu-card-emoji{height:126px}
}
@media(min-width:1100px) and (max-width:1199px){
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .menu-card{grid-template-columns:118px minmax(0,1fr);gap:12px;padding:12px;min-height:150px}
  .menu-card-photo,.menu-card-emoji{height:112px}
  .menu-card h4{font-size:16px}
  .menu-card-desc{font-size:12px}
}
@media(max-width:899px){
  .menu-inner{width:100%;padding:10px 8px 0!important}
  .menu-layout{display:block;width:100%;margin-top:0!important}
  .menu-main{width:100%;min-width:0;padding:0}
  .cat-section{width:100%;margin-bottom:18px;padding-bottom:12px}
  .menu-grid{grid-template-columns:minmax(0,1fr);gap:10px;width:100%}
  .menu-card{width:100%;max-width:none;box-sizing:border-box}
  /* ☰-Opties (kopbalk) en ☰-Categorieën (toolbar) op dezelfde verticale lijn:
     menu-toolbar heeft hier padding-left:8px (zie regel 903), nav-inner had 0. */
  .nav-inner{padding-left:8px}
}
@media(max-width:599px){
  .nav-inner,.menu-inner{width:100%}
  .menu-grid{grid-template-columns:1fr}
  .menu-card{min-height:0;border-radius:14px}
  .cat-section{scroll-margin-top:142px}
  .cat-header{top:calc(var(--menu-cat-top,126px) - 4px);padding-left:12px;padding-right:12px}
}

/* Compacte bediening: zoeken + filters/categorieën blijven op één regel. */
.cart-smart-row{
  display:flex;
  width:100%;
  max-width:none;
  margin:5px 0 0;
}
.cart-smart-row .smart-status{
  width:100%;
  padding:6px 10px;
  font-size:11px;
  box-shadow:none;
}
@media(min-width:900px){
  /* De balk moet exact even breed zijn als de menukolom eronder (.menu-inner:
     width:96%, max-width:1800px, padding:0 20px). Anders staat zoek/dieet
     ingesprongen terwijl sidebar en cart tot aan de rand lopen. */
  .menu-toolbar{
    flex-wrap:nowrap;
    gap:8px;
    padding-top:6px;
    padding-bottom:6px;
    padding-left:calc(max(2%, (100% - 1800px) / 2) + 20px);
    padding-right:calc(max(2%, (100% - 1800px) / 2) + 20px);
  }
  .menu-search-row{flex:0 1 320px;min-width:190px;max-width:320px}
  .cat-count-bar{flex:1 1 auto}
  .toolbar-filters{
    width:100%;
    flex-wrap:nowrap;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:thin;
  }
  /* Zelfde reden als hierboven: Chromium 109 negeert scrollbar-width. */
  .toolbar-filters::-webkit-scrollbar{height:6px}
  .toolbar-filters::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:999px}
  .toolbar-filters::-webkit-scrollbar-track{background:transparent}
  .toolbar-filters .filter-bar-group{flex-wrap:nowrap;gap:5px}
  /* Dieet blijft links tegen de zoekbalk, allergenen wordt naar de rechterrand
     geduwd; de vrije ruimte valt netjes in het midden. */
  .toolbar-filters .filter-bar-group + .filter-bar-group{
    margin-left:auto;
    padding-left:22px;
  }
  .toolbar-filters .chips{flex-wrap:nowrap;gap:4px}
  .toolbar-filters .filter-bar-label{padding:5px 8px}
  .toolbar-filters .chip{padding:4px 8px;min-height:28px}
  .filter-actions{margin-left:0}
}
@media(max-width:899px){
  .menu-toolbar{
    display:flex;
    align-items:center;
    gap:6px;
    padding:5px 8px;
  }
  .mobile-cat-toggle{display:flex!important;order:1;flex:0 0 40px}
  .cat-count-bar{display:none}
  .menu-search-row{
    order:2;
    flex:1 1 auto;
    min-width:0;
    padding:0;
    margin:0;
  }
  .menu-search-row .search-input{min-height:42px}
}
.mobile-cat-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1.5px solid var(--gold);border-radius:10px;background:var(--cream);color:var(--ink);font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(14,10,6,.1)}
.mobile-cat-overlay{display:none;position:fixed;inset:0;z-index:100020;background:rgba(14,10,6,.46);backdrop-filter:blur(2px)}
.mobile-cat-overlay.open{display:block}
.mobile-cat-drawer{width:min(64vw,250px);min-width:220px;max-width:calc(100vw - 72px);box-sizing:border-box;height:100%;background:var(--paper);box-shadow:18px 0 50px rgba(0,0,0,.22);padding:12px;overflow-y:auto}
.mobile-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.mobile-cat-head h3{margin:0;font-family:var(--font-head);font-size:19px}
.mobile-cat-close{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:23px;cursor:pointer}
.mobile-cat-list{display:flex;flex-direction:column;gap:5px}
.mobile-cat-list .tcat{width:100%;padding:12px 13px;text-align:left;border:0;border-radius:10px;background:transparent;color:var(--ink);font-size:14px;font-weight:750;cursor:pointer}
.mobile-cat-list .tcat.on{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff}