/* Customer ordering app — mobile-first, portrait.
   Redesign "Winkelraam" (richting 1a). Pure drop-in: same markup, same JS
   hooks, same class names as before — only the presentation changed.

   Wat er visueel anders is t.o.v. de vorige versie:
   · De chrome is papierkleurig i.p.v. navy — het winkellogo en de
     categoriekleuren zijn zo de enige kleur bovenaan (white-label).
   · Het menu is een lijst met volle-breedte rijen i.p.v. een 2-koloms raster:
     lange productnamen passen, en het aantal is met één duim te wijzigen.
   · #tabs staat vast onderaan als navigatiebalk (native gevoel op Android/iOS).
   · Grotere raakvlakken: elke +/− knop is minstens 44px.

   Reuses css/style.css's :root tokens; de eigen tokens hieronder zijn de
   opgefriste neutralen rond hetzelfde navy #1e3a5f. */

:root {
  --paper:      #f6f2ec;   /* app-achtergrond */
  --surface:    #ffffff;   /* kaarten, velden */
  --surface-2:  #fffdfa;   /* onderbalk */
  --hairline:   #e9e3d9;   /* scheidingslijn chrome */
  --rule:       #ece7de;   /* scheidingslijn in lijsten */
  --stroke:     #e4ded4;   /* rand op velden en kaarten */
  --stroke-2:   #d8d1c5;   /* rand op knoppen */
  --ink:        #191a1c;
  --ink-2:      #45423d;
  --ink-3:      #6e6a63;
  --ink-4:      #8b857c;
  --navy-soft:  #eef1f6;   /* navy op 8% — actieve tab, statuschip */
  --tap:        44px;      /* minimum raakvlak */
  --nav-h:      74px;      /* hoogte onderbalk */
  /* Breedte van de gecentreerde kolom op grote schermen (zie onderaan). Ruim
     genoeg voor drie productkaarten naast elkaar; daarbuiten blijft er links en
     rechts witruimte over. */
  --content-max: 1040px;
}
html[data-theme="dark"] {
  --paper:      #14161a;
  --surface:    #1c1e23;
  --surface-2:  #1a1d22;
  --hairline:   #24272e;
  --rule:       #23262c;
  --stroke:     #2a2d34;
  --stroke-2:   #343841;
  --ink:        #eaeaec;
  --ink-2:      #c3c5ca;
  --ink-3:      #9a9ea8;
  --ink-4:      #868d99;
  --navy-soft:  #202631;
  --accent:     #8fb4e8;   /* navy is te donker op zwart — dit is de lift */
}
/* Literal fallback: --navy comes from css/style.css, so if that file is slow,
   cached-stale or blocked, --accent (and the primary "Bevestig en betaal" button
   that uses it as its background) must not resolve to nothing — that renders the
   CTA white-on-transparent, invisible next to the visible "Annuleren". */
:root { --accent: var(--navy, #1e3a5f); }

html, body { height: auto; min-height: 100%; overscroll-behavior: none; background: var(--paper); }
body { color: var(--ink); text-wrap: pretty; }
/* overflow:visible voltooit de override van style.css' app-shell (#app is daar
   een flex-kolom met overflow:hidden voor de kiosk). Zonder dit maakt die
   overflow:hidden van #app de sticky-context, en die scrollt nooit — waardoor
   position:sticky (topbar én categorie-navbalk) stilzwijgend niet werkte. */
#app { display: block; height: auto; min-height: 100vh; overflow: visible; }

.view { display: none; }
.view.active { display: block; }

/* ══ Auth & winkelkiezer ══════════════════════════════════════════════
   Geen kaart meer op een gekleurde achtergrond: het scherm ís de kaart.
   Dat scheelt een rand, en de titel mag daardoor veel groter. */
#auth-view.active,
#shop-view.active {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; padding: 24px;
}
#auth-box, #shop-box { width: 100%; max-width: 400px; margin: 0 auto; background: none; box-shadow: none; padding: 0; }

#brand-logo { display: block; width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 18px; }
#auth-logo { display: block; max-height: 64px; max-width: 60%; object-fit: contain; margin: 0 auto 22px; }
#auth-box h1, #shop-box h1 {
  font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
  color: var(--ink); text-align: left; margin-bottom: 10px;
}
#auth-box h1, #shop-box h1 { text-align: center; }
#shop-box .auth-hint { text-align: center; }
.auth-hint { font-size: 14px; color: var(--ink-3); margin-bottom: 18px; line-height: 1.55; }

