/* ══════════════════════════════════════════════════════════════════════════
   TULIP SUPERMARKET — ZELFSCAN KASSA (10 ARTIKELEN OF MINDER) — DESIGN SYSTEM
   27" touchscreen, PORTRAIT. Baseline 1080x1920, correct at 1440x2560
   and 2160x3840. Every structural size derives from --u (a viewport-
   derived unit) or rem (html font-size is clamped off vh), so the whole
   UI scales with the panel.

   Brand: Tulip wine #861A36 (the tulip, the script tagline), the olive
   of the wordmark #8B9A2C as accent, warm cream paper surfaces, the
   leaf pattern of tulip-supermarket.com, DM Sans (self-hosted, no CDN).

   Layout language: wine hero + cream start panel, a basket list with
   the 0/10 meter in the top bar, vertical category rail + 3-up grid,
   one dominant wine call-to-action per screen.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   0. TYPEFACE — DM Sans, self-hosted (kiosk must render offline)
   ══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-italic.woff2") format("woff2");
}


/* ══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand palette ───────────────────────────────────────── */
  --brand:        #861A36;   /* Tulip wine                          */
  --brand-dark:   #6F132B;
  --brand-deep:   #4A0C1D;
  --brand-tint:   #F7E7EC;
  --brand-glow:   rgba(134, 26, 54, 0.32);

  --accent:       #8B9A2C;   /* wordmark olive — counts, badges, bags */
  --accent-dark:  #5D6130;
  --accent-light: #C9D46A;
  --accent-tint:  #EEF1DC;

  --warn:         #E9A23B;   /* amber: nearly full, demo tag         */
  --warn-tint:    #FFF2DA;

  --ink:          #171411;   /* warm near-black                     */
  --ink-soft:     #4C473E;
  --ink-mute:     #8A857B;
  --surface:      #FFFFFF;
  --surface-alt:  #FBFAF6;   /* cream paper                         */
  --surface-deep: #F1EEE6;
  --line:         #E6E1D6;
  --line-strong:  #D3CCBE;

  --ok:           #2E9E4F;
  --ok-tint:      #E4F5EA;
  --danger:       #C8372D;
  --danger-tint:  #FBE9E7;
  --info:         #1B5E9B;
  --info-tint:    #E4EEF8;

  --ink-05:       rgba(23, 20, 17, 0.05);
  --ink-10:       rgba(23, 20, 17, 0.10);
  --white-15:     rgba(255, 255, 255, 0.15);
  --white-25:     rgba(255, 255, 255, 0.25);
  --white-60:     rgba(255, 255, 255, 0.60);

  /* ── THE SCALING UNIT: exactly 1px on a 1080x1920 panel ──── */
  --u: clamp(0.72px, min(0.0521vh, 0.0926vw), 2.1px);

  /* ── Radii ───────────────────────────────────────────────── */
  --r-sm:   calc(14 * var(--u));
  --r-md:   calc(22 * var(--u));
  --r-lg:   calc(34 * var(--u));
  --r-xl:   calc(52 * var(--u));
  --r-pill: 999px;

  /* ── Elevation ───────────────────────────────────────────── */
  --shadow-1:
    0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(23, 20, 17, 0.05),
    0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(23, 20, 17, 0.07);
  --shadow-2:
    0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(23, 20, 17, 0.08),
    0 calc(16 * var(--u)) calc(44 * var(--u)) rgba(23, 20, 17, 0.16);
  --shadow-brand:
    0 calc(8 * var(--u)) calc(26 * var(--u)) var(--brand-glow),
    inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.25);

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-1: calc(4  * var(--u));
  --sp-2: calc(8  * var(--u));
  --sp-3: calc(12 * var(--u));
  --sp-4: calc(18 * var(--u));
  --sp-5: calc(26 * var(--u));
  --sp-6: calc(36 * var(--u));
  --sp-7: calc(52 * var(--u));
  --sp-8: calc(72 * var(--u));
  --pad:  calc(30 * var(--u));
  --gap:  calc(22 * var(--u));

  /* ── Vertical rhythm ─────────────────────────────────────── */
  --topbar-h:    max(76px,  calc(150 * var(--u)));
  --bottombar-h: max(104px, calc(236 * var(--u)));

  /* ── Touch ergonomics ────────────────────────────────────── */
  --touch:    max(72px, calc(76  * var(--u)));
  --touch-lg: max(88px, calc(100 * var(--u)));
  --cta-h:    max(96px, calc(118 * var(--u)));

  /* ── Type ────────────────────────────────────────────────── */
  --font: "DM Sans", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* ── Pattern tile ────────────────────────────────────────── */
  --tile: calc(260 * var(--u));

  /* ── Motion ──────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    0.14s;
  --t-base:    0.26s;
  --t-slow:    0.42s;
}


/* ══════════════════════════════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: clamp(11px, min(0.834vh, 1.482vw), 34px);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--surface-alt);
}
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  cursor: default;
}
input, textarea { -webkit-user-select: text; user-select: text; cursor: text; }
img, svg { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
button, a, [data-tap] { -webkit-user-drag: none; }
/* Logo images ARE tap targets (hidden admin entry). */
.topbar-logo, .topbar-brand, .attract-logo, [data-admin-tap] { pointer-events: auto; }

button, input, textarea, select {
  font: inherit; color: inherit; border: 0; background: none; outline: none; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: calc(3 * var(--u)) solid var(--brand); outline-offset: calc(2 * var(--u)); }

#app { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--surface-alt); }
.sprite { position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; }

/* Every scroller: momentum, contained, no visible bar. */
.content, .cat-rail, .item-grid, .cart-list, .modal-body, .modal-sheet, .admin-panel,
.scan-list, .browse-rail, .browse-grid, .checkout-lines, .search-results, .no-scrollbar {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.content::-webkit-scrollbar, .cat-rail::-webkit-scrollbar, .item-grid::-webkit-scrollbar,
.cart-list::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .modal-sheet::-webkit-scrollbar,
.admin-panel::-webkit-scrollbar, .scan-list::-webkit-scrollbar, .browse-rail::-webkit-scrollbar,
.browse-grid::-webkit-scrollbar, .checkout-lines::-webkit-scrollbar, .search-results::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }


/* ══════════════════════════════════════════════════════════════
   3. UTILITIES
   ══════════════════════════════════════════════════════════════ */
.row     { display: flex; align-items: center; gap: var(--sp-3); }
.stack   { display: flex; flex-direction: column; gap: var(--sp-3); }
.grow    { flex: 1 1 auto; min-width: 0; min-height: 0; }
.center  { display: flex; align-items: center; justify-content: center; text-align: center; }
.muted   { color: var(--ink-soft); }
.strong  { font-weight: 800; }
.nowrap  { white-space: nowrap; }
.hidden  { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }
.divider { height: calc(2 * var(--u)); background: var(--line); border-radius: var(--r-pill); margin: var(--sp-4) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* ══════════════════════════════════════════════════════════════
   4. ICONS
   ══════════════════════════════════════════════════════════════ */
.ic { width: 1em; height: 1em; flex: 0 0 auto; display: inline-block; vertical-align: -0.14em; pointer-events: none; overflow: visible; }
.ic-lg  { width: 1.5em; height: 1.5em; }
.ic-xl  { width: 2.2em; height: 2.2em; }
.ic-xxl { width: 3.4em; height: 3.4em; }
.ic.spin { animation: spin 0.9s linear infinite; }


/* ══════════════════════════════════════════════════════════════
   5. BOOT SPLASH
   ══════════════════════════════════════════════════════════════ */
.boot {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6);
  background: var(--brand) url("../img/pattern-wine.svg") center / var(--tile) repeat;
}
.boot-card {
  background: var(--surface-alt); border-radius: var(--r-xl);
  padding: calc(34 * var(--u)) calc(46 * var(--u));
  box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(40, 0, 10, 0.4);
}
.boot-logo { width: calc(460 * var(--u)); max-width: 62vw; height: auto; display: block; }
.boot-bar { width: calc(240 * var(--u)); height: calc(10 * var(--u)); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.boot-bar > i { display: block; width: 40%; height: 100%; border-radius: var(--r-pill); background: #fff; animation: bootSlide 1.15s ease-in-out infinite; }
@keyframes bootSlide { 0% { transform: translateX(-105%); } 100% { transform: translateX(255%); } }


/* ══════════════════════════════════════════════════════════════
   6. LAYOUT — screen / topbar / content / bottombar
   ══════════════════════════════════════════════════════════════ */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-alt);
  opacity: 0; transform: translate3d(0, calc(18 * var(--u)), 0); pointer-events: none;
  will-change: opacity, transform;
  transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease-out);
}
.screen.active { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; }
.screen.exit { opacity: 0; transform: translate3d(0, calc(-14 * var(--u)), 0); pointer-events: none; }
#app > .screen:only-child { opacity: 1; transform: none; pointer-events: auto; }

