/* SHOPS design system v2 — SERVD storefront idiom (light, Just-Eat/Deliveroo class),
   adapted from the SERVD pixel spec. Per-tenant accent via CSS vars (Ambas: red/green).
   Surfaces: storefront (light SERVD idiom) · staff/owner (same light system) ·
   hygiene (.hyg dark dashboard, blue accent — deliberately separate language, per spec). */

@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-2.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-0.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Hanken'; src: url('/fonts/hanken-3.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; }

:root {
  /* SERVD light tokens */
  --ink: #F7F7F8; --ink-2: #FFFFFF; --ink-3: #F1F1F3;
  --line: #E7E7EB; --line-2: #D6D6DC;
  --text: #1A1A1F; --muted: #63636B; --muted-2: #8A8A92; --surface: #FFFFFF;
  /* Tenant accent (Ambas: logo red; ember = deepened red; fresh = logo green) */
  --saffron: #E2000A; --ember: #9E0007; --on-accent: #FFFFFF; --accent-strong: #B00008;
  --fresh: #7DC821; --card-from: #FDECEA; --card-to: #F7F7F8;
  --glass-top: rgba(255,255,255,.92); --glass-bottom: rgba(255,255,255,.72);
  --good: #17924E; --bad: #C4322F; --warn: #B87A17;
  --good-bg: #E9F5EE; --bad-bg: #FBEAE8; --amber-bg: #FDF3E0;
  --toast-bg: #1A1A1F; --toast-fg: #FFFFFF;
  --radius: 20px; --maxw: 480px;
  --sh-sm: 0 1px 2px rgba(16,17,33,.06);
  --sh-md: 0 6px 20px -8px rgba(16,17,33,.12);
  --sh-lg: 0 20px 48px -24px rgba(16,17,33,.22);
  --font: 'Hanken', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fs-xs: clamp(.72rem, .69rem + .14vw, .78rem);
  --fs-sm: clamp(.82rem, .79rem + .16vw, .9rem);
  --fs-md: clamp(.95rem, .9rem + .28vw, 1.06rem);
  --fs-lg: clamp(1.16rem, 1.04rem + .62vw, 1.42rem);
  --fs-xl: clamp(1.4rem, 1.18rem + 1.1vw, 1.92rem);
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--ink); color: var(--text);
  line-height: 1.5; letter-spacing: -.002em; font-optical-sizing: auto; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
a { color: var(--text); text-decoration: none; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; }
.tnum { font-family: var(--font-display); font-feature-settings: 'tnum' 1, 'lnum' 1; font-weight: 500; }

/* ---------- shared shell (staff/owner) ---------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 560px; }
header.app { position: sticky; top: 0; z-index: 20; color: var(--text);
  background: linear-gradient(var(--glass-top), var(--glass-bottom));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  padding: max(10px, env(safe-area-inset-top)) 16px 10px; display: flex; align-items: center; gap: 10px; }
header.app h1 { font-size: 17px; flex: 1; }
header.app .who { font-size: 13px; color: var(--muted); }
main { padding: 18px 0 90px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-sm); padding: 16px; margin-bottom: 14px; }
.card h2 { font-family: var(--font); font-size: 12.5px; margin-bottom: 10px; color: var(--muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .name { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub { font-size: 13px; color: var(--muted); }
.thumb { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; background: var(--ink-3); flex: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  border-radius: 16px; padding: 14px 20px; font-size: 16px; font-weight: 600; min-height: 52px;
  background: var(--saffron); color: var(--on-accent); width: 100%; transition: transform .12s; }
.btn:active { transform: scale(.98); }
.btn.secondary { background: var(--ink-3); color: var(--text); }
.btn.gold { background: var(--fresh); color: #14260a; }
.btn.danger { background: var(--bad); color: #fff; }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: 14px; width: auto; border-radius: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.amber { background: var(--amber-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.plain { background: var(--ink-3); color: var(--muted); }

label.field { display: block; margin-bottom: 12px; }
label.field span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
input.text, select.text, textarea.text { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line);
  border-radius: 13px; font-size: 16px; background: var(--surface); color: var(--text); }
input.text:focus, select.text:focus { outline: 2px solid var(--accent-strong); border-color: transparent; }
.pin { letter-spacing: 12px; text-align: center; font-size: 26px !important; font-variant-numeric: tabular-nums; }

/* ---------- premium-white SERVD-style bottom selector (ops apps) ---------- */
nav.tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px; /* web: centred pill; PWA/phone: full width */
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  display: flex; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); z-index: 40;
  box-shadow: 0 -1px 24px -8px rgba(16, 17, 33, .14); }
nav.tabs button { flex: 1; background: none; border: 0; padding: 6px 4px; font-size: 11px; font-weight: 650;
  letter-spacing: .01em; color: var(--muted, #63636b); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 4px; min-height: 56px; justify-content: center; border-radius: 14px;
  transition: color .15s; -webkit-tap-highlight-color: transparent; }
nav.tabs button .ico { display: grid; place-items: center; width: 46px; height: 28px; border-radius: 999px; transition: background .18s, transform .12s; }
nav.tabs button .ico svg { width: 22px; height: 22px; }
nav.tabs button.active { color: var(--accent, #E2000A); }
nav.tabs button.active .ico { background: #FCE9E9; transform: translateY(-1px); }
nav.tabs button:active .ico { transform: scale(.9); }
/* dark-mode aware (some EPOS/phones force dark) */
@media (prefers-color-scheme: dark) {
  nav.tabs { background: rgba(24, 24, 28, .9); border-top-color: #2a2a30; }
  nav.tabs button.active .ico { background: rgba(226, 0, 10, .18); }
}

.snap { border: 2.5px dashed var(--saffron); background: var(--card-from); border-radius: 22px;
  padding: 34px 20px; text-align: center; cursor: pointer; }
.snap .ico { font-size: 44px; }
.snap .t { font-size: 18px; font-weight: 600; margin-top: 8px; color: var(--saffron); font-family: var(--font-display); }
.snap .s { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

.line-review { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.line-review.auto { border-color: var(--good); background: var(--good-bg); }
.line-review.amber { border-color: var(--warn); background: var(--amber-bg); }
.line-review .raw { font-weight: 600; font-size: 14.5px; }
.line-review .meta { font-size: 13px; color: var(--muted); margin: 3px 0 8px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--sh-sm); }
.stat .n { font-size: 26px; font-family: var(--font-display); font-weight: 600; font-feature-settings: 'tnum' 1,'lnum' 1; }
.stat .l { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.stat.alert .n { color: var(--bad); }
.gauge { height: 10px; border-radius: 999px; background: var(--ink-3); overflow: hidden; margin-top: 8px; }
.gauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--bad), var(--warn) 45%, var(--good) 75%); }
.chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin-top: 14px; padding-top: 6px; }
.chart .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.chart .bar i { display: block; width: 100%; max-width: 26px; background: var(--saffron); border-radius: 5px 5px 0 0; }
.chart .bar span { font-size: 9.5px; color: var(--muted-2); margin-top: 4px; font-variant-numeric: tabular-nums; }

.muted { color: var(--muted); font-size: 13.5px; }
.center { text-align: center; }
.mt { margin-top: 14px; }
.hidden { display: none !important; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; background: var(--toast-bg);
  color: var(--toast-fg); padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  z-index: 70; box-shadow: var(--sh-lg); }

/* =========================================================================
   STOREFRONT — the SERVD ordering-site idiom
   ========================================================================= */
.store { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; position: relative; padding-bottom: 110px; }
@media (min-width: 768px) { :root { --maxw: 640px; } }

/* topbar: sticky glass */
.topbar { position: sticky; top: 0; z-index: 40; padding: max(12px, env(safe-area-inset-top)) 16px 10px;
  background: linear-gradient(var(--glass-top), var(--glass-bottom));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.topbar-row { display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.brandmark { width: 52px; height: 52px; border-radius: 15px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--sh-sm); display: grid; place-items: center; overflow: hidden; flex: none; }
.brandmark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.brandtext .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brandtext .sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.iconbtn .hbadge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--saffron); color: var(--on-accent); font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center; }
/* fulfilment toggle */
.fulfil { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; }
.fulfil .toggle { justify-content: center; }
.fulfil .toggle button { flex: 1; text-align: center; }
.toggle { display: flex; background: var(--ink-3); border-radius: 999px; padding: 3px; }
.toggle button { border: 0; background: none; padding: 7px 16px; border-radius: 999px; font-size: 13.5px;
  font-weight: 600; color: var(--muted); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--saffron); color: var(--on-accent); }
.fmeta { display: flex; justify-content: center; }
.fpill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650;
  padding: 7px 14px; border-radius: 999px; letter-spacing: .01em; }
.fp-open { background: #F0FAF4; border: 1px solid #CDEBD9; color: #17924E; }
.fp-online { background: #FFF8EC; border: 1px solid #F2E2C4; color: #7A5A18; }
.fp-online .dot { background: #E8A33D !important; }
.fmeta .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--good); animation: breathe 2.2s infinite; }
@keyframes breathe { 50% { opacity: .45; } }

/* hero badges */

/* search + category rail */
.searchwrap { padding: 12px 16px 0; }
.searchbar { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 15px; padding: 12px 14px; }
.searchbar input { border: 0; outline: 0; flex: 1; font-size: 16px; background: none; color: var(--text); }
.searchbar .mag { color: var(--muted-2); }
.cat-h { display: flex; align-items: center; gap: 10px; padding: 20px 16px 10px; }
.cat-h h2 { font-size: var(--fs-lg); }
.catclear { border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 6px 13px; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent-strong);
  cursor: pointer; flex: none; }