/* Tabs als onderstreping — een pil-schakelaar suggereert "instelling",
   deze twee zijn twee formulieren. */
.auth-tabs { display: flex; gap: 24px; background: none; border-radius: 0; padding: 0; margin: 30px 0 20px; border-bottom: 1px solid var(--stroke); }
.auth-tab {
  flex: 0 0 auto; padding: 0 0 11px; border: none; background: none; border-radius: 0;
  font-size: 15px; font-weight: 500; color: var(--ink-4); cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
}
.auth-tab.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }

#shop-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 6px; }
.shop-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 148px; padding: 20px 14px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--stroke); background: var(--surface); color: var(--ink);
  text-align: center;
}
.shop-choice:hover, .shop-choice:active { border-color: var(--accent); background: var(--navy-soft); }
.shop-choice-logo { max-width: 100%; max-height: 72px; object-fit: contain; margin-bottom: 0; }
.shop-choice-name { font-size: 16px; font-weight: 600; line-height: 1.25; }
.shop-choice-name--caption { font-size: 13px; font-weight: 500; color: var(--ink-3); opacity: 1; }

/* ══ Velden en knoppen ═══════════════════════════════════════════════ */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 7px;
}
.field input {
  width: 100%; padding: 14px 16px; border: 1px solid var(--stroke); border-radius: 12px;
  font-size: 16px;                 /* 16px = geen auto-zoom op iOS */
  background: var(--surface); color: var(--ink);
}
.field input::placeholder { color: var(--ink-4); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--navy-soft); }

.btn-primary, .btn-secondary {
  width: 100%; min-height: var(--tap); padding: 15px; border-radius: 12px;
  font-size: 16px; font-weight: 600; cursor: pointer; border: none;
}
.btn-primary { background: var(--accent); color: #fff; margin-top: 8px; }
.btn-primary:active { background: var(--navy2); }
.btn-secondary { background: var(--surface); color: var(--ink-2); border: 1px solid var(--stroke); }
html[data-theme="dark"] .btn-primary { color: #10192a; }
.link-btn {
  display: block; width: 100%; min-height: var(--tap); background: none; border: none;
  color: var(--accent); font-size: 14px; font-weight: 500; text-align: center;
  padding: 12px 0 0; cursor: pointer;
}

.made-by { font-size: 12px; color: var(--ink-4); text-align: center; margin-top: 26px; line-height: 1.6; }
.made-by a { color: var(--ink-3); }

/* ══ Wachtwoord tonen/verbergen ══════════════════════════════════════ */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: none; cursor: pointer; color: var(--ink-4);
}
.pw-toggle:hover { color: var(--accent); }
.pw-toggle:focus { outline: none; }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.pw-toggle svg { width: 20px; height: 20px; display: block; }

/* ══ Topbar ══════════════════════════════════════════════════════════
   Papierkleurig, niet navy: de winkel brengt zijn eigen kleur mee. */
#topbar {
  background: var(--paper); color: var(--ink); padding: 16px 20px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 0; z-index: 10;
}
#topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
#topbar-logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; border-radius: 7px; flex-shrink: 0; }
#shop-name { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbar-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.topbar-btn, #logout-btn {
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--stroke);
  min-height: 36px; padding: 8px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.topbar-btn:active { background: var(--navy-soft); border-color: var(--accent); }
.msg-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: #e5194f; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ══ Openingsstatus ══════════════════════════════════════════════════
   Een regel met een stip, geen volle gekleurde balk: open zijn is de
   normale toestand en hoeft niet te schreeuwen. Dicht wél. */
#status-bar { display: none; padding: 0 20px 12px; font-size: 13px; font-weight: 500; text-align: left; }
#status-bar.open, #status-bar.closed { display: flex; align-items: center; gap: 8px; }
#status-bar::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
#status-bar.open { color: var(--ink-3); border-bottom: none; background: none; }
#status-bar.open::before { background: var(--green); }
#status-bar.closed {
  color: #a03027; background: var(--red-bg); border-bottom: 1px solid #f0c4bf;
  padding: 11px 20px; font-weight: 600; margin-bottom: 2px;
}
#status-bar.closed::before { background: #c0392b; }
html[data-theme="dark"] #status-bar.closed { background: #3a1a16; color: #ffb4aa; border-bottom-color: #5a2b26; }
html[data-theme="dark"] #status-bar.open::before { background: #6bbf8d; }

