/* ==========================================================================
   Order It Hub design system — Apple-clean
   Extracted from docs/design-prototype.html. Tokens are CSS custom properties;
   --accent is overridable per page (storefront sets the tenant brand accent).
   ========================================================================== */

:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-2: #fbfbfd;
  --border: #d2d2d7;
  --border-2: #e8e8ed;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --accent: #0071e3;          /* admin fixed; override per page for storefront */
  --accent-ink: #ffffff;
  --ok: #34c759;
  --warn: #ff9f0a;
  --info: #0071e3;
  --bad: #ff3b30;
  --radius: 12px;
  --radius-sm: 8px;
  --rail: 64px;
  --rail-open: 232px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: 15px;
}
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- Utilities ---------- */
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.mono { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.grow { flex: 1; }
.mt { margin-top: 24px; }
.up { color: var(--ok); }
.down { color: var(--bad); }
.hide { display: none !important; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: 9px;
  font: inherit; font-size: 14px; font-weight: 560;
  cursor: pointer; border: 1px solid transparent;
  text-decoration: none; line-height: 1;
}
.btn.pri { background: var(--accent); color: var(--accent-ink); }
.btn.pri:hover { filter: brightness(.95); }
.btn.sec { background: var(--bg); border-color: var(--border); color: var(--ink); }
.btn.sec:hover { background: var(--surface); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--surface); }
.btn.small { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.block { width: 100%; justify-content: center; }
.btn.lg { height: 46px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Plain link-button (no chrome) — used for inline form actions like logout. */
.linkbtn {
  border: 0; background: transparent; color: var(--accent);
  font: inherit; font-weight: 540; cursor: pointer; padding: 0;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--bg); border: 1px solid var(--border-2);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.card .hd {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-2);
}
.card .hd h2 { font-size: 16px; font-weight: 620; }
.card .bd { padding: 20px; }
/* Safety net: a <form> placed directly inside a card (no .bd wrapper) still
   gets body padding within the admin/super shell. Forms wrapped in .bd are not
   direct children (unaffected); a form's own inline padding overrides this. */
.content .card > form { padding: 20px; }

/* ==========================================================================
   Stat cards
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.stat {
  background: var(--bg); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.stat .k { font-size: 13px; color: var(--ink-2); font-weight: 540; }
.stat .v { font-size: 30px; font-weight: 680; letter-spacing: -.02em; margin-top: 6px; }
.stat .d { font-size: 12px; margin-top: 6px; }

/* ==========================================================================
   Tables
   ========================================================================== */
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; padding: 13px 20px;
  border-bottom: 1px solid var(--border-2); font-size: 14px;
}
th {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .03em;
}
tr:last-child td { border-bottom: 0; }
td .mono { font-weight: 560; }

/* ==========================================================================
   Status pills
   ========================================================================== */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px;
  border-radius: 999px; background: var(--surface); color: var(--ink-2);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok      { background: #e9f9ee; color: #1a8f3c; }
.pill.warn    { background: #fff4e5; color: #b76e00; }
.pill.info    { background: #eef5ff; color: #0062c4; }
.pill.bad     { background: #ffecea; color: #c4291c; }
.pill.neutral { background: var(--surface); color: var(--ink-2); }

/* ==========================================================================
   Form fields
   ========================================================================== */
.field { margin-top: 14px; }
.field label { display: block; font-size: 13px; font-weight: 560; margin-bottom: 6px; }
/* Every free-text-ish control shares one shell. `color` is deliberately absent —
   the swatch picker is sized by its own rule. Date/time controls are included
   so the checkout pickup-time field matches the fields above and below it. */
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"],
input[type="datetime-local"], select, textarea {
  width: 100%; height: 40px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 9px;
  font: inherit; background: var(--bg); color: var(--ink);
}
textarea { height: auto; padding: 10px 13px; min-height: 88px; }
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 113, 227, .12);
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.swatch { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.error {
  background: #ffecea; color: #c4291c; border: 1px solid #ffd4cf;
  border-radius: var(--radius-sm); padding: 10px 13px; font-size: 14px; margin: 0 0 14px;
}

/* ==========================================================================
   ADMIN SHELL
   ========================================================================== */
.app { display: flex; min-height: 100vh; background: var(--surface); }

/* Icon rail: 64px collapsed → 232px on hover; labels fade in. */
.rail {
  width: var(--rail); background: var(--bg);
  border-right: 1px solid var(--border-2);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 14px 0; gap: 6px;
  position: sticky; top: 0; height: 100vh;
  transition: width .18s ease; overflow: hidden; z-index: 30;
}
.rail:hover { width: var(--rail-open); box-shadow: var(--shadow); }

.brand { display: flex; align-items: center; gap: 10px; padding: 6px 18px 14px; white-space: nowrap; }
.brand .dot {
  width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: 0 0 auto;
}
.brand .name { font-weight: 650; opacity: 0; transition: opacity .15s; }
.rail:hover .brand .name { opacity: 1; }

.nav { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0 10px; }
.nav .sec {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3);
  text-transform: uppercase; padding: 14px 10px 4px; opacity: 0; white-space: nowrap;
}
.rail:hover .nav .sec { opacity: 1; }
.nav a {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 11px;
  border-radius: 9px; color: var(--ink-2); white-space: nowrap;
}
.nav a .ic { width: 22px; flex: 0 0 auto; display: grid; place-items: center; }
.nav a .ic svg { width: 20px; height: 20px; display: block; }
.nav a .lb { opacity: 0; transition: opacity .15s; }
.rail:hover .nav a .lb { opacity: 1; }
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a.active { background: #eef5ff; color: var(--accent); }
.nav .spacer { flex: 1; }

.me {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 10px 0; padding: 8px 11px; border-radius: 9px; white-space: nowrap;
}
.me:hover { background: var(--surface); }
.me .av {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #0071e3, #34c759);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: 0 0 auto;
}
.me .who { opacity: 0; transition: opacity .15s; min-width: 0; }
.rail:hover .me .who { opacity: 1; }
.me form { margin: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 60px; display: flex; align-items: center; gap: 16px; padding: 0 28px;
  background: rgba(255, 255, 255, .72); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-2); position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 19px; font-weight: 650; }
.loc {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  font-size: 13px; font-weight: 540; cursor: pointer; color: var(--ink);
}
.loc .pin { color: var(--accent); display: inline-flex; }
.loc svg { width: 15px; height: 15px; }

/* Hamburger — hidden on desktop, shown on mobile. */
.burger {
  display: none; width: 36px; height: 36px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--bg); cursor: pointer;
  align-items: center; justify-content: center; color: var(--ink); flex: 0 0 auto;
}
.burger svg { width: 20px; height: 20px; }

.content { padding: 28px; max-width: 1080px; width: 100%; }
.page-actions { display: flex; align-items: center; gap: 8px; }

/* Off-canvas scrim for mobile rail. */
.scrim { display: none; }

/* ==========================================================================
   STOREFRONT — elegant fine-dining baseline
   --------------------------------------------------------------------------
   Mobile-first. The base rules below render a refined single-column "app"
   look. The desktop block (`@media (min-width: 720px)`, further down) re-flows
   the SAME markup into a full-width, photography-forward branded website:
   a dramatic cover/hero, an elegant sticky header, centered ~1140px container,
   a multi-column menu grid, and a serif display face for all headings.
   Narrow flows (cart / checkout / account / auth) wrap their body in
   `.s-narrow` to stay a comfortable centered column on desktop.

   Storefront-scoped tokens (under `.store`) only — they never touch the admin
   or marketing token sets above.
   ========================================================================== */
.store {
  /* Printed-menu palette: chroma-zero paper, ink-black rules, and the tenant's
     accent held back for markers and focus only — so it reads the same whether
     a tenant picked crimson or pale yellow. Scoped to .store so admin/marketing
     keep their Apple-clean look untouched. */
  /* One superfamily, contrast carried on the weight + width axes. Archivo is
     the only candidate in this style that ships a Vietnamese subset — Archivo
     Black and Schibsted Grotesk do not, and would break mid-word on a
     Vietnamese dish name. */
  --serif: "Archivo", system-ui, -apple-system, sans-serif;   /* display */
  --s-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --s-display-w: 900;
  --s-display-x: 112%;
  --s-paper: #f4f4f3;          /* paper, zero chroma */
  --s-card: #fbfbfa;
  --s-ink: #171717;            /* ink — never pure black */
  --s-ink-2: #575757;          /* secondary, 6.4:1 on paper */
  --s-ink-3: #696969;          /* muted, 4.7:1 on paper */
  --s-line: #e0e0de;           /* hairline divider */
  --s-line-2: #c9c9c6;
  --s-rule: #171717;           /* the hard structural rule */
  --s-foot-bg: #171717;
  --s-r: 0;                    /* shape lock: this storefront has no radii */
  --s-gut: 24px;               /* one page gutter for every storefront row */
  --s-ease: cubic-bezier(.25, 1, .5, 1);
  background: var(--s-paper); color: var(--s-ink);
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  font-family: var(--s-body);
  font-size: 16px;
}
.store a { color: inherit; }
.phone {
  width: 480px; max-width: 100%; background: var(--s-card); min-height: 100vh;
  border-left: 1px solid var(--s-line); border-right: 1px solid var(--s-line);
  display: flex; flex-direction: column;
}

/* Brand cover / hero banner (per-tenant: cover_url + name + tagline + logo).
   Falls back gracefully to an elegant typographic hero when no cover is set. */
.s-cover {
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #2a241d 0%, #1c1813 100%);
}
.s-cover.has-img { background: #1c1813; }
.s-cover .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.s-cover .scrim {
  position: absolute; inset: 0; z-index: 1; display: block; opacity: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,14,10,.25) 0%, rgba(18,14,10,.40) 45%, rgba(18,14,10,.78) 100%);
}
.s-cover .inner {
  position: relative; z-index: 2;
  padding: 28px 20px 22px; min-height: 168px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  text-align: left; align-items: flex-start;
  width: 100%; max-width: 1280px; margin: 0 auto;
}
.s-cover .brand { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.s-cover .c-logo {
  width: 48px; height: 48px; border-radius: var(--s-r); flex: 0 0 auto; overflow: hidden;
  background: var(--logo-color, var(--s-ink)); color: var(--logo-ink, var(--s-paper));
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 17px; border: 0;
}
.s-cover .c-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--s-r); }
.s-cover .c-name {
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 30px; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05;
}
.s-cover .c-tag {
  font-family: var(--s-body); font-size: 15px; font-weight: 400;
  color: rgba(255,255,255,.92); max-width: 60ch; margin: 0;
}
.s-cover .c-loc {
  margin-top: 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.s-cover .c-loc b { font-weight: 600; }
.s-cover .c-loc a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); }
.s-cover .c-actions { position: absolute; top: 18px; right: 18px; z-index: 3; }
.s-cover .c-account { position: absolute; top: 18px; left: 18px; z-index: 3; }
.s-cover .cart-btn {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); color: #fff;
}
/* A thin gold hairline under the hero adds a refined "plated" finish. */
.s-cover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 65%, #c9a86a) 50%, transparent);
}

/* Plain sticky header (cart / checkout / account / product detail). */
/* The cart / checkout / product / account header. Same construction as the
   menu's brand bar so the whole storefront reads as one object: paper ground,
   an accent rule under it, no rounding. */