.cat-h .ln { flex: 1; height: 1px; background: var(--line); }
.cat-h .ct { font-size: var(--fs-xs); color: var(--muted-2); font-feature-settings: 'tnum' 1; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 8px; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.item { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-sm); overflow: visible; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
@media (hover:hover) { .item:hover { transform: translateY(-3px); box-shadow: var(--sh-md); } .item:hover .imgbox img { transform: scale(1.05); } }
.imgbox { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: #fff; }
.imgbox img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .35s; }
.imgbox .glyph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 42px; opacity: .6; }
.item .badge2 { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(20,20,26,.72); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; }
.item .badge3 { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--saffron); color: var(--on-accent);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; }
.item .meta { position: relative; padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.imgbox { position: relative; }
.add-mini { position: absolute; right: 8px; bottom: 8px; z-index: 3; border: 0; width: 30px; height: 30px; border-radius: 10px;
  background: var(--saffron); color: var(--on-accent); cursor: pointer;
  box-shadow: 0 2px 10px -2px rgba(16,17,33,.35); display: grid; place-items: center; transition: transform .12s; }
.add-mini:active { transform: scale(.92); }
.gqty { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center; background: var(--saffron); padding: 0 2px;
  color: var(--on-accent); border-radius: 13px; box-shadow: var(--sh-md); }
/* compact once armed — the visual shrinks, an invisible ::before keeps the
   44px finger target (same trick as the drawer steppers) */
.gqty button { border: 0; background: none; color: inherit; width: 26px; height: 30px;
  font-size: 15px; font-weight: 700; cursor: pointer; position: relative; }
.gqty button::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px;
  height: 44px; transform: translate(-50%,-50%); }
.gqty span { min-width: 13px; text-align: center; font-weight: 700; font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
.item .nm { font-size: var(--fs-sm); font-weight: 500; letter-spacing: -.02em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.item .pr { font-size: var(--fs-sm); font-weight: 500; margin-top: auto; font-family: var(--font-display);
  font-feature-settings: 'tnum' 1,'lnum' 1; }
.item .unit { font-size: 10.5px; color: var(--muted-2); }
.oos-tag { font-size: var(--fs-xs); color: var(--muted-2); font-weight: 600; }

/* buy-again strip (supermarket pattern #1) */
.usuals { padding: 14px 0 0; }
.usuals-h { padding: 0 16px 8px; display: flex; align-items: center; gap: 8px; }
.usuals-h h2 { font-size: var(--fs-lg); }
.usuals-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 10px; scrollbar-width: none; }
.usuals-strip::-webkit-scrollbar { display: none; }
.ucard { flex: none; width: 128px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--sh-sm); overflow: visible; position: relative; }
.ucard .imgbox { border-radius: 16px 16px 0 0; aspect-ratio: 1/1; background: #fff; }
.ucard .b { padding: 8px 10px 10px; position: relative; }
.ucard .nm { font-size: 11.5px; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.ucard .pr { font-size: 12.5px; font-family: var(--font-display); font-feature-settings: 'tnum' 1; margin-top: 2px; }
.ucard .add-mini { width: 26px; height: 26px; font-size: 14px; top: -34px; right: 7px; border-radius: 9px; }
.ucard .add-mini svg { width: 13px; height: 13px; }

/* bottom basket bar */
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .3s cubic-bezier(.22,1,.32,1); }
.cartbar.show { transform: translateY(0); }
.cartbar button { width: 100%; max-width: calc(var(--maxw) - 32px); margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; border: 0; background: linear-gradient(135deg, var(--saffron), var(--ember));
  color: var(--on-accent); border-radius: 17px; padding: 15px 18px; font-size: 16px; font-weight: 700;
  box-shadow: var(--sh-lg); cursor: pointer; }
.cartbar .ct { background: rgba(255,255,255,.22); border-radius: 999px; padding: 2px 10px; font-size: 13.5px; }
.cartbar .tot { font-family: var(--font-display); font-feature-settings: 'tnum' 1,'lnum' 1; }
/* minimum-order progress (supermarket pattern) */
.minbar { max-width: calc(var(--maxw) - 32px); margin: 0 auto 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 12px; font-size: var(--fs-xs); color: var(--muted); box-shadow: var(--sh-md); }
.minbar .track { height: 6px; border-radius: 999px; background: var(--ink-3); margin-top: 6px; overflow: hidden; }
.minbar .track i { display: block; height: 100%; background: var(--fresh); border-radius: 999px; transition: width .3s; }

/* scrim + drawer (z: 60 < 62 — load-bearing) */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(16,17,33,.45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.show { opacity: 1; pointer-events: auto; }
/* ---- "Your order" drawer — SERVD anatomy: sticky top / ONE scroll region /
   PINNED pay footer (Total + CTA never scroll away) ---- */
.drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 62; max-width: var(--maxw);
  margin: 0 auto; max-height: 92vh; max-height: 92dvh; background: var(--ink);
  border-radius: 28px 28px 0 0; border: 1px solid var(--line); border-bottom: none;
  box-shadow: var(--sh-lg); transform: translateY(102%);
  transition: transform .42s cubic-bezier(.22,1,.32,1);
  display: flex; flex-direction: column; overflow: hidden; }
.drawer.open { transform: translateY(0); }
.drawer-top { padding: 17px 20px; border-bottom: 1px solid var(--line); display: flex;
  align-items: center; justify-content: space-between; background: var(--ink); flex: none; }
.drawer-top h3 { font-size: var(--fs-lg); letter-spacing: -.03em; }
.drawer-top .x { background: none; border: none; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; width: 40px; height: 40px; font-size: 21px; }
.drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; }
.lines { padding: 8px 20px; }
.summary-fields { padding: 4px 20px 12px; }
.line { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.le { width: 48px; height: 48px; border-radius: 13px; object-fit: contain; background: #fff;
  border: 1px solid var(--line); flex: none; }
.le.ph { display: grid; place-items: center; color: var(--muted-2); }
.line .mid { flex: 1; min-width: 0; }
.line .lnm { font-size: var(--fs-sm); font-weight: 500; }
.line .lpr { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; font-weight: 500; }
.lq { display: flex; align-items: center; gap: 10px; height: fit-content; }
.lq button { width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--ink-2); color: var(--text); font-size: 1.05rem; display: grid;
  place-items: center; cursor: pointer; line-height: 1; position: relative; }
.lq button::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px;
  height: 44px; transform: translate(-50%,-50%); }