/* ══ Navigatie — vaste onderbalk ═════════════════════════════════════ */
#tabs {
  display: flex; gap: 4px; align-items: center;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-2); border-top: 1px solid var(--hairline); border-bottom: none;
}
#tabs .tab {
  flex: 1; min-height: var(--tap); padding: 10px 0; text-align: center;
  background: none; border: none; border-radius: 12px;
  font-size: 13px; font-weight: 500; color: var(--ink-4); cursor: pointer;
  /* style.css's POS .tab is uppercase + gespatieerd; hier niet. */
  text-transform: none; letter-spacing: 0; transition: none;
}
#tabs .tab.active { color: var(--accent); font-weight: 600; background: var(--navy-soft); border-bottom: none; }

.main-tab { display: none; padding: 4px 20px calc(var(--nav-h) + 90px); }
.main-tab.active { display: block; }

/* ══ Categorie-snelnavigatie ═════════════════════════════════════════
   Horizontaal scrollende rij chips tussen het logo en de producten. Plakt onder
   de topbar (--topbar-h, in JS gemeten) zodat je van overal naar een categorie
   kan springen. Leeg bij één categorie → verborgen.

   Standaard VERBORGEN: op mobiel (< 900px) tonen we ze niet — daar is de lijst
   kort genoeg om te scrollen en de balk zou schermruimte kosten. Ze verschijnt
   pas op de brede layout (zie de @media onderaan), samen met de 3-koloms grid. */
#cat-nav {
  position: sticky; top: var(--topbar-h, 64px); z-index: 9;
  display: none; gap: 8px; align-items: center;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 8px 0 10px; margin: 0 0 2px; background: var(--paper);
}
#cat-nav::-webkit-scrollbar { display: none; }
#cat-nav:empty { display: none; }
.cat-chip {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  padding: 8px 15px; min-height: 34px; border-radius: 999px;
  font-size: 13px; font-weight: 600; scroll-margin: 8px;
  /* Neutrale fallback: zo ziet een categorie zonder kleur eruit, én browsers
     zonder color-mix houden dit (de tint-regels hieronder worden dan genegeerd). */
  border: 1px solid var(--stroke-2); background: var(--surface); color: var(--ink-2);
}
/* Rusttoestand: zachte tint van de eigen categoriekleur (--chip, per chip gezet in
   renderCategoryNav), met die kleur als tekst — zo matcht de knop de kleur van de
   categoriekop. */