.s-head {
  padding: 14px 20px; border-bottom: 2px solid var(--accent);
  position: sticky; top: 0; background: var(--s-card); z-index: 5;
}
.s-head > * { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; }
.s-brandrow { display: flex; align-items: center; gap: 12px; }
/* Page title in a sub-page header, set like the menu's category rules so a
   cart or checkout screen reads as the same product as the menu. */
.s-brandrow > div[style*="font-weight"], .s-head .s-brandrow > div:not(.grow) {
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 15px; text-transform: uppercase; letter-spacing: .07em;
}
.s-head .linkbtn { color: var(--s-ink); }
.s-head .linkbtn:hover { color: var(--accent); }
/* Sub-page cart button — the same accent-outlined block as the menu brand bar,
   so the header reads identically whichever storefront page you are on.
   Scoped to `.s-head` because the hero/cover keeps its translucent variant. */
.store .s-head .cart-btn {
  height: 40px; padding: 0 13px; border-radius: var(--s-r);
  border: 2px solid var(--accent); background: transparent; color: var(--s-ink);
  font-size: 14px; font-weight: 700;
  transition: background .15s var(--s-ease), color .15s var(--s-ease);
}
.store .s-head .cart-btn:hover { background: var(--accent); color: var(--accent-ink); }
.store .s-head .cart-btn span {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700;
}
.store .s-head .cart-btn:hover span { background: var(--accent-ink); color: var(--accent); }
.s-logo {
  width: 32px; height: 32px; border-radius: 50%; background: var(--s-ink);
  color: #fff; display: grid; place-items: center; font-family: var(--serif);
  font-weight: 600; flex: 0 0 auto; overflow: hidden;
}
.s-logo img { width: 100%; height: 100%; object-fit: cover; }
.cart-btn {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px;
  border-radius: 999px; background: var(--s-ink); color: #fff; font-size: 13px; font-weight: 560;
  letter-spacing: .02em;
}
.s-locrow {
  display: flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink-2);
}
.s-locrow b { color: var(--s-ink); font-weight: 600; }

.tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 14px 24px;
  border-bottom: 1px solid var(--s-line); position: sticky; top: 0;
  background: rgba(255, 252, 247, .94); backdrop-filter: saturate(140%) blur(16px); z-index: 4;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; height: 34px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--s-line-2); background: transparent; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--s-ink-2); display: flex; align-items: center; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tab:hover { color: var(--s-ink); border-color: var(--s-ink-3); }
.tab.on {
  background: var(--s-ink); border-color: var(--s-ink); color: #fff;
}

/* Category section heading — the serif display face, centered & airy with a
   short gold rule beneath. */
.s-sec {
  padding: 32px 20px 12px; font-family: var(--serif);
  font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 15px; color: var(--s-ink); letter-spacing: .08em; text-transform: uppercase;
  text-align: left; border-bottom: 2px solid var(--accent); margin-bottom: 4px;
}
.s-sec::after { content: none; }
/* `.s-flow` is every storefront page after the menu — the narrow auth column
   and the wide ledger/split/column shapes alike. The chrome below (compact
   group labels, card + input treatment, wrapped descriptions) belongs to all
   of them; only the page WIDTH differs, and that is set per shape. */
/* The product/option sub-section headings stay compact + uppercase so they read
   as form group labels, not menu courses. */
.s-flow .s-sec {
  font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-align: left; padding: 22px var(--s-gut) 6px; color: var(--s-ink-3);
}
.s-flow .s-sec::after { display: none; }
/* The narrow flows lay every row on the same gutter as `.item` / `.s-foot`, so
   a form field, an option row and a price line all start on one vertical edge.
   `.s-head` carries 20px of its own, hence the remainder here. */
.s-narrow .s-brandrow,
.s-narrow .s-locrow { padding-left: calc(var(--s-gut) - 20px); padding-right: calc(var(--s-gut) - 20px); }
.store .s-gut { padding-left: var(--s-gut); padding-right: var(--s-gut); }
/* "Required" / "Choose up to n" badge on an option group heading. */
.store .s-req {
  display: inline-block; margin-left: 8px; padding: 2px 7px; vertical-align: 2px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
}
.store .s-req.is-opt { background: transparent; color: var(--s-ink-3); border: 1px solid var(--s-line-2); }
/* Option rows sit tighter than menu plates — they are form controls, not dishes. */
.store .s-opt { padding-top: 13px; padding-bottom: 13px; }
/* One-line truncation is right for a dish description on the menu, and wrong in
   the cart: a combo plate carries six choices and the customer has to be able to
   read back what they ordered. */
.store .s-flow .item .ds { white-space: normal; max-width: none; }
/* Native controls default to the browser's own blue, which is the one colour on
   the page the tenant did not choose. */
.store input[type="radio"], .store input[type="checkbox"] { accent-color: var(--accent); }
.store .s-opt .nm { font-family: var(--s-body); font-size: 15px; font-weight: 500; }
.store .s-opt .ds { font-variant-numeric: tabular-nums; color: var(--s-ink-2); }

.item {
  display: flex; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--s-line);
  align-items: center;
}
.item .thumb {
  width: 76px; height: 76px; border-radius: 12px; background: var(--s-paper); flex: 0 0 auto;
  display: grid; place-items: center; color: var(--s-ink-3); font-size: 26px; overflow: hidden;
  border: 1px solid var(--s-line);
}
.item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.item .thumb-mono { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--s-ink-3); }
.s-menu.layout-grid .item .thumb-mono { font-size: 44px; }
.item .grow { flex: 1; min-width: 0; }
.item .nm { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: .005em; line-height: 1.2; }
.item .ds {
  font-size: 13px; color: var(--s-ink-2); margin-top: 4px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
.item .pr { font-weight: 600; margin-top: 8px; color: var(--s-ink); letter-spacing: .01em; }
.add {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--s-line-2);
  background: var(--s-card); color: var(--s-ink); font-size: 20px; font-weight: 400;
  cursor: pointer; flex: 0 0 auto;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.add:hover { background: var(--s-ink); color: #fff; border-color: var(--s-ink); }
.soldout { opacity: .5; }
.s-foot { padding: 22px 24px 32px; margin-top: auto; }

/* Confirmation stamp — the accent square that replaced the emoji status icons
   on the order confirmation and payment result screens. */
.s-stamp {
  width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
.s-stamp svg { width: 28px; height: 28px; }
.s-stamp--sm { width: 40px; height: 40px; margin: 0; }
.s-stamp--sm svg { width: 20px; height: 20px; }
.checkout-steps {
  display: flex; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--s-ink-3); padding: 12px 24px; border-bottom: 1px solid var(--s-line);
}
.checkout-steps .on { color: var(--accent); font-weight: 700; }
/* Every use of the step rail now sits inside a gutter-carrying parent, so its
   own gutter would push it 24px past the content it labels. */
.s-gut > .checkout-steps, .s-foot > .checkout-steps { padding-left: 0; padding-right: 0; }

/* Site footer (desktop + mobile) — a deep espresso band closing every page. */
.s-sitefoot { width: 100%; background: var(--s-foot-bg); color: rgba(255,255,255,.7); }
.s-sitefoot-inner {
  max-width: 1140px; margin: 0 auto; padding: 44px 24px;
  text-align: center;
}
.s-sitefoot-brand {
  font-family: var(--serif); font-size: 26px; font-weight: 600; color: #fff; letter-spacing: .01em;
}
.s-sitefoot-tag { font-family: var(--serif); font-style: italic; font-size: 16px; margin: 8px 0 0; color: rgba(255,255,255,.78); }
.s-sitefoot-meta { font-size: 12px; letter-spacing: .04em; margin: 18px 0 0; color: rgba(255,255,255,.5); }

/* Narrow-flow wrapper: a no-op on mobile (full width), a centered column on
   desktop. Used by the auth forms, address edit and the payment interstitials. */
.s-narrow { width: 100%; }

/* Refined chrome shared by every post-menu page. Storefront-scoped — never
   touches admin/marketing cards/inputs. */
.store .s-flow .card,
.store .s-flow .stat {
  border-color: var(--s-line-2); border-radius: var(--s-r);
  background: var(--s-card); box-shadow: none;
}
.store .s-flow .card .hd { border-bottom-color: var(--s-line); }
.store .s-flow .card .hd h2 {
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 14px; text-transform: uppercase; letter-spacing: .07em;
}
.store .s-flow .stat .v { font-family: var(--serif); font-weight: 600; }
.store .field label { color: var(--s-ink-2); }
.store .s-flow input[type="text"], .store .s-flow input[type="email"],
.store .s-flow input[type="password"], .store .s-flow input[type="tel"],
.store .s-flow input[type="url"], .store .s-flow input[type="number"],
.store .s-flow input[type="date"], .store .s-flow input[type="time"],
.store .s-flow input[type="datetime-local"], .store .s-flow select,
.store .s-flow textarea {
  border-color: var(--s-line-2); border-radius: var(--s-r); background: var(--s-card);
}
/* Safari/Chrome centre the date-time text box vertically by default, which reads
   a pixel high next to the plain text fields beside it. */
.store .s-flow input[type="datetime-local"]::-webkit-datetime-edit {
  padding: 0; line-height: 38px;
}
.store .s-flow input:focus, .store .s-flow textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
/* Section dividers in totals/summaries use the warm hairline. */
.store .s-flow [style*="border-top"] { border-top-color: var(--s-line) !important; }
/* The page title in a sub-page header reads a step up from the menu's category
   rules — it is the page's name, not one of its sections. */
.store .s-head .s-brandrow > .s-title { font-family: var(--serif); font-size: 19px; }
.store .s-narrow .s-brandrow > div:not(.grow):not(.linkbtn) { font-family: var(--serif); font-size: 19px; }

/* Branch picker rows feel like menu plates: a soft card per branch. */
.store .branch-list { padding: 4px 24px 0; }
.store .branch-card {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 20px 0; margin: 0; cursor: default;
  border: 0; border-bottom: 1px solid var(--s-line); border-radius: 0;
  background: transparent; box-shadow: none;
}
.store .branch-card .nm {
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 16px; text-transform: uppercase; letter-spacing: .04em;
}
@media (min-width: 720px) {
  .store .branch-list { width: 100%; max-width: 720px; margin: 0 auto; padding: 4px 32px 0; }
}

/* Product detail hero image + serif title. */
.store .s-prod-hero {
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--s-r);
  background: var(--s-paper); border: 1px solid var(--s-line);
  margin: 20px var(--s-gut) 0;
}
.store .s-prod-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store .s-prod-hero--empty { display: grid; place-items: center; }
.store .s-prod-hero--empty span { font-family: var(--serif); font-size: 88px; font-weight: 500; color: var(--s-ink-3); }
.store .s-prod-title {
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 26px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
}
.store .s-prod-price { font-size: 20px; margin-top: 8px; color: var(--s-ink); font-weight: 600; }

/* Buttons inside the storefront read with a hair more weight/tracking + a calm
   warm secondary, without altering the shared admin/marketing .btn tokens. */
.store .btn {
  border-radius: var(--s-r); letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 13px;
}
.store .btn.pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.store .btn.lg { height: 52px; }
.store .btn.sec { background: var(--s-card); border-color: var(--s-line-2); color: var(--s-ink); }
.store .btn.sec:hover { background: var(--s-paper); }
.store .btn.ghost { color: var(--s-ink-2); }
.store .btn.ghost:hover { background: var(--s-paper); }

/* ==========================================================================
   STOREFRONT MENU (GET /menu) — the printed-menu index.
   --------------------------------------------------------------------------
   Built to stay usable at 100+ dishes: hairline rows, a leader-dot rule running
   from dish name to price (the one borrowed gesture from a printed menu), a
   sticky search + category strip on mobile, and a category rail on desktop.
   Each category is a containment boundary so offscreen dishes cost nothing.

   The container keeps the per-tenant `.layout-list` / `.layout-grid` class —
   the tenant's `menu_layout` stays the SINGLE source of truth at every
   breakpoint (a `list` store shows rows even on desktop; a `grid` store shows
   photo cards even on the smallest phone).
   ========================================================================== */
/* Shape lock — this storefront has no rounded corners anywhere, so the menu
   page and the cart/checkout it hands off to stay one object. */
.store .btn, .store .input, .store .card, .store .pill,
.store select, .store textarea { border-radius: var(--s-r); }

/* Every `.m-*` rule in this section MUST stay scoped under `.m-root`. The public
   marketing site uses the same `m-` prefix for its own header, body and footer
   (see layouts/marketing.php), and it has no `.m-root` wrapper. An unscoped rule
   here therefore lands on the marketing site too — which is how `.m-body`'s
   desktop two-column grid once put that site's header and footer into the 216px
   rail column meant for this menu's categories. */
.m-root { display: flex; flex-direction: column; width: 100%; }
/* Keyboard focus across the whole storefront, not just the menu: the shop bar,
   its back link and the checkout controls now appear on every page, so the ring
   is scoped to `.store` rather than repeated per page. */
.store a:focus-visible,
.store button:focus-visible,
.store input:focus-visible,
.store select:focus-visible,
.store textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- brand bar (compact: the menu, not the branding, is the payload) ------ */
.m-head { border-bottom: 1px solid var(--s-line); background: var(--s-card); }
.m-head-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 14px 20px;
}
.m-root .m-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.m-mark {
  width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center;
  /* Tinted by the tenant; falls back to the accent, then to ink. */
  background: var(--logo-color, var(--s-ink)); color: var(--logo-ink, var(--s-paper)); overflow: hidden;
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 13px;
}
.m-mark img { width: 100%; height: 100%; object-fit: cover; }
.m-brand-tx { display: flex; flex-direction: column; min-width: 0; }
.m-store {
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 17px; line-height: 1.15; letter-spacing: -.01em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-branch { font-size: 13px; color: var(--s-ink-2); }
.m-head-act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.m-root .m-lnk, .m-root .m-cart {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  font-size: 14px; font-weight: 600; border: 1px solid var(--s-line-2); color: var(--s-ink);
  transition: background .15s var(--s-ease), color .15s var(--s-ease), border-color .15s var(--s-ease);
}
.m-root .m-cart { border: 2px solid var(--accent); font-weight: 700; }
.m-root .m-lnk:hover { background: var(--s-ink); color: var(--s-paper); border-color: var(--s-ink); }
.m-root .m-cart:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.m-root .m-lnk:active, .m-root .m-cart:active, .m-root .m-add:active { transform: translateY(2px); }
.m-cart-n {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700;
}
.m-cart:hover .m-cart-n { background: var(--accent-ink); color: var(--accent); }

/* --- sticky tools: search + category chips -------------------------------- */
.m-tools {
  position: sticky; top: 0; z-index: 5;
  background: var(--s-paper); border-bottom: 2px solid var(--accent);
}
.m-tools-in { width: 100%; max-width: 1280px; margin: 0 auto; padding: 12px 20px 0; }
.m-search { position: relative; display: flex; align-items: center; }
.m-search-ic {
  position: absolute; left: 12px; width: 18px; height: 18px; color: var(--s-ink-2);
  pointer-events: none;
}
.m-root .m-search-in {
  width: 100%; height: 46px; padding: 0 42px 0 38px;
  font-family: inherit; font-size: 16px; color: var(--s-ink);
  background: var(--s-card); border: 1px solid var(--s-line-2); border-radius: var(--s-r);
  appearance: none;
}
.m-root .m-search-in::placeholder { color: var(--s-ink-3); }
.m-root .m-search-in:focus { border-color: var(--s-rule); box-shadow: inset 0 0 0 1px var(--s-rule); }
.m-root .m-search-in::-webkit-search-cancel-button { display: none; }
.m-search-x {
  position: absolute; right: 0; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--s-ink-2); font-size: 22px; cursor: pointer;
}
.m-search-x:hover { color: var(--s-ink); }