.lq span { min-width: 14px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
/* guest fields — SERVD .ginputs grid + floating .gfield labels */
.ginputs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.gfield { position: relative; }
.ginput { width: 100%; background: var(--ink-3); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 14px; color: var(--text); font: inherit; font-size: var(--fs-sm); min-height: 44px; }
.gfield > .ginput { padding-top: 19px; padding-bottom: 5px; }
.ginput:focus { outline: none; border-color: var(--accent-strong); }
.gfield > label { position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  transform-origin: left center; font-size: var(--fs-sm); color: var(--muted); pointer-events: none;
  transition: top .16s, transform .16s, color .16s; white-space: nowrap; }
.gfield > .ginput:focus + label, .gfield > .ginput:not(:placeholder-shown) + label {
  top: 7px; transform: translateY(0) scale(.82); }
.gfield > .ginput:focus + label { color: var(--accent-strong); }
.gwide { grid-column: 1 / -1; }
/* address autocomplete panel (SERVD parity) — sits under the address field */
.addrwrap { position: relative; }
.ginput.haslocbtn { padding-right: 48px; }
.locbtn { position: absolute; right: 6px; top: 6px; width: 38px; height: 38px; border-radius: 11px;
  border: 0; background: none; color: var(--accent-strong); display: grid; place-items: center;
  cursor: pointer; }
.locbtn svg { width: 20px; height: 20px; }
.locbtn.busy svg { animation: locspin 1s linear infinite; }
@keyframes locspin { to { transform: rotate(360deg); } }
.addrpanel { position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 5;
  max-height: 210px; overflow-y: auto;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: var(--sh-lg); overflow: hidden; }
.addrpanel.hidden { display: none; }
.addrrow { display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--line); font: inherit; }
.addrrow:last-child { border-bottom: 0; }
.addrrow:hover { background: var(--ink-3); }
.addrrow b { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.addrrow span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.codok { padding: 10px 13px; border-radius: 12px; background: var(--good-bg); color: var(--good);
  font-size: var(--fs-xs); font-weight: 600; }
/* delivery slot picker (Asda/Tesco pattern, drawer language) */
.slotpick { margin-top: 11px; }
.slot-lab { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.slot-row { display: flex; gap: 7px; flex-wrap: wrap; }
.slotchip { border: 1px solid var(--line); background: var(--ink-2); border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.slotchip.on { background: var(--saffron); color: var(--on-accent); border-color: var(--saffron); }
.slotgrid { margin-top: 10px; border: 1px solid var(--line); border-radius: 13px; padding: 11px;
  background: var(--ink-2); display: flex; flex-direction: column; gap: 10px; }
.slot-day > b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 6px; }
.slot-wins { display: flex; flex-wrap: wrap; gap: 7px; }

/* closed-state (RJS parity): red status dot + scheduled-orders banner */
.fmeta .dot.closed { background: var(--bad); animation: none; }
.closedbar { display: flex; gap: 11px; align-items: flex-start; margin: 10px 16px 2px;
  padding: 13px 15px; border-radius: 15px; background: var(--amber-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.closedbar .cb-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid;
  place-items: center; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.closedbar .cb-ic svg { width: 19px; height: 19px; }
.closedbar b { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.closedbar span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; line-height: 1.45; }
/* PINNED pay footer */
.summary { flex: none; padding: 15px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--ink-2); }
.srow { display: flex; justify-content: space-between; font-size: var(--fs-sm);
  color: var(--muted); padding: 5px 0; }
.srow.tot { color: var(--text); font-weight: 500; font-size: var(--fs-lg); letter-spacing: -.03em;
  padding-top: 13px; margin-top: 6px; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-feature-settings: 'tnum' 1,'lnum' 1; }
.checkout-cta { width: 100%; margin-top: 15px; border: none; border-radius: 17px;
  background: var(--saffron); color: var(--on-accent); font-weight: 500; font-size: var(--fs-md);
  padding: 15px 17px; cursor: pointer; box-shadow: var(--sh-md); min-height: unset; display: block; }
.checkout-cta:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.checkout-cta .ck-sub { display: block; font-size: 11px; font-weight: 400; opacity: .78; margin-top: 2px; }
.pay-notice { display: flex; align-items: flex-start; gap: 9px; margin-top: 15px; padding: 11px 13px;
  border-radius: 13px; background: var(--ink-2); border: 1px solid var(--line);
  font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
.pay-notice + .checkout-cta { margin-top: 11px; }
.delgate { margin-top: 15px; padding: 11px 13px; border-radius: 13px; background: var(--bad-bg);
  color: var(--bad); font-size: var(--fs-xs); font-weight: 600; }
.paycounter2 { width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: 16px;
  background: transparent; color: var(--muted); font-weight: 500; font-size: var(--fs-sm);
  padding: 13px; cursor: pointer; }
.guestnote { text-align: center; font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; }
.guestnote b { color: var(--text); font-weight: 500; }
.empty { padding: 66px 30px; text-align: center; color: var(--muted); }
.empty .ic { font-size: 3rem; display: block; margin-bottom: 14px; opacity: .7; }
.empty b { color: var(--text); display: block; font-size: var(--fs-lg); margin-bottom: 6px;
  font-weight: 500; letter-spacing: -.02em; font-family: var(--font-display); }
.empty p { font-size: var(--fs-sm); }

/* ---- live order tracker — SERVD anatomy: full-screen staged overlay +
   collapsed "Your order" pill (servd-tracker-css, adapted to TILLD tokens) ---- */
.strk-overlay { position: fixed; inset: 0; z-index: 80; color: var(--text);
  background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--saffron) 8%, var(--ink)), var(--ink) 55%);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; pointer-events: none; transform: translateY(3%);
  transition: opacity .3s, transform .34s cubic-bezier(.2,.8,.2,1); }
.strk-overlay.on { opacity: 1; pointer-events: auto; transform: none; }
.strk-top { display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 18px 6px; }
.strk-top .t { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.strk-min { width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--ink-2); color: var(--text); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--sh-sm); }
.strk-min svg { width: 20px; height: 20px; }
.strk-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px 26px 8px; min-height: 0; }
.strk-emblem { position: relative; width: 118px; height: 118px; margin-bottom: 22px; }
.strk-emblem .ring { position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--saffron) 45%, transparent);
  animation: strk-ring 2.4s ease-out infinite; }
.strk-emblem .ring.r2 { animation-delay: 1.2s; }
.strk-emblem .core { position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(120% 120% at 32% 22%, var(--saffron), var(--ember) 82%);
  display: grid; place-items: center;
  box-shadow: 0 18px 44px -12px color-mix(in srgb, var(--saffron) 45%, transparent); }
.strk-emblem .core svg { width: 46px; height: 46px; color: var(--on-accent); }
.strk-emblem.pop .core { animation: strk-pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes strk-ring { 0% { transform: scale(.82); opacity: .9; } 100% { transform: scale(1.28); opacity: 0; } }
@keyframes strk-pop { 0% { transform: scale(.72); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
.strk-h { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.strk-sub { margin-top: 9px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; max-width: 340px; }
.strk-eta { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid color-mix(in srgb, var(--saffron) 40%, transparent);
  background: color-mix(in srgb, var(--saffron) 12%, var(--ink-2));
  border-radius: 999px; padding: 9px 16px; font-size: var(--fs-sm); font-weight: 500; }
.strk-eta .d { width: 7px; height: 7px; border-radius: 50%; background: var(--saffron);
  animation: strk-blink 1.6s ease-in-out infinite; }
@keyframes strk-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.strk-paid { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, var(--ink-2));
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); border-radius: 999px; padding: 6px 13px; }
.strk-paid svg { width: 13px; height: 13px; }
.strk-line { width: 100%; max-width: 430px; margin: 34px auto 0; padding: 0 6px; }
.strk-track { position: relative; height: 4px; border-radius: 2px; background: var(--line); margin: 0 22px; }
.strk-fill { position: absolute; inset: 0; border-radius: 2px; transform-origin: left center;
  background: linear-gradient(90deg, var(--ember), var(--saffron)); transform: scaleX(0);
  transition: transform .8s cubic-bezier(.22,1,.32,1); }
.strk-nodes { display: flex; justify-content: space-between; margin-top: -15px; position: relative; }
.strk-node { width: 44px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.strk-node .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--ink-2);
  border: 2px solid var(--line); display: grid; place-items: center; color: var(--muted);
  transition: border-color .3s, background .3s, color .3s; }
.strk-node .dot svg { width: 13px; height: 13px; }
.strk-node.done .dot { background: var(--saffron); border-color: var(--saffron); color: var(--on-accent); }
.strk-node.now .dot { background: var(--saffron); border-color: var(--saffron); color: var(--on-accent);
  animation: strk-nodepop .5s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--saffron) 16%, transparent),
    0 6px 18px -6px color-mix(in srgb, var(--saffron) 50%, transparent); }