.cat-chip--tinted {
  /* Tekst is de categoriekleur, een tikje verdiept (12% zwart) zodat ook de
     lichtere kleuren AA-contrast halen op de zachte tint. */
  color: color-mix(in srgb, var(--chip) 88%, #000);
  background: color-mix(in srgb, var(--chip) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--chip) 30%, var(--surface));
}
.cat-chip:active { filter: brightness(0.97); }
/* Geselecteerd = vollere vulling van dezelfde kleur, wit opschrift. */
.cat-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-chip--tinted.active { background: var(--chip); border-color: var(--chip); color: #fff; }
/* In donkere modus is de volle categoriekleur als tekst te donker op de donkere
   tint (Drank/Brood zakken onder leesbaar contrast). Licht de tekst dus op en
   verdiep de achtergrondtint een tik, zodat elke chip AA-leesbaar blijft. */
html[data-theme="dark"] .cat-chip--tinted {
  color: color-mix(in srgb, var(--chip) 55%, #ffffff);
  background: color-mix(in srgb, var(--chip) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--chip) 40%, var(--surface));
}
html[data-theme="dark"] .cat-chip.active { color: #10192a; }
/* Actief blijft een volle vulling van de eigen kleur met wit opschrift. */
html[data-theme="dark"] .cat-chip--tinted.active { color: #fff; }

/* ══ Menu — lijst met volle-breedte rijen ════════════════════════════ */
.menu-cat-hdr {
  /* Sprongdoel voor de categoriechips: laat de kop net onder de vaste topbar +
     chipbalk landen i.p.v. erachter. --topbar-h wordt in JS gemeten. */
  scroll-margin-top: calc(var(--topbar-h, 64px) + 52px);
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cat-accent, var(--accent));
  margin: 26px 0 6px; padding: 8px 0;
  background: var(--paper); border-radius: 0; border-left: none;
}
.menu-cat-hdr::after { content: ''; flex: 1; height: 1px; background: var(--stroke); }
.menu-cat-hdr:first-child { margin-top: 4px; }

.menu-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.menu-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center; column-gap: 14px; row-gap: 2px;
  background: none; border-radius: 0; box-shadow: none;
  padding: 11px 0; text-align: left;
  border-bottom: 1px solid var(--rule);
}
.menu-card.sold-out { opacity: 1; }
.menu-card.sold-out .menu-card-name,
.menu-card.sold-out .menu-card-price { color: var(--ink-4); }
.menu-card-emoji {
  grid-column: 1; grid-row: 1 / span 2;
  width: 52px; height: 52px; border-radius: 12px; background: var(--warm);
  font-size: 26px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.menu-card-emoji img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.menu-card-name { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); align-self: end; }
.menu-card-price { grid-column: 2; grid-row: 2; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; align-self: start; }
.sold-out-lbl {
  grid-column: 3; grid-row: 1 / span 2;
  font-size: 12px; font-weight: 600; color: var(--ink-4);
  background: var(--warm); padding: 8px 12px; border-radius: 999px;
  margin-top: 0; white-space: nowrap;
}

/* Stepper: 0 → één ronde +, daarna een navy pil met − aantal +.
   De JS rendert altijd alle drie; de "leeg"-staat komt van .qty-0. */
.qty-stepper {
  grid-column: 3; grid-row: 1 / span 2;
  display: flex; align-items: center; gap: 4px; margin-top: 0;
  background: var(--accent); border-radius: 999px; padding: 4px;
}
.qty-stepper button {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 19px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.qty-stepper button:active { background: rgba(255,255,255,.3); }
.qty-stepper span { min-width: 22px; padding: 0 2px; text-align: center; color: #fff; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-theme="dark"] .qty-stepper button,
html[data-theme="dark"] .qty-stepper span { color: #10192a; }
html[data-theme="dark"] .qty-stepper button { background: rgba(16,25,42,.14); }

/* Niets in het mandje: alleen een + knop, geen lege pil met een 0 erin. */
.qty-stepper.qty-0 { background: none; padding: 0; gap: 0; }
.qty-stepper.qty-0 span,
.qty-stepper.qty-0 button:first-child { display: none; }
.qty-stepper.qty-0 button:last-child {
  width: var(--tap); height: var(--tap);
  background: var(--surface); border: 1px solid var(--stroke-2); color: var(--accent);
  font-size: 22px;
}

.empty-state { padding: 48px 20px; text-align: center; color: var(--ink-4); font-size: 14px; line-height: 1.6; }

/* ══ Mandjebalk ══════════════════════════════════════════════════════ */
#cart-bar {
  display: none; position: fixed; left: 16px; right: 16px;
  bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  background: var(--accent); color: #fff; border-radius: 14px; padding: 14px 18px;
  align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 8px 22px rgba(30,58,95,.28); cursor: pointer; z-index: 20;
}
#cart-bar.show { display: flex; }
#cart-summary { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-cta { font-weight: 600; font-size: 15px; background: rgba(255,255,255,.16); padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
#cart-bar.offline { background: var(--ink-4); cursor: default; box-shadow: none; }
html[data-theme="dark"] #cart-bar { color: #10192a; box-shadow: none; }
html[data-theme="dark"] .cart-cta { background: rgba(16,25,42,.14); }

/* ══ Bestellingen ════════════════════════════════════════════════════ */
.order-card {
  background: var(--surface); border: 1px solid var(--stroke); border-radius: 16px;
  box-shadow: none; padding: 18px; margin-bottom: 14px;
}
.order-card-hdr { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.order-status { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.status-open { background: var(--navy-soft); color: var(--accent); }
.status-ready { background: var(--green-bg); color: var(--green); }
.status-collected { background: var(--warm); color: var(--ink-4); }
.status-cancelled { background: var(--red-bg); color: var(--red); }
.order-card-code { font-size: 11px; color: var(--ink-4); letter-spacing: .02em; margin: -4px 0 8px; }
.order-card-items { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 0; }
.order-card-total { font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; margin-top: 12px; }
.order-card-actions { display: flex; gap: 8px; margin-top: 14px; }
/* Unpaid order: pay-or-cancel stacked vertically, payment button first/on top. */
.order-card-actions.stacked { flex-direction: column; }
.order-card-actions.stacked .order-action { flex: 0 0 auto; } /* full width, natural height */
.order-action {
  flex: 1; min-height: var(--tap); padding: 11px 14px; border-radius: 999px;
  border: 1px solid var(--stroke-2); background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.order-action:active { background: var(--warm); }
/* The "Opnieuw betalen" primary action — matches .btn-primary (accent has a
   literal fallback so it can't render invisible if css/style.css is missing). */
.order-action.pay { background: var(--accent, #1e3a5f); color: #fff; border-color: var(--accent, #1e3a5f); }
html[data-theme="dark"] .order-action.pay { color: #10192a; }
.order-action.danger { flex: 0 0 auto; color: var(--red); border-color: #f0d9d5; background: var(--surface); }

.order-payment { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.order-payment.paid { color: var(--green); font-weight: 600; }
.order-payment.failed, .order-payment.expired { color: var(--red); font-weight: 600; }
.order-payment .link-btn { display: inline; width: auto; min-height: 0; margin-left: 6px; font-size: 13px; padding: 0; }

/* ══ Checkout — nu een volledig herzienbaar mandjescherm ═════════════
   Vult (bijna) het hele scherm i.p.v. een half sheet: de klant kan
   rustig nalezen wat hij besteld heeft vóór hij betaalt. */
#checkout-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100; align-items: flex-end; justify-content: center; }
#checkout-overlay.show { display: flex; }
#checkout-box {
  background: var(--paper); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; height: 94vh; max-height: 94vh;
  display: flex; flex-direction: column; overflow: hidden;
}
#checkout-hdr {
  background: var(--paper); color: var(--ink); padding: 20px 22px 16px;
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  border-bottom: 1px solid var(--hairline);
}
#checkout-body { padding: 18px 22px; overflow-y: auto; flex: 1; }

/* ══ Gastgegevens in het mandje ══════════════════════════════════════
   Alleen zichtbaar zonder account (applyAuthChrome). Eigen kopregel met een
   ruler erboven, zodat het duidelijk een aparte stap is onder het afhaalmoment
   — en niet zomaar nog een veld. De inloglink staat ernaast, niet eronder: het
   is een alternatief voor dit blok, geen vervolgstap. */
#co-guest { border-top: 1px solid var(--rule); margin-top: 18px; padding-top: 16px; }
#co-guest-hdr {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
#co-guest-hdr > span { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
/* De generieke .link-btn is een volle-breedte-knop; hier is het een inline link. */
#co-guest-hdr .link-btn {
  display: inline; width: auto; min-height: 0; padding: 0;
  font-size: 13px; text-align: right; white-space: nowrap;
}

/* Herzienbare regels: naam + eenheidsprijs, stepper, regeltotaal. */
.co-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.co-item-name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.co-item-unit { font-size: 13px; color: var(--ink-4); margin-top: 2px; font-variant-numeric: tabular-nums; }
.co-item-total { min-width: 62px; text-align: right; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-stepper {
  display: flex; align-items: center; gap: 3px;
  border: 1px solid var(--stroke-2); background: var(--surface); border-radius: 999px; padding: 3px;
}
.co-stepper button {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: none;
  color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.co-stepper button:active { background: var(--warm); }
.co-stepper span { min-width: 20px; padding: 0 2px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.co-line { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; color: var(--ink-3); padding: 5px 0; border-bottom: none; font-variant-numeric: tabular-nums; }
#checkout-total { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.co-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 20px; font-weight: 700; color: var(--ink);
  padding: 12px 0 0; margin-bottom: 4px;
  border-top: none; border-bottom: none;
  font-variant-numeric: tabular-nums;
}
/* Stacked, not side by side: the primary "Bevestig en betaal" on top, "Annuleren"
   full-width beneath it — so the pay button is never squeezed off the edge. */
#checkout-footer { padding: 14px 22px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; background: var(--paper); border-top: 1px solid var(--hairline); }
#checkout-footer button { flex: 0 0 auto; width: 100%; margin-top: 0; }

/* ══ Betaling bezig ══════════════════════════════════════════════════ */
#payment-wait { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; align-items: center; justify-content: center; }
#payment-wait.show { display: flex; }
#payment-wait-box { background: var(--surface); border-radius: 18px; padding: 28px 34px; text-align: center; font-size: 15px; font-weight: 600; max-width: 80vw; color: var(--ink); }
.payment-wait-hint { margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.spinner { width: 28px; height: 28px; margin: 0 auto 14px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ Bedankt-scherm ══════════════════════════════════════════════════ */
#success-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 250; align-items: center; justify-content: center; padding: 20px; }
#success-overlay.show { display: flex; }
#success-box { background: var(--surface); width: 100%; max-width: 400px; border-radius: 20px; padding: 30px 26px; text-align: left; max-height: 90vh; overflow-y: auto; }
#success-icon { font-size: 40px; line-height: 1; margin-bottom: 14px; }
#success-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; }
#success-sub { font-size: 14px; color: var(--ink-3); line-height: 1.6; margin-bottom: 22px; }
#success-summary { text-align: left; margin-bottom: 22px; }
#success-summary:empty { display: none; }
#success-summary .co-line { font-size: 14px; padding: 7px 0; color: var(--ink-2); }
#success-summary .co-total { font-size: 18px; padding: 12px 0 0; margin-top: 8px; border-top: 1px solid var(--stroke); }
.success-code { font-size: 12px; color: var(--ink-4); letter-spacing: .02em; margin-bottom: 8px; }
.success-pickup { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--stroke); }
#success-footer { display: flex; flex-direction: column; gap: 10px; }
#success-footer button { margin-top: 0; }
#success-push { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--stroke); }
#success-push button { width: 100%; }

/* ══ Toestemming bij registreren ═════════════════════════════════════ */
.reg-consent { display: flex; align-items: flex-start; gap: 11px; margin: 8px 0 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); cursor: pointer; }
.reg-consent input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }

/* ══ Berichten van de winkel ═════════════════════════════════════════ */
#message-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 130; align-items: center; justify-content: center; padding: 20px; }
#message-overlay.show { display: flex; }
#message-box { background: var(--surface); width: 100%; max-width: 420px; border-radius: 20px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
#message-hdr { background: var(--surface); color: var(--ink); padding: 22px 24px 14px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; flex-shrink: 0; border-bottom: 1px solid var(--rule); }
#message-body { padding: 4px 24px; overflow-y: auto; }
#message-footer { padding: 14px 24px calc(22px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; }
#message-footer button { width: 100%; }
.msg-item { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.msg-item:last-child { border-bottom: none; }
.msg-item-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.msg-item-hdr .msg-title { margin-bottom: 4px; }
.msg-del { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 6px; border-radius: 8px; opacity: .5; }
.msg-del:hover { opacity: 1; background: var(--red-bg); }
.msg-item .msg-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.msg-item .msg-text { font-size: 15px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-item .msg-when { font-size: 12px; color: var(--ink-4); margin-top: 7px; }
.msg-item.unread .msg-title::before { content: '●'; color: #c0392b; font-size: 11px; margin-right: 7px; vertical-align: middle; }
.msg-item.unread .msg-title::after { content: none; }

/* ══ Bevestig-dialoog (vervangt native confirm(), die de site-URL toont) ═══ */
#confirm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 300; align-items: center; justify-content: center; padding: 20px; }
#confirm-overlay.show { display: flex; }
#confirm-box { background: var(--surface); width: 100%; max-width: 380px; border-radius: 20px; padding: 24px 22px calc(24px + env(safe-area-inset-bottom, 0px)); color: var(--ink); }
#confirm-text { font-size: 15px; line-height: 1.5; color: var(--ink); }
#confirm-actions { display: flex; gap: 10px; margin-top: 22px; }
#confirm-actions button { flex: 1; margin-top: 0; }
#confirm-ok { background: #c0392b; color: #fff; }
#confirm-ok:active { background: #a02d22; }

/* ══ Mijn gegevens ═══════════════════════════════════════════════════ */
#profile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100; align-items: flex-end; justify-content: center; }
#profile-overlay.show { display: flex; }
#profile-box { background: var(--paper); width: 100%; max-width: 480px; border-radius: 20px 20px 0 0; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
#profile-hdr { background: var(--paper); color: var(--ink); padding: 20px 22px 16px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; border-bottom: 1px solid var(--hairline); }
#profile-body { padding: 18px 22px; overflow-y: auto; }
#profile-footer { padding: 14px 22px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; background: var(--paper); border-top: 1px solid var(--hairline); }
#profile-footer button { flex: 1; margin-top: 0; }
#profile-body input:disabled { background: var(--warm); color: var(--ink-4); cursor: default; }
.field-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-4); line-height: 1.5; }
#pf-push-row label, #pf-theme-row label { font-size: 15px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 500; }
#pf-push-row input[type="checkbox"], #pf-theme-row input[type="checkbox"] { width: 20px !important; height: 20px !important; accent-color: var(--accent); }

/* ══ Toast ═══════════════════════════════════════════════════════════ */
#toast {
  position: fixed; bottom: calc(var(--nav-h) + 24px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper); padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; opacity: 0; transition: all .3s; z-index: 300;
  white-space: nowrap; pointer-events: none; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══ Donkere modus — oppervlakken die deze app hardcodeert ═══════════ */
html[data-theme="dark"] #auth-box,
html[data-theme="dark"] #shop-box { background: none; }
html[data-theme="dark"] .shop-choice,
html[data-theme="dark"] .menu-card-emoji,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] #payment-wait-box,
html[data-theme="dark"] #success-box,
html[data-theme="dark"] #message-box,
html[data-theme="dark"] #confirm-box,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .topbar-btn { background: var(--surface); }
html[data-theme="dark"] .menu-card-emoji { background: #22262d; }
html[data-theme="dark"] #checkout-box,
html[data-theme="dark"] #profile-box,
html[data-theme="dark"] #checkout-hdr,
html[data-theme="dark"] #profile-hdr,
html[data-theme="dark"] #checkout-footer,
html[data-theme="dark"] #profile-footer { background: var(--paper); }
html[data-theme="dark"] #message-hdr { background: var(--surface); }
html[data-theme="dark"] .auth-tab.active { box-shadow: inset 0 -2px 0 var(--accent); }
html[data-theme="dark"] .link-btn,
html[data-theme="dark"] #tabs .tab.active,
html[data-theme="dark"] .status-open,
html[data-theme="dark"] .qty-stepper.qty-0 button:last-child { color: var(--accent); }

/* ══ Grote schermen ══════════════════════════════════════════════════
   Mobiel is de basis en blijft ongewijzigd: één kolom over de volle breedte.
   Dit is puur CSS-detectie via een media query — ze past zich vanzelf aan bij
   resizen of draaien, zonder JavaScript.

   Vanaf een desktop-brede viewport (≥900px) krijgt de bestel-app een
   gecentreerde kolom (max --content-max), zodat er links en rechts witruimte
   overblijft in plaats van kaarten die over een breed scherm uitgerekt worden,
   en staan de producten in DRIE kolommen naast elkaar. De chrome (topbar,
   statusbalk, onderbalk, mandjebalk) lijnt op diezelfde kolom uit, zodat alles
   één blok in het midden vormt. */
@media (min-width: 900px) {
  /* De doorlopende (sticky) chrome en de tab-inhoud in één gecentreerde kolom.
     margin-inline:auto op een sticky/normale-flow-element centreert het; de
     fixed onderbalk en mandjebalk hieronder krijgen dezelfde behandeling. */
  #topbar,
  #status-bar,
  .main-tab {
    max-width: var(--content-max);
    margin-inline: auto;
  }

  /* Drie producten naast elkaar. De rij-kaart (embleem · naam/prijs · stepper)
     blijft dezelfde; hij krult nu gewoon in een smallere kolom. De onderrand
     werkt als scheidingslijn per kaart, de kolomtussenruimte scheidt de drie. */
  .menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
  }

  /* De categoriebalk hoort bij de brede layout, niet bij mobiel. #cat-nav:empty
     (hogere specificiteit) blijft ook hier verborgen bij één categorie. */
  #cat-nav { display: flex; }

  /* De vaste balken lijnen op dezelfde kolom uit. Ze staan fixed met left/right
     0 (onderbalk) of 16px (mandjebalk); een max-width + margin-inline:auto
     centreert ze binnen dat bereik, dus ze zweven niet meer aan de schermrand. */
  #tabs {
    max-width: var(--content-max);
    margin-inline: auto;
  }
  #cart-bar {
    max-width: var(--content-max);
    margin-inline: auto;
  }
}