.m-chips { display: flex; gap: 2px; overflow-x: auto; padding-top: 8px; scrollbar-width: none; }
.m-chips::-webkit-scrollbar { display: none; }
.m-root .m-chip {
  flex: 0 0 auto; padding: 12px; font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--s-ink-2); border-bottom: 3px solid transparent;
  transition: color .15s var(--s-ease), border-color .15s var(--s-ease);
}
.m-root .m-chip:hover { color: var(--s-ink); }
.m-root .m-chip.on { color: var(--s-ink); border-bottom-color: var(--accent); }

/* --- rail + index --------------------------------------------------------- */
.m-root .m-body { width: 100%; max-width: 1280px; margin: 0 auto; }
.m-rail { display: none; }
.m-list { padding: 0 20px 24px; }
.m-count { margin: 14px 0 0; font-size: 13px; color: var(--s-ink-2); }
.m-none { padding: 56px 0; text-align: center; color: var(--s-ink-2); }
.m-empty { padding: 64px 20px; text-align: center; color: var(--s-ink-2); }

/* Offscreen categories skip layout and paint entirely; the intrinsic size keeps
   the scrollbar honest for blocks that have never been rendered. */
.m-cat { content-visibility: auto; contain-intrinsic-size: auto 640px; scroll-margin-top: 118px; }
.m-cat[hidden] { display: none; }
.m-cat-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0; padding: 32px 0 12px; border-bottom: 2px solid var(--accent);
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 15px; text-transform: uppercase; letter-spacing: .08em;
}
.m-cat-n { font-family: var(--s-body); font-stretch: 100%; font-size: 13px; font-weight: 600; color: var(--s-ink-3); }

.m-root .m-grid { list-style: none; margin: 0; padding: 0; }
.m-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--s-line);
}
.is-long .m-item { padding: 10px 0; }
.m-item[hidden] { display: none; }
.m-item.is-off { opacity: .55; }
.m-thumb {
  width: 64px; height: 64px; flex: 0 0 auto; overflow: hidden;
  background: var(--s-card); border: 1px solid var(--s-line);
}
.m-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-item-b { display: block; flex: 1 1 auto; min-width: 0; }
.m-line { display: flex; align-items: baseline; gap: 12px; }
.m-nm { min-width: 0; overflow-wrap: anywhere; font-size: 16px; font-weight: 600; letter-spacing: -.005em; }
/* The leader rule: a dotted line carrying the eye from dish to price. */
.m-dots {
  flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--s-line-2);
  transform: translateY(-.3em);
}
.m-pr { flex: 0 0 auto; font-size: 16px; font-weight: 700; }
.m-ds {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--s-ink-2); max-width: 68ch;
}
.m-tag {
  display: inline-block; margin-top: 6px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--s-line-2); color: var(--s-ink-2);
}
.m-root .m-add {
  width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
  border: 2px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer;
  transition: background .15s var(--s-ease), color .15s var(--s-ease);
}
.m-add svg { width: 18px; height: 18px; }
.m-root .m-add:hover { background: var(--accent); color: var(--accent-ink); }
.m-root .m-add.is-off { border-color: var(--s-line-2); color: var(--s-ink-3); cursor: default; }

/* grid — photo-led cards butted together, separated by the hairline itself. */
.m-root .m-list.layout-grid .m-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px; background: transparent; border: 0;
}
.m-list.layout-grid .m-item {
  position: relative; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; border-bottom: 0; background: var(--s-card);
  /* The outline draws the cell edge, so a row that does not fill every track
     leaves page background rather than a block of divider colour. */
  box-shadow: 0 0 0 1px var(--s-line);
}
.m-list.layout-grid .m-thumb {
  width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0;
  border-bottom: 1px solid var(--s-line);
}
.m-list.layout-grid .m-item-b { padding: 12px 12px 48px; }
/* Stand-in tile for a dish with no photo — only in the photo-led layout, since
   a list row reads perfectly well without one. */
.m-thumb.is-empty {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 8%, var(--s-card));
  color: color-mix(in srgb, var(--accent) 55%, var(--s-ink-3));
}
.m-thumb.is-empty svg { width: 38%; height: 38%; }
.m-list.layout-grid .m-line { flex-direction: column; align-items: flex-start; gap: 2px; }
.m-list.layout-grid .m-dots { display: none; }
.m-list.layout-grid .m-add { position: absolute; right: 8px; bottom: 8px; }

/* --- footer CTA ----------------------------------------------------------- */
.m-root .m-foot { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 20px 40px; }
.m-root .m-go {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 54px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 3px 3px 0 var(--s-line-2);
  transition: box-shadow .1s var(--s-ease), transform .1s var(--s-ease);
}
.m-root .m-go:hover { box-shadow: 5px 5px 0 var(--s-line-2); }
.m-root .m-go:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--s-line-2); }
.m-go-n {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  background: var(--accent-ink); color: var(--accent); font-family: var(--s-body); font-stretch: 100%;
  font-weight: 700; font-size: 13px; letter-spacing: 0;
}
.m-foot-tx { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--s-ink-2); }
.m-foot-tx a { text-decoration: underline; text-underline-offset: 3px; }

/* --- tablet: roomier rows, wider photo tracks ----------------------------- */
@media (min-width: 720px) {
  .m-root .m-head-in, .m-root .m-tools-in, .m-root .m-foot { padding-left: 32px; padding-right: 32px; }
  .m-list { padding: 0 32px 32px; }
  .m-store { font-size: 20px; }
  .m-cat-h { padding-top: 40px; font-size: 16px; }
  .m-thumb { width: 76px; height: 76px; }
  .m-root .m-list.layout-grid .m-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  /* `auto` keeps a block-level flex container full-width; `fit-content` is what
     actually shrink-wraps the CTA to its label. */
  .m-root .m-go { width: fit-content; min-width: 320px; margin: 0 auto; padding: 0 32px; }
}

/* --- desktop: the chip strip gives way to a standing category rail, and a
       `list` store reflows into two columns so a 100-dish menu stops being a
       kilometre of scroll. ------------------------------------------------- */