@keyframes strk-nodepop { 0% { transform: scale(.5); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
.strk-node .lb { font-size: 10px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; transition: color .3s; }
.strk-node.done .lb, .strk-node.now .lb { color: var(--text); }
.strk-foot { padding: 18px 22px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.strk-hint { font-size: 12px; color: var(--muted); text-align: center; }
.strk-done { border: none; border-radius: 14px; background: var(--saffron); color: var(--on-accent);
  font-weight: 500; font-size: var(--fs-md); padding: 14px 38px; cursor: pointer; box-shadow: var(--sh-md); }
.strk-overlay.ready { background: radial-gradient(130% 100% at 50% -10%, color-mix(in srgb, var(--good) 10%, var(--ink)), var(--ink) 58%); }
.strk-overlay.ready .strk-emblem .core { background: radial-gradient(120% 120% at 32% 22%, var(--good), #0F6B39 82%);
  box-shadow: 0 18px 48px -12px color-mix(in srgb, var(--good) 45%, transparent); }
.strk-overlay.ready .strk-emblem .core svg { color: #fff; }
.strk-overlay.ready .strk-emblem .ring { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.strk-overlay.cancelled .strk-emblem .core { background: var(--muted-2); box-shadow: none; }
.strk-overlay.cancelled .strk-emblem .core svg { color: #fff; }
.strk-overlay.cancelled .strk-emblem .ring { display: none; }
.strk-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.strk-confetti i { position: absolute; top: 34%; left: 50%; width: 8px; height: 12px; border-radius: 2px;
  background: var(--c, #E2000A); opacity: 0;
  animation: strk-conf 1.05s cubic-bezier(.22,.9,.36,1) var(--dl, 0s) 1 both; }
@keyframes strk-conf { 0% { transform: translate(0,0) rotate(0); opacity: 0; } 8% { opacity: 1; }
  100% { transform: translate(var(--dx,0px), var(--dy,-180px)) rotate(var(--rt,180deg)); opacity: 0; } }
.strk-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 56; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid color-mix(in srgb, var(--saffron) 40%, var(--line));
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--text); border-radius: 999px; padding: 11px 18px; font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; box-shadow: var(--sh-lg); animation: strk-pill-in .45s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.strk-pill .d { width: 8px; height: 8px; border-radius: 50%; background: var(--saffron); flex: none;
  animation: strk-blink 1.6s ease-in-out infinite; }
.strk-pill.ready-pill .d { background: var(--good); }
.strk-pill .st { color: var(--accent-strong); }
.strk-pill.ready-pill .st { color: var(--good); }
.strk-pill svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
@keyframes strk-pill-in { 0% { transform: translateX(-50%) translateY(16px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; } }
.strk-pill.above-cart { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .strk-pill, .strk-pill.above-cart { bottom: 28px; } }
@media (min-width: 768px) { .strk-line { max-width: 470px; } }
@media (prefers-reduced-motion: reduce) {
  .strk-overlay, .strk-overlay *, .strk-pill { transition-duration: .01ms !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .strk-confetti { display: none; }
}

.imgph { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 40px;
  background: radial-gradient(120% 120% at 30% 20%, var(--card-from), var(--card-to)); }

/* =========================================================================
   HYGIENE — dark dashboard (SERVD FSMS language: slate + #2E7DD2 blue)
   ========================================================================= */
.hyg { background: #0f172a; color: #f1f5f9; border: 1px solid #1e293b; border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px; }
.hyg h2 { font-family: var(--font); color: #94a3b8; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 10px; }
.hyg .row { border-color: #1e293b; }
.hyg .name { color: #f1f5f9; }
.hyg .sub { color: #94a3b8; }
.hyg input.text { background: #111827; border-color: #374151; color: #f3f4f6; }
.hyg input.text::placeholder { color: #4b5563; }
.hyg input.text:focus { outline-color: #2E7DD2; }
.hyg .btn { background: #2E7DD2; color: #fff; }
.hyg .btn.secondary { background: #1e293b; color: #e2e8f0; }
.hyg .pass, .hyg .fail { font-size: 11px; padding: 5px 12px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.hyg .pass { background: rgba(16,185,129,.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,.4); }
.hyg .fail { background: rgba(244,63,94,.15); color: #fda4af; border: 1px solid rgba(244,63,94,.4); }
.hyg .pass.on { background: #10b981; color: #06281c; }
.hyg .fail.on { background: #f43f5e; color: #2d060d; }
.hyg .statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
@media (min-width: 560px) { .hyg .statgrid { grid-template-columns: repeat(4, 1fr); } }
.hyg .hstat { background: rgba(15,23,42,.6); border: 1px solid #1e293b; border-radius: 12px; padding: 10px; }
.hyg .hstat .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hyg .hstat .k { font-size: 11px; color: #94a3b8; }
.hyg .templog { display: flex; gap: 8px; align-items: center; }
.hyg .templog input { width: 72px; text-align: center; }
.hyg .good-t { color: #6ee7b7; } .hyg .bad-t { color: #fda4af; }


/* ---- OOS: keep the colour, lose the funeral ---- */
.item.oos .imgbox { filter: none; opacity: .82; }
.item.oos .nm, .item.oos .pr { color: var(--muted); }
.oospill { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 2;
  background: rgba(255,255,255,.96); color: var(--warn); border: 0;
  font-size: 11px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
  box-shadow: 0 2px 10px -2px rgba(16,17,33,.18); }

/* ---- promos: offer badges, was/now, deals rail, voucher row ---- */
.offerpill { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--saffron);
  color: var(--on-accent); font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 999px; box-shadow: var(--sh-sm); }
.offerpill.inline { position: static; margin-left: 6px; vertical-align: middle; }
.pr .was, .pr1 .was { color: var(--muted-2); text-decoration: line-through; font-weight: 400;
  margin-right: 3px; font-size: .88em; }
.pr .now { color: var(--accent-strong); }
/* member (Clubcard-style) pricing */
.pr .now.member, .pr1 .member { color: #1f7a4d; }
.mtag { display: inline-block; background: #1f7a4d; color: #fff; font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em; padding: 2px 6px; border-radius: 999px; vertical-align: middle; text-transform: uppercase; }
.mtag.sm { font-size: 8.5px; padding: 1px 5px; margin-left: 4px; }
.mhint { display: block; font-size: 11px; font-weight: 700; color: #1f7a4d; margin-top: 1px; }
.offerends.member { color: #1f7a4d; }
/* till: weighed-goods sheet + remove button */
.weighrow { display: flex; gap: 8px; }
.weighrow .text { flex: 1; }
.lqx { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line, #ddd);
  background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted-2, #888); }
.lqx:hover { border-color: #c0392b; color: #c0392b; }
/* owner feature switch (iOS-style) */
.fswitch { flex: 0 0 auto; width: 46px; height: 28px; border-radius: 999px; border: 0; padding: 0;
  background: var(--ink-3, #d7d7d7); position: relative; cursor: pointer; transition: background .18s ease; }
.fswitch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
.fswitch.on { background: #1f7a4d; }
.fswitch.on span { transform: translateX(18px); }
/* driver stop tags: when (scheduled/asap) + pay (cash/paid) */
.sc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.whenpill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .01em; }
.whenpill.sched { background: #eef2ff; color: #3730a3; }
.whenpill.asap { background: #fff4e5; color: #B4530A; }
.whenpill.cash { background: #fde8e8; color: #9b1c1c; }
.whenpill.paid { background: #e7f6ec; color: #1f7a4d; }
/* KDS aggregator chip (Uber Eats / Deliveroo / Just Eat provenance) */
.kc-chip.agg { background: #1c1c1e; color: #fff; }
.offerends.member .linkbtn { color: #1f7a4d; display: inline; border: 0; background: none; padding: 0;
  font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.dealsrail { margin-top: 14px; }
.dealsrail .usuals-h { display: flex; align-items: center; gap: 9px; padding: 0 16px 8px; }
.dealsrail h2 { font-size: var(--fs-lg); }
.dealflame { background: var(--saffron); color: var(--on-accent); font-size: 10px; font-weight: 800;
  letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; }
.dealsrail .usuals-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 6px;
  scrollbar-width: none; }
.dealsrail .usuals-strip::-webkit-scrollbar { display: none; }
.dealcard { position: relative; }
.dealcard .pr .now { font-weight: 700; }
.vrow { display: flex; gap: 8px; align-items: stretch; }
.vapply { flex: none; border: 1px solid var(--line); border-radius: 13px; background: var(--ink-2);
  color: var(--accent-strong); font: inherit; font-size: 13px; font-weight: 700; padding: 0 18px;
  cursor: pointer; }
.srow.voff span { color: var(--good); font-weight: 600; }

/* ---- SERVD topbar icon row (share · save · info · bag) ---- */
.icons { display: flex; gap: 8px; align-items: center; flex: none; }
.iconbtn { width: 44px; height: 44px; border-radius: 14px; overflow: visible; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); display: grid; place-items: center;
  position: relative; cursor: pointer; box-shadow: var(--sh-sm); transition: border-color .18s; }
.iconbtn:hover { border-color: var(--line-2, #D6D6DC); }
.iconbtn svg { width: 20px; height: 20px; }
.inforow { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); }
.inforow:last-of-type { border-bottom: 0; }
.inforow b { flex: none; width: 84px; font-weight: 600; color: var(--muted); }
.inforow span, .inforow a { color: var(--text); line-height: 1.45; }
.inforow a { font-weight: 600; text-decoration: none; color: var(--accent-strong); }
/* mobile squeeze: logo + 4 icons must share 430px */
@media (max-width: 540px) {
  .brandwide { height: 44px; }
  .brandtext { display: none; }
  .icons { gap: 6px; }
  .iconbtn { width: 40px; height: 40px; border-radius: 12px; }
}

/* ---- AI assistant: "Ask us" entry + bottom-sheet chat ---- */
.askus { position: fixed; left: 14px; bottom: calc(122px + env(safe-area-inset-bottom)); z-index: 55;
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line);
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--text); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; box-shadow: var(--sh-lg); }
.askus svg { width: 16px; height: 16px; color: var(--saffron); }
@media (min-width: 1024px) { .askus { bottom: 28px; } }
.chat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 64; max-width: var(--maxw);
  margin: 0 auto; height: 72vh; height: 72dvh; background: var(--ink); border-radius: 28px 28px 0 0;
  border: 1px solid var(--line); border-bottom: none; box-shadow: var(--sh-lg);
  transform: translateY(102%); transition: transform .42s cubic-bezier(.22,1,.32,1);
  display: flex; flex-direction: column; overflow: hidden; }
.chat.open { transform: translateY(0); }
.chat-top { padding: 13px 20px; border-bottom: 1px solid var(--line); display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; flex: none; }
.chat-top .grab { grid-column: 1 / -1; justify-self: center; margin-bottom: 8px; }
.chat-top h3 { grid-column: 2; font-size: var(--fs-lg); letter-spacing: -.03em; }
.chat-top .x { grid-column: 3; justify-self: end; background: none; border: none; color: var(--muted);
  cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; }
.chat-top .x svg { width: 22px; height: 22px; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cnotice { font-size: 11.5px; color: var(--muted); background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 13px; line-height: 1.45; }
.cmsg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: var(--fs-sm);
  line-height: 1.5; white-space: pre-wrap; }
.cmsg.me { align-self: flex-end; background: var(--saffron); color: var(--on-accent);
  border-bottom-right-radius: 5px; }
.cmsg.bot { align-self: flex-start; background: var(--ink-2); border: 1px solid var(--line);
  color: var(--text); border-bottom-left-radius: 5px; }
.cmsg.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.cmsg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2);
  animation: cdot 1.2s ease-in-out infinite; }
.cmsg.typing i:nth-child(2) { animation-delay: .15s; }
.cmsg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cdot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.ccards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.ccards::-webkit-scrollbar { display: none; }
.ccard { flex: 0 0 128px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ccimg { height: 84px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.ccimg img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ccnm { font-size: 12px; font-weight: 500; line-height: 1.3; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 31px; }
.ccrow { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.ccrow .tnum { font-size: 13px; font-weight: 600; }
.ccadd { width: 30px; height: 30px; border-radius: 10px; border: 0; background: var(--saffron);
  color: var(--on-accent); display: grid; place-items: center; cursor: pointer; }
.cbasket { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 6px 13px 12px; }
.cb-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 13px; }
.cb-line:last-of-type { border-bottom: 0; }
.cb-line b { color: var(--muted); font-weight: 600; }
.cb-addall { width: 100%; margin-top: 8px; border: 0; border-radius: 13px; background: var(--saffron);
  color: var(--on-accent); font: inherit; font-size: 14px; font-weight: 700; padding: 12px;
  cursor: pointer; box-shadow: var(--sh-md); }
.cb-addall:disabled { opacity: .55; cursor: default; box-shadow: none; }
.cchips { display: flex; flex-wrap: wrap; gap: 7px; }
.cchip.droprecipe { border-style: dashed; border-color: var(--accent-strong); color: var(--accent-strong);
  font-weight: 600; align-self: flex-start; }
.recipedrop { background: var(--surface); border: 1.5px dashed var(--line-2, #D6D6DC);
  border-radius: 14px; padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.recipedrop b { font-size: 13px; }
.recipedrop textarea { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px;
  font: inherit; font-size: 14px; resize: vertical; min-height: 96px; background: var(--ink-3); }
.recipedrop textarea:focus { outline: none; border-color: var(--accent-strong); }
.cchip { border: 1px solid color-mix(in srgb, var(--saffron) 35%, var(--line)); background: var(--ink-2);
  color: var(--text); border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 12.5px;
  font-weight: 500; cursor: pointer; }
.chat-bar { flex: none; display: flex; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--ink-2); }
.chat-bar input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 12px 16px;
  font: inherit; font-size: 16px; background: var(--ink-3); }
.chat-bar input:focus { outline: none; border-color: var(--accent-strong); }
.chat-bar button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--saffron);
  color: var(--on-accent); display: grid; place-items: center; cursor: pointer; flex: none; }
.chat-bar button svg { width: 19px; height: 19px; }

/* ---- admin partners view ---- */
.statgrid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 640px) { .statgrid4 { grid-template-columns: repeat(4, 1fr); } }
.partner-card { margin-bottom: 12px; }
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pc-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: var(--fs-sm);
  color: var(--muted); }
.pc-stats b { color: var(--text); }
.pc-addons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip.togglable { cursor: pointer; font: inherit; font-size: 12px; }
.pc-pipe { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px;
  font-size: 12px; font-weight: 600; color: var(--muted); }
.pp-step { display: inline-flex; align-items: center; gap: 5px; }
.pp-step i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2, #D6D6DC); }
.pp-step.done { color: var(--text); }
.pp-step.done i { background: var(--good); }
.pp-sep { color: var(--muted-2); }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--muted); }
.chip.on { background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }

/* ---- KDS: the dark pack-screen board (SERVD KdsBoard language) ---- */
.kds { min-height: 100vh; background: #0f172a; color: #f1f5f9; }
.kds-top { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid #1e293b; }
.kds-top .platbrand { color: #f1f5f9; }
.kds-top .who { color: #94a3b8; font-size: 13px; }
.kds-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px;
  align-items: start; }
@media (max-width: 760px) { .kds-cols { grid-template-columns: 1fr; } }
.kcol h2 { font-family: var(--font); font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; color: #94a3b8; margin: 4px 2px 10px; display: flex;
  align-items: center; gap: 8px; }
.kcount { background: #1e293b; border-radius: 999px; padding: 2px 9px; font-size: 12px;
  color: #e2e8f0; }
.kempty { color: #475569; font-size: 13px; padding: 8px 2px; }
.kcard { background: #111c33; border: 1px solid #1e293b; border-radius: 14px; padding: 13px;
  margin-bottom: 10px; }
.kcard.late { border-color: #f43f5e; box-shadow: 0 0 0 1px #f43f5e inset; }
.kc-top { display: flex; justify-content: space-between; align-items: center; }
.kc-top b { font-size: 17px; font-variant-numeric: tabular-nums; }
.kc-age { color: #94a3b8; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kcard.late .kc-age { color: #fda4af; font-weight: 700; }
.kc-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.kc-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #1e293b; color: #e2e8f0; }
.kc-chip.del { background: rgba(46,125,210,.2); color: #93c5fd; }
/* order SOURCE — branded so staff clock provenance instantly */
.kc-chip.src { text-transform: uppercase; letter-spacing: .03em; }
.kc-chip.src-uber_eats { background: #06C167; color: #04220f; }
.kc-chip.src-deliveroo { background: #00CCBC; color: #003c37; }
.kc-chip.src-just_eat { background: #FF8000; color: #331a00; }
.kc-chip.src-tiktok { background: #fe2c55; color: #fff; }
.kc-chip.src-web { background: rgba(59,130,246,.25); color: #93c5fd; }
.kc-chip.src-till { background: rgba(148,163,184,.22); color: #cbd5e1; }
/* owner analytics: source dots share the platform liveries */
.srcdot { width: 10px; height: 10px; border-radius: 999px; flex: none; background: #64748b; }
.srcdot.src-uber_eats { background: #06C167; }
.srcdot.src-deliveroo { background: #00CCBC; }
.srcdot.src-just_eat { background: #FF8000; }
.srcdot.src-tiktok_shop, .srcdot.src-tiktok { background: #fe2c55; }
.srcdot.src-web { background: #3b82f6; }
.srcdot.src-till { background: #94a3b8; }
.kc-chip.cod { background: rgba(244,180,0,.16); color: #fcd34d; }
.kc-chip.paid { background: rgba(16,185,129,.15); color: #6ee7b7; }
.kc-chip.slot { background: rgba(212,160,60,.18); color: #fcd34d; }
.kc-name { color: #94a3b8; font-size: 12.5px; }
.kc-lines { margin-top: 10px; border-top: 1px solid #1e293b; padding-top: 8px; }
.kc-line { display: flex; gap: 9px; padding: 4px 0; font-size: 14px; line-height: 1.35; }
.kc-line b { color: #7dd3fc; font-variant-numeric: tabular-nums; flex: none; }
.kc-go { width: 100%; margin-top: 11px; border: 0; border-radius: 12px; background: #2E7DD2;
  color: #fff; font: inherit; font-size: 15px; font-weight: 700; padding: 13px; cursor: pointer; }
.kc-go:disabled { opacity: .5; }
.kc-done { margin-top: 11px; text-align: center; color: #64748b; font-size: 12.5px; }

/* ---- driver app ---- */
.secttl { font-size: var(--fs-lg); margin: 6px 2px 10px; }
.stopcard { margin-bottom: 12px; }
.sc-top { display: flex; align-items: center; justify-content: space-between; }
.sc-name { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.sc-addr { display: block; margin-top: 10px; font-size: var(--fs-md); font-weight: 500;
  color: var(--text); text-decoration: none; line-height: 1.4; }
.codchip { margin-top: 10px; padding: 9px 13px; border-radius: 11px; background: var(--amber-bg);
  color: var(--warn); font-size: var(--fs-xs); font-weight: 700; }
.paidchip { margin-top: 10px; padding: 9px 13px; border-radius: 11px; background: var(--good-bg);
  color: var(--good); font-size: var(--fs-xs); font-weight: 600; }

/* ---- branded login hero (servd.ai-style touch on every sign-in card) ---- */
.loginhero { text-align: center; padding: 10px 0 16px; }
.loginhero img { height: 38px; display: block; margin: 0 auto; }
.loginhero p { margin-top: 9px; font-size: 13px; color: var(--muted); }

/* ---- platform brand lockup (staff/owner/till headers) ---- */
.platbrand { display: flex; align-items: center; gap: 9px; font-family: var(--font);
  font-weight: 700; letter-spacing: .02em; }
.platbrand img { width: 30px; height: 30px; display: block; }
.platbrand span { color: var(--muted); font-weight: 500; }

/* ---- hero banner slideshow — the ambas.store top pics, swipe + auto-advance ---- */
.heroslides { margin: 12px 16px 0; position: relative; }
.heroslip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: var(--radius); box-shadow: var(--sh-md); cursor: grab;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.heroslip::-webkit-scrollbar { display: none; }
.heroslip:active { cursor: grabbing; }
/* Design-native slides: clean generated 16:9 imagery full-bleed, gradient scrim,
   LIVE overlaid type + a tappable department CTA. Ken Burns drift on the image. */
.heroslide { flex: 0 0 100%; scroll-snap-align: center; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-3); }
.heroslide .hs-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; user-select: none; -webkit-user-drag: none; }
.heroslide.active .hs-img { animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02) translateX(-1%); } to { transform: scale(1.1) translateX(1%); } }
.heroslide .hs-scrim { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,10,18,.72) 0%, rgba(10,10,18,.38) 46%, transparent 72%); }
.heroslide .hs-copy { position: absolute; left: 18px; right: 30%; top: 50%;
  transform: translateY(-50%); color: #fff; }
.hs-eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; opacity: .85; }
.hs-title { font-family: var(--font-display); font-size: clamp(20px, 5.6vw, 30px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin-top: 5px;
  text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.hs-sub { font-size: 12.5px; opacity: .88; margin-top: 6px; line-height: 1.4; }
.hs-cta { margin-top: 12px; border: 0; border-radius: 999px; background: #fff;
  color: #101121; font: inherit; font-size: 13px; font-weight: 700; padding: 12px 20px;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
@media (prefers-reduced-motion: reduce) { .heroslide .hs-img { animation: none; } }
.herodots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex;
  justify-content: center; gap: 6px; pointer-events: none; }
.herodots button { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.55); cursor: pointer; transition: all .25s;
  pointer-events: auto; box-shadow: 0 1px 4px rgba(16,17,33,.25); }
.herodots button.on { width: 20px; border-radius: 4px; background: #fff; }

/* ---- department slider — swipeable strip with gentle auto-drift ---- */
.slideband { margin: 12px 0 0; overflow-x: auto; position: relative; cursor: grab;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.slideband::-webkit-scrollbar { display: none; }
.slideband:active { cursor: grabbing; }
.slidetrack { display: flex; gap: 10px; width: max-content; padding: 4px 16px; }
.slidecard { flex: none; width: 108px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); padding: 10px 8px 9px; display: flex; flex-direction: column;
  align-items: center; gap: 7px; cursor: pointer; box-shadow: var(--sh-sm); font: inherit;
  transition: transform .15s, border-color .15s; }
.slidecard:active { transform: scale(.96); }
.slidecard:hover { border-color: color-mix(in srgb, var(--saffron) 45%, var(--line)); }
.slideimg { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; display: grid;
  place-items: center; background: radial-gradient(120% 120% at 30% 20%, var(--card-from), var(--card-to)); }
.slideimg img { width: 100%; height: 100%; object-fit: cover; }
.slidelb { font-size: 12px; font-weight: 600; color: var(--text); }

/* ---- storefront footer: real socials + contact + TILLD mark ---- */
.shopfoot { margin: 26px 16px 0; padding: 26px 16px calc(30px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); text-align: center; }
.sf-brand img { height: 44px; margin: 0 auto; display: block; }
.sf-strap { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.sf-socials { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.sf-so { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  box-shadow: var(--sh-md); transition: transform .12s; }
.sf-so:active { transform: scale(.92); }
.sf-so svg { width: 22px; height: 22px; }
.sf-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 16px;
  font-size: 12.5px; color: var(--muted); }
.sf-meta a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.sf-pw { margin-top: 18px; font-size: 10.5px; letter-spacing: .16em; color: var(--muted-2); }
.sf-pw b { color: var(--text); letter-spacing: .08em; }

/* ---- premium touches ---- */
.store::before { content: ''; position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 560px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--saffron) 9%, transparent), transparent); }
.brandband h2 { font-size: var(--fs-xl); color: #fff; position: relative; z-index: 1; }
.brandband p { font-size: var(--fs-xs); opacity: .92; margin-top: 4px; position: relative; z-index: 1; }
.icb { width: 21px; height: 21px; display: block; margin: 0 auto; }
.icb path { stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the TILL ---- */
.till { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .till { grid-template-columns: 1.2fr .8fr; align-items: start; } }
.scanline { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--good); margin-bottom: 10px; }
.dot-scan { width: 9px; height: 9px; border-radius: 999px; background: var(--good); animation: breathe 1.6s infinite; }
.till-lines { max-height: 44vh; overflow-y: auto; }
.till-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--text);
  margin-top: 10px; padding-top: 10px; }
.till-total b { font-size: 30px; }
.till-change { font-size: 17px; margin-top: 10px; min-height: 24px; }
.till-change b { font-size: 24px; color: var(--good); }

/* ---- receipt (80mm print) ---- */
.receipt { display: none; }
@media print {
  body * { visibility: hidden; }
  .receipt, .receipt * { visibility: visible; }
  .receipt { display: block; position: absolute; left: 0; top: 0; width: 72mm;
    font: 11px/1.45 "Courier New", monospace; color: #000; }
  .r-head { text-align: center; font-weight: 700; font-size: 13px; }
  .r-head span { font-weight: 400; font-size: 10px; }
  .r-item { display: flex; justify-content: space-between; }
  .r-total { font-weight: 700; font-size: 13px; }
  .r-line { overflow: hidden; white-space: nowrap; }
  .r-foot { text-align: center; margin-top: 6px; font-size: 10px; }
}
@page { size: 80mm auto; margin: 2mm; }

/* ---- Clerk widget: fit our phone column + match the design system ---- */
#clerkmount .cl-rootBox, #clerkmount .cl-card, #clerkmount .cl-cardBox {
  width: 100% !important; max-width: 100% !important; box-shadow: none !important; }
#clerkmount .cl-card { border: 0 !important; padding: 4px 0 0 !important; background: transparent !important; }
#clerkmount .cl-headerTitle { font-family: var(--font-display) !important; }
#clerkmount .cl-formButtonPrimary { border-radius: 14px !important; min-height: 46px !important; }
#clerkmount .cl-socialButtonsBlockButton { border-radius: 12px !important; }
#clerkmount .cl-footer, #clerkmount .cl-logoBox { margin-top: 4px !important; }

/* ---- SERVD item sheet (tap a product → bottom sheet, spec §1.8) ---- */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 63; max-width: var(--maxw);
  margin: 0 auto; max-height: 88vh; max-height: 88dvh;
  background: var(--ink); border-radius: 28px 28px 0 0; transform: translateY(102%);
  transition: transform .5s cubic-bezier(.22,1,.32,1); display: flex; flex-direction: column; overflow: hidden; }
.sheet.open { transform: translateY(0); }
.sheet-hero { height: 240px; flex: none; position: relative; background: #fff;
  border-bottom: 1px solid var(--line); }
.sheet-hero img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.sheet-hero .glyph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 52px; opacity: .55; }
.sheet-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 18px; cursor: pointer; box-shadow: var(--sh-sm); }
.sheet-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.sheet-body h3 { font-size: var(--fs-xl); margin-bottom: 6px; }
.sheet-body .ds { color: var(--muted); font-size: var(--fs-sm); }
.sheet-body .pr1 { font-family: var(--font-display); font-feature-settings: 'tnum' 1,'lnum' 1;
  font-size: var(--fs-lg); font-weight: 600; margin-top: 8px; }
.stepper { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--line);
  border-radius: 14px; background: var(--surface); margin-top: 14px; }
.stepper .qbtn { width: 44px; height: 44px; border: 0; background: none; font-size: 20px; font-weight: 700;
  cursor: pointer; color: var(--text); }
.stepper span { min-width: 38px; text-align: center; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.sheet-foot { flex: none; padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--ink); }
.addcta { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0;
  background: var(--saffron); color: var(--on-accent); border-radius: 16px; padding: 15px 18px;
  font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .12s; }
.addcta:active { transform: scale(.98); }
.addcta .qbubble { font-family: var(--font-display); font-feature-settings: 'tnum' 1,'lnum' 1; }
.oos-sheet { background: var(--amber-bg); color: var(--warn); border-radius: 12px; padding: 10px 13px;
  font-size: var(--fs-xs); font-weight: 600; margin-top: 12px; }

/* add feedback: badge pop (SERVD .hbadge count pop) + bigger hit target */
@keyframes hpop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
.hbadge.pop { animation: hpop .38s cubic-bezier(.22,1,.32,1); }
.add-mini::before { content: ''; position: absolute; inset: -6px; }

/* ---- live suggestions panel (search-first) ---- */
.searchwrap { position: relative; }
.suggest { position: absolute; left: 16px; right: 16px; top: calc(100% + 6px); z-index: 45;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--sh-lg); overflow: hidden; }
.srow-s { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid var(--ink-3); }
.srow-s:active { background: var(--ink-3); }
.srow-s img, .srow-s .sph { width: 34px; height: 34px; border-radius: 9px; object-fit: cover;
  background: var(--ink-3); flex: none; display: grid; place-items: center; color: var(--muted-2); }
.srow-s .snm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.srow-s .susual { font-style: normal; font-size: 10px; font-weight: 700; color: var(--fresh);
  background: color-mix(in srgb, var(--fresh) 14%, transparent); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.srow-s .spr { font-size: 13px; color: var(--muted); flex: none; }
.srow-s .sadd { flex: none; border: 0; width: 30px; height: 30px; border-radius: 10px;
  background: var(--saffron); color: var(--on-accent); cursor: pointer; display: grid; place-items: center; }
.srow-s .soos { font-size: 11px; color: var(--muted-2); font-weight: 600; }
.sall { width: 100%; border: 0; background: var(--ink-3); padding: 11px; font-size: 13px;
  font-weight: 600; color: var(--text); cursor: pointer; }

/* ---- SERVD add-to-basket juice: fly-dot + cartbar bump ---- */
.flydot { position: fixed; z-index: 80; width: 14px; height: 14px; border-radius: 999px;
  background: var(--saffron); box-shadow: var(--sh-md); pointer-events: none;
  transition: transform .55s cubic-bezier(.3,.9,.4,1), opacity .55s; }
@keyframes cbump { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
.cartbar button.bump { animation: cbump .32s cubic-bezier(.22,1,.32,1); }

/* wide logo lockup (tenants with a real wordmark logo) */
.brandwide { height: 64px; width: auto; max-width: 210px; flex: none; display: flex; align-items: center; }
.brandwide img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/* ---------- loyalty (promos phase 4) ---------- */
.lchip { position: absolute; top: -7px; right: -10px; background: var(--accent2, #7DC821); color: #fff;
  font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px; letter-spacing: .02em; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.ltoggle { display: flex; align-items: center; gap: 9px; width: 100%; border: 1.5px solid var(--line);
  background: var(--card, #fff); border-radius: 14px; padding: 13px 14px; font-size: 14px; font-weight: 700;
  color: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.ltoggle .lt-star { color: #B9760A; font-size: 16px; }
.ltoggle .lt-knob { margin-left: auto; width: 40px; height: 24px; border-radius: 999px; background: #D8D8DE; position: relative; transition: background .18s; flex: 0 0 auto; }
.ltoggle .lt-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ltoggle.on { border-color: #17924E; background: #F0FAF4; }
.ltoggle.on .lt-knob { background: #17924E; }
.ltoggle.on .lt-knob::after { left: 19px; }
.lnote { font-size: 13px; color: var(--muted, #63636B); }
.lnote .lsignin { border: 0; background: none; color: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }
.lbal { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px 6px; font-size: 15px; }
.lbal b { font-size: 34px; letter-spacing: -.02em; }
.lbal-star { color: #B9760A; font-size: 22px; }
.lrate, .lphone { padding: 4px 20px; font-size: 14px; line-height: 1.5; color: var(--muted, #63636B); }
.llink { padding: 10px 20px 0; font-size: 14px; }
.llink p { margin-bottom: 8px; }
.lsignout { margin: 18px 20px 22px; border: 1.5px solid var(--line); background: none; border-radius: 12px;
  padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--muted, #63636B); cursor: pointer; }

/* ---------- desktop (≥1120px): full-width shop + pinned Asda-style basket ----------
 * Mobile is untouched — these rules only ADD above the breakpoint. The bottom
 * drawer becomes a permanent right-hand sidebar; the cartbar disappears. */
@media (min-width: 1120px) {
  .store { max-width: none; margin: 0 400px 0 0; padding-bottom: 48px; }
  .topbar { padding-left: 32px; padding-right: 32px; }
  .heroslides { margin: 18px 32px 0; }
  .heroslide { height: 340px; }
  .slideband, .dealsrail, .usuals { padding-left: 16px; padding-right: 16px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 0 32px 8px; }
  .sectionh, .usuals-h { padding-left: 16px; padding-right: 16px; }
  .cartbar { display: none !important; }

  /* the drawer IS the page's right column now — always present, never closes.
     SCOPED to .store: the till/KDS/driver reuse .drawer as a bottom sheet and
     must NOT get this sidebar treatment (it blocked the till on wide EPOS). */
  .store ~ .drawer, .store .drawer, body:has(.store) .drawer { left: auto; right: 0; top: 0; bottom: 0; width: 400px; max-width: 400px;
    height: 100%; max-height: none; border-radius: 0; border: none; border-left: 1px solid var(--line);
    transform: none; transition: none; z-index: 45; box-shadow: none; }
  body:has(.store) .drawer .drawer-top .x { display: none; }
  .askus { left: 24px; bottom: 24px; }
}
@media (min-width: 1500px) {
  .store { margin-right: 430px; }
  body:has(.store) .drawer { width: 430px; max-width: 430px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

/* national delivery: unpostable-line chip */
.localonly { display: inline-block; vertical-align: 1px; margin-left: 6px; background: #FBEAEA; color: #B42318;
  border: 1px solid #F0C4C0; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; }

/* out-of-area address: informative, never a red shout */
.codinfo { background: #FFF8EC; border: 1px solid #F2E2C4; color: #7A5A18; border-radius: 12px;
  padding: 11px 14px; font-size: 13px; line-height: 1.5; }
.codinfo .linkbtn { display: inline; border: 0; background: none; padding: 0; color: #B4530A;
  font-weight: 800; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* ---------- the butchers: cut-to-order ---------- */
.butcherband { position: relative; margin: 22px 16px 6px; border-radius: 22px; overflow: hidden;
  background: var(--ink-3, #14141A); min-height: 210px; display: flex; align-items: flex-end; }
.bb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-scrim { position: absolute; inset: 0; background: linear-gradient(12deg, rgba(10,10,14,.86) 30%, rgba(10,10,14,.25) 75%); }
.bb-copy { position: relative; padding: 22px 20px; color: #fff; }
.bb-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: #7DC821; }
.bb-copy h2 { font-family: var(--font-display); font-size: 26px; letter-spacing: -.02em; margin: 6px 0 4px; }
.bb-copy p { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.85); max-width: 420px; }
.bb-ctas { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.bb-cta { border: 0; background: #fff; color: #14141A; font-weight: 800; font-size: 14px;
  padding: 11px 18px; border-radius: 999px; cursor: pointer; }
.bb-tt { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid rgba(255,255,255,.4);
  color: #fff; font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.bb-tt svg { width: 15px; height: 15px; }
@media (min-width: 1120px) { .butcherband { margin: 26px 32px 8px; min-height: 250px; } }

/* butcher's prep chips (item sheet) */
.prepwrap { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.preph { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.prepg { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.pchip { border: 1.5px solid var(--line); background: var(--surface); color: inherit; font-size: 13px;
  font-weight: 600; padding: 8px 13px; border-radius: 999px; cursor: pointer; transition: border-color .12s, background .12s; }
.pchip.on { border-color: var(--saffron); background: var(--saffron); color: var(--on-accent); font-weight: 700; }
.prepnotef { margin-top: 6px; }
.lprep { font-size: 12px; color: #B4530A; font-weight: 600; margin-top: 2px; }
.kc-prep { display: block; font-style: normal; font-size: 12px; color: #E8A33D; margin-top: 1px; }

/* allergen line on the item sheet — information, never decoration */
.allg { margin-top: 10px; background: #FFF8EC; border: 1px solid #F2E2C4; border-radius: 11px;
  padding: 10px 13px; font-size: 12.5px; line-height: 1.5; color: #7A5A18; }
.allg b { font-weight: 800; }
.allg span { color: #9A7A38; }
.allg.muted2 { background: var(--surface-2, #F4F4F6); border-color: var(--line); color: var(--muted); }

/* desktop: toggle + status pill share the row again (space exists) */
@media (min-width: 1120px) {
  .fulfil { flex-direction: row; align-items: center; justify-content: space-between; }
  .fulfil .toggle button { flex: none; }
}

/* offer urgency line on the sheet */
.offerends { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #B4530A; }

/* courier tracking chip on the national tracker */
.strk-trackref { margin-top: 12px; }
.strk-trackref a, .strk-trackref { font-size: 13px; font-weight: 700; color: var(--saffron); }
.strk-trackref a { text-decoration: underline; text-underline-offset: 3px; }

/* recent-search chips */
.rchips { display: flex; gap: 7px; flex-wrap: wrap; padding: 8px 2px 0; }
.rchip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 12.5px;
  font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.rchip:active { background: var(--ink-3); }

/* points star-burst toast */
.startoast { background: #14141A; color: #fff; font-weight: 700; overflow: visible; }
.startoast .stars { position: absolute; inset: 0; pointer-events: none; }
.startoast .stars i { position: absolute; left: 50%; top: 50%; font-style: normal; color: #E8A33D;
  animation: starfly .9s ease-out forwards; }
.startoast .stars i:nth-child(1) { --sx: -60px; --sy: -34px; animation-delay: 0s; }
.startoast .stars i:nth-child(2) { --sx: 52px; --sy: -40px; animation-delay: .05s; }
.startoast .stars i:nth-child(3) { --sx: -30px; --sy: -52px; animation-delay: .1s; }
.startoast .stars i:nth-child(4) { --sx: 38px; --sy: -24px; animation-delay: .15s; }
.startoast .stars i:nth-child(5) { --sx: 0px; --sy: -58px; animation-delay: .2s; }
@keyframes starfly { from { transform: translate(0, 0) scale(.6); opacity: 1; } to { transform: translate(var(--sx), var(--sy)) scale(1.2); opacity: 0; } }
.lchip.pop { animation: chippop .8s cubic-bezier(.22,1.4,.4,1); }
@keyframes chippop { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }

/* skeleton shimmer grid cards */
.skel { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.skel .skimg { aspect-ratio: 1/1; }
.skel .skln { height: 12px; border-radius: 6px; margin: 10px 14px 0; }
.skel .skln.short { width: 55%; margin-bottom: 14px; }
.skel .skimg, .skel .skln { background: linear-gradient(100deg, var(--ink-3) 40%, var(--surface-2, #ECECEF) 50%, var(--ink-3) 60%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel .skimg, .skel .skln, .startoast .stars i, .lchip.pop { animation: none; } }

/* tracker: delivery-updates opt-in */
.strk-notify { width: 100%; border: 1.5px solid var(--line); background: var(--surface); color: inherit;
  font-weight: 700; font-size: 14px; padding: 12px 16px; border-radius: 13px; cursor: pointer; margin-bottom: 10px; }
.strk-notify:disabled { opacity: .75; }

/* ---------- account sheet: orders, receipt, issue chat ---------- */
.acct-h { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 20px 6px; }
.acct-orders { padding: 0 14px; display: flex; flex-direction: column; gap: 8px; }
.acct-order { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 1px solid var(--line);
  background: var(--surface); border-radius: 13px; padding: 11px 14px; cursor: pointer; font-size: 13.5px; color: inherit; }
.acct-order .ao-l, .acct-order .ao-r { display: flex; flex-direction: column; gap: 2px; }
.acct-order .ao-l { align-items: flex-start; } .acct-order .ao-r { align-items: flex-end; }
.acct-order i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.acct-order i.st-dispatched, .acct-order i.st-paid, .acct-order i.st-picking { color: #B4530A; font-weight: 700; }
.acct-order i.st-collected { color: #17924E; font-weight: 700; }
.acct-help { margin: 14px 20px 20px; width: calc(100% - 40px); border: 1.5px solid var(--line); background: var(--surface);
  font-weight: 700; font-size: 14px; padding: 13px 16px; border-radius: 13px; cursor: pointer; color: inherit; }
.rcpt-lines { padding: 6px 20px 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.rcpt-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.rcpt-line .lprep { display: block; }
.sheet-body .srow { padding: 4px 20px; }
.sheet-body .srow.tot { padding-top: 8px; }
.btnrow { display: block; margin: 12px 20px 0; width: calc(100% - 40px); border: 0; background: var(--saffron); color: var(--on-accent);
  font-weight: 800; font-size: 14.5px; padding: 13px 16px; border-radius: 13px; cursor: pointer; }
.btnrow.secondary { background: var(--surface); border: 1.5px solid var(--line); color: inherit; margin-bottom: 20px; }
.chat-state { padding: 8px 20px; font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--ink-3); }
.chat-state.live { color: #17924E; }
.chat-log2 { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; min-height: 200px; }
.smsg { max-width: 82%; padding: 10px 14px; border-radius: 15px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.smsg.customer { align-self: flex-end; background: var(--saffron); color: var(--on-accent); border-bottom-right-radius: 5px; }
.smsg.staff { align-self: flex-start; background: var(--ink-3); border-bottom-left-radius: 5px; }
.chat-compose { display: flex; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.chat-compose .ginput { flex: 1; }
.csend { border: 0; background: var(--saffron); color: var(--on-accent); width: 46px; border-radius: 12px; font-size: 16px; cursor: pointer; }

/* owner: support inbox */
.srow-thread { border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; margin-bottom: 8px; cursor: pointer; }
.srow-thread.awaiting { border-color: #E8A33D; background: #FFF8EC; }
.st-top { font-size: 13.5px; } .st-await { color: #B4530A; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.st-last { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.st-msgs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 240px; overflow-y: auto; }

/* sign-in polish: star busy + passkey offer */
.iconbtn.busy svg { animation: starspin 1s linear infinite; opacity: .6; }
@keyframes starspin { to { transform: rotate(360deg); } }
.pk-offer { display: flex; align-items: center; gap: 10px; }
.pk-offer button { border: 0; border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.pk-offer #pkyes { background: var(--saffron); color: var(--on-accent); }
.pk-offer #pkno { background: rgba(255,255,255,.16); color: #fff; }


/* ops apps clear the fixed selector */
.ownerscroll, main.wrap { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
/* web: centre the ops shell like a phone frame on big screens */
@media (min-width: 700px) { main.wrap:not(.till) { max-width: 640px; margin-left: auto; margin-right: auto; } }


/* profile menu (ops apps) */
.app { position: relative; }
.profbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--text, #1a1a1f); display: grid; place-items: center; cursor: pointer; }
.profbtn svg { width: 21px; height: 21px; }
.profmenu { position: fixed; top: calc(58px + env(safe-area-inset-top)); right: 14px; z-index: 60;
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px -14px rgba(16,17,33,.28);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.profmenu.hidden { display: none; }
.pm-name { font-weight: 700; font-size: 14px; }
/* pass identity: every signed-in menu names the person AND their pass type */
.passchip { display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px;
  border-radius: 999px; vertical-align: 1px; }
.passchip.pass-owner { background: rgba(212,160,60,.2); color: #b7791f; }
.passchip.pass-staff { background: rgba(59,130,246,.16); color: #2563eb; }
.passchip.pass-driver { background: rgba(16,185,129,.16); color: #059669; }
.passchip.pass-operator { background: rgba(100,116,139,.18); color: #475569; }
/* team sheet: initial disc reuses the same liveries */
.orow2 .passchip { width: 30px; height: 30px; padding: 0; border-radius: 999px; font-size: 13px; margin-right: 10px; flex: none; }
.oview[hidden] { display: none; }
.oview { animation: viewfade .18s ease; }
@keyframes viewfade { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }


/* goods-in: scan / upload options */
.gi-hero { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 20px; padding: 26px 20px; text-align: center; }
.gi-title { font-family: var(--font-display, inherit); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.gi-sub { color: var(--muted, #63636b); font-size: 13.5px; line-height: 1.5; margin: 6px auto 18px; max-width: 320px; }
.gi-actions { display: flex; gap: 10px; }
.gi-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border-radius: 15px;
  border: 1.5px solid var(--line); background: var(--surface, #fff); color: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: border-color .15s, transform .1s; }
.gi-btn svg { width: 30px; height: 30px; }
.gi-btn:active { transform: scale(.97); }
.gi-btn.primary { background: var(--accent, #E2000A); color: #fff; border-color: var(--accent, #E2000A); }


/* analytics breakdown toggle */
.brk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brk-t { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.seg { display: inline-flex; background: var(--ink-3, #f0f0f3); border-radius: 999px; padding: 3px; }
.segbtn { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.segbtn.active { background: var(--surface, #fff); color: var(--accent, #E2000A); box-shadow: 0 1px 3px rgba(16,17,33,.12); }

.gi-drop { margin-top: 14px; font-size: 12px; color: var(--muted); }
.gi-hero.dragging { border-color: var(--accent, #E2000A); background: #FEF6F6; box-shadow: 0 0 0 3px rgba(226,0,10,.12); }
.gi-hero { transition: border-color .15s, background .15s, box-shadow .15s; }

/* driver paid/cash badge — unmissable */
.paybadge { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 11px; margin-top: 8px; }
.paybadge b { font-weight: 800; }
.paybadge.cash { background: #FFF4E5; color: #9A5B00; border: 1px solid #F3D9A8; }
.paybadge.paid { background: #F0FAF4; color: #17924E; border: 1px solid #CDEBD9; }

/* owner order-detail (god-mode) sheet */
.orow { cursor: pointer; } .orow .chev { width: 18px; height: 18px; color: var(--muted-2, #b0b0b8); flex: none; }
.oscrim { position: fixed; inset: 0; background: rgba(10,10,14,.4); z-index: 62; opacity: 0; pointer-events: none; transition: opacity .2s; }
.oscrim.show { opacity: 1; pointer-events: auto; }
.osheet { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 102%); width: 100%; max-width: 560px; z-index: 63;
  background: var(--surface, #fff); border-radius: 22px 22px 0 0; box-shadow: var(--sh-lg, 0 -10px 50px -12px rgba(16,17,33,.3));
  max-height: 88vh; display: flex; flex-direction: column; transition: transform .32s cubic-bezier(.22,1,.32,1); }
.osheet.open { transform: translate(-50%, 0); }
.osheet-top { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.osheet-top b { font-size: 17px; } .osheet-top .x { margin-left: auto; background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; }
.osheet-body { overflow-y: auto; padding: 4px 18px; flex: 1; }
.osheet-meta { padding: 12px 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; border-bottom: 1px solid var(--line); }
.orow2 { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.orow2 .name { font-size: 14px; } .orow2 .lprep { display: block; color: #B4530A; font-size: 12px; }
.osheet-foot { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); }

/* KDS station picker + waiting chip */
.stationpick { display: flex; gap: 12px; }
.stbtn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 14px; border-radius: 18px;
  border: 1.5px solid var(--line); background: var(--surface, #fff); color: inherit; cursor: pointer; transition: border-color .15s, transform .1s; }
.stbtn:active { transform: scale(.97); }
.stbtn .stico { display: grid; place-items: center; height: 44px; }
.stbtn .stico svg { width: 40px; height: 40px; }
.stbtn b { font-size: 17px; } .stbtn i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.kc-chip.wait { background: rgba(232,163,61,.18); color: #E8A33D; }

/* staff picking cards */
.pkcard { border: 1px solid var(--line); border-radius: 15px; padding: 14px; margin-bottom: 10px; }
.pk-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.pk-lines { margin: 10px 0; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.pk-line .lprep { display: block; color: #B4530A; font-size: 12px; }
.pkcard .btn { width: 100%; }

/* team-push enable banner — pinned at the top, dismisses on grant */
.pushbanner { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: #1c1c1e; color: #fff; border-radius: 14px; padding: 10px 14px; margin: 4px 0 12px;
  font-size: 13.5px; font-weight: 600; }
.pushbanner .btn { flex: 0 0 auto; }

/* tracker: receipt-grade order screen */
.strk-ref { font-size: 13px; color: var(--muted-2, #888); margin: 2px 0 6px; }
.strk-ref b { font-size: 16px; color: inherit; }
.strk-paid.cashdue { background: #fff4e5; color: #B4530A; }
.strk-rcpt { width: 100%; max-width: 420px; margin: 12px auto 0; text-align: left;
  background: rgba(127,127,127,.07); border-radius: 14px; padding: 10px 14px; }
.strk-rcpt summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; }
.strk-rcpt summary::-webkit-details-marker { display: none; }
.strk-rcpt summary::after { content: '▾'; float: right; opacity: .55; }
.strk-rcpt[open] summary::after { content: '▴'; }
.rc-lines { margin-top: 10px; }
.rc-line { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.rc-line img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.rc-line .nm { flex: 1; }
.rc-tot { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--muted-2, #777); }
.rc-tot.save { color: #1f7a4d; }
.rc-tot.grand { font-weight: 800; font-size: 15px; color: inherit; border-top: 1px solid rgba(127,127,127,.25); margin-top: 6px; padding-top: 8px; }
.strk-call { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 14px; text-decoration: none;
  color: inherit; border: 1.5px solid rgba(127,127,127,.35); border-radius: 999px; padding: 8px 18px; }

/* the kind review ask — one nudge, never needy */
.strk-review { max-width: 420px; margin: 14px auto 0; text-align: center;
  background: rgba(127,127,127,.07); border-radius: 16px; padding: 14px 18px; }
.rv-stars { color: #f5a623; font-size: 18px; letter-spacing: 3px; }
.rv-copy { font-size: 13.5px; margin: 8px 0 12px; color: inherit; opacity: .85; }
.rv-actions { display: flex; gap: 12px; justify-content: center; align-items: center; }
.rv-later { border: 0; background: none; color: var(--muted-2, #888); font-size: 13px; cursor: pointer; text-decoration: underline; }