/* ── Top bar: Tulip wine ─────────────────────────────────── */
.topbar {
  flex: 0 0 var(--topbar-h); height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--pad);
  background: var(--brand); color: #fff;
  position: relative; z-index: 30;
  box-shadow: 0 calc(4 * var(--u)) calc(22 * var(--u)) rgba(74, 12, 29, 0.25);
}
.topbar-brand {
  display: flex; align-items: center; flex: 0 0 auto;
  height: calc(var(--topbar-h) - 48 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: var(--r-md); background: var(--surface-alt);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.5);
}
.topbar-logo { height: 100%; width: auto; display: block; }
.topbar-title {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em;
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-title small { display: block; font-size: 0.95rem; font-weight: 600; opacity: 0.85; letter-spacing: 0.01em; }
.topbar-sub {
  font-size: 1.05rem; font-weight: 800; color: #fff;
  background: var(--white-15); border: calc(2 * var(--u)) solid var(--white-25);
  padding: calc(10 * var(--u)) calc(20 * var(--u)); border-radius: var(--r-pill); white-space: nowrap; flex: 0 0 auto;
}
.topbar-slot { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }
.topbar-spacer { flex: 1 1 auto; min-width: 0; }

/* The 0/10 meter in the top bar. */
.limit-meter { display: flex; flex-direction: column; align-items: flex-end; gap: calc(7 * var(--u)); flex: 0 0 auto; margin-right: var(--sp-2); }
.limit-count { font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: calc(2 * var(--u)); }
.limit-count b { font-size: 1.9rem; font-weight: 900; letter-spacing: -0.03em; }
.limit-count em { font-style: normal; opacity: 0.72; }
.limit-count.is-near b { color: var(--warn); }
.limit-count.is-full b, .limit-count.is-full em { color: #FFD3DF; opacity: 1; }
.limit-bar { display: flex; gap: calc(4 * var(--u)); }
.limit-bar i { display: block; width: calc(16 * var(--u)); height: calc(10 * var(--u)); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.26); transition: background var(--t-fast) linear; }
.limit-bar i.on { background: #fff; }
.limit-bar.is-near i.on { background: var(--warn); }
.limit-bar.is-full i.on { background: #FFD3DF; }

/* Icon button in a bar (back, close, help, keypad). */
.icon-btn {
  width: var(--touch); height: var(--touch); min-width: var(--touch);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.85rem; color: #fff;
  background: var(--white-15); border: calc(2 * var(--u)) solid var(--white-25);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear;
}
.icon-btn:active { transform: scale(0.92); background: var(--white-25); }
.icon-btn.on-light { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-1); }
.icon-btn.on-light:active { background: var(--surface-deep); }

/* Pill button with icon + short label (Hulp, Klantenkaart, NL/EN). */
.pill-btn {
  min-height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  padding: 0 calc(22 * var(--u)); border-radius: var(--r-pill);
  font-size: 1.1rem; font-weight: 800; white-space: nowrap;
  color: #fff; background: var(--white-15); border: calc(2 * var(--u)) solid var(--white-25);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear;
}
.pill-btn:active { transform: scale(0.95); background: var(--white-25); }
.pill-btn .ic { font-size: 1.3em; }
.pill-btn.on-light { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-1); }
.pill-btn.on-light:active { background: var(--surface-deep); }
.pill-btn.accent { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Language switch. */
.lang-switch { display: inline-flex; border-radius: var(--r-pill); overflow: hidden; border: calc(2 * var(--u)) solid var(--white-25); background: var(--white-15); }
.lang-switch button {
  min-width: calc(74 * var(--u)); height: calc(var(--touch) - 4 * var(--u));
  padding: 0 calc(16 * var(--u));
  font-size: 1.05rem; font-weight: 900; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.78);
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.lang-switch button.on { background: #fff; color: var(--brand); }
.lang-switch.on-light { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.lang-switch.on-light button { color: var(--ink-soft); }
.lang-switch.on-light button.on { background: var(--brand); color: #fff; }

/* ── Scrolling content ───────────────────────────────────── */
.content {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: var(--sp-5) var(--pad) var(--sp-6); display: block;
}
.content.flush { padding-left: 0; padding-right: 0; }
.content.tight { padding-top: var(--sp-3); }
.content.centered { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.screen > .content:last-child { padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); }

/* ── Bottom action bar ───────────────────────────────────── */
.bottombar {
  flex: 0 0 var(--bottombar-h); height: var(--bottombar-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--pad); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface); border-top: calc(2 * var(--u)) solid var(--line);
  position: relative; z-index: 30;
  box-shadow: 0 calc(-6 * var(--u)) calc(26 * var(--u)) rgba(23, 20, 17, 0.08);
}
.bottombar.dark { background: var(--ink); border-top-color: transparent; color: #fff; }
.bottombar.stacked { flex-direction: column; align-items: stretch; justify-content: center; gap: var(--sp-2); }
.bottombar-info { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }
.bottombar-info.grow { flex: 1 1 auto; min-width: 0; }
.bottombar-total { font-size: 2.1rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.bottombar-label { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.bottombar.dark .bottombar-label { color: rgba(255, 255, 255, 0.65); }

.cart-badge {
  min-width: calc(56 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(14 * var(--u));
  border-radius: var(--r-pill); background: var(--accent); color: #fff;
  font-size: 1.45rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(93, 97, 48, 0.35);
  font-variant-numeric: tabular-nums;
}
.cart-badge.bump { animation: badgeBump 0.42s var(--ease); }
@keyframes badgeBump { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 60% { transform: scale(0.94); } 100% { transform: scale(1); } }


/* ══════════════════════════════════════════════════════════════
   7. BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  min-height: var(--touch);
  padding: calc(18 * var(--u)) calc(34 * var(--u));
  border-radius: var(--r-md);
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  text-align: center; white-space: nowrap;
  background: var(--surface); color: var(--ink);
  border: calc(2 * var(--u)) solid var(--line); box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear,
              box-shadow var(--t-fast) linear, opacity var(--t-fast) linear;
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active { transform: scale(0.972); }
.btn[disabled], .btn.disabled, .btn-primary[disabled], .btn-secondary[disabled], .btn-ghost[disabled], .btn-danger[disabled] {
  opacity: 0.42; pointer-events: none; box-shadow: none;
}
.btn .ic, .btn-primary .ic, .btn-secondary .ic, .btn-ghost .ic, .btn-danger .ic { font-size: 1.25em; }

/* Primary = Tulip wine. The one thing the eye should find. */
.btn-primary {
  background: linear-gradient(180deg, #9E2B49 0%, var(--brand) 55%, var(--brand-dark) 100%);
  color: #fff; border-color: transparent; box-shadow: var(--shadow-brand);
}
.btn-primary:active { background: var(--brand-dark); box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) var(--brand-glow); }

/* Secondary = warm charcoal. */
.btn-secondary {
  background: linear-gradient(180deg, #3A3430 0%, var(--ink) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(23, 20, 17, 0.28), inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.14);
}
.btn-secondary:active { background: var(--ink); }

/* Ghost = quiet, outlined. */
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); box-shadow: none; }
.btn-ghost:active { background: var(--surface-deep); color: var(--ink); }
.bottombar.dark .btn-ghost, .topbar .btn-ghost { color: rgba(255, 255, 255, 0.88); border-color: var(--white-25); }
.bottombar.dark .btn-ghost:active, .topbar .btn-ghost:active { background: var(--white-15); color: #fff; }

.btn-danger { background: var(--danger); color: #fff; border-color: transparent; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(200, 55, 45, 0.32); }
.btn-danger:active { background: #A82E25; }

.btn-lg { min-height: var(--cta-h); padding: calc(24 * var(--u)) calc(52 * var(--u)); font-size: 1.9rem; border-radius: var(--r-lg); gap: calc(18 * var(--u)); }
.btn-pill { border-radius: var(--r-pill); }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; gap: var(--sp-3); width: 100%; }
.btn-row > .btn, .btn-row > .btn-primary, .btn-row > .btn-secondary, .btn-row > .btn-ghost { flex: 1 1 0; min-width: 0; }
.btn-row > .wide { flex: 2 1 0; }
/* Icon-and-label stacked, for the quick-action tiles. */
.btn-tile {
  flex-direction: column; gap: calc(8 * var(--u));
  min-height: calc(var(--touch-lg) + 24 * var(--u));
  font-size: 1.15rem; padding: calc(14 * var(--u)) calc(18 * var(--u)); white-space: normal; line-height: 1.15;
}
.btn-tile .ic { font-size: 2.1em; }


/* ══════════════════════════════════════════════════════════════
   8. ATTRACT / START SCREEN
   wine hero (leaf pattern, logo card, kicker, max-10 pill, tagline,
   product carousel) + cream start panel with the one big START.
   ══════════════════════════════════════════════════════════════ */
.attract-screen { background: var(--surface); cursor: pointer; }

.attract-hero {
  position: relative; flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4);
  padding: calc(var(--sp-6) + 24 * var(--u)) var(--pad) calc(70 * var(--u));
  background: var(--brand) url("../img/pattern-wine.svg") center / var(--tile) repeat;
  color: #fff; text-align: center; overflow: hidden;
}
/* Soft spotlight behind the logo. */
.attract-hero::before {
  content: ""; position: absolute; left: 50%; top: 30%; width: 120vw; height: 120vw; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.attract-hero > * { position: relative; z-index: 1; }

.attract-top {
  position: absolute; top: var(--sp-5); left: var(--pad); right: var(--pad); z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.attract-logo-wrap {
  display: block; background: var(--surface-alt); border-radius: var(--r-xl);
  padding: calc(28 * var(--u)) calc(44 * var(--u));
  box-shadow: 0 calc(24 * var(--u)) calc(56 * var(--u)) rgba(40, 0, 10, 0.38), inset 0 0 0 calc(3 * var(--u)) rgba(255, 255, 255, 0.6);
  animation: attractFloat 6s ease-in-out infinite;
}
.attract-logo { width: calc(520 * var(--u)); max-width: 62vw; height: auto; display: block; }
@keyframes attractFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-10 * var(--u))); } }

.attract-kicker { margin-top: var(--sp-2); font-size: 1.15rem; font-weight: 900; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.92; }
.attract-limit {
  display: inline-flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(30 * var(--u)); border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-size: 1.45rem; font-weight: 900; letter-spacing: 0.01em;
  box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, 0.25), inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.25);
}
.attract-limit .ic { font-size: 1.35em; }
.attract-tagline {
  font-size: 2.6rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em;
  text-shadow: 0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(40, 0, 10, 0.3);
  max-width: 16ch;
}

/* Rotating product cards. */
.attract-carousel {
  width: 100%; max-width: calc(920 * var(--u));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.attract-slide {
  display: flex; flex-direction: column; gap: calc(10 * var(--u));
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.95); color: var(--ink);
  box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(40, 0, 10, 0.3);
  text-align: left; transition: opacity 0.4s ease, transform 0.4s var(--ease);
}
.attract-slide.swap { opacity: 0; transform: translateY(calc(10 * var(--u))) scale(0.97); }
.attract-slide-photo { width: 100%; height: calc(200 * var(--u)); border-radius: var(--r-md); overflow: hidden; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; }
.attract-slide-photo img { width: 100%; height: 100%; object-fit: contain; display: block; padding: calc(8 * var(--u)); }
.attract-slide-photo .ic { font-size: calc(86 * var(--u)); color: var(--brand); opacity: 0.85; }
.attract-slide-name { font-size: 1.08rem; font-weight: 800; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.36em; }
.attract-slide-price { font-size: 1.15rem; font-weight: 900; color: var(--brand); font-variant-numeric: tabular-nums; }
.attract-slide-price small { font-size: 0.8em; font-weight: 700; color: var(--ink-soft); }

/* The cream start panel slides over the hero's bottom edge. */
.attract-panel {
  position: relative; z-index: 3; flex: 0 0 auto;
  margin-top: calc(-52 * var(--u));
  padding: var(--sp-7) var(--pad) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  background: var(--surface) url("../img/pattern-light.svg") center / var(--tile) repeat;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 calc(-18 * var(--u)) calc(50 * var(--u)) rgba(40, 0, 10, 0.3);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4);
}
.attract-title { font-size: 3.1rem; font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); max-width: 16ch; }
.attract-sub { font-size: 1.35rem; font-weight: 600; line-height: 1.32; color: var(--ink-soft); max-width: 34ch; }
.attract-cta {
  margin-top: var(--sp-2);
  min-height: calc(var(--cta-h) * 1.2);
  padding: calc(26 * var(--u)) calc(110 * var(--u));
  border-radius: var(--r-pill);
  font-size: 2.5rem; font-weight: 900; letter-spacing: 0.04em; color: #fff;
  background: linear-gradient(180deg, #9E2B49 0%, var(--brand) 55%, var(--brand-dark) 100%);
  display: inline-flex; align-items: center; justify-content: center; gap: calc(22 * var(--u));
  border: calc(4 * var(--u)) solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 calc(16 * var(--u)) calc(46 * var(--u)) var(--brand-glow);
  animation: attractPulse 2.6s ease-in-out infinite;
  transition: transform var(--t-fast) var(--ease);
}
.attract-cta:active { transform: scale(0.965); }
@keyframes attractPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 calc(16 * var(--u)) calc(46 * var(--u)) var(--brand-glow), 0 0 0 0 rgba(134, 26, 54, 0.45); }
  55%      { transform: scale(1.03); box-shadow: 0 calc(20 * var(--u)) calc(56 * var(--u)) var(--brand-glow), 0 0 0 calc(28 * var(--u)) rgba(134, 26, 54, 0); }
}
/* Legend: barcode -> scan, produce -> screen, 18+ -> staff. */
.attract-legend { display: flex; gap: var(--sp-3); width: 100%; max-width: calc(960 * var(--u)); margin-top: var(--sp-3); }
.attract-legend > div {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: var(--r-md); background: var(--surface); border: calc(2 * var(--u)) solid var(--line);
  box-shadow: var(--shadow-1); text-align: left;
}
.attract-legend .ic { font-size: calc(50 * var(--u)); color: var(--brand); flex: 0 0 auto; }
.attract-legend > div:nth-child(2) .ic { color: var(--accent-dark); }
.attract-legend b { display: block; font-size: 1.02rem; font-weight: 900; color: var(--ink); line-height: 1.15; }
.attract-legend span { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); line-height: 1.25; }
.attract-foot { font-size: 0.98rem; font-weight: 700; color: var(--ink-mute); }