@media (min-width: 980px) {
  .m-root .m-body {
    display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 48px;
    padding: 0 32px;
  }
  .m-chips { display: none; }
  .m-list { padding: 0 0 40px; }
  .m-rail {
    display: block; position: sticky; top: 92px; align-self: start;
    max-height: calc(100vh - 120px); overflow-y: auto; padding: 40px 0 24px;
  }
  .m-rail-list { list-style: none; margin: 0; padding: 0; }
  .m-root .m-rail-a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; font-size: 14px; color: var(--s-ink-2);
    transition: background .15s var(--s-ease), color .15s var(--s-ease);
  }
  .m-root .m-rail-a:hover { color: var(--s-ink); background: var(--s-card); }
  .m-root .m-rail-a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
  .m-rail-n { color: var(--s-ink-3); }
  .m-root .m-rail-a.on .m-rail-n { color: var(--accent-ink); }
  .m-cat { scroll-margin-top: 88px; }
  .m-root .m-list.layout-list .m-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    column-gap: 44px;
  }
  .m-root .m-list.layout-grid .m-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(body.store) { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .m-root *, .m-root *::before { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   STOREFRONT — desktop / tablet (≥720px): a real responsive website.
   The 430px `.phone` no longer constrains; the header goes full-width, the
   content centers in a ~1140px container, and the menu becomes a grid.
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  /* Stays a flex column so the site footer closes the page. `.phone` keeps its
     100vh floor on mobile, where it IS the app frame; on desktop a short page
     (an empty cart, a sign-in form) would otherwise reserve a full viewport of
     blank paper and push the footer out of sight. Growing instead of flooring
     puts the footer at the bottom of the window on short pages and directly
     under the content on long ones. */
  .store { align-items: stretch; background: var(--s-paper); }
  .phone {
    width: 100%; max-width: none; border: 0; background: var(--s-paper);
    min-height: 0; flex: 1 0 auto;
  }

  /* Full-bleed brand cover, taller and more dramatic on desktop. */
  .s-cover .inner {
    max-width: 920px; margin: 0 auto;
    padding: 84px 32px 72px; min-height: 420px;
  }
  .s-cover .c-name { font-size: 64px; }
  .s-cover .c-tag { font-size: 22px; }
  .s-cover .c-logo { width: 80px; height: 80px; font-size: 34px; }
  .s-cover .c-actions { top: 24px; right: max(24px, calc((100% - 1140px) / 2)); }
  .s-cover .c-account { top: 24px; left: max(24px, calc((100% - 1140px) / 2)); }

  /* Plain (cover-less) header bar goes full-width with a centered inner row. */
  .s-head {
    padding: 0; top: 0;
    background: rgba(255, 252, 247, .9); backdrop-filter: saturate(140%) blur(16px);
  }
  .s-head > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
  .s-brandrow { padding: 18px 32px; }
  .s-locrow { padding: 0 32px 16px; margin-top: 0; }

  /* Sticky category tabs: full-width bar, content centered to the container. */
  .tabs {
    top: 0; justify-content: center;
    padding: 16px max(32px, calc((100% - 1140px) / 2));
  }

  /* The menu page brings its own desktop rules; see the STOREFRONT MENU block. */

  /* Branch picker + footers also live in the centered container. `width: 100%`
     is load-bearing: these are flex children of `.phone`, and an auto inline
     margin on a flex item shrink-wraps it to its text instead of centering a
     full-width block — which is why the section rules used to stop dead at the
     end of their own words. */
  .s-sec, .s-foot { width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; }
  .s-sec { padding-left: 32px; padding-right: 32px; }
  .s-foot { padding-left: 32px; padding-right: 32px; }

  /* Narrow flows (cart / checkout / account / auth) → comfortable column. */
  .s-narrow {
    max-width: 620px; margin: 0 auto; width: 100%;
    padding-bottom: 40px;
  }
  /* When a page is narrow, its sticky header should align to the same column. */
  .s-narrow .s-head > * { max-width: 620px; }
  /* Section headers / footers inside a narrow column hug the column, not 1140. */
  .s-narrow .s-sec,
  .s-narrow .s-foot { max-width: none; padding-left: var(--s-gut); padding-right: var(--s-gut); }
}

/* Large desktop: a touch more breathing room. */
@media (min-width: 1200px) {
  .s-head > *, .s-menu, .s-sec, .s-foot { max-width: 1140px; }
}

/* ==========================================================================
   STOREFRONT SUB-PAGES — cart / checkout / product / receipts / account.
   --------------------------------------------------------------------------
   The menu page is the menu; every page after it is the check. So these pages
   re-flow on desktop into a LEDGER: the record (lines, options, form fields)
   runs down the left, and a check panel — totals and the one action that
   settles them — sits in a sticky column on the right. It is the menu page's
   rail/index split, mirrored, on the same 1140 container and the same hard
   accent rules, so the whole storefront reads as one printed object.

   Every sub-page body carries `.s-flow` (which owns the shared chrome: card,
   input and group-label treatment) plus ONE shape class, which owns only the
   width. All four are a single column on mobile:
     .s-ledger  record + sticky check panel    (cart, checkout, receipts)
     .s-split   sticky media + detail          (product)
     .s-column  one comfortable reading column (order history, addresses)
     .s-narrow  460-620px                      (auth forms, interstitials)
   ========================================================================== */
.s-flow { width: 100%; }

/* Back arrow in the title bar — a 44px target around a 20px glyph. */
.store .s-back {
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: -11px;
  flex: 0 0 auto; color: var(--s-ink);
  transition: color .15s var(--s-ease);
}
.store .s-back svg { width: 20px; height: 20px; }
.store .s-back:hover { color: var(--accent); }

/* The check panel. Borderless on mobile (it is just the end of the page); a
   hairline block on desktop, where it stands alone beside the record. It pairs
   with `.s-gut`, which supplies the horizontal inset on mobile — so only the
   vertical rhythm is set here. */
.store .s-panel { padding-top: 20px; padding-bottom: 28px; }
.store .s-panel-h {
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  padding-bottom: 10px; margin: 0 0 4px; border-bottom: 2px solid var(--accent);
}
/* Label/value line — the totals, the pickup details, the order meta. */
.store .s-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 7px 0; font-size: 15px;
}
.store .s-row > :first-child { color: var(--s-ink-2); }
.store .s-row > :last-child { font-variant-numeric: tabular-nums; text-align: right; }
.store .s-row.is-total {
  margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--s-line);
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 17px; text-transform: uppercase; letter-spacing: .04em;
}
.store .s-row.is-total > :first-child { color: var(--s-ink); }

/* --- desktop ------------------------------------------------------------- */
@media (min-width: 980px) {
  /* The title bar stops sticking once the check panel does: two sticky bars
     stacking is what forces the guessed top offsets that drift out of sync. */
  .store .s-head { position: static; }

  .s-ledger {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px; align-items: start;
    max-width: 1140px; margin: 0 auto; padding: 8px 32px 56px;
  }
  .s-split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px; align-items: start;
    max-width: 1140px; margin: 0 auto; padding: 24px 32px 56px;
  }
  /* Same 1140 as the ledger and the title bar above it: an order row is a
     ledger line, and starting it 160px inboard of the page title would read as
     a different page. */
  .s-column { max-width: 1140px; margin: 0 auto; padding: 8px 32px 56px; }

  .s-ledger-side, .s-split-media { position: sticky; top: 32px; }
  .store .s-ledger-side .s-panel {
    border: 1px solid var(--s-line-2); background: var(--s-card); padding: 20px 22px 28px;
  }

  /* Inside a grid cell the track supplies the gutter, so the row insets that
     carry the mobile layout would read as a double indent. Rows nested in a
     `.card` keep theirs — there the inset is the card's own padding. */
  .s-ledger > * > .s-gut, .s-split > * > .s-gut,
  .s-column > .s-gut { padding-left: 0; padding-right: 0; }
  .s-ledger-main > .item,
  .s-column > .item,
  .s-split-body > form > .item { padding-left: 0; padding-right: 0; }
  .s-ledger .s-sec, .s-split .s-sec, .s-column .s-sec {
    padding-left: 0; padding-right: 0; max-width: none;
  }
  .s-ledger .s-foot, .s-split .s-foot, .s-column .s-foot {
    padding-left: 0; padding-right: 0; max-width: none;
  }
  .s-split .s-prod-hero { margin: 0; }
  /* A tall option list is the product page's real content; the photo should
     hold its own height rather than stretch to match it. */
  .s-split-media { align-self: start; }
}

/* --- product page: the detail column on desktop -------------------------- */
@media (min-width: 980px) {
  .store .s-split .s-prod-title { font-size: 34px; }
  .store .s-split .s-prod-price { font-size: 22px; }
}

/* --- branch picker: a two-up grid once there is room --------------------- */
@media (min-width: 980px) {
  .store .branch-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px; width: 100%; max-width: 1140px; padding: 4px 32px 0;
  }
}

/* --- auth / interstitial column ------------------------------------------ */
@media (min-width: 720px) {
  /* A sign-in form is a short page. Hairlining it into a block keeps it a
     deliberate composition instead of a stray column floating on paper. */
  .store .s-narrow.is-panel {
    max-width: 460px; margin: 56px auto; padding-bottom: 0;
    border: 1px solid var(--s-line-2); background: var(--s-card);
  }
  .store .s-narrow.is-panel .s-head {
    position: static; background: transparent; padding: 18px 24px 14px;
  }
  .store .s-narrow.is-panel .s-head > * { max-width: none; }
  /* The desktop `.s-brandrow` carries its own 18px band, which inside a panel
     header stacks on top of the header's and doubles the gap under the title. */
  .store .s-narrow.is-panel .s-brandrow { padding: 0; }
  .store .s-narrow.is-panel .s-locrow { padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   STOREFRONT FONTS — per-tenant typography preset via `<body data-font="…">`.
   `classic` (default, Cormorant/Playfair) gets NO override. The others retune
   the heading face (--serif) + the body family. Scoped under `.store` only.
   ========================================================================== */
.store[data-font="modern"] {
  --serif: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --s-display-w: 800;
  --s-display-x: 100%;
}
.store[data-font="rounded"] {
  --serif: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --s-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --s-display-w: 900;
  --s-display-x: 100%;
}
.store[data-font="bistro"] {
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --s-body: "Merriweather Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --s-display-w: 700;
  --s-display-x: 100%;
}

/* --------------------------------------------------------------------------
   PLACEHOLDER for menu items / products without a photo — a soft accent-tinted
   tile with a serving-dome (cloche) glyph. Nicer than a bare initial.
   -------------------------------------------------------------------------- */
.store .s-ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  background:
    radial-gradient(125% 125% at 30% 18%,
      color-mix(in srgb, var(--accent) 16%, #ffffff) 0%,
      color-mix(in srgb, var(--accent) 6%, #fbf8f4) 58%,
      #f5efe7 100%);
}
.store .s-ph svg {
  width: 46%; height: 46%; max-width: 96px; max-height: 96px;
  color: color-mix(in srgb, var(--accent) 52%, #9a8e7e);
  opacity: .92;
}
.store .s-prod-hero--empty.s-ph svg { width: 128px; height: 128px; max-width: 128px; max-height: 128px; }
/* Everywhere else `.s-ph` fills a tile its parent already sized. On the product
   hero the placeholder IS the box, and that box carries the page gutter as its
   own margin — so `width: 100%` made it a full gutter wider than the column and
   scrolled every photoless dish sideways on a phone. */
.store .s-prod-hero.s-ph { width: auto; }

/* ==========================================================================
   CUSTOMER ACCOUNT (rewards / profile / orders)
   --------------------------------------------------------------------------
   Every radius below reads `--s-r`, so these screens follow whichever shape
   the tenant's theme sets rather than pinning their own.
   ========================================================================== */

/* One tab bar shared by all three account screens. Scrolls rather than wraps
   so a narrow phone never stacks it into two rows. */
.store .s-acct-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--s-gut); border-bottom: 1px solid var(--s-line);
  width: 100%;
}
.store .s-acct-tabs::-webkit-scrollbar { display: none; }
.store .s-acct-tab {
  flex: 0 0 auto; padding: 14px 12px; font-size: 15px; font-weight: 600;
  color: var(--s-ink-3); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s var(--s-ease), border-color .15s var(--s-ease);
}
.store .s-acct-tab:hover { color: var(--s-ink); }
.store .s-acct-tab.on { color: var(--s-ink); border-bottom-color: var(--s-ink); }

/* One-shot message (a reorder that could not be honoured, a saved profile). */
.store .s-note {
  border: 1px solid var(--s-line-2); border-radius: var(--s-r);
  background: var(--s-card); padding: 12px 14px; font-size: 14px;
  margin: 0 0 16px;
}
.store .s-note.ok { border-color: var(--s-ink); }

/* --- rewards -------------------------------------------------------------- */
.store .s-rw-top { display: grid; gap: 24px; }
.store .s-rw-n {
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 44px; line-height: 1.05; letter-spacing: -.01em;
}
.store .s-rw-sub { margin: 8px 0 0; color: var(--s-ink-2); font-size: 15px; }
.store .s-rw-how { margin-top: 6px; font-size: 14px; }
.store .s-rw-how summary {
  cursor: pointer; color: var(--s-ink-2); text-decoration: underline;
  text-underline-offset: 3px;
}
.store .s-rw-how p { margin: 10px 0 0; color: var(--s-ink-2); line-height: 1.55; }
.store .s-rw-track { align-self: center; }
/* The bar is a track with a filled head and a marker at the balance, so the
   distance still to run reads at a glance without any number being needed. */
.store .s-rw-bar {
  position: relative; height: 34px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--s-card));
  border: 1px solid var(--s-line);
}
/* The marker lives INSIDE the fill, pinned to its trailing edge, so the two can
   never disagree — including at a low balance, where the fill is held open by
   its own minimum width rather than by the percentage. */
.store .s-rw-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: var(--accent); min-width: 34px;
}
.store .s-rw-dot {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--s-card); border: 1px solid var(--s-line-2);
}
.store .s-rw-marks {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 13px; color: var(--s-ink-2);
}
@media (min-width: 900px) {
  .store .s-rw-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; }
}

