/* ============================================================
   Bestelpagina — layout en interactiepatronen naar het
   Thuisbezorgd-menupaginamodel, tokens uit base.css.
   Bron van waarheid: design-refs/bestelpagina-demo.html
   ============================================================ */

body.post-type-archive-product { background: #fff; }

/* ===== Shell: content + mandje-zijbalk ===== */
.shell { display: grid; grid-template-columns: 1fr 380px; min-height: calc(100vh - 60px); }
@media (max-width: 980px) { .shell { grid-template-columns: 1fr; } }
/* Grid-items krijgen min-width:0, anders duwt de carrousel (scroll-container
   telt volledig mee in min-content) de kolom breder dan het viewport */
.shell > .main, .shell > .basket { min-width: 0; }

/* ===== Naamblok ===== */
/* Het vlak loopt door achter de producten; de kaarten steken er wit uit.
   Alleen deze kolom centreert — het mandje blijft tegen de rechterrand. */
.shell > .main { background: var(--surface); }
.shop-head-in { max-width: 1000px; margin: 0 auto; padding: 0 28px; }
.shop-head-in:has(.area-note[hidden]) { padding: 0; }
.content { max-width: 1000px; margin: 0 auto; padding: 16px 28px 120px; }
@media (max-width: 640px) {
  .shop-head-in { padding: 20px 18px 0; }
  .content { padding: 12px 18px 120px; }
}
.resto-name { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.01em; }
@media (max-width: 640px) { .resto-name { font-size: 26px; line-height: 30px; } }
.rating { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; }
.rating .star { color: var(--product); font-size: 16px; }
.rating a { color: var(--ink); font-weight: 700; }
/* Contextbalk: waar naartoe en hoe. Twee pills naast elkaar, verder niets —
   de rest van de bestelinfo staat als één regel eronder (§4.1). */
.ctxbar { display: flex; align-items: center; gap: 10px; width: 100%; }
.ctx-adr {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: #fff; border: none; border-radius: var(--pill); padding: 12px 20px;
  font-size: 15px; font-weight: 800; color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: var(--card-shadow);
}
.ctx-adr > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-adr svg { flex: none; color: var(--product); }
.ctx-adr:hover { background: var(--surface); }
.ctx-mode { flex: none; display: flex; background: #fff; border-radius: var(--pill); padding: 4px; box-shadow: var(--card-shadow); }
.ctx-mode button {
  display: flex; align-items: center; gap: 8px; border: none; background: transparent;
  border-radius: var(--pill); padding: 9px 18px; font-size: 15px; font-weight: 700;
  color: var(--ink-2); cursor: pointer;
}
.ctx-mode button svg { color: currentColor; }
.ctx-mode button.active { background: var(--tonal); color: var(--ink); font-weight: 800; }
.ctx-mode button.active svg { color: var(--product); }
@media (max-width: 560px) {
  .ctx-adr, .ctx-mode { flex: 1 1 100%; }
  .ctx-mode button { flex: 1; justify-content: center; }
}

.fees { font-size: 13.5px; line-height: 19px; color: var(--muted); margin-top: 10px; }
.fees b { color: var(--ink); }
.fees .num { white-space: nowrap; }
.fees .dot { margin: 0 6px; color: var(--muted); }
.fees-note { font-size: 12px; line-height: 17px; color: var(--muted); margin-top: 3px; }

.promo {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
  background: var(--sky); color: var(--ink); font-size: 14px; font-weight: 800;
  border-radius: var(--pill); padding: 10px 18px; text-decoration: none;
}
.promo .chev { font-weight: 800; opacity: 0.55; }

.search-row { margin-top: 18px; }
.search-row .wrap { position: relative; }
.search-row input {
  width: 100%; font-size: 15px; color: var(--ink);
  border: 1px solid var(--border-form); border-radius: var(--pill); padding: 12px 20px 12px 46px; background: #fff;
}
.search-row input::placeholder { color: var(--text-placeholder); }
.search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--surface);
  font-size: 13px; color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.search-clear[hidden] { display: none; }
.search-clear:hover { background: var(--surface-strong); }

.search-row .icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--product); display: flex; pointer-events: none;
}

/* ===== Categorienav: actief = zwarte pill, sticky + scrollspy ===== */
/* Op de bestelpagina scrollt de sitekop gewoon weg: tijdens het bladeren
   door het menu hoef je alleen zoeken en categorieën bij de hand te hebben. */
body.post-type-archive-product .topbar { position: static; }

/* Zoeken én categorienav blijven als één witte balk in beeld tijdens het
   scrollen door het menu, over de volle breedte van de kolom. */