/* Loyalty welcome chip on the hero (after a card scan). */
.attract-welcome {
  display: inline-flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(26 * var(--u)); border-radius: var(--r-pill);
  background: #fff; color: var(--brand); font-size: 1.3rem; font-weight: 900; box-shadow: var(--shadow-2);
}


/* ══════════════════════════════════════════════════════════════
   9. SCAN SCREEN — the basket
   topbar -> scan prompt card -> basket list -> quick actions -> bottombar
   ══════════════════════════════════════════════════════════════ */
.scan-screen { background: var(--surface-alt); }

/* ── Scan prompt card ────────────────────────────────────── */
.scan-prompt {
  flex: 0 0 auto; margin: var(--sp-4) var(--pad) 0;
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: calc(176 * var(--u));
  padding: calc(18 * var(--u)) calc(24 * var(--u));
  border-radius: var(--r-lg); background: var(--surface);
  border: calc(3 * var(--u)) solid var(--line); box-shadow: var(--shadow-1);
  transition: background var(--t-base) ease, border-color var(--t-base) ease, color var(--t-base) ease;
  position: relative; z-index: 5;
}
.scan-prompt-icon {
  width: calc(128 * var(--u)); height: calc(128 * var(--u)); flex: 0 0 auto;
  border-radius: var(--r-md); background: var(--brand-tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: calc(78 * var(--u));
  position: relative; overflow: hidden;
}
/* Laser line sweeping across the barcode glyph. */
.scan-prompt-icon::after {
  content: ""; position: absolute; left: 12%; right: 12%; height: calc(4 * var(--u)); top: 18%;
  background: var(--brand); border-radius: var(--r-pill); box-shadow: 0 0 calc(12 * var(--u)) var(--brand);
  animation: laser 1.9s ease-in-out infinite;
}
@keyframes laser { 0%, 100% { top: 18%; opacity: 0.35; } 50% { top: 78%; opacity: 1; } }
.scan-prompt-text { flex: 1 1 auto; min-width: 0; }
.scan-prompt-title { font-size: 1.75rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); }
.scan-prompt-sub { font-size: 1.08rem; font-weight: 600; color: var(--ink-soft); margin-top: calc(6 * var(--u)); line-height: 1.3; }
.scan-prompt-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-2); }