/* --- tip presets ---------------------------------------------------------- */
.store .s-tip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.store .s-tip-b {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 4px; cursor: pointer; font: inherit;
  border: 1px solid var(--s-line-2); border-radius: var(--s-r);
  background: var(--s-card); color: var(--s-ink);
  transition: border-color .15s var(--s-ease), box-shadow .15s var(--s-ease);
}
.store .s-tip-b .v { font-weight: 650; font-size: 15px; }
.store .s-tip-b .p { font-size: 12px; color: var(--s-ink-2); }
.store .s-tip-b.on { border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); }
.store .s-tip-b.on .p { color: var(--s-ink); }

/* --- taxes & fees, folded ------------------------------------------------- */
.store .s-fees > summary { cursor: pointer; list-style: none; }
.store .s-fees > summary::-webkit-details-marker { display: none; }
/* The caret sits against the label rather than the amount, so the column of
   figures on the right stays a straight edge. */
.store .s-fees > summary > span:first-child::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  vertical-align: 2px;
  border-right: 1.5px solid var(--s-ink-3); border-bottom: 1.5px solid var(--s-ink-3);
  transform: rotate(45deg);
  transition: transform .15s var(--s-ease);
}
.store .s-fees[open] > summary > span:first-child::after { transform: rotate(-135deg) translate(-2px, -2px); }
.store .s-row.s-fees-in { padding-left: 14px; color: var(--s-ink-2); font-size: 14px; }

/* --- order confirmation: map + foldable summary --------------------------- */
/* The map sits inside the details card, so it takes the card's own top corners
   rather than drawing square ones over them. */
.store .s-map {
  display: block; width: 100%; height: 190px; border: 0;
  border-bottom: 1px solid var(--s-line);
}
.store .s-sum { padding: 0; }
.store .s-sum > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none;
}
.store .s-sum > summary::-webkit-details-marker { display: none; }
/* A chevron that turns, so the row reads as something that opens even with the
   native marker suppressed. */
.store .s-sum > summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid var(--s-ink-3); border-bottom: 2px solid var(--s-ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s var(--s-ease);
}
.store .s-sum[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

/* --- reward tiers --------------------------------------------------------- */
.store .s-rw-tier { margin-top: 34px; }
.store .s-rw-tier-h {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--serif); font-weight: var(--s-display-w); font-stretch: var(--s-display-x);
  font-size: 22px; letter-spacing: -.01em;
}
.store .s-rw-tier-h svg { width: 17px; height: 17px; color: var(--s-ink-3); }
.store .s-rw-tier-s { margin: 4px 0 0; font-size: 14px; color: var(--s-ink-2); }
.store .s-rw-cards { display: grid; gap: 14px; margin-top: 14px; }
.store .s-rw-card {
  display: flex; align-items: stretch; gap: 14px; overflow: hidden;
  border: 1px solid var(--s-line-2); border-radius: var(--s-r);
  background: var(--s-card); padding: 16px 0 16px 18px;
}
/* A tier the balance cannot reach is dimmed rather than hidden: knowing what is
   coming is the reason to keep earning. */