.menubar {
  position: sticky; top: 0; z-index: 15; background: #fff;
  border-bottom: 1px solid var(--line);
}
.menubar-in { max-width: 1000px; margin: 0 auto; padding: 12px 28px 0; }
@media (max-width: 640px) { .menubar-in { padding: 12px 18px 0; } }
.menubar .search-row { margin-top: 0; }
.catnav { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 0 10px; }
.catnav .chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; padding-right: 8px; }
.catnav .chips::-webkit-scrollbar { display: none; }
.catnav a {
  flex: none; text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink);
  padding: 6px 12px; border-radius: var(--pill); white-space: nowrap; /* pie-chip: 6/12 */
}
.catnav a:hover { background: var(--surface); }
.catnav a.active { background: var(--ink); color: var(--text-inverse); }
.catnav .navbtn {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: #fff;
  box-shadow: var(--btn-shadow); font-size: 14px; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.catnav.stuck { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.18); }

/* Categorieën als venster met foto's, net als in de referentie */
.catall { position: relative; flex: none; }
.sheet-cats { max-width: 460px; max-height: 84vh; }
.cats-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 14px; border-bottom: 1px solid var(--line); flex: none;
}
.cats-head h3 { font-size: 22px; font-weight: 800; }
.cats-head .sheet-x { position: static; }
.cats-list { overflow-y: auto; padding: 6px 0 10px; }
.cats-list a {
  display: flex; align-items: center; gap: 14px; padding: 12px 22px;
  font-size: 16px; font-weight: 800; color: var(--ink); text-decoration: none;
}
.cats-list a:hover { background: var(--surface); }
.cats-list a img, .cats-list .cats-ic {
  flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  color: var(--product);
}
.cats-list a b { flex: 1; min-width: 0; font-weight: 800; }
.cats-n {
  flex: none; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--pill);
  background: var(--ink); color: var(--text-inverse); font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.cats-n[hidden] { display: none; }

/* Vegetarisch-label: rustig groen, geen schreeuwerige badge */
.tag-veg {
  display: inline-flex; align-items: center; gap: 5px;
  background: #eef5e0; color: #3d5411; border-radius: var(--pill);
  padding: 4px 10px 4px 8px; font-size: 12px; font-weight: 700; line-height: 16px;
}
/* In het overzicht alleen het blaadje: op een kaart met naam, prijs en twee
   regels tekst is het woord "Vegetarisch" ruis. In de productsheet staat het
   voluit, want daar neem je de beslissing. */
/* Zelfde doos en uitlijning als het info-rondje ernaast, anders hangt het
   blaadje onder de regel. vertical-align: middle laat de browser beide op de
   optische midden van de tekst zetten. */
.tag-veg-kaal {
  gap: 0; padding: 0; margin-left: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  justify-content: center; vertical-align: middle;
}
.tag-veg-kaal svg { width: 12px; height: 12px; }
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sheet-head .tag-veg { margin-top: 12px; }