/* Feedback states after a scan. */
.scan-prompt.is-added { background: var(--ok-tint); border-color: var(--ok); }
.scan-prompt.is-added .scan-prompt-icon { background: var(--ok); color: #fff; }
.scan-prompt.is-added .scan-prompt-icon::after { display: none; }
.scan-prompt.is-added .scan-prompt-title { color: var(--ok); }
.scan-prompt.is-age { background: var(--brand-tint); border-color: var(--brand); }
.scan-prompt.is-age .scan-prompt-icon { background: var(--brand); color: #fff; }
.scan-prompt.is-age .scan-prompt-icon::after { display: none; }
.scan-prompt.is-age .scan-prompt-title { color: var(--brand); }
.scan-prompt.is-error { background: var(--danger-tint); border-color: var(--danger); animation: shake 0.45s ease; }
.scan-prompt.is-error .scan-prompt-icon { background: var(--danger); color: #fff; }
.scan-prompt.is-error .scan-prompt-icon::after { display: none; }
.scan-prompt.is-error .scan-prompt-title { color: var(--danger); }
.scan-prompt.is-card { background: var(--accent-tint); border-color: var(--accent); }
.scan-prompt.is-card .scan-prompt-icon { background: var(--accent); color: #fff; }
.scan-prompt.is-card .scan-prompt-icon::after { display: none; }
.scan-prompt.is-full { background: var(--accent-tint); border-color: var(--accent-dark); }
.scan-prompt.is-full .scan-prompt-icon { background: var(--accent-dark); color: #fff; }
.scan-prompt.is-full .scan-prompt-icon::after { display: none; }
.scan-prompt.is-full .scan-prompt-title { color: var(--accent-dark); }
.scan-prompt-thumb { width: calc(128 * var(--u)); height: calc(128 * var(--u)); object-fit: contain; border-radius: var(--r-md); background: #fff; flex: 0 0 auto; padding: calc(6 * var(--u)); }

/* ── Basket list ─────────────────────────────────────────── */
.scan-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: var(--sp-4) var(--pad) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.scan-list-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 0 calc(6 * var(--u)) calc(4 * var(--u));
  font-size: 1rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
}
.scan-empty {
  margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--ink-soft);
}
.scan-empty .ic { font-size: calc(150 * var(--u)); color: var(--line-strong); }
.scan-empty-title { font-size: 1.7rem; font-weight: 900; color: var(--ink); }
.scan-empty-sub { font-size: 1.15rem; font-weight: 600; max-width: 32ch; line-height: 1.35; }

/* ── Quick actions ───────────────────────────────────────── */
.scan-actions {
  flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  padding: var(--sp-2) var(--pad) var(--sp-4);
  background: linear-gradient(180deg, rgba(251, 250, 246, 0) 0%, var(--surface-alt) 35%);
  position: relative; z-index: 5;
}
.scan-actions .btn-tile.is-card-set { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }


/* ══════════════════════════════════════════════════════════════
   10. CART ROWS (scan screen + checkout)
   ══════════════════════════════════════════════════════════════ */
.cart-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border-radius: var(--r-md);
  border: calc(2 * var(--u)) solid var(--line); box-shadow: var(--shadow-1);
  animation: rowIn var(--t-base) var(--ease-out) both;
}
@keyframes rowIn { from { opacity: 0; transform: translateY(calc(10 * var(--u))); } to { opacity: 1; transform: none; } }
.cart-row.removing { animation: rowOut var(--t-base) ease forwards; }
@keyframes rowOut { to { opacity: 0; transform: translateX(calc(-40 * var(--u))); } }
.cart-row.just-added { border-color: var(--ok); box-shadow: 0 0 0 calc(8 * var(--u)) rgba(46, 158, 79, 0.16), var(--shadow-1); }
.cart-row.is-age { box-shadow: inset calc(8 * var(--u)) 0 0 var(--brand), var(--shadow-1); }
.cart-row-photo {
  width: calc(118 * var(--u)); height: calc(118 * var(--u)); flex: 0 0 auto;
  border-radius: var(--r-sm); background: var(--surface-alt); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cart-row-photo img { width: 100%; height: 100%; object-fit: contain; display: block; padding: calc(6 * var(--u)); }
.cart-row-photo .ic { font-size: calc(58 * var(--u)); color: var(--brand); opacity: 0.85; }
.cart-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.cart-row-name { font-size: 1.4rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-row-opts { font-size: 1.02rem; font-weight: 600; line-height: 1.25; color: var(--ink-soft); }
.cart-row-opts:empty { display: none; }
.cart-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: calc(8 * var(--u)); font-size: 0.98rem; font-weight: 700; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.cart-row-entry {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: var(--r-pill);
  background: var(--surface-alt); border: calc(1.5 * var(--u)) solid var(--line);
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
}
.cart-row-entry.scan { color: var(--info); background: var(--info-tint); border-color: transparent; }
.cart-row-entry.counter { color: var(--accent-dark); background: var(--accent-tint); border-color: transparent; }
.cart-row-entry.age { color: #fff; background: var(--brand); border-color: transparent; font-weight: 900; letter-spacing: 0.06em; }
.cart-row-entry.bag { color: var(--accent-dark); background: var(--accent-tint); border-color: transparent; }
.cart-row-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.cart-row-price { font-size: 1.45rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cart-qty { display: flex; align-items: center; gap: calc(8 * var(--u)); flex: 0 0 auto; }
.qty-btn {
  width: var(--touch); height: var(--touch); min-width: var(--touch);
  border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; color: var(--ink);
  background: var(--surface-alt); border: calc(3 * var(--u)) solid var(--line);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear;
}
.qty-btn:active { transform: scale(0.9); background: var(--surface-deep); }
.qty-btn.plus { background: var(--brand); border-color: var(--brand); color: #fff; }
.qty-btn.plus:active { background: var(--brand-dark); }
.qty-btn.danger, .cart-row-del, .qty-btn.delete { color: var(--danger); border-color: var(--danger-tint); background: var(--danger-tint); }
.qty-btn[disabled] { opacity: 0.4; pointer-events: none; }
.qty-val, .qty-value { min-width: calc(54 * var(--u)); text-align: center; font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }

/* Summary block (checkout). */
.cart-summary {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md); background: var(--surface);
  border: calc(2 * var(--u)) solid var(--line); box-shadow: var(--shadow-1);
}
.summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: calc(8 * var(--u)) 0; font-size: 1.2rem; font-weight: 600; color: var(--ink-soft); }
.summary-label { color: var(--ink-soft); }
.summary-value { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-row.discount .summary-value { color: var(--ok); }
.summary-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: calc(3 * var(--u)) solid var(--line);
  font-size: 2.1rem; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.summary-total > span:last-child { color: var(--brand); }


/* ══════════════════════════════════════════════════════════════
   11. BROWSE SCREEN — vertical rail + 3-up grid
   ══════════════════════════════════════════════════════════════ */
.browse-screen { background: var(--surface-alt); }
.browse-body { flex: 1 1 auto; min-height: 0; display: flex; }

/* ── Vertical category rail ──────────────────────────────── */
.browse-rail {
  flex: 0 0 calc(176 * var(--u)); width: calc(176 * var(--u));
  overflow-y: auto; overflow-x: hidden;
  background: var(--surface); border-right: calc(2 * var(--u)) solid var(--line);
  display: flex; flex-direction: column; padding: var(--sp-3) 0 var(--sp-6);
  position: relative; z-index: 20;
}
.browse-rail.is-dragging .cat-tile { pointer-events: none; }
.cat-tile {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  min-height: calc(164 * var(--u)); padding: calc(14 * var(--u)) calc(10 * var(--u));
  text-align: center; color: var(--ink-soft);
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.cat-tile::before {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: calc(8 * var(--u));
  border-radius: 0 var(--r-pill) var(--r-pill) 0; background: var(--cat-color, var(--brand));
  opacity: 0; transform: scaleY(0.4); transition: opacity var(--t-fast) linear, transform var(--t-fast) var(--ease);
}
.cat-tile.active { background: var(--surface-alt); color: var(--ink); }
.cat-tile.active::before { opacity: 1; transform: scaleY(1); }
.cat-tile:active { background: var(--surface-deep); }
.cat-tile-icon {
  width: calc(88 * var(--u)); height: calc(88 * var(--u)); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cat-color, var(--brand)); color: #fff; font-size: calc(44 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) calc(14 * var(--u)) rgba(23, 20, 17, 0.16);
  transition: transform var(--t-fast) var(--ease);
}
.cat-tile-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-tile.active .cat-tile-icon { transform: scale(1.08); }
.cat-tile-name { font-size: 0.95rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-tile.search .cat-tile-icon { background: var(--ink); }

/* ── Product grid ────────────────────────────────────────── */
.browse-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.browse-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--pad) calc(6 * var(--u));
}
.browse-head h2 { font-size: 1.75rem; font-weight: 900; letter-spacing: -0.025em; color: var(--ink); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.browse-head h2 i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: var(--cat-color, var(--brand)); display: inline-block; }
.browse-head .pickup-note { font-size: 0.98rem; font-weight: 700; color: var(--accent-dark); display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.browse-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: var(--gap);
  padding: var(--sp-3) var(--pad) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
}
@media (min-aspect-ratio: 1/1) { .browse-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.item-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg);
  border: calc(3 * var(--u)) solid transparent; box-shadow: var(--shadow-1); overflow: hidden;
  min-height: var(--touch);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) linear, border-color var(--t-fast) linear;
  animation: fadeIn 0.34s var(--ease-out) both;
}
.item-card:active { transform: scale(0.965); border-color: var(--brand); box-shadow: var(--shadow-2); }
.item-card.just-added { border-color: var(--ok); box-shadow: 0 0 0 calc(10 * var(--u)) rgba(46, 158, 79, 0.16), var(--shadow-2); animation: none; }
.item-photo-wrap { position: relative; width: 100%; }
.item-photo { display: block; width: 100%; height: calc(250 * var(--u)); object-fit: contain; background: var(--surface); padding: calc(12 * var(--u)); }
.item-photo-ph {
  display: flex; align-items: center; justify-content: center; width: 100%; height: calc(250 * var(--u));
  font-size: calc(96 * var(--u)); color: var(--cat-color, var(--brand)); opacity: 0.85;
  background: radial-gradient(100% 80% at 50% 20%, #FFFFFF 0%, var(--surface-alt) 100%);
  border-bottom: calc(2 * var(--u)) solid var(--line);
}
.item-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: calc(5 * var(--u)); padding: var(--sp-3) var(--sp-4) calc(8 * var(--u)); }
.item-name { font-size: 1.22rem; font-weight: 800; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-desc { font-size: 0.95rem; font-weight: 500; line-height: 1.3; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.item-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-4); }
.item-price { font-size: 1.35rem; font-weight: 900; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-price small, .tk-price small { font-size: 0.72em; font-weight: 700; color: var(--ink-soft); }
.item-add {
  width: calc(64 * var(--u)); height: calc(64 * var(--u)); min-width: calc(64 * var(--u));
  border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff; background: var(--brand);
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) var(--brand-glow);
  transition: transform var(--t-fast) var(--ease);
}
.item-add:active { transform: scale(0.9); }
.item-badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
  padding: calc(7 * var(--u)) calc(16 * var(--u)); border-radius: var(--r-pill);
  font-size: 0.88rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase;
  color: #fff; background: var(--accent); box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(23, 20, 17, 0.18);
}
.item-badge.blue  { background: var(--info); color: #fff; }
.item-badge.green { background: var(--ok); color: #fff; }
.item-badge.red   { background: var(--brand); color: #fff; }
.item-badge.age   { background: var(--brand); color: #fff; }
.item-card.unavailable { pointer-events: none; border-color: var(--line); box-shadow: none; }
.item-card.unavailable .item-photo, .item-card.unavailable .item-photo-ph { filter: grayscale(1) contrast(0.88); opacity: 0.5; }
.item-card.unavailable .item-name, .item-card.unavailable .item-desc, .item-card.unavailable .item-price { opacity: 0.45; }
.item-card.unavailable .item-add { display: none; }
.sold-out:not(.item-card) {
  position: absolute; top: 50%; left: 0; right: 0; z-index: 3; transform: translateY(-50%) rotate(-4deg);
  padding: calc(12 * var(--u)) 0; text-align: center;
  font-size: 1.3rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  background: rgba(200, 55, 45, 0.94); box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(23, 20, 17, 0.28);
}
.menu-empty { grid-column: 1 / -1; padding: var(--sp-8) var(--sp-5); text-align: center; font-size: 1.4rem; font-weight: 700; color: var(--ink-soft); }
.menu-empty .ic { display: block; margin: 0 auto var(--sp-4); font-size: calc(120 * var(--u)); color: var(--line-strong); }

/* Fixed card heights: Chrome's grid track sizing under-measures a flex card whose
   body uses -webkit-line-clamp, which clipped the price row. Explicit is robust. */
.browse-grid > .item-card, .search-results > .item-card { align-self: start; height: calc(432 * var(--u)); }
.browse-grid.is-ticket-grid > .item-card, .search-results.is-ticket-grid > .item-card { height: calc(262 * var(--u)); }
.browse-grid.is-ticket-grid > .item-card .tk, .search-results.is-ticket-grid > .item-card .tk { height: 100%; min-height: 0; }
.item-card .item-body { min-height: 0; }
.browse-grid > .item-card:nth-child(-n + 3) { animation-delay: 0s; }
.browse-grid > .item-card:nth-child(n + 4):nth-child(-n + 6) { animation-delay: 0.04s; }
.browse-grid > .item-card:nth-child(n + 7):nth-child(-n + 9) { animation-delay: 0.08s; }
.browse-grid > .item-card:nth-child(n + 10) { animation-delay: 0.12s; }

/* ── Shelf label card: the photo-less card ────────────────── */
.item-card.ticket { padding: 0; background: transparent; box-shadow: none; border: 0; }
.tk {
  position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left;
  gap: calc(10 * var(--u)); padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u));
  min-height: calc(230 * var(--u)); width: 100%; border-radius: var(--r-md);
  background: #FFFDF8;
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(23, 20, 17, 0.08), 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(23, 20, 17, 0.10);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.tk::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(8 * var(--u));
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: repeating-linear-gradient(90deg, var(--cat-color, var(--brand)) 0 calc(16 * var(--u)), rgba(255, 255, 255, 0.55) calc(16 * var(--u)) calc(22 * var(--u)));
}
.tk:active { transform: translateY(calc(2 * var(--u))); box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(23, 20, 17, 0.14); }
.tk-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.tk-icon { width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cat-color, var(--brand)); color: #fff; font-size: calc(28 * var(--u)); flex: 0 0 auto; }
.tk .item-badge { position: static; margin: 0; }
.tk-name { flex: 1 1 auto; font-size: 1.42rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.tk-desc { font-size: 0.92rem; font-weight: 500; line-height: 1.3; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tk-rule { height: calc(2 * var(--u)); background: repeating-linear-gradient(90deg, rgba(23, 20, 17, 0.22) 0 calc(5 * var(--u)), transparent calc(5 * var(--u)) calc(10 * var(--u))); }
.tk-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.tk-price { font-size: 1.3rem; font-weight: 900; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-add { display: flex; align-items: center; justify-content: center; width: calc(62 * var(--u)); height: calc(62 * var(--u)); flex: 0 0 auto; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) var(--brand-glow); }
.tk-add .ic { font-size: calc(32 * var(--u)); }
.tk.is-sold { background: #F4F2EC; box-shadow: none; pointer-events: none; }
.tk.is-sold .tk-name, .tk.is-sold .tk-price, .tk.is-sold .tk-desc { opacity: .42; }
.tk-out { font-size: 0.9rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--danger); }

/* ── Bottom bar with mini thumbnails ─────────────────────── */
.browse-bar-thumbs { display: flex; align-items: center; gap: calc(6 * var(--u)); flex: 0 0 auto; }
.browse-bar-thumbs > span {
  width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-alt); border: calc(2 * var(--u)) solid var(--line);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.browse-bar-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: calc(3 * var(--u)); }
.browse-bar-thumbs .ic { font-size: calc(30 * var(--u)); color: var(--brand); }
.browse-bar-thumbs b { position: absolute; right: calc(-4 * var(--u)); top: calc(-4 * var(--u)); min-width: calc(26 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 0.78rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.browse-bar-thumbs .more { font-size: 0.95rem; font-weight: 900; color: var(--ink-soft); }

/* ── Search overlay ──────────────────────────────────────── */
.search-screen { background: var(--surface-alt); }
.search-field {
  flex: 0 0 auto; margin: var(--sp-4) var(--pad) var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--touch-lg); padding: 0 calc(22 * var(--u));
  border-radius: var(--r-pill); background: var(--surface);
  border: calc(3 * var(--u)) solid var(--brand); box-shadow: var(--shadow-1);
  font-size: 1.6rem; font-weight: 800; color: var(--ink);
}
.search-field .ic { font-size: 1.4em; color: var(--brand); }
.search-field-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-field-text.placeholder { color: var(--ink-mute); font-weight: 600; }
.search-caret { display: inline-block; width: calc(4 * var(--u)); height: 1.1em; margin-left: calc(2 * var(--u)); vertical-align: text-bottom; background: var(--brand); border-radius: calc(2 * var(--u)); animation: caretBlink 1.05s steps(1, end) infinite; }
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.search-results {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: var(--gap);
  padding: var(--sp-3) var(--pad) var(--sp-4);
}
.search-hint { grid-column: 1 / -1; padding: var(--sp-6) var(--sp-4); text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--ink-soft); }


/* ══════════════════════════════════════════════════════════════
   12. CHECKOUT SCREEN
   ══════════════════════════════════════════════════════════════ */
.checkout-screen { background: var(--surface-alt); }
.checkout-lines { flex: 0 1 auto; min-height: calc(140 * var(--u)); max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface); border: calc(2 * var(--u)) solid var(--line); box-shadow: var(--shadow-1); }
.co-line { display: flex; align-items: center; gap: var(--sp-3); padding: calc(8 * var(--u)) calc(6 * var(--u)); border-bottom: calc(1.5 * var(--u)) solid var(--line); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.co-line:last-child { border-bottom: 0; }
.co-line-qty { min-width: calc(60 * var(--u)); height: calc(48 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: var(--r-pill); background: var(--surface-alt); border: calc(2 * var(--u)) solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.co-line-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-line-name small { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); white-space: normal; }
.co-line-name .cart-row-entry { vertical-align: middle; margin-left: calc(4 * var(--u)); }
.co-line-price { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-section-title { font-size: 1rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: var(--sp-5) 0 var(--sp-2); }

/* Bags */
.bag-block {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); background: var(--surface); border: calc(2 * var(--u)) solid var(--line); box-shadow: var(--shadow-1);
  transition: background var(--t-fast) linear, border-color var(--t-fast) linear;
}
.bag-block.is-set { background: var(--accent-tint); border-color: var(--accent); }
.bag-icon { width: calc(92 * var(--u)); height: calc(92 * var(--u)); flex: 0 0 auto; border-radius: var(--r-md); background: var(--surface-deep); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; font-size: calc(50 * var(--u)); }
.bag-block.is-set .bag-icon { background: var(--accent); color: #fff; }
.bag-text { flex: 1 1 auto; min-width: 0; }
.bag-title { font-size: 1.3rem; font-weight: 900; color: var(--ink); line-height: 1.15; }
.bag-sub { font-size: 1.02rem; font-weight: 600; color: var(--ink-soft); margin-top: calc(4 * var(--u)); line-height: 1.3; }

/* 18+ status block */
.age-block {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); background: var(--brand-tint); border: calc(2 * var(--u)) solid var(--brand);
}
.age-block.is-ok { background: var(--ok-tint); border-color: var(--ok); }
.age-badge { min-width: calc(92 * var(--u)); height: calc(92 * var(--u)); flex: 0 0 auto; border-radius: var(--r-md); background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 900; letter-spacing: -0.02em; }
.age-block.is-ok .age-badge { background: var(--ok); }
.age-text { flex: 1 1 auto; min-width: 0; }
.age-title { font-size: 1.2rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.age-sub { font-size: 1rem; font-weight: 600; color: var(--ink-soft); margin-top: calc(4 * var(--u)); line-height: 1.3; }
.age-check { font-size: calc(56 * var(--u)); color: var(--brand); flex: 0 0 auto; }
.age-block.is-ok .age-check { color: var(--ok); }

/* Loyalty block */
.loyalty-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md); background: var(--accent-tint); border: calc(2 * var(--u)) dashed var(--accent-dark);
}
.loyalty-card.is-set { background: var(--ok-tint); border-style: solid; border-color: var(--ok); }
.loyalty-card .ic { font-size: calc(64 * var(--u)); color: var(--accent-dark); flex: 0 0 auto; }
.loyalty-card.is-set .ic { color: var(--ok); }
.loyalty-card-text { flex: 1 1 auto; min-width: 0; }
.loyalty-card-title { font-size: 1.3rem; font-weight: 900; color: var(--ink); line-height: 1.15; }
.loyalty-card-sub { font-size: 1.02rem; font-weight: 600; color: var(--ink-soft); margin-top: calc(4 * var(--u)); line-height: 1.3; }
.loyalty-card-actions { display: flex; flex-direction: column; gap: var(--sp-2); flex: 0 0 auto; }
.loyalty-card-actions .btn, .loyalty-card-actions .btn-ghost { min-height: calc(64 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)); font-size: 1.05rem; }
.pickup-notice {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--accent-tint); border: calc(2 * var(--u)) solid var(--accent);
  font-size: 1.1rem; font-weight: 700; color: var(--ink); line-height: 1.3;
}
.pickup-notice .ic { font-size: 1.8em; color: var(--accent-dark); flex: 0 0 auto; }
.pickup-notice.age { background: var(--brand-tint); border-color: var(--brand); }
.pickup-notice.age .ic { color: var(--brand); }


/* ══════════════════════════════════════════════════════════════
   13. MODAL / BOTTOM SHEET + OPTION GROUPS (item modal, dialogs)
   ══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(23, 20, 17, 0.55); backdrop-filter: blur(calc(6 * var(--u))); -webkit-backdrop-filter: blur(calc(6 * var(--u)));
  opacity: 0; pointer-events: none; transition: opacity var(--t-base) ease;
}
.modal-overlay.visible { opacity: 1; pointer-events: auto; }
.modal-sheet {
  position: relative; width: 100%; max-height: 88vh;
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3);
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 calc(-10 * var(--u)) calc(60 * var(--u)) rgba(23, 20, 17, 0.35);
  padding: calc(18 * var(--u)) var(--sp-6) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  transform: translateY(6%); opacity: 0;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) ease;
  overflow-y: auto; overflow-x: hidden;
}
.modal-overlay.visible .modal-sheet { transform: translateY(0); opacity: 1; }
.modal-sheet::before { content: ""; position: sticky; top: 0; z-index: 5; flex: 0 0 auto; align-self: center; width: calc(120 * var(--u)); height: calc(8 * var(--u)); margin-bottom: calc(6 * var(--u)); border-radius: var(--r-pill); background: var(--line); }
.modal-handle { display: block; flex: 0 0 auto; height: 0; margin: 0; }
.modal-overlay.center-sheet { align-items: center; padding: var(--pad); }
.modal-overlay.center-sheet .modal-sheet { border-radius: var(--r-lg); max-width: calc(860 * var(--u)); transform: scale(0.94); }
.modal-overlay.center-sheet.visible .modal-sheet { transform: scale(1); }
.modal-overlay.center-sheet .modal-sheet::before { display: none; }
.modal-sheet.paper { background: #FFFDF8; }

.modal-head { flex: 0 0 auto; padding: calc(28 * var(--u)) 0 var(--sp-3); }
.modal-photo { width: 100%; max-height: calc(520 * var(--u)); object-fit: contain; display: block; background: var(--surface-alt); border-radius: var(--r-md); padding: var(--sp-3); }
.modal-photo-ph { width: 100%; height: calc(300 * var(--u)); display: flex; align-items: center; justify-content: center; font-size: calc(130 * var(--u)); color: var(--cat-color, var(--brand)); background: radial-gradient(100% 80% at 50% 20%, #FFFFFF 0%, var(--surface-alt) 100%); border-radius: var(--r-md); border: calc(2 * var(--u)) solid var(--line); }
.modal-title { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; font-size: 2.2rem; font-weight: 900; line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); padding-right: calc(var(--touch) + var(--sp-3)); }
.modal-title .ic { font-size: 1em; color: var(--brand); }
.modal-title .cart-row-entry { font-size: 0.42em; vertical-align: middle; }
.modal-subtitle, .modal-desc { flex: 0 0 auto; margin-top: var(--sp-2); font-size: 1.2rem; font-weight: 600; line-height: 1.35; color: var(--ink-soft); padding-right: calc(var(--touch) + var(--sp-3)); }
.modal-close {
  position: sticky; top: calc(16 * var(--u)); z-index: 6; align-self: flex-end; flex: 0 0 auto;
  margin-bottom: calc(-1 * var(--touch));
  width: var(--touch); height: var(--touch); border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--ink);
  background: var(--surface-alt); border: calc(2 * var(--u)) solid var(--line);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear;
}
.modal-close:active { transform: scale(0.9); background: var(--line); }
/* ONE scroller per sheet: the sheet itself. */
.modal-body { flex: 0 0 auto; min-height: 0; overflow: visible; padding: var(--sp-3) 0; }
.modal-body.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.modal-foot {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-3); border-top: calc(2 * var(--u)) solid var(--line);
  position: sticky; bottom: calc(-1 * var(--sp-6) - env(safe-area-inset-bottom, 0px)); z-index: 6;
  background: var(--surface);
  box-shadow: 0 calc(-10 * var(--u)) calc(18 * var(--u)) calc(-10 * var(--u)) rgba(23, 20, 17, 0.18);
}
.modal-sheet.paper .modal-foot { background: #FFFDF8; }
.modal-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.modal-actions > * { width: 100%; }
.modal-icon-big { width: calc(170 * var(--u)); height: calc(170 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: calc(84 * var(--u)); color: #fff; background: var(--brand); box-shadow: var(--shadow-2); margin: var(--sp-2) auto; }
.modal-icon-big.ok { background: var(--ok); }
.modal-icon-big.warn { background: var(--warn); color: #fff; }
.modal-icon-big.bad { background: var(--danger); }
.modal-icon-big.ink { background: var(--ink); }
.modal-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.08em; color: var(--ink); background: var(--surface-alt); border: calc(2 * var(--u)) dashed var(--line-strong); border-radius: var(--r-sm); padding: calc(10 * var(--u)) calc(20 * var(--u)); display: inline-block; margin-top: var(--sp-3); }

/* ── Option groups ───────────────────────────────────────── */
.opt-group { margin-bottom: var(--sp-6); }
.opt-group:last-child { margin-bottom: 0; }
.opt-label { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: 1.25rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.opt-req { font-size: 0.88rem; font-weight: 800; letter-spacing: 0.06em; padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: var(--r-pill); background: var(--danger-tint); color: var(--danger); text-transform: uppercase; }
.opt-req.optional { background: var(--surface-alt); color: var(--ink-soft); }
.opt-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.opt-choices.single-col { grid-template-columns: 1fr; }
.opt-choice {
  min-height: var(--touch-lg); padding: calc(16 * var(--u)) calc(22 * var(--u)); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); text-align: left;
  font-size: 1.25rem; font-weight: 700; color: var(--ink);
  background: var(--surface-alt); border: calc(3 * var(--u)) solid var(--line);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear, border-color var(--t-fast) linear, color var(--t-fast) linear;
}
.opt-choice:active { transform: scale(0.97); }
.opt-choice.selected { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 calc(5 * var(--u)) calc(16 * var(--u)) var(--brand-glow); }
.opt-choice.selected .opt-choice-price { color: #fff; opacity: 0.92; }
.opt-choice[disabled] { opacity: 0.4; pointer-events: none; }
.opt-choice-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.opt-choice-price { font-size: 1.1rem; font-weight: 800; color: var(--brand); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Quantity stepper (item modal) ───────────────────────── */
.qty-stepper { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-alt); border: calc(2 * var(--u)) solid var(--line); }
.qty-stepper .qty-btn { width: var(--touch-lg); height: var(--touch-lg); min-width: var(--touch-lg); font-size: 1.9rem; background: var(--surface); }
.qty-stepper .qty-btn.plus { background: var(--brand); border-color: var(--brand); color: #fff; }
.qty-stepper .qty-btn.plus:active { background: var(--brand-dark); }
.qty-stepper-val { min-width: calc(110 * var(--u)); text-align: center; font-size: 2.6rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink); }


/* ══════════════════════════════════════════════════════════════
   14. PAYMENT SCREEN
   ══════════════════════════════════════════════════════════════ */
.pay-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); text-align: center; min-height: 100%; padding: var(--sp-6) var(--pad); }
.pay-title { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); }
.pay-icon { width: calc(210 * var(--u)); height: calc(210 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: calc(96 * var(--u)); color: #fff; background: var(--brand); box-shadow: var(--shadow-2); flex: 0 0 auto; }
.pay-icon.pending { background: linear-gradient(150deg, #9E2B49 0%, var(--brand) 55%, var(--brand-dark) 100%); animation: payPulse 1.9s ease-in-out infinite; }
@keyframes payPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(134, 26, 54, 0.5), var(--shadow-2); } 60% { box-shadow: 0 0 0 calc(34 * var(--u)) rgba(134, 26, 54, 0), var(--shadow-2); } }
.pay-icon.success { background: linear-gradient(150deg, #3FCB86 0%, var(--ok) 100%); animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.pay-icon.error { background: linear-gradient(150deg, #E8746C 0%, var(--danger) 100%); animation: shake 0.5s ease both; }
@keyframes popIn { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 18%, 58% { transform: translateX(calc(-12 * var(--u))); } 38%, 78% { transform: translateX(calc(12 * var(--u))); } }
.pay-amount { font-size: 4.4rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--brand); font-variant-numeric: tabular-nums; }
.pay-status { font-size: 1.55rem; font-weight: 700; line-height: 1.35; color: var(--ink-soft); max-width: 26ch; min-height: calc(70 * var(--u)); }
.pay-status.ok { color: var(--ok); }
.pay-status.bad { color: var(--danger); }
.pay-actions { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; max-width: calc(720 * var(--u)); margin-top: var(--sp-3); }
.terminal-hint {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: calc(20 * var(--u)) calc(30 * var(--u)); border-radius: var(--r-md);
  background: var(--info-tint); border: calc(2 * var(--u)) solid rgba(27, 94, 155, 0.3);
  font-size: 1.25rem; font-weight: 700; color: var(--info); max-width: calc(780 * var(--u)); line-height: 1.35;
}
.terminal-hint .ic { font-size: 1.7em; }
.pay-cancel-hint { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: calc(20 * var(--u)) calc(24 * var(--u)); border-radius: var(--r-md); background: var(--surface); border: calc(2 * var(--u)) dashed var(--line-strong); color: var(--ink-soft); font-size: 1.06rem; font-weight: 600; line-height: 1.35; text-align: left; }
.pay-cancel-hint .ic { font-size: calc(38 * var(--u)); flex: 0 0 auto; color: var(--brand); }
.pay-cancel-hint strong { color: var(--ink); font-weight: 900; }
.pay-demo-tag { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(18 * var(--u)); border-radius: var(--r-pill); background: var(--warn); color: var(--ink); font-size: 0.95rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }

/* Card-swipe-through-terminal animation (Nexgo N6: magstripe along the bottom edge). */
.pay-terminal { position: relative; width: calc(300 * var(--u)); height: calc(400 * var(--u)); flex: 0 0 auto; }
.pay-terminal-body { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: calc(216 * var(--u)); height: calc(340 * var(--u)); border-radius: calc(26 * var(--u)); background: linear-gradient(180deg, #3A3430 0%, #171411 100%); border: calc(3 * var(--u)) solid #5A4F49; box-shadow: var(--shadow-2); }
.pay-terminal-screen { position: absolute; left: 50%; top: calc(26 * var(--u)); transform: translateX(-50%); width: calc(156 * var(--u)); height: calc(104 * var(--u)); border-radius: calc(10 * var(--u)); background: linear-gradient(180deg, #9E2B49 0%, var(--brand-dark) 100%); box-shadow: inset 0 0 calc(16 * var(--u)) rgba(0, 0, 0, 0.35); }
.pay-terminal-keys { position: absolute; left: 50%; top: calc(154 * var(--u)); transform: translateX(-50%); width: calc(156 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(9 * var(--u)); }
.pay-terminal-keys > i { display: block; height: calc(26 * var(--u)); border-radius: calc(6 * var(--u)); background: #574B45; }
.pay-terminal-slot { position: absolute; left: calc(10 * var(--u)); right: calc(10 * var(--u)); bottom: calc(12 * var(--u)); height: calc(15 * var(--u)); border-radius: calc(8 * var(--u)); background: #0A0806; box-shadow: inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.65), 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.06); }
.card-anim { position: absolute; left: 50%; bottom: calc(74 * var(--u)); width: calc(132 * var(--u)); height: calc(84 * var(--u)); margin-left: calc(-66 * var(--u)); border-radius: calc(10 * var(--u)); background: linear-gradient(135deg, #2F7FD1 0%, #1B4F8A 100%); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(27, 79, 138, 0.45); animation: cardSwipe 2.8s var(--ease) infinite; overflow: hidden; }
.card-anim::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(13 * var(--u)); height: calc(16 * var(--u)); background: rgba(0, 0, 0, 0.45); }
@keyframes cardSwipe { 0% { transform: translateX(calc(-112 * var(--u))); opacity: 0; } 12% { transform: translateX(calc(-92 * var(--u))); opacity: 1; } 58% { transform: translateX(calc(92 * var(--u))); opacity: 1; } 72% { transform: translateX(calc(112 * var(--u))); opacity: 0; } 100% { transform: translateX(calc(112 * var(--u))); opacity: 0; } }


/* ══════════════════════════════════════════════════════════════
   15. COMPLETE SCREEN + ON-SCREEN RECEIPT
   ══════════════════════════════════════════════════════════════ */
.done-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); text-align: center; min-height: 100%; padding: var(--sp-6) var(--pad); }
.done-check { width: calc(220 * var(--u)); height: calc(220 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: calc(112 * var(--u)); color: #fff; background: linear-gradient(150deg, #3FCB86 0%, var(--ok) 100%); box-shadow: 0 calc(16 * var(--u)) calc(48 * var(--u)) rgba(46, 158, 79, 0.42); animation: popIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; flex: 0 0 auto; }
.done-title { font-size: 3rem; font-weight: 900; letter-spacing: -0.035em; color: var(--ink); }
.done-wrap.has-receipt { justify-content: flex-start; gap: var(--sp-3); padding-top: var(--sp-4); }
.done-wrap.has-receipt .done-check { width: calc(150 * var(--u)); height: calc(150 * var(--u)); font-size: calc(76 * var(--u)); }
.done-wrap.has-receipt .done-title { font-size: 2.2rem; }
.done-number-label { font-size: 1.25rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.done-number { min-width: calc(360 * var(--u)); padding: calc(26 * var(--u)) calc(56 * var(--u)); border-radius: var(--r-lg); font-size: 8rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--brand); background: var(--surface); border: calc(5 * var(--u)) solid var(--brand); box-shadow: var(--shadow-1); font-variant-numeric: tabular-nums; animation: popIn 0.5s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.done-number.small { font-size: 2.2rem; padding: calc(14 * var(--u)) calc(30 * var(--u)); min-width: 0; border-width: calc(3 * var(--u)); color: var(--ink); border-color: var(--line-strong); }
.done-sub { font-size: 1.5rem; font-weight: 700; line-height: 1.4; color: var(--ink-soft); max-width: 28ch; }
.done-pickup { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--accent-tint); border: calc(2 * var(--u)) solid var(--accent); font-size: 1.35rem; font-weight: 800; color: var(--ink); max-width: calc(820 * var(--u)); text-align: left; line-height: 1.3; }
.done-pickup .ic { font-size: 2em; color: var(--accent-dark); flex: 0 0 auto; }
.done-points { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(24 * var(--u)); border-radius: var(--r-pill); background: var(--ok-tint); color: var(--ok); font-size: 1.2rem; font-weight: 900; }
.done-timer { width: 100%; max-width: calc(560 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); font-size: 1.1rem; font-weight: 700; color: var(--ink-soft); }
.done-timer-bar { width: 100%; height: calc(12 * var(--u)); border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.done-timer-bar > i { display: block; height: 100%; width: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%); transform-origin: left center; transition: transform 0.25s linear; }

/* The receipt, as the 80 mm printer would print it. */
.receipt {
  position: relative; width: 100%; max-width: calc(640 * var(--u));
  margin-top: var(--sp-2); padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: #fff; border-radius: calc(8 * var(--u));
  box-shadow: var(--shadow-2);
  text-align: left; font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: 1rem; color: var(--ink);
  animation: popIn 0.45s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-12 * var(--u)); height: calc(12 * var(--u));
  background: linear-gradient(135deg, #fff 50%, transparent 50%) 0 0 / calc(24 * var(--u)) calc(12 * var(--u)) repeat-x,
              linear-gradient(-135deg, #fff 50%, transparent 50%) calc(12 * var(--u)) 0 / calc(24 * var(--u)) calc(12 * var(--u)) repeat-x;
}
.rc-demo { position: absolute; top: calc(-14 * var(--u)); right: var(--sp-4); padding: calc(7 * var(--u)) calc(16 * var(--u)); border-radius: var(--r-pill); background: var(--warn); color: var(--ink); font-family: var(--font); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: var(--shadow-1); }
.rc-head { text-align: center; padding-bottom: var(--sp-3); border-bottom: calc(2 * var(--u)) dashed var(--line-strong); }
.rc-head img { width: calc(230 * var(--u)); height: auto; display: block; margin: 0 auto calc(6 * var(--u)); }
.rc-shop { font-weight: 800; font-size: 1.1rem; }
.rc-sub { color: var(--ink-soft); font-size: 0.86rem; margin-top: calc(2 * var(--u)); }
.rc-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(14 * var(--u)); padding: var(--sp-2) 0; border-bottom: calc(2 * var(--u)) dashed var(--line-strong); font-size: 0.86rem; color: var(--ink-soft); }
.rc-lines { display: flex; flex-direction: column; gap: calc(7 * var(--u)); padding: var(--sp-3) 0; }
.rc-line { display: flex; gap: calc(10 * var(--u)); align-items: baseline; }
.rc-qty { min-width: calc(46 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-name { flex: 1 1 auto; min-width: 0; }
.rc-name small { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.rc-name b { color: var(--brand); }
.rc-amt { white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-totals { border-top: calc(2 * var(--u)) dashed var(--line-strong); padding-top: var(--sp-2); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.rc-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-variant-numeric: tabular-nums; }
.rc-total { font-size: 1.4rem; font-weight: 900; color: var(--brand); padding: calc(6 * var(--u)) 0; }
.rc-note { color: var(--ink-soft); font-size: 0.9rem; }
.rc-foot { text-align: center; padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: calc(2 * var(--u)) dashed var(--line-strong); font-weight: 700; }


/* ══════════════════════════════════════════════════════════════
   16. SYSTEM — toast, gate, lock, admin, badges, spinner
   ══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--bottombar-h) + var(--sp-5)); z-index: 400;
  display: flex; align-items: center; gap: var(--sp-3); max-width: 84vw;
  padding: calc(20 * var(--u)) calc(34 * var(--u)); border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-size: 1.3rem; font-weight: 800; line-height: 1.25; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateX(-50%) translateY(calc(24 * var(--u))) scale(0.96); pointer-events: none;
  transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease-out);
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toast .ic { color: var(--accent-light); font-size: 1.5em; }
.toast.ok { background: var(--ok); } .toast.bad { background: var(--danger); } .toast.ok .ic, .toast.bad .ic { color: #fff; }

.offline-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4);
  padding: var(--sp-8) var(--pad); text-align: center;
  background: var(--brand) url("../img/pattern-wine.svg") center / var(--tile) repeat; color: #fff;
}
.offline-overlay[hidden] { display: none !important; }
.above-gate { z-index: 1000 !important; }
.offline-overlay .ic { font-size: calc(150 * var(--u)); color: rgba(255, 255, 255, 0.9); }
.offline-logo-card { display: block; background: var(--surface-alt); border-radius: var(--r-lg); padding: calc(22 * var(--u)) calc(34 * var(--u)); box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(40, 0, 10, 0.35); }
.offline-overlay img.offline-logo { width: calc(360 * var(--u)); max-width: 60vw; height: auto; display: block; pointer-events: none; }
.offline-staff { position: absolute; bottom: var(--sp-6); left: var(--pad); right: var(--pad); font-size: 1rem; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.offline-staff:empty { display: none; }
.offline-title { font-size: 3rem; font-weight: 900; letter-spacing: -0.03em; }
.offline-sub { font-size: 1.5rem; font-weight: 600; color: rgba(255, 255, 255, 0.88); max-width: 28ch; line-height: 1.4; margin-bottom: var(--sp-4); }
.offline-overlay .btn-primary, .offline-overlay .btn-lg { background: #fff; color: var(--brand); }

.spinner { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; border: calc(7 * var(--u)) solid var(--line); border-top-color: var(--brand); animation: spin 0.9s linear infinite; flex: 0 0 auto; }
.spinner.on-dark { border-color: rgba(255, 255, 255, 0.22); border-top-color: #fff; }
.spinner.sm { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-width: calc(4 * var(--u)); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Startup / admin lock screen ─────────────────────────── */
.lock-screen { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; padding: var(--pad); background: linear-gradient(170deg, #3A3430 0%, var(--ink) 100%); color: #fff; }
.lock-box { width: 100%; max-width: calc(620 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-7) var(--sp-5); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.06); border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.14); text-align: center; }
.lock-box .ic { font-size: calc(76 * var(--u)); color: var(--accent-light); }
.lock-title { font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; }
.lock-sub { font-size: 1.2rem; font-weight: 600; color: rgba(255, 255, 255, 0.66); }
.lock-dots { display: flex; gap: calc(18 * var(--u)); justify-content: center; min-height: calc(34 * var(--u)); align-items: center; }
.lock-dots > * { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid rgba(255, 255, 255, 0.4); background: transparent; transition: background var(--t-fast) linear, border-color var(--t-fast) linear, transform var(--t-fast) var(--ease); }
.lock-dots > *.filled, .lock-dots > *.on { background: var(--accent-light); border-color: var(--accent-light); transform: scale(1.18); }
.lock-error { min-height: calc(38 * var(--u)); font-size: 1.2rem; font-weight: 800; color: #FF9C94; }
.lock-error.shake, .lock-dots.shake { animation: shake 0.42s ease; }
.lock-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); width: 100%; max-width: calc(480 * var(--u)); }
.lock-keypad.disabled { opacity: 0.35; pointer-events: none; }
.lock-key { height: max(88px, calc(120 * var(--u))); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 800; color: #fff; background: rgba(255, 255, 255, 0.1); border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.18); transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear; }
.lock-key:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.24); }
.lock-key.empty { background: transparent; border-color: transparent; pointer-events: none; }
.lock-key.wide { grid-column: span 2; }
.lock-key.accent { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Admin panel (PIN gated) ─────────────────────────────── */
.modal-overlay.above-gate .modal-sheet { max-height: 94vh; }
.modal-sheet.admin-panel, .modal-sheet.admin-pin { max-height: 94vh; padding: calc(18 * var(--u)) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); text-align: left; }
.admin-panel { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; max-height: none; overflow: visible; padding: var(--sp-2) 0; text-align: left; }
.admin-title { font-size: 1.1rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-top: var(--sp-4); }
.admin-section { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-alt); border: calc(2 * var(--u)) solid var(--line); }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--touch); padding: calc(12 * var(--u)) 0; border-bottom: calc(2 * var(--u)) solid var(--line); font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.admin-row:last-child { border-bottom: 0; }
.admin-row.stacked { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.admin-label { font-size: 1.05rem; font-weight: 800; color: var(--ink-soft); letter-spacing: 0.02em; white-space: nowrap; }
.admin-input { flex: 1 1 auto; min-width: 0; min-height: var(--touch); padding: calc(12 * var(--u)) calc(18 * var(--u)); border-radius: var(--r-sm); border: calc(3 * var(--u)) solid var(--line); background: var(--surface); font-size: 1.2rem; font-weight: 700; color: var(--ink); text-align: right; }
.admin-input:focus { border-color: var(--brand); }
.admin-input[type="text"], .admin-input.left { text-align: left; }
.admin-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.admin-actions .full { grid-column: 1 / -1; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: 1.05rem; font-weight: 700; color: var(--ink-soft); padding: calc(6 * var(--u)) 0; }
.kv > span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.switch { position: relative; flex: 0 0 auto; width: calc(104 * var(--u)); height: calc(56 * var(--u)); border-radius: var(--r-pill); background: var(--line); border: calc(2 * var(--u)) solid var(--line); transition: background var(--t-base) ease; }
.switch::after { content: ""; position: absolute; top: calc(4 * var(--u)); left: calc(4 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--t-base) var(--ease); }
.switch.on { background: var(--ok); border-color: var(--ok); }
.switch.on::after { transform: translateX(calc(48 * var(--u))); }
.badge { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(18 * var(--u)); border-radius: var(--r-pill); font-size: 0.98rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; background: var(--surface-alt); color: var(--ink-soft); border: calc(2 * var(--u)) solid var(--line); }
.badge-ok  { background: var(--ok-tint); color: var(--ok); border-color: rgba(46, 158, 79, 0.28); }
.badge-bad { background: var(--danger-tint); color: var(--danger); border-color: rgba(200, 55, 45, 0.28); }
.badge .ic { font-size: 1.2em; }
.credit { font-size: 0.8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); text-align: center; margin-top: var(--sp-3); }
.credit strong { font-weight: 900; letter-spacing: .06em; }
.credit-admin { margin-top: calc(6 * var(--u)); text-align: left; }

/* ── "Bent u er nog?" countdown ──────────────────────────── */
.done-number.idle { font-size: 5rem; min-width: calc(220 * var(--u)); }


/* ══════════════════════════════════════════════════════════════
   17. ON-SCREEN KEYBOARD + NUMERIC KEYPAD
   ══════════════════════════════════════════════════════════════ */
.touch-kb { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: var(--sp-4) var(--pad) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: calc(2 * var(--u)) solid var(--line); box-shadow: 0 calc(-6 * var(--u)) calc(26 * var(--u)) rgba(23, 20, 17, 0.08); flex: 0 0 auto; }
.touch-kb-row { display: flex; gap: calc(10 * var(--u)); justify-content: center; }
.touch-kb-key {
  flex: 1 1 0; min-width: 0; height: max(72px, calc(94 * var(--u))); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.65rem; font-weight: 800; color: var(--ink);
  background: var(--surface-alt); border: calc(2 * var(--u)) solid var(--line); box-shadow: 0 calc(3 * var(--u)) 0 var(--line);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.touch-kb-key:active { transform: translateY(calc(3 * var(--u))); box-shadow: none; background: var(--brand-tint); }
.touch-kb-space { flex: 4 1 0; font-size: 1.1rem; font-weight: 700; color: var(--ink-soft); }
.touch-kb-shift, .touch-kb-back { flex: 1.5 1 0; background: var(--surface-deep); color: var(--ink); }
.touch-kb.shifted .touch-kb-shift { background: var(--ink); border-color: var(--ink); color: #fff; }
.touch-kb-done { flex: 2.2 1 0; font-size: 1.2rem; color: #fff; background: linear-gradient(180deg, #9E2B49 0%, var(--brand-dark) 100%); border-color: transparent; box-shadow: 0 calc(3 * var(--u)) 0 var(--brand-deep); }
.touch-kb-key .ic { font-size: 1.3em; }

.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); width: 100%; max-width: calc(560 * var(--u)); margin: var(--sp-2) auto 0; }
.numpad-key { height: max(76px, calc(104 * var(--u))); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 2.1rem; font-weight: 800; color: var(--ink); background: var(--surface-alt); border: calc(2 * var(--u)) solid var(--line); transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear; }
.numpad-key:active { transform: scale(0.94); background: var(--brand-tint); }
.numpad-key.clear { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-tint); }
.numpad-key.enter { color: #fff; background: var(--ok); border-color: var(--ok); }
.numpad-display { display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); min-height: calc(96 * var(--u)); padding: 0 var(--sp-4); border-radius: var(--r-md); background: var(--surface-alt); border: calc(3 * var(--u)) solid var(--line); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 2.2rem; font-weight: 800; letter-spacing: 0.12em; color: var(--ink); font-variant-numeric: tabular-nums; }
.numpad-display.placeholder { color: var(--ink-mute); letter-spacing: 0; font-family: var(--font); font-size: 1.3rem; font-weight: 600; }

/* ── Admin PIN gate (components/admin-panel.js) ──────────── */
.pin-display { display: flex; gap: calc(18 * var(--u)); align-items: center; justify-content: center; min-height: calc(40 * var(--u)); margin: var(--sp-3) 0 var(--sp-1); }
.pin-display.shake { animation: shake 0.45s ease; }
.pin-dot { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid var(--line); background: transparent; transition: background var(--t-fast) linear, border-color var(--t-fast) linear, transform var(--t-fast) var(--ease); }
.pin-dot.filled { background: var(--brand); border-color: var(--brand); transform: scale(1.16); }
.pin-error { min-height: calc(36 * var(--u)); font-size: 1.15rem; font-weight: 800; color: var(--danger); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); width: 100%; max-width: calc(540 * var(--u)); margin: var(--sp-2) auto 0; }
.pin-key { height: max(76px, calc(112 * var(--u))); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 2.1rem; font-weight: 800; color: var(--ink); background: var(--surface-alt); border: calc(2 * var(--u)) solid var(--line); transition: transform var(--t-fast) var(--ease), background var(--t-fast) linear; }
.pin-key:active { transform: scale(0.94); background: var(--brand-tint); }
.pin-key-clear { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-tint); }
.pin-key-enter { color: #fff; background: var(--ok); border-color: var(--ok); }
.admin-section-title { font-size: 1.05rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.admin-section > button { width: 100%; margin-top: var(--sp-1); }
.admin-pill { padding: calc(16 * var(--u)) calc(22 * var(--u)); border-radius: var(--r-md); font-size: 1.1rem; font-weight: 800; line-height: 1.3; text-align: center; background: var(--surface-alt); color: var(--ink-soft); border: calc(2 * var(--u)) solid var(--line); }
.admin-pill.plain { background: var(--accent-tint); color: #3E4316; border-color: var(--accent-dark); }
.admin-pill.secure { background: var(--ok-tint); color: var(--ok); border-color: rgba(46, 158, 79, 0.35); }
.admin-warning { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--danger-tint); border: calc(2 * var(--u)) solid rgba(200, 55, 45, 0.3); color: var(--danger); font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.admin-status { display: flex; align-items: center; gap: var(--sp-2); min-height: calc(34 * var(--u)); font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--ink-soft); }
.admin-status.loading { color: var(--info); } .admin-status.success { color: var(--ok); } .admin-status.error { color: var(--danger); }
.btn-danger.armed { background: #A82E25; animation: shake 0.45s ease; }
.admin-lastscan { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.06em; color: var(--ink); background: var(--surface); border: calc(2 * var(--u)) dashed var(--line-strong); border-radius: var(--r-sm); padding: calc(10 * var(--u)) calc(16 * var(--u)); min-height: calc(60 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }


/* ══════════════════════════════════════════════════════════════
   18. HELP, AGE CHECK + CUSTOMER DIALOGS
   ══════════════════════════════════════════════════════════════ */
.help-waiting { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 0; width: 100%; }
.help-waiting .pulse-ring { width: calc(190 * var(--u)); height: calc(190 * var(--u)); border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: calc(90 * var(--u)); animation: payPulse 1.9s ease-in-out infinite; }
.help-waiting .pulse-ring.age { background: var(--brand); }
.age-badge-big { font-family: var(--font); font-size: 3rem; font-weight: 900; letter-spacing: -0.04em; color: #fff; }
.help-kiosk-id { font-size: 1rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.help-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-2); }
.help-options .btn-tile { min-height: calc(150 * var(--u)); }
.age-list { width: 100%; margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-alt); border: calc(2 * var(--u)) solid var(--line); text-align: left; font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.5; }
.age-list-head { font-size: 0.85rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: calc(6 * var(--u)); }
.age-status { min-height: calc(36 * var(--u)); margin-top: var(--sp-2); font-size: 1.1rem; font-weight: 800; color: var(--ink-soft); }
.age-status.bad { color: var(--danger); }


/* ══════════════════════════════════════════════════════════════
   19. SHARED ANIMATION HELPERS
   ══════════════════════════════════════════════════════════════ */
.fade-in { animation: fadeIn var(--t-base) ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(calc(10 * var(--u))); } to { opacity: 1; transform: none; } }


/* ══════════════════════════════════════════════════════════════
   20. RESOLUTION TUNING
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) and (orientation: portrait) {
  .item-body { padding: var(--sp-4) var(--sp-4) calc(10 * var(--u)); }
  .opt-choices { gap: var(--sp-4); }
}
/* Laptop / landscape demo screens: the hero gets short, so the carousel goes
   and the logo card shrinks before anything is clipped. */
@media (max-height: 1200px) {
  .attract-carousel { display: none; }
  .attract-logo { width: calc(380 * var(--u)); max-width: 46vw; }
  .attract-logo-wrap { padding: calc(18 * var(--u)) calc(30 * var(--u)); }
  .attract-hero { gap: var(--sp-3); padding-top: calc(var(--sp-6) + 40 * var(--u)); padding-bottom: calc(60 * var(--u)); }
  .attract-tagline { font-size: 2.1rem; }
}
@media (max-height: 900px) {
  :root { --topbar-h: max(64px, 8vh); --bottombar-h: max(88px, 12vh); }
  .attract-logo { width: calc(300 * var(--u)); }
  .attract-logo-wrap { padding: calc(14 * var(--u)) calc(24 * var(--u)); }
  .attract-tagline { font-size: 1.8rem; }
  .attract-title { font-size: 2.2rem; }
  .attract-cta { font-size: 1.7rem; padding: calc(18 * var(--u)) calc(70 * var(--u)); min-height: var(--cta-h); }
  .attract-panel { padding-top: var(--sp-5); gap: var(--sp-3); }
  .done-number { font-size: 5.2rem; }
  .pay-amount { font-size: 3rem; }
  .scan-prompt { min-height: calc(120 * var(--u)); }
  .scan-prompt-icon { width: calc(90 * var(--u)); height: calc(90 * var(--u)); font-size: calc(54 * var(--u)); }
  .limit-bar { display: none; }
}
@media (max-width: 560px) {
  .opt-choices { grid-template-columns: 1fr; }
  .cart-row-photo { display: none; }
  .browse-rail { flex-basis: calc(120 * var(--u)); width: calc(120 * var(--u)); }
  .browse-grid, .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-actions { grid-template-columns: 1fr; }
  .attract-legend { flex-direction: column; }
}


/* ══════════════════════════════════════════════════════════════
   21. ACCESSIBILITY — reduced motion / print
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .screen { transform: none; }
  .attract-logo-wrap, .attract-cta, .pay-icon.pending, .card-anim, .boot-bar > i, .scan-prompt-icon::after, .search-caret { animation: none; }
  .card-anim { transform: none; opacity: 1; }
  .spinner { animation: spin 1.4s linear infinite !important; }
}
@media print { body { display: none; } }