.store .s-rw-card.is-locked { opacity: .62; }
.store .s-rw-card h3 { margin: 0; font-size: 16px; font-weight: 650; }
.store .s-rw-card .s-rw-cost { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--s-ink-2); }
.store .s-rw-card p {
  margin: 8px 0 0; font-size: 13px; color: var(--s-ink-2); line-height: 1.5;
}
.store .s-rw-card img {
  width: 130px; align-self: stretch; object-fit: cover; flex: 0 0 auto;
  margin: -16px 0; display: block;
}
@media (min-width: 760px) {
  .store .s-rw-cards { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* --- reward picker at checkout -------------------------------------------- */
.store .s-rw-pick { display: grid; gap: 8px; margin-top: 10px; }
.store .s-rw-opt {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid var(--s-line-2); border-radius: var(--s-r);
  padding: 10px 12px; background: var(--s-card);
}
.store .s-rw-opt.on { border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); }
.store .s-rw-opt input { width: auto; height: auto; flex: 0 0 auto; margin: 0; }
.store .s-rw-opt img {
  width: 44px; height: 44px; object-fit: cover; border-radius: var(--s-r); flex: 0 0 auto;
}
.store .s-rw-opt .nm { display: block; font-weight: 560; font-size: 15px; }
.store .s-rw-opt .ds { display: block; font-size: 13px; color: var(--s-ink-2); margin-top: 2px; }

/* --- past orders ---------------------------------------------------------- */
.store .s-past-grid { display: grid; gap: 16px; }
.store .s-past-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.store .s-past-h a { font-weight: 650; text-decoration: none; }
.store .s-past-h a:hover { text-decoration: underline; }
.store .s-past-line {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-top: 1px solid var(--s-line);
}
.store .s-past-line .nm { font-weight: 560; }
.store .s-past-line .ds { font-size: 13px; color: var(--s-ink-2); margin-top: 2px; }
.store .s-past-add { height: 36px; font-size: 12px; white-space: nowrap; }
.store .s-past-f {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--s-line);
}
@media (min-width: 900px) {
  .store .s-past-grid { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}

/* ==========================================================================
   STOREFRONT THEMES
   --------------------------------------------------------------------------
   Per-tenant visual identity, driven by `<body class="store" data-theme="…">`.
   EVERY rule is scoped under `.store[data-theme="bold"]` /
   `.store[data-theme="minimal"]` so themes can NEVER leak into admin or
   marketing. `classic` is the default and is intentionally given NO overrides
   here — it renders exactly as the base storefront rules above, unchanged.
   Themes respond to mobile + desktop because they re-tune the same tokens the
   responsive blocks already use.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOLD — punchy & vibrant: a saturated accent-filled cover, heavy sans-serif
   headings (deliberately NOT the serif — that's the contrast vs classic),
   larger radius, filled accent chips, higher contrast. Eye-catching.
   -------------------------------------------------------------------------- */
.store[data-theme="bold"] {
  --s-paper: #fcfcfb;
}
/* Saturated, accent-filled cover even without a cover image; deeper scrim so
   white type always pops over photos. */
.store[data-theme="bold"] .s-cover {
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 65%, #000) 100%);
}
.store[data-theme="bold"] .s-cover.has-img { background: #111; }
.store[data-theme="bold"] .s-cover .scrim {
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.72) 100%);
}
.store[data-theme="bold"] .s-cover::after { display: none; }
/* Big, heavy SANS brand heading — the opposite register to classic's serif. */
.store[data-theme="bold"] .s-cover .c-name {
  font-family: var(--font); font-weight: 820; letter-spacing: -.02em;
}
.store[data-theme="bold"] .s-cover .c-tag { font-family: var(--font); font-style: normal; font-weight: 560; }
.store[data-theme="bold"] .s-cover .c-logo {
  border-radius: 18px; background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.55); font-family: var(--font); font-weight: 800;
}
/* Sticky tabs: solid, high-contrast. Selected tab is a filled accent pill. */
.store[data-theme="bold"] .tabs { background: rgba(255,255,255,.96); }
.store[data-theme="bold"] .tab { font-weight: 700; border-width: 2px; border-color: var(--s-line-2); }
.store[data-theme="bold"] .tab.on {
  background: var(--accent); border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Louder, heavier SANS section headers; no gold rule. */
.store[data-theme="bold"] .s-sec {
  font-family: var(--font); font-size: 24px; font-weight: 820; color: var(--s-ink);
  letter-spacing: -.01em;
}
.store[data-theme="bold"] .s-sec::after {
  width: 56px; height: 4px; border-radius: 2px; background: var(--accent);
}
/* Stronger product names (sans) + price; add button is a filled accent chip. */
.store[data-theme="bold"] .item .nm { font-family: var(--font); font-weight: 760; letter-spacing: -.01em; }
.store[data-theme="bold"] .item .pr { font-weight: 760; }
.store[data-theme="bold"] .add {
  background: var(--accent); color: #fff; border-color: transparent;
  font-weight: 700; box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--accent) 50%, transparent);
}
.store[data-theme="bold"] .add:hover { filter: brightness(.94); background: var(--accent); color: #fff; }
.store[data-theme="bold"] .add:disabled { background: var(--s-paper); color: var(--s-ink-3); box-shadow: none; }
/* Menu page: the accent is already carried by the base rules, so bold only adds
   its extra weight and fills the add button rather than outlining it. */
.store[data-theme="bold"] .m-nm { font-weight: 760; letter-spacing: -.01em; }
.store[data-theme="bold"] .m-pr { font-weight: 800; }
.store[data-theme="bold"] .m-root .m-add { background: var(--accent); color: var(--accent-ink); }
.store[data-theme="bold"] .m-root .m-add:hover { filter: brightness(.92); }
.store[data-theme="bold"] .m-root .m-add.is-off {
  background: transparent; border-color: var(--s-line-2); color: var(--s-ink-3); filter: none;
}
.store[data-theme="bold"] .s-sitefoot { background: color-mix(in srgb, var(--accent) 28%, #100c08); }

/* --------------------------------------------------------------------------
   MINIMAL — understated & editorial: pure monochrome (no accent, no gold),
   flat, hairline borders, near-square radius, generous whitespace, thin serif.
   Calm and gallery-like.
   -------------------------------------------------------------------------- */
.store[data-theme="minimal"] {
  --s-paper: #fcfcfb;
  --s-card: #fdfdfc;
}
/* Cover: drop the warm gradient for a calm flat charcoal bar. */
.store[data-theme="minimal"] .s-cover { background: #161616; }
.store[data-theme="minimal"] .s-cover.has-img { background: #161616; }
.store[data-theme="minimal"] .s-cover .scrim {
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.22) 50%, rgba(0,0,0,.50) 100%);
}
.store[data-theme="minimal"] .s-cover::after { display: none; }   /* no gold rule */
.store[data-theme="minimal"] .s-cover .inner { padding-top: 56px; padding-bottom: 56px; }
/* Thin, editorial serif heading with wide tracking. */
.store[data-theme="minimal"] .s-cover .c-name { font-weight: 400; letter-spacing: .06em; }
.store[data-theme="minimal"] .s-cover .c-tag { font-weight: 400; }
.store[data-theme="minimal"] .s-cover .c-logo {
  border-radius: 0; background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28);
}
/* Tabs: flat, hairline, muted. Selected tab is an underline, not a filled pill. */
.store[data-theme="minimal"] .tabs { background: var(--s-card); }
.store[data-theme="minimal"] .tab {
  border-radius: 0; border: 0; border-bottom: 1px solid transparent;
  background: transparent; color: var(--s-ink-3); font-weight: 600; padding: 0 8px;
}
.store[data-theme="minimal"] .tab:hover { color: var(--s-ink); border-color: transparent; }
.store[data-theme="minimal"] .tab.on {
  background: transparent; color: var(--s-ink); border-bottom-color: var(--s-ink); border-radius: 0;
}
/* Quiet thin-serif section headers; the rule becomes a hairline, not gold. */
.store[data-theme="minimal"] .s-sec { font-weight: 400; letter-spacing: .04em; }
.store[data-theme="minimal"] .s-sec::after { background: var(--s-line-2); width: 40px; }
/* Roomier rows; lighter type. */
.store[data-theme="minimal"] .item { padding-top: 22px; padding-bottom: 22px; }
.store[data-theme="minimal"] .item .nm { font-weight: 500; }
.store[data-theme="minimal"] .item .pr { font-weight: 500; }
/* Add button: hairline, monochrome. */
.store[data-theme="minimal"] .add {
  border: 1px solid var(--s-line-2); color: var(--s-ink); background: var(--s-card); font-weight: 400;
}
.store[data-theme="minimal"] .add:hover { background: var(--s-ink); color: #fff; }
/* Menu page: pure monochrome — the accent marker becomes ink, the structural
   2px rules soften to hairlines, and rows sit lighter and roomier. */
.store[data-theme="minimal"] .m-root .m-rail-a.on {
  background: transparent; color: var(--s-ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.store[data-theme="minimal"] .m-root .m-rail-a.on .m-rail-n { color: var(--s-ink-3); }
.store[data-theme="minimal"] .m-tools { border-bottom-width: 1px; }
.store[data-theme="minimal"] .m-cat-h { border-bottom-width: 1px; }
.store[data-theme="minimal"] .m-root .m-add { border-width: 1px; }
.store[data-theme="minimal"] .m-item { padding-top: 18px; padding-bottom: 18px; }
.store[data-theme="minimal"] .m-nm { font-weight: 500; }
.store[data-theme="minimal"] .m-pr { font-weight: 500; }
.store[data-theme="minimal"] .m-add, .store[data-theme="minimal"] .m-cart { border-width: 1px; border-color: var(--s-line-2); }
.store[data-theme="minimal"] .m-go { box-shadow: none; }
.store[data-theme="minimal"] .m-go:hover { box-shadow: none; }
.store[data-theme="minimal"] .m-go:active { transform: none; }
.store[data-theme="minimal"] .s-sitefoot { background: #161616; }

/* --------------------------------------------------------------------------
   ROUNDED — classic's typeface, accent and copy voice, softened geometry.
   The storefront ships with `--s-r: 0` as a shape lock, and nearly every
   surface (buttons, inputs, cards, pills, the logo mark, the product hero, the
   menu search) already reads its corner off that one variable — so unlocking
   it here rounds the whole storefront at once. What follows only re-cuts the
   handful of places that hardcode a square edge and so would otherwise stay
   sharp next to everything else.

   Deliberately absent: any change to font, weight, tracking, uppercasing or
   accent. A store switching to this theme keeps its brand; only the corners
   move.
   -------------------------------------------------------------------------- */
.store[data-theme="rounded"] {
  --s-r: 12px;
  --s-paper: #f5f5f4;
  --s-card: #ffffff;
}
/* Dish photos sit a hair rounder than the controls beside them. */
.store[data-theme="rounded"] .item .thumb { border-radius: 14px; }
.store[data-theme="rounded"] .m-thumb { border-radius: 10px; }
/* A grid cell draws its edge with a box-shadow outline rather than a border,
   and that outline follows the element's own radius — so the radius goes on
   the cell and the photo is clipped by it instead of carrying its own. */
.store[data-theme="rounded"] .m-list.layout-grid .m-item {
  border-radius: 14px; overflow: hidden;
}
.store[data-theme="rounded"] .m-list.layout-grid .m-thumb { border-radius: 0; }
/* Branch rows are hairline-separated in classic; here they read as soft cards,
   which is the same information with the theme's edge on it. */
.store[data-theme="rounded"] .branch-card {
  border: 1px solid var(--s-line); border-radius: var(--s-r);
  border-bottom: 1px solid var(--s-line);
  padding: 16px; margin-bottom: 10px; background: var(--s-card);
}
/* The menu page draws its own controls rather than reusing `.btn`, so none of
   them pass through the shape lock and all would stay square next to a rounded
   card. Each one is re-cut here to the same corner. */
.store[data-theme="rounded"] .m-root .m-lnk,
.store[data-theme="rounded"] .m-root .m-cart,
.store[data-theme="rounded"] .m-root .m-go,
.store[data-theme="rounded"] .m-mark { border-radius: var(--s-r); }
/* Square icon buttons read better fully round than merely soft-cornered. */
.store[data-theme="rounded"] .m-root .m-add { border-radius: 50%; }
/* Counter badges: pills, matching the cart/tab pills elsewhere. */
.store[data-theme="rounded"] .m-cart-n,
.store[data-theme="rounded"] .m-go-n,
.store[data-theme="rounded"] .s-head .cart-btn span { border-radius: 999px; }
/* The desktop category rail's selected row is a filled block; round it so the
   fill matches the cards it sits beside. */
.store[data-theme="rounded"] .m-root .m-rail-a { border-radius: var(--s-r); }

/* ==========================================================================
   AUTH (centered card)
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--surface); }
.auth-card {
  width: 100%; max-width: 380px; background: var(--bg);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 32px 28px;
}
.auth-card .brand-mark {
  width: 44px; height: 44px; border-radius: 11px; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 20px; margin: 0 auto 16px;
}
.auth-card h1 { font-size: 22px; font-weight: 650; text-align: center; }
.auth-card .sub { text-align: center; color: var(--ink-2); font-size: 14px; margin-top: 6px; }
.auth-card form { margin-top: 22px; }
.auth-card .btn { margin-top: 18px; }

/* ==========================================================================
   Error / empty states
   ========================================================================== */
.state-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.state-wrap h1 { font-size: 64px; font-weight: 700; letter-spacing: -.03em; }
.state-wrap .sub { color: var(--ink-2); margin-top: 8px; }
.empty { padding: 40px 20px; text-align: center; color: var(--ink-2); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  /* Rail becomes an off-canvas drawer toggled by Alpine (body .nav-open). */
  .rail {
    position: fixed; left: 0; top: 0; height: 100vh; width: var(--rail-open);
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow);
    align-items: stretch;
  }
  .rail .brand .name, .rail .nav .sec, .rail .nav a .lb, .rail .me .who { opacity: 1; }
  body.nav-open .rail { transform: translateX(0); }
  .scrim {
    display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .3);
    z-index: 20; opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  .burger { display: inline-flex; }
  .topbar { padding: 0 16px; gap: 12px; }
}

@media (max-width: 640px) {
  .content { padding: 16px; }
  .phone { border: 0; }

  /* Declutter the topbar on phones: tighter spacing, truncate the title,
     drop the location pill (branch switching lives in-page for now). */
  .topbar { padding: 0 12px; gap: 10px; height: 56px; }
  .topbar h1 {
    font-size: 17px; min-width: 0; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar .grow { display: none; }
  .loc { display: none; }
  .page-actions .btn { padding: 0 12px; height: 34px; }

  /* Two-column form rows stack on phones. */
  .row2 { grid-template-columns: 1fr; gap: 0; }

  /* Comfortable tap targets in the off-canvas nav. */
  .navlink { height: 44px; }

  /* Tables → stacked cards: label on top, value below, full width, left.
     This reads cleanly even when a cell holds a form (role select, branch
     checkboxes) or a long value (email), instead of squeezing it to the right. */
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody { display: block; width: 100%; }
  table.responsive tr {
    display: block; background: var(--bg);
    border: 1px solid var(--border-2); border-radius: var(--radius);
    margin-bottom: 12px; padding: 6px 2px; box-shadow: var(--shadow-sm);
  }
  table.responsive td {
    display: block; width: 100%; border: 0;
    padding: 8px 16px; text-align: left;
    font-size: 15px; overflow-wrap: anywhere;
  }
  table.responsive td::before {
    content: attr(data-label); display: block;
    font-size: 11px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px;
  }
  /* Action-only cells (data-label=""): no label, button spans full width. */
  table.responsive td[data-label=""]::before { display: none; }
  table.responsive td[data-label=""] { padding-top: 4px; }
  table.responsive td[data-label=""] > .btn,
  table.responsive td[data-label=""] > form > .btn { display: flex; width: 100%; justify-content: center; }
  /* Forms inside stacked cells take the full width. */
  table.responsive td select,
  table.responsive td .input { width: 100%; }

  /* Bigger, tappable small buttons on phones. */
  .btn.small { height: 38px; padding: 0 14px; font-size: 14px; }
}

/* ==========================================================================
   MARKETING SITE (apex host: orderithub.com)
   ========================================================================== */
.m-body { background: var(--bg); }
.m-wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* Top nav */
.m-nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border-2); }
.m-nav-inner { max-width: 1040px; margin: 0 auto; padding: 0 24px; height: 56px;
  display: flex; align-items: center; gap: 24px; }
.m-brand { font-weight: 680; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.m-navlinks { display: flex; gap: 22px; flex: 1; }
.m-navlink { color: var(--ink-2); font-size: 14px; font-weight: 540; }
.m-navlink:hover, .m-navlink.on { color: var(--ink); }
.m-nav-cta { display: flex; gap: 10px; }

/* Headings / type */
.m-h1 { font-size: 46px; line-height: 1.07; font-weight: 680; letter-spacing: -.03em; }
.m-h2 { font-size: 30px; font-weight: 670; letter-spacing: -.02em; }
.m-h3 { font-size: 20px; font-weight: 640; letter-spacing: -.01em; }
.m-lead { font-size: 19px; color: var(--ink-2); max-width: 640px; margin: 16px auto 0; line-height: 1.45; }
.m-cta-row { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.m-hero .m-cta-row { justify-content: center; }

/* Hero */
.m-hero { padding: 64px 0 56px; }
.m-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.m-hero-copy .m-lead { margin-left: 0; margin-right: 0; }
.m-hero-media { position: relative; }
.m-hero-img { display: block; width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.06); }

/* Feature grid */
.m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 8px 0 48px; }
.m-feature { padding: 22px; }
.m-feature h3 { margin-bottom: 8px; }
.m-feature p { margin: 0; }
/* Cards that carry an image: image bleeds to the card edges, text padded below. */
.m-feature.has-img { padding: 0; overflow: hidden; }
.m-feature.has-img .m-feature-body { padding: 20px 22px 22px; }
.m-feature-img { display: block; width: 100%; height: 168px; object-fit: cover;
  border-bottom: 1px solid var(--border-2); background: var(--surface); }

/* Band CTA */
.m-band { background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 44px 24px; margin: 8px 0 56px; }
.m-band h2 { margin-bottom: 8px; }

/* Features page */
.m-pagehead { padding: 56px 0 32px; }
.m-featlist { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.m-featblock { padding: 24px; }
.m-featblock h2 { margin-bottom: 12px; }
.m-ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.m-ul li { margin: 6px 0; }

/* Pricing */
.m-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12px; }
.m-plan { position: relative; padding: 28px 24px; display: flex; flex-direction: column; }
.m-plan.featured { border-color: var(--accent); box-shadow: var(--shadow); }
.m-plan-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 650;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .02em; }
.m-plan-name { font-size: 18px; font-weight: 640; }
.m-price { margin: 10px 0 4px; display: flex; align-items: baseline; gap: 4px; }
.m-price-amt { font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
.m-plan .m-ul { margin: 16px 0 20px; list-style: none; padding: 0; }
.m-plan .m-ul li { padding-left: 22px; position: relative; color: var(--ink); }
.m-plan .m-ul li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.m-plan .btn { margin-top: auto; }

/* Signup */
.m-signup { padding: 48px 0 64px; display: grid; place-items: center; }
.m-signcard { width: 100%; max-width: 460px; padding: 32px 28px; }
.m-signcard h1 { margin-bottom: 4px; }
.m-subwrap { display: flex; align-items: stretch; }
.m-subwrap input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.m-subsuffix { display: inline-flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--border); border-left: 0; border-radius: 0 9px 9px 0;
  background: var(--surface); color: var(--ink-2); font-size: 14px; white-space: nowrap; }

/* Footer */
.m-foot { border-top: 1px solid var(--border-2); margin-top: 32px; padding: 40px 0; background: var(--surface-2); }
.m-foot-inner { max-width: 1040px; margin: 0 auto; padding: 0 24px; text-align: center; }
.m-foot-inner .m-brand { display: inline-block; margin-bottom: 6px; }
.m-foot-links { display: flex; gap: 18px; justify-content: center; margin: 12px 0; }

@media (max-width: 820px) {
  .m-grid, .m-featlist, .m-plans { grid-template-columns: 1fr; }
  .m-h1 { font-size: 34px; }
  .m-lead { font-size: 17px; }
  .m-navlinks { display: none; }

  /* Hero stacks: image above the copy, both centred. */
  .m-hero { padding: 40px 0 40px; }
  .m-hero-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .m-hero-media { order: -1; }
  .m-hero-copy .m-cta-row { justify-content: center; }
  .m-hero-img { box-shadow: 0 14px 36px -16px rgba(0,0,0,.22); }
  .m-feature-img { height: 150px; }
}

/* ==========================================================================
   STOREFRONT LANDING PAGES  — scoped under `.store .s-landing`
   Five templates (classic / bold / fresh / elegant / street) share a semantic
   skeleton (sl-*) and diverge entirely by the root variant class. Reuses the
   storefront tokens (--accent, --s-*) and never leaks into admin/marketing.
   Also: the admin template-picker cards live under `.landing-pick`.
   ========================================================================== */

/* The landing page wants the full page width, not the 480px app column. When
   the phone frame contains a landing, let it span the viewport. */
.store .phone:has(.s-landing) {
  width: 100%; max-width: 100%; border-left: 0; border-right: 0;
}
.store .s-landing { width: 100%; --s-land-bg: var(--s-card); }
.store .s-landing * { box-sizing: border-box; }

/* ── Shared skeleton (defaults; variants override colours/shape/type) ─────── */
.store .s-landing {
  --sl-accent: var(--accent);
  --sl-ink: var(--s-ink);
  --sl-ink-2: var(--s-ink-2);
  --sl-card: #ffffff;
  --sl-line: var(--s-line);
  --sl-radius: 14px;
  --sl-maxw: 1080px;
  background: var(--s-land-bg);
  color: var(--sl-ink);
}

/* Hero */
.store .s-landing .sl-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 0; min-height: 380px; display: flex; color: #fff;
  background: linear-gradient(135deg, #2a241d, #14110d);
}
.store .s-landing .sl-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.store .s-landing .sl-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,12,9,.35) 0%, rgba(15,12,9,.55) 60%, rgba(15,12,9,.82) 100%);
}
.store .s-landing .sl-hero-inner {
  position: relative; z-index: 2; margin: auto; max-width: 760px;
  padding: 72px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.store .s-landing .sl-logo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.6); background: rgba(255,255,255,.12);
}
.store .s-landing .sl-kicker {
  margin: 0; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.82); font-weight: 600;
}
.store .s-landing .sl-headline {
  margin: 0; font-family: var(--serif); font-size: clamp(34px, 6vw, 60px);
  font-weight: 600; line-height: 1.05; letter-spacing: -.01em;
}
.store .s-landing .sl-sub {
  margin: 0; font-size: clamp(16px, 2.4vw, 20px); color: rgba(255,255,255,.92); max-width: 54ch;
}
.store .s-landing .sl-cta {
  display: inline-block; margin-top: 8px; padding: 14px 30px; border-radius: 999px;
  background: var(--sl-accent); color: #fff; font-weight: 700; font-size: 15px;
  letter-spacing: .01em; border: 2px solid var(--sl-accent); cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.store .s-landing .sl-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.store .s-landing .sl-cta.ghost {
  background: transparent; color: var(--sl-accent); border-color: var(--sl-accent);
}
.store .s-landing .sl-hero .sl-cta.ghost { color: #fff; border-color: rgba(255,255,255,.7); }

/* Sections */
.store .s-landing .sl-section {
  max-width: var(--sl-maxw); margin: 0 auto; padding: 56px 24px;
}
.store .s-landing .sl-h2 {
  margin: 0 0 28px; text-align: center; font-family: var(--serif);
  font-size: clamp(26px, 4vw, 38px); font-weight: 600; color: var(--sl-ink);
}
.store .s-landing .sl-center { text-align: center; margin-top: 28px; }

/* Featured dishes */
.store .s-landing .sl-dishes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px;
}
.store .s-landing .sl-dish {
  background: var(--sl-card); border: 1px solid var(--sl-line); border-radius: var(--sl-radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.store .s-landing .sl-dish-img { aspect-ratio: 4/3; background: var(--s-line); overflow: hidden; }
.store .s-landing .sl-dish-img img { width: 100%; height: 100%; object-fit: cover; }
.store .s-landing .sl-dish-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.store .s-landing .sl-dish-body h3 { margin: 0; font-size: 18px; font-weight: 650; }
.store .s-landing .sl-dish-body p { margin: 0; color: var(--sl-ink-2); font-size: 14px; line-height: 1.5; }
.store .s-landing .sl-dish-foot { margin-top: auto; padding-top: 6px; }
.store .s-landing .sl-price { font-weight: 700; color: var(--sl-accent); font-size: 16px; }

/* Promos */
.store .s-landing .sl-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
}
.store .s-landing .sl-card {
  position: relative; background: var(--sl-card); border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius); padding: 26px 22px; text-align: center;
}
.store .s-landing .sl-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 650; }
.store .s-landing .sl-card p { margin: 0; color: var(--sl-ink-2); font-size: 14px; line-height: 1.5; }
.store .s-landing .sl-badge {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px;
  background: var(--sl-accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .03em;
}

/* Events */
.store .s-landing .sl-events { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; }
.store .s-landing .sl-events li {
  display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--sl-line); align-items: baseline;
}
.store .s-landing .sl-events li:last-child { border-bottom: 0; }
.store .s-landing .sl-events time {
  flex: 0 0 auto; min-width: 64px; font-weight: 700; color: var(--sl-accent);
  font-size: 14px; letter-spacing: .03em; text-transform: uppercase;
}
.store .s-landing .sl-events strong { display: block; font-size: 17px; }
.store .s-landing .sl-events p { margin: 4px 0 0; color: var(--sl-ink-2); font-size: 14px; }