/* ===== Bestel opnieuw (§4.3) ===== */
.reorder-card {
  margin-top: 24px; background: var(--tonal); border-radius: 12px; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.reorder-card b { font-size: 16px; display: block; }
.reorder-sub { font-size: 13.5px; color: var(--ink-2); display: block; margin-top: 3px; }
.reorder-card .btn-primary { flex: none; padding: 11px 20px; font-size: 14px; }

/* ===== Secties ===== */
.menu-section { padding-top: 26px; scroll-margin-top: 128px; }
.sec-head { margin-bottom: 4px; }
.sec-head h2 { font-size: 24px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; }
.sec-note-wrap { margin: 2px 0 14px; }
.sec-note {
  font-size: 14px; line-height: 20px; color: var(--ink-2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sec-note.open { -webkit-line-clamp: unset; }
.sec-more {
  border: none; background: none; padding: 0; margin-top: 2px;
  font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer;
}

/* ===== Kaartgrid: tekst links, foto rechts, + op de foto ===== */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }
.card {
  position: relative; background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: 16px 18px; display: flex; gap: 16px; align-items: flex-start;
  justify-content: space-between; min-height: 112px;
  transition: box-shadow .18s ease, transform .18s ease;
}
/* De kaart opent de sheet; dat mag je aan de kaart voelen vóór je klikt */
.card:hover { box-shadow: var(--shadow-b); transform: translateY(-2px); }
@media (hover: none) { .card:hover { box-shadow: var(--card-shadow); transform: none; } }
.card .thumb .plus, .mini .mthumb .plus { top: 8px; right: 8px; }
.card .txt { min-width: 0; flex: 1; }
/* De foto blijft in het midden hangen, de tekst begint bovenaan —
   anders staat een korte productnaam zwevend in het midden. */
.card .thumb { align-self: center; }
.card .name { font-size: 16px; line-height: 21px; font-weight: 800; display: inline; }
.card .info-i {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.4px solid var(--muted); color: var(--muted); font-size: 10.5px; line-height: 1;
  font-weight: 700; vertical-align: middle;
}
.card .from { font-size: 14px; font-weight: 700; margin-top: 6px; }
.card .from .vanaf, .mini .from .vanaf, .sheet-head .from .vanaf { font-weight: 400; color: var(--ink-2); }
.card .desc {
  font-size: 13.5px; line-height: 18px; color: var(--ink-2); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.thumb {
  position: relative; flex: none; width: 112px; height: 112px; border-radius: var(--r-card);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.thumb > img, .thumb > .ph { border-radius: var(--r-card); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .ph, .mthumb .ph { font-size: 46px; }
.plus {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: #fff; box-shadow: var(--btn-shadow);
  color: var(--product); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  /* Het plusteken is getekend in plaats van gezet: de glyph van de
     systeemletter staat niet in het midden van zijn regel, waardoor de knop
     scheef oogde. Twee balkjes staan altijd exact gecentreerd. */
  font-size: 0;
}
.plus::before, .plus::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: currentColor; border-radius: 1px; transform: translate(-50%, -50%);
}
.up-card .plus::before, .up-card .plus::after { margin: 0; }
.plus::before { width: 13px; height: 2.5px; }
.plus::after { width: 2.5px; height: 13px; }
.mini .plus::before, .up-card .plus::before { width: 12px; height: 2px; }
.mini .plus::after, .up-card .plus::after { width: 2px; height: 12px; }
.plus:hover { background: var(--tonal); }
/* display:flex hierboven wint van het [hidden]-attribuut: zonder deze regel
   bleef de witte knop achter de aantal-badge staan. */
.plus[hidden] { display: none !important; }
.plus { transition: transform .14s ease; }
.plus:hover { transform: scale(1.1); }
/* De plusknop ligt op de foto, binnen de kaart: in een scrollende
   carrousel wordt alles wat erbuiten steekt afgekapt. */
@media (prefers-reduced-motion: no-preference) {
  .plus.bump { animation: bb-bump 0.35s ease; }
  @keyframes bb-bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.22); } }
}

/* ===== Populair-carrousel ===== */
.carousel-wrap { position: relative; }
.car-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff;
  box-shadow: var(--shadow-b); font-size: 18px; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.car-nav[hidden] { display: none; }
.car-prev { left: -14px; }
.car-next { right: 8px; }
.car-nav:hover { background: var(--surface); }

.carousel {
  display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none;
  margin: 14px -28px 0 0; padding: 0 28px 4px 0;
  scroll-snap-type: x mandatory; scroll-padding-left: 0;
}
.carousel > .mini { scroll-snap-align: start; }
.carousel::-webkit-scrollbar { display: none; }
.mini {
  position: relative; flex: none; width: 300px; background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: 14px; display: flex; gap: 12px; align-items: center;
}
.mini .mthumb { position: relative;
  flex: none; width: 74px; height: 74px; border-radius: 8px; background: var(--surface); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mini .mthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini .mthumb .ph { font-size: 34px; }
.mini .cat { font-size: 12px; color: var(--muted); }
.mini .name { font-size: 15px; font-weight: 800; line-height: 19px; }
.mini .from { font-size: 13.5px; margin-top: 3px; }
.mini .plus { top: 10px; right: 10px; width: 30px; height: 30px; }

/* ===== Mandje-zijbalk ===== */
.basket {
  border-left: 1px solid var(--line); background: #fff;
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
}
.basket-inner { padding: 22px 22px 16px; border-bottom: 1px solid var(--line); }
.basket h3.title { font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 16px; }
.seg { display: flex; background: var(--surface); border-radius: var(--pill); padding: 3px; }
.seg button {
  flex: 1; border: none; background: transparent; border-radius: var(--pill);
  padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.seg button.active { background: #fff; box-shadow: var(--btn-shadow); }
.seg .ic { display: flex; color: var(--ink); }
.seg .lbl { text-align: left; }
.seg .lbl b { display: block; font-size: 13px; line-height: 16px; }
.seg .lbl span { display: block; font-size: 11.5px; line-height: 14px; color: var(--muted); }

.basket-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 22px 12px; }
.basket-empty { text-align: center; padding: 44px 10px 30px; }
.basket-empty .ic { color: var(--muted); display: flex; justify-content: center; }
.basket-empty .h { font-size: 19px; font-weight: 800; margin-top: 12px; }
.basket-empty .s { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.basket-empty hr { border: none; border-top: 1px solid var(--line); margin: 26px 0 14px; }
.basket-empty .fees-hint { font-size: 12px; color: var(--muted); }
.biz-hint {
  display: flex; align-items: center; gap: 10px; text-align: left; margin-top: 20px;
  background: var(--surface); border-radius: var(--r-card); padding: 12px 14px;
  color: var(--ink); text-decoration: none;
}
.biz-hint:hover { background: var(--surface-strong); }
.biz-hint svg { flex: none; color: var(--product); }
.biz-hint b { display: block; font-size: 14px; font-weight: 800; }
.biz-hint span span, .biz-hint > span { font-size: 13px; line-height: 18px; color: var(--ink-2); }

.b-line { padding: 12px 0; border-bottom: 1px solid var(--divider); }
.b-top { display: flex; justify-content: space-between; gap: 10px; }
.b-top .n { font-size: 15px; font-weight: 800; }
.b-top .p { font-size: 14px; font-weight: 700; flex: none; }
.b-opts { font-size: 13px; line-height: 19px; color: var(--ink-2); margin-top: 4px; }
.b-note-txt { font-size: 13px; line-height: 19px; color: var(--muted); margin-top: 3px; font-style: italic; }
.b-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.b-note { font-size: 13.5px; font-weight: 700; text-decoration: underline; background: none; border: none; padding: 0; }
.b-note-row { display: flex; gap: 8px; margin-top: 10px; }
.b-note-row input {
  flex: 1; border: 1px solid var(--border-form); border-radius: var(--pill); padding: 8px 14px; font-size: 13.5px;
}
.b-note-row button {
  border: none; border-radius: var(--pill); background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700; padding: 8px 14px;
}
.b-step { display: flex; align-items: center; gap: 12px; }
.b-step button {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: #fff; box-shadow: var(--btn-shadow);
  font-size: 15px; display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.b-step button:hover { background: var(--surface); }
.b-step .q { font-size: 14px; font-weight: 800; min-width: 14px; text-align: center; }

/* Upsell in mandje */
.upsell-block { background: var(--sky-soft); border-radius: 12px; padding: 14px; margin: 14px 0; }
.upsell-block .h { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.up-card {
  position: relative; background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: 12px 44px 12px 14px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center;
}
.up-card:last-child { margin-bottom: 0; }
.up-card .uthumb { flex: none; width: 44px; height: 44px; border-radius: 8px; background: var(--surface); overflow: hidden; }
.up-card .uthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-card .n { font-size: 14px; font-weight: 800; }
.up-card .p { font-size: 13.5px; font-weight: 700; margin-top: 2px; }
.up-card .plus { top: 50%; transform: translateY(-50%); right: 8px; width: 30px; height: 30px; }

.basket-foot {
  border-top: 1px solid var(--line); padding: 14px 22px 18px; background: #fff;
  position: sticky; bottom: 0; z-index: 2; flex: none;
}
.trow { display: flex; justify-content: space-between; font-size: 14px; line-height: 22px; color: var(--ink-2); }
.trow.total { font-size: 16px; font-weight: 800; color: var(--ink); margin-top: 6px; }
/* Nog-te-gaan tot het minimum als eigen bannertje. De referentie gebruikt
   geel; dat mag hier niet als achtergrond (§3), dus het wordt de zachte
   sky-tint met dezelfde attentiewaarde. */
.minorder { margin-top: 10px; background: var(--sky-soft); border-radius: 10px; padding: 10px 12px; }
.minorder .txt { font-size: 13px; line-height: 18px; color: var(--ink); margin-bottom: 7px; }
.minorder .txt b { font-weight: 800; }
.minorder .bar { height: 5px; border-radius: var(--pill); background: #fff; overflow: hidden; }
/* scaleX in plaats van width: geen layoutwerk per hertekening, en de balk
   groeit vanaf links dankzij de transform-origin. */
.minorder .fill { height: 100%; width: 100%; background: var(--product); transform-origin: left; transition: transform 0.3s ease; }
.checkout {
  display: block; width: 100%; margin-top: 12px; border: none; border-radius: var(--pill);
  padding: 15px 24px; font-size: 16px; font-weight: 800; background: var(--product); color: #fff;
  text-align: center; text-decoration: none;
}
.checkout:hover:not(.disabled) { background: var(--product-dk); }
.checkout.disabled { background: var(--surface); color: var(--text-disabled); pointer-events: none; }

/* Sluitknop hoort bij het mobiele volledig-scherm mandje */
.basket-x {
  display: none; position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--surface);
  font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
}

/* Mobiel: mandje als bottom bar, die opent naar een volledig scherm.
   Half-hoge zwevende panelen lieten de pagina en de onderbalken erdoorheen
   zien; dat leest als een fout in plaats van als een mandje. */
@media (max-width: 980px) {
  .basket { display: none; }
  .basket.open {
    display: flex; position: fixed; inset: 0; z-index: 60;
    height: 100dvh; max-height: none; border: none; border-radius: 0; border-left: none;
    max-width: 100%; overflow-x: hidden;
  }
  .basket.open .basket-inner { padding-top: 18px; }
  .basket.open .basket-x { display: flex; }
  .basket.open .basket-scroll { padding-bottom: 20px; }
  .basket.open .basket-foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

  /* Onderbalken verdwijnen zolang het mandje open staat */
  body.bb-basket-open .mob-bar,
  body.bb-basket-open .bottom-nav { display: none !important; }
}
/* Mandje-balk zit bóven het bottom-menu */
.mob-bar {
  display: none; position: fixed; left: 0; right: 0;
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); z-index: 40;
  padding: 10px 14px; background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line);
}
.mob-bar button {
  width: 100%; border: none; border-radius: var(--pill); padding: 15px 22px; font-size: 16px; font-weight: 800;
  background: var(--product); color: #fff; display: flex; justify-content: space-between;
}
@media (max-width: 980px) { .mob-bar { display: block; } }
.mob-bar[hidden], .bb-toast[hidden] { display: none !important; }

/* ===== Productsheet ===== */
.veil {
  position: fixed; inset: 0; background: var(--overlay); z-index: 50;
  display: none; align-items: center; justify-content: center; padding: 18px;
}
.veil.open { display: flex; }
.sheet {
  background: #fff; border-radius: var(--r-sheet); width: 100%; max-width: 480px; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.sheet-img {
  position: relative; height: 220px; flex: none; background: var(--surface); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sheet-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vierkante en staande foto's passen we in plaats van bij te snijden: een
   blikje frisdrank in een brede strook wordt anders een uitvergrote streep. */
.sheet-img.is-passend img { object-fit: contain; padding: 12px 0; }
.sheet-img .ph { font-size: 74px; }
.sheet-x {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: none;
  background: #fff; box-shadow: var(--btn-shadow); font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sheet-scroll { overflow-y: auto; flex: 1; }
.sheet-head { padding: 18px 22px 6px; }
.sheet-head h3 { font-size: 21px; font-weight: 800; }
.sheet-head .from { font-size: 16px; font-weight: 800; margin-top: 6px; }
.sheet-head .from .vanaf { font-size: 14px; }
.sheet-head .desc { font-size: 14px; line-height: 20px; color: var(--ink-2); margin: 10px 0 0; }
.band {
  background: #f7f4ef; padding: 12px 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.opts + .band { margin-top: 4px; }
.band .l small { display: block; font-size: 12px; color: var(--muted); }
.band .l b { font-size: 15px; }
/* JET-orange: bewust en spaarzaam — verplichte keuze vraagt aandacht */
.band .req { flex: none; background: var(--jet-orange); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: var(--pill); padding: 4px 10px; }
.band .opt-tag { flex: none; background: #fff; color: var(--muted); font-size: 11.5px; font-weight: 700; border-radius: var(--pill); padding: 4px 10px; }

/* Lange keuzelijsten beginnen ingeklapt: zes regels is genoeg om te kiezen */
.opt-hidden { display: none; }
.opt-more {
  display: block; margin: 10px 0 2px; border: none; background: none; padding: 0;
  font-size: 14px; font-weight: 700; color: var(--product); text-decoration: underline; cursor: pointer;
}
.opt-more:hover { color: var(--product-dk); }

/* Upsell in de productsheet (§4.2). Twee brede regels in plaats van een
   scrollrij: één blik, één keuze, geen rommelige uitlijning. */
.sheet-ups { background: var(--sky-soft); padding: 16px 22px 18px; }
.sheet-ups .h { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.sheet-ups-row { display: grid; gap: 10px; }
/* "Iets anders": derde keuze onder de twee voorgestelde drankjes */
.ups-anders {
  display: block; width: 100%; margin-top: 10px; padding: 11px 14px; border-radius: var(--pill);
  border: 1.5px solid rgba(0, 0, 0, 0.18); background: transparent; color: var(--ink);
  font-size: 14px; font-weight: 700; text-align: center; white-space: nowrap; cursor: pointer;
}
.ups-anders:hover { background: #fff; }
.ups-anders.is-gekozen { background: var(--ink); border-color: var(--ink); color: var(--text-inverse); }
.ups-card {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 10px 12px;
}
.ups-card .uthumb {
  flex: none; width: 52px; height: 52px; border-radius: 10px;
  background: var(--surface); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ups-card .uthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ups-card .uthumb .ph { font-size: 26px; }
.ups-card .ups-txt { flex: 1; min-width: 0; }
.ups-card .n { font-size: 14.5px; font-weight: 800; line-height: 19px; }
.ups-card .p { font-size: 14px; font-weight: 700; margin-top: 2px; }
/* relative, niet static: de getekende balkjes van .plus zijn absoluut
   gepositioneerd en zouden anders tegen een voorouder uitlijnen — dan zweeft
   er een los plusje midden in de sheet. */
.ups-card .plus { position: relative; flex: none; width: 34px; height: 34px; }
.opts { padding: 4px 22px 12px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); cursor: pointer; font-size: 15px; }
.opt:last-child { border-bottom: none; }
.opt input { accent-color: var(--product); width: 19px; height: 19px; flex: none; margin: 0; }
.opt .delta { margin-left: auto; font-size: 14px; color: var(--ink-2); }
.sheet-note { padding: 18px 22px; border-top: 1px solid var(--divider); }
.sheet-note label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink-2); }
.sheet-note textarea {
  width: 100%; border: 1px solid var(--border-form); border-radius: var(--r-input); padding: 10px 14px;
  font-size: 14px; resize: vertical; min-height: 44px;
}
.sheet-foot { flex: none; display: flex; gap: 12px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.m-step { flex: none; display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: var(--pill); padding: 4px; }
.m-step button { width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; font-size: 17px; }
.m-step button:hover { background: #fff; box-shadow: var(--btn-shadow); }
.m-step .q { font-size: 15px; font-weight: 800; min-width: 22px; text-align: center; }
.m-add {
  flex: 1; border: none; border-radius: var(--pill); font-size: 15px; font-weight: 800;
  background: var(--product); color: #fff; padding: 12px 18px;
}
.m-add:hover:not(:disabled) { background: var(--product-dk); }
.m-add:disabled { background: var(--surface); color: var(--text-disabled); cursor: not-allowed; }

/* ===== Adres-modal (address-first, Thuisbezorgd-model) ===== */
.sheet-adr { max-width: 420px; position: relative; }
.sheet-adr .sheet-x { position: absolute; }
.adr-form { padding: 4px 22px 22px; }
.adr-row { display: flex; gap: 12px; }
.adr-row label { flex: 1; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.adr-row input {
  display: block; width: 100%; margin-top: 6px;
  border: 1px solid var(--border-form); border-radius: var(--r-input); padding: 12px 14px; font-size: 15px;
}
.adr-row input::placeholder { color: var(--text-placeholder); }
.adr-recent { margin-top: 18px; }
.adr-recent-h { display: block; font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.adr-recent-row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  border: none; background: transparent; border-radius: 10px; padding: 10px 8px; cursor: pointer;
}
.adr-recent-row:hover { background: var(--surface); }
.adr-recent-row svg { flex: none; color: var(--product); margin-top: 2px; }
.adr-recent-row b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.adr-recent-row span span { display: block; font-size: 14px; color: var(--ink-2); }

.adr-error { font-size: 13.5px; font-weight: 700; color: #b00020; margin: 10px 0 0; }
/* Eén adresveld met suggestielijst */
.adr-search { position: relative; }
.adr-search-ic {
  position: absolute; left: 16px; top: 15px; color: var(--product); display: flex; pointer-events: none;
}
.adr-search input {
  width: 100%; border: 1px solid var(--border-form); border-radius: var(--pill);
  padding: 14px 18px 14px 46px; font-size: 15px; color: var(--ink); background: #fff;
}
.adr-search input::placeholder { color: var(--text-placeholder); }
.adr-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  list-style: none; margin: 0; padding: 6px; max-height: 260px; overflow-y: auto;
  background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-b);
}
.adr-suggest[hidden] { display: none; }
.adr-suggest li { padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.adr-suggest li:hover, .adr-suggest li.active { background: var(--surface); }
.adr-s-label { display: block; font-size: 14.5px; font-weight: 700; }
.adr-s-sub { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }

.adr-picked {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding: 14px 16px; background: var(--surface); border-radius: var(--r-card);
}
.adr-picked[hidden] { display: none; }
.adr-picked b { display: block; font-size: 15px; }
.adr-picked span { font-size: 13px; color: var(--text-muted); }
.adr-nr { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.adr-nr[hidden] { display: none; }
.adr-nr input {
  display: block; width: 84px; margin-top: 4px; border: 1px solid var(--border-form);
  border-radius: var(--r-input); padding: 9px 12px; font-size: 15px; font-weight: 400; background: #fff;
}
.adr-form .m-add { width: 100%; margin-top: 16px; padding: 14px 18px; }
.adr-alt {
  display: block; width: 100%; margin-top: 10px; background: none; border: none;
  font-size: 13.5px; font-weight: 700; text-decoration: underline; color: var(--ink);
  padding: 8px;
}

.fees-edit {
  background: none; border: none; padding: 0; font-size: inherit;
  font-weight: 800; color: var(--product); text-decoration: underline;
}

/* Gebiedsmelding (koud assortiment / niet bezorgbaar) */
.area-note {
  margin-top: 12px; background: var(--tonal); border-radius: var(--r-input);
  padding: 11px 16px; font-size: 13.5px; line-height: 19px; color: var(--ink);
}
.area-note.warn { background: #fdecec; }
.area-note button { background: none; border: none; padding: 0; font-weight: 800; text-decoration: underline; font-size: 13.5px; }
.area-note[hidden] { display: none !important; }

/* Verborgen warme kaarten in koud gebied */
.card[data-hidden-warm], .mini[data-hidden-warm] { display: none !important; }

/* ===== Toast (foutmeldingen cart-AJAX) ===== */
.bb-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
  border-radius: var(--pill); padding: 12px 22px; z-index: 60; box-shadow: var(--card-shadow);
}

/* Aantal in het mandje, linksboven op de foto: je ziet in één oogopslag wat
   je al hebt gekozen. De plusknop blijft rechts staan voor nog een. */
.qty-badge {
  position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--text-inverse);
  font-size: 13.5px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff, var(--btn-shadow);
}
.mini .qty-badge { top: 6px; left: 6px; width: 24px; height: 24px; font-size: 12.5px; }

/* Producten zonder keuzes (drank, frites): aantal direct op de kaart aanpassen */
.card-step {
  position: absolute; top: 8px; right: 8px; display: flex; align-items: center; height: 34px;
  border-radius: var(--pill); background: var(--ink); color: var(--text-inverse);
  box-shadow: 0 0 0 2px #fff, var(--btn-shadow);
}
.card-step button {
  position: relative; width: 32px; height: 34px; border: 0; padding: 0; background: transparent;
  color: inherit; font-size: 0; cursor: pointer; border-radius: var(--pill);
}
.card-step button::before, .card-step [data-cs="inc"]::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 1px;
  transform: translate(-50%, -50%);
}
.card-step button::before { width: 12px; height: 2.2px; }
.card-step [data-weg="true"]::before { display: none; }
.card-step [data-cs="dec"] svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.card-step [data-cs="inc"]::after { width: 2.2px; height: 12px; }
.card-step button:hover { background: rgba(255, 255, 255, 0.14); }
.card-step .num { min-width: 16px; text-align: center; font-size: 14px; font-weight: 800; }

/* Zoeken zonder treffers: liever een uitleg dan een lege pagina */
.search-empty { text-align: center; padding: 60px 20px 40px; }
.search-empty b { display: block; font-size: 19px; font-weight: 800; color: var(--ink); }
.search-empty span { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 6px; }
.search-empty[hidden] { display: none; }

/* ===== Mobiel: producten als volle regels, niet als zwevende kaarten =====
   Op een smal scherm kost kaartchroom (rand, schaduw, marge) breedte die
   de omschrijving en de foto nodig hebben. Regels met een haarlijn ertussen
   lezen rustiger en tonen per scherm meer producten. */
@media (max-width: 700px) {
  .grid { gap: 0; margin-top: 8px; }

  .card {
    margin: 0 -18px; padding: 16px 18px; min-height: 0;
    background: transparent; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--divider);
    align-items: flex-start; gap: 14px;
  }
  .card:last-child { border-bottom: none; }

  .card .name { font-size: 16px; line-height: 21px; }
  .card .from { margin-top: 4px; }
  .card .desc { margin-top: 6px; -webkit-line-clamp: 2; }
  .card .thumb { width: 92px; height: 92px; }
  .card .thumb > img { box-shadow: var(--card-shadow); }

  /* De sectie zelf houdt de witte achtergrond vast waar de kaarten die loslaten */
  .menu-section .grid { background: #fff; margin: 8px -18px 0; padding: 0 18px; border-radius: var(--r-card); }
  .menu-section .grid .card { margin: 0 -18px; padding: 16px 18px; }

  /* Carrousel: kaarten iets smaller zodat de volgende zichtbaar aanzet */
  .mini { width: 250px; }
  .car-nav { display: none; }
}

/* Adres in het mandje: dezelfde plek waar je bezorgen of afhalen kiest,
   zodat alles wat met de levering te maken heeft bij elkaar staat. */
/* Eigen vlak, niet zomaar een regel boven de eerste productregel: waar het
   heen gaat is een andere soort informatie dan wat je besteld hebt. */
.basket-adr {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 12px;
  background: var(--sky-soft); border-radius: 10px; padding: 10px 12px;
  font-size: 14px; line-height: 19px; color: var(--ink);
}
.basket-adr[hidden] { display: none; }
.basket-adr svg { flex: none; color: var(--product); margin-top: 2px; }
.basket-adr > span { flex: 1; min-width: 0; }
/* Het adres mag over meerdere regels: afkappen met … maakt juist onduidelijk
   waar je bestelling heen gaat. */
.basket-adr .adr-tekst {
  display: block; font-size: 14px; line-height: 19px; font-weight: 700; color: var(--ink);
  overflow-wrap: anywhere;
}
.adr-wijzig {
  flex: none; align-self: center; border: none; background: none; padding: 0;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  text-decoration: underline; cursor: pointer;
}
.adr-wijzig:hover { color: var(--product-dk); }

/* Zakelijk: het gevulde mandje is het moment om een bestellijst te bewaren */
.basket-lists {
  display: block; text-align: center; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: underline;
}
.basket-lists:hover { color: var(--product-dk); }

/* ===== Deals =====
   Geel mag hier: §3 staat het toe voor promo, zolang het geen paginavlak is.
   Het zit dus in het badge-icoon, niet achter de kaart. */
.from .oud {
  margin-left: 8px; font-weight: 400; color: var(--muted);
  text-decoration: line-through;
}
.deal-tag {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 15px; font-weight: 800; color: var(--ink);
}
/* box-sizing is border-box, dus de maat is inclusief padding: 34px doos met
   7px lucht laat een icoon van 20px over. */
.deal-tag svg {
  flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
}
.deals-section .sec-note { margin-top: 2px; }

/* In de sheet staan de badges onder de omschrijving naast elkaar */
.sheet-head .deal-tag { margin-top: 12px; margin-right: 10px; }
.sheet-head .from .oud { font-size: 15px; }

/* Kortingsmarkering op een mandjeregel: klein, maar wel zichtbaar dat de
   prijs een actieprijs is. */
.b-sale {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 7px;
  background: var(--yellow); color: var(--ink); border-radius: var(--pill);
  padding: 2px 8px 2px 6px; font-size: 11px; font-weight: 800; vertical-align: 1px;
}
.b-sale svg { flex: none; }

/* ===== Leeftijdscheck (NIX-18) ===== */
/* Boven elk ander venster: deze vraag moet als eerste beantwoord worden */
#bb-leeftijd-veil { z-index: 70; }
/* Het adresvenster moet boven het schermvullende mobiele mandje (60) liggen:
   wie daar op "Bezorgen" tikte, kreeg het venster erachter en zag alleen het
   toetsenbord verschijnen (gemeld na livegang, 12 okt 2026). */
#bb-adr-veil { z-index: 65; }
.sheet-leeftijd { max-width: 440px; }
.sheet-leeftijd .sheet-head { padding: 26px 26px 6px; }
.leeftijd-nix {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 14px;
  background: var(--ink); color: var(--text-inverse);
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em;
}
.sheet-leeftijd h3 { font-size: 22px; line-height: 27px; font-weight: 800; }
.sheet-leeftijd .desc { margin-top: 10px; }
.leeftijd-acties { padding: 8px 26px 26px; }
.leeftijd-acties .m-add { width: 100%; }
.leeftijd-acties .adr-alt { margin-top: 6px; }

/* Van/voor op een mandjeregel */
.b-top .p .oud {
  font-weight: 400; font-size: 13px; color: var(--muted); text-decoration: line-through;
}

/* Lunchpakket: prijs per persoon en de spelregels, bovenaan de sheet */
.sheet-pakket {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 10px 0 2px; padding: 10px 12px;
  background: var(--surface); border-radius: 10px;
}
.sheet-pakket b { font-size: 15px; font-weight: 700; color: var(--text); }
.sheet-pakket span { font-size: 13px; line-height: 18px; color: var(--text-muted); }


/* ===== Uitgelichte categorie (zakelijke klant) ===== */

/* De kop mag naast het label staan, dus sec-head wordt een flexrij */
.sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sec-tip, .chip-tip, .cats-tip {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--pill); font-weight: 800; white-space: nowrap;
  background: var(--product); color: #fff;
}
.sec-tip { padding: 3px 10px 3px 8px; font-size: 12px; line-height: 16px; }
.sec-tip svg { flex: none; }

/* In de chip: compacter, en op de actieve (donkere) chip een lichte variant */
.chip-tip { padding: 1px 7px; font-size: 11px; line-height: 15px; margin-left: 5px; }
.catnav a.active .chip-tip { background: #fff; color: var(--ink); }

.cats-tip {
  padding: 2px 8px; font-size: 11px; line-height: 15px;
  margin-left: 8px; vertical-align: middle;
}

/* Aantalbadge op een upsellkaartje: geen zwevende cirkel maar gewoon de plek
   van het plusje innemen — de kaart is een flexrij, niet een vlak. */
.ups-card { position: relative; }
.ups-card .qty-badge {
  position: static; flex: none; width: 34px; height: 34px;
  box-shadow: none; font-size: 14px;
}

/* Wat krijg je voor die prijs: "per stuk, vanaf 40" of "voor 40 stuks".
   Zonder deze regel lijkt € 0,75 vergelijkbaar met € 34,00. */
.card .from .eenheid, .sheet-head .from .eenheid {
  display: block; margin-top: 2px;
  font-size: 12.5px; line-height: 16px; font-weight: 400;
  color: var(--ink-2); font-variant-numeric: normal; letter-spacing: 0;
}

/* Meegekozen drankje in de productsheet: het plusje maakt plaats voor het
   aantal dat meegaat, en dat volgt de teller van het product. */
.ups-card.is-gekozen { outline: 2px solid var(--product); outline-offset: -2px; }
.ups-aantal {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--product); color: #fff;
  font-size: 14px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.ups-aantal[hidden] { display: none; }

/* Productfoto's op wit: de foto's zelf zijn wit, een kleurvlak erachter
   oogde rommelig (Mark, okt 2026) */
.thumb, .mini .mthumb, .up-card .uthumb { background: #fff; }

/* Geen productfoto: rustig vlak met het BB-monogram in plaats van een icoon */
.ph { display: grid; place-items: center; width: 100%; height: 100%; background: #f3ecdf; color: rgba(86, 127, 0, 0.38);
  font-family: var(--font-display); font-weight: 900; letter-spacing: -0.05em; line-height: 1; user-select: none; }
.thumb .ph, .mthumb .ph { font-size: 30px; }
.mini .mthumb .ph { font-size: 24px; }
.sheet-img .ph { font-size: 64px; }