/* Gallery */
.store .s-landing .sl-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.store .s-landing .sl-gallery figure { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--sl-radius); background: var(--s-line); }
.store .s-landing .sl-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.store .s-landing .sl-gallery figure:hover img { transform: scale(1.05); }

/* About */
.store .s-landing .sl-about { text-align: center; }
.store .s-landing .sl-about-text {
  max-width: 64ch; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--sl-ink-2);
}

/* Contact / hours / locations */
.store .s-landing .sl-locs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px;
}
.store .s-landing .sl-loc {
  background: var(--sl-card); border: 1px solid var(--sl-line); border-radius: var(--sl-radius); padding: 22px 22px;
}
.store .s-landing .sl-loc h3 { margin: 0 0 8px; font-size: 19px; font-weight: 650; }
.store .s-landing .sl-loc-addr, .store .s-landing .sl-loc-phone { margin: 0 0 4px; color: var(--sl-ink-2); font-size: 14px; }
.store .s-landing .sl-hours { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; }
.store .s-landing .sl-hours th { text-align: left; font-weight: 600; color: var(--sl-ink-2); padding: 3px 0; width: 50%; }
.store .s-landing .sl-hours td { text-align: right; color: var(--sl-ink); padding: 3px 0; }

/* Alternating section bg for rhythm (shared) */
.store .s-landing .sl-promos, .store .s-landing .sl-about, .store .s-landing .sl-contact {
  max-width: 100%;
}
.store .s-landing .sl-promos > *, .store .s-landing .sl-about > *, .store .s-landing .sl-contact > * {
  max-width: var(--sl-maxw); margin-left: auto; margin-right: auto;
}

@media (max-width: 600px) {
  .store .s-landing .sl-hero-inner { padding: 56px 20px; }
  .store .s-landing .sl-section { padding: 40px 18px; }
}

/* ── CLASSIC: clean neutral, light, restrained ───────────────────────────── */
.store .s-land-classic { --sl-card: #ffffff; --sl-line: #e7e3da; --s-land-bg: #fbf9f5; }
.store .s-land-classic .sl-hero { background: linear-gradient(135deg, #353029, #1d1916); }
.store .s-land-classic .sl-promos { background: #f3efe7; padding-top: 56px; padding-bottom: 56px; }

/* ── BOLD: full-bleed dark, vibrant accent, oversized type ────────────────── */
.store .s-land-bold {
  --s-land-bg: #0e0e10; --sl-ink: #f5f5f7; --sl-ink-2: #b6b6bd;
  --sl-card: #1a1a1f; --sl-line: #2c2c34; --sl-radius: 10px;
}
.store .s-land-bold .sl-hero { background: linear-gradient(135deg, #1a1a22, #000); min-height: 460px; }
.store .s-land-bold .sl-headline { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.store .s-land-bold .sl-h2 { font-family: var(--font); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.store .s-land-bold .sl-kicker { color: var(--sl-accent); }
.store .s-land-bold .sl-cta { border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }
.store .s-land-bold .sl-dish-body h3, .store .s-land-bold .sl-card h3, .store .s-land-bold .sl-loc h3 { color: #fff; }
.store .s-land-bold .sl-hours td { color: #f5f5f7; }
.store .s-land-bold .sl-promos { background: #141417; }

/* ── FRESH: light, airy, natural green ───────────────────────────────────── */
.store .s-land-fresh {
  --sl-accent: #2f9e44; --s-land-bg: #f4faf2; --sl-ink: #1f3a22;
  --sl-ink-2: #5a7259; --sl-card: #ffffff; --sl-line: #d9ead4; --sl-radius: 20px;
}
.store .s-land-fresh .sl-hero { background: linear-gradient(135deg, #2f6b3a, #18331d); min-height: 360px; }
.store .s-land-fresh .sl-headline { font-family: var(--serif); }
.store .s-land-fresh .sl-cta { background: #2f9e44; border-color: #2f9e44; }
.store .s-land-fresh .sl-promos { background: #e6f3e1; }
.store .s-land-fresh .sl-dish, .store .s-land-fresh .sl-card, .store .s-land-fresh .sl-loc { box-shadow: 0 8px 24px -16px rgba(47,158,68,.4); }

/* ── ELEGANT: dark, serif, fine-dining gold ──────────────────────────────── */
.store .s-land-elegant {
  --sl-accent: #c9a86a; --s-land-bg: #14110d; --sl-ink: #efe7d6;
  --sl-ink-2: #b3a890; --sl-card: #1d1812; --sl-line: #322a1f; --sl-radius: 2px;
}
.store .s-land-elegant .sl-hero { background: linear-gradient(135deg, #221b12, #0c0a07); min-height: 480px; }
.store .s-land-elegant .sl-headline { font-family: var(--serif); font-weight: 500; font-style: italic; }
.store .s-land-elegant .sl-kicker { color: #c9a86a; letter-spacing: .3em; }
.store .s-land-elegant .sl-h2 { font-family: var(--serif); font-weight: 500; }
.store .s-land-elegant .sl-h2::after {
  content: ""; display: block; width: 48px; height: 1px; margin: 14px auto 0;
  background: #c9a86a;
}
.store .s-land-elegant .sl-cta { background: transparent; color: #c9a86a; border-color: #c9a86a; border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; font-size: 13px; }
.store .s-land-elegant .sl-cta:hover { background: #c9a86a; color: #14110d; }
.store .s-land-elegant .sl-dish-body h3, .store .s-land-elegant .sl-card h3, .store .s-land-elegant .sl-loc h3 { font-family: var(--serif); color: #efe7d6; }
.store .s-land-elegant .sl-hours td { color: #efe7d6; }
.store .s-land-elegant .sl-price { color: #c9a86a; }
.store .s-land-elegant .sl-badge { background: #c9a86a; color: #14110d; }

/* ── STREET: playful, bright, rounded, food-truck ────────────────────────── */
.store .s-land-street {
  --sl-accent: #ff5722; --s-land-bg: #fff7e6; --sl-ink: #2b2118;
  --sl-ink-2: #6e5a44; --sl-card: #ffffff; --sl-line: #ffe0b2; --sl-radius: 26px;
}
.store .s-land-street .sl-hero { background: linear-gradient(135deg, #ff7043, #ff5722); min-height: 360px; }
.store .s-land-street .sl-headline { font-family: var(--font); font-weight: 800; letter-spacing: -.02em; }
.store .s-land-street .sl-h2 { font-family: var(--font); font-weight: 800; }
.store .s-land-street .sl-cta { background: #ffca28; color: #2b2118; border-color: #2b2118; border-width: 3px; border-radius: 999px; box-shadow: 4px 4px 0 #2b2118; }
.store .s-land-street .sl-cta:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #2b2118; }
.store .s-land-street .sl-cta.ghost { background: #fff; color: #2b2118; }
.store .s-land-street .sl-hero .sl-cta.ghost { background: rgba(255,255,255,.18); color: #fff; border-color: #fff; box-shadow: none; }
.store .s-land-street .sl-dish, .store .s-land-street .sl-card, .store .s-land-street .sl-loc { border-width: 2px; border-color: #2b2118; }
.store .s-land-street .sl-promos { background: #ffe0b2; }
.store .s-land-street .sl-badge { background: #ff5722; transform: rotate(-3deg); }

/* ==========================================================================
   ADMIN — landing template-picker cards + editor bits (scoped: .landing-pick)
   ========================================================================== */
.landing-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.landing-pick .lp-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  border: 2px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--bg);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.landing-pick .lp-card:hover { border-color: var(--ink-3); }
.landing-pick .lp-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,.14); }
.landing-pick .lp-card input { position: absolute; opacity: 0; pointer-events: none; }
.landing-pick .lp-prev {
  display: block; height: 78px; border-radius: 8px; overflow: hidden; padding: 7px;
  display: flex; flex-direction: column; gap: 5px; background: #fbf9f5;
}
.landing-pick .lp-bar { height: 8px; border-radius: 3px; background: #ccc4b5; width: 60%; }
.landing-pick .lp-hero { flex: 1; border-radius: 4px; background: linear-gradient(135deg, #353029, #1d1916); }
.landing-pick .lp-row { display: flex; gap: 4px; }
.landing-pick .lp-row span { flex: 1; height: 14px; border-radius: 3px; background: #e4ddd0; }
.landing-pick .lp-name { font-weight: 650; font-size: 14px; }
.landing-pick .lp-blurb { font-size: 11px; }
.landing-pick .lp-key { font-family: ui-monospace, monospace; font-size: 10px; opacity: .6; }
/* mini-preview palettes per template */
.landing-pick .lp-bold .lp-prev { background: #16161a; } .landing-pick .lp-bold .lp-hero { background: #000; } .landing-pick .lp-bold .lp-row span { background: #2c2c34; } .landing-pick .lp-bold .lp-bar { background: #ff3b30; }
.landing-pick .lp-fresh .lp-prev { background: #eaf5e6; } .landing-pick .lp-fresh .lp-hero { background: linear-gradient(135deg,#2f6b3a,#18331d); } .landing-pick .lp-fresh .lp-row span { background: #cfe8c8; } .landing-pick .lp-fresh .lp-bar { background: #2f9e44; }
.landing-pick .lp-elegant .lp-prev { background: #1d1812; } .landing-pick .lp-elegant .lp-hero { background: linear-gradient(135deg,#221b12,#0c0a07); } .landing-pick .lp-elegant .lp-row span { background: #322a1f; } .landing-pick .lp-elegant .lp-bar { background: #c9a86a; }
.landing-pick .lp-street .lp-prev { background: #fff1d6; } .landing-pick .lp-street .lp-hero { background: linear-gradient(135deg,#ff7043,#ff5722); border-radius: 12px; } .landing-pick .lp-street .lp-row span { background: #ffe0b2; border-radius: 7px; } .landing-pick .lp-street .lp-bar { background: #ffca28; }

.lp-switch { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 6px 0; }
.lp-switch input { margin-top: 3px; }
.lp-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 16px; }
.lp-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.lp-feat { display: flex; gap: 8px; align-items: center; padding: 5px 0; cursor: pointer; }
.lp-rep { border: 1px solid var(--border-2); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.lp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.lp-gal { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.lp-gal img { width: 100%; height: 100%; object-fit: cover; }
.lp-gal-rm { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 999px; cursor: pointer; }

/* ── Trial countdown banner (admin shell) ─────────────────────────────────── */
.trial-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:16px 24px 0;padding:12px 16px;border-radius:var(--radius);
  background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;font-size:14px;line-height:1.4}
.trial-banner .btn.pri{margin-left:auto;white-space:nowrap}
.trial-banner strong{font-weight:650}
.trial-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--warn);
  box-shadow:0 0 0 4px rgba(255,159,10,.18)}
@media (max-width:640px){.trial-banner{margin:12px 12px 0}.trial-banner .btn.pri{margin-left:0}}

/* ── Landing editor: live wireframe preview ───────────────────────────────── */
.lp-layout{display:flex;gap:24px;align-items:flex-start}
.lp-layout .lp-form{flex:1 1 auto;min-width:0}
.lp-preview-wrap{flex:0 0 300px;width:300px;position:sticky;top:74px}
.lp-pv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.lp-pv-head strong{font-size:14px}
.lp-pv-head .muted{text-transform:capitalize}
.lp-pv-note{margin-bottom:10px;line-height:1.4}
.lp-device{border:1px solid var(--border);border-radius:18px;background:var(--lp-bg,#fff);
  padding:10px;max-height:72vh;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.lp-off-msg{display:none;text-align:center;padding:48px 16px;color:var(--ink-2);line-height:1.5}
.lp-device.is-off .lp-off-msg{display:block}
.lp-device.is-off .lp-screen{display:none}
.lp-screen{display:flex;flex-direction:column;gap:8px}
.lp-sec{position:relative;border:1px dashed var(--border);border-radius:10px;padding:10px 10px 12px;background:var(--surface-2,#fbfbfd);transition:opacity .15s}
.lp-sec.is-off{opacity:.38}
.lp-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink-2);margin-bottom:8px;text-transform:uppercase}
.lp-tag em{font-style:normal;color:var(--lp-accent,#0071e3);font-weight:700}
.lp-sec.is-off .lp-tag::after{content:' · hidden';color:var(--bad);font-weight:600}
/* Hero box */
.lp-sec-hero{border-style:solid;border-color:var(--lp-accent,#0071e3);background:linear-gradient(180deg,color-mix(in srgb,var(--lp-accent,#0071e3) 14%,#fff),#fff);padding:16px 12px 18px;text-align:center}
.lp-hero-h{font-size:15px;font-weight:800;line-height:1.25;color:var(--ink);margin:2px 0 4px;word-break:break-word}
.lp-hero-sub{font-size:11px;color:var(--ink-2);line-height:1.3;margin-bottom:10px;min-height:0}
.lp-hero-sub:empty{display:none}
.lp-cta{display:inline-block;background:var(--lp-accent,#0071e3);color:#fff;font-size:11px;font-weight:700;padding:6px 14px;border-radius:999px}
/* placeholder blocks inside sections */
.lp-cards{display:flex;gap:6px}
.lp-cards i{flex:1;height:38px;border-radius:6px;background:var(--border);display:block}
.lp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.lp-grid i{aspect-ratio:1;border-radius:5px;background:var(--border);display:block}
.lp-lines b{display:block;height:7px;border-radius:4px;background:var(--border);margin:6px 0}
.lp-lines b.short{width:55%}
/* per-template hero accents (dark themes) */
.lp-device[data-tpl="bold"] .lp-sec-hero,
.lp-device[data-tpl="elegant"] .lp-sec-hero{background:#14181f;border-color:var(--lp-accent,#0071e3)}
.lp-device[data-tpl="bold"] .lp-hero-h,
.lp-device[data-tpl="elegant"] .lp-hero-h{color:#fff}
.lp-device[data-tpl="elegant"] .lp-hero-h{font-family:Georgia,'Times New Roman',serif;font-weight:700}
@media (max-width:1080px){
  .lp-layout{flex-direction:column}
  .lp-preview-wrap{position:static;width:100%;flex:none}
  .lp-device{max-height:none}
}