/* ═══════════════════════════════════════════════════════════════════
   theme.css — light / dark palettes + visual refresh
   ───────────────────────────────────────────────────────────────────
   Loaded AFTER style.css and deliberately additive: it only redefines
   variables and restyles existing selectors. No markup or JS is
   touched, so every handler in app.js keeps working exactly as before.

   style.css already drives most surfaces through custom properties
   (200+ var() uses), so re-pointing those is what does the heavy
   lifting. The handful of hard-coded whites in style.css are caught by
   the explicit overrides further down.

   Palettes, as specified:
     light → white base, #00312f as the brand/ink colour
     dark  → black base, orange accent, white text
   ═══════════════════════════════════════════════════════════════════ */

/* ── LIGHT ───────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --brand:      #00312f;
  --brand-soft: #e6efee;
  --brand-ink:  #ffffff;
  --accent:     #00312f;

  --red:  #00312f;
  --red2: #014a46;
  --dark: #00312f;
  --gray: #5b6b6a;
  --light:#f4f7f6;
  --white:#ffffff;
  --border: rgba(0,49,47,.10);
  --border2:rgba(0,49,47,.16);

  --bg:    #f4f7f6;
  --bg2:   #ffffff;
  --card:  #ffffff;
  --card2: #f4f7f6;
  --off:   #00312f;
  --muted: #5b6b6a;
  --neon:  #00312f;
  --neon2: #014a46;
  --gold:  #00312f;
  --blue:  #00312f;
  --faint: rgba(0,49,47,.05);

  --text:      #07201f;
  --text-soft: #5b6b6a;

  --glow-r: 0 6px 22px rgba(0,49,47,.22);
  --glow-p: 0 6px 22px rgba(0,49,47,.14);
  --shadow: 0 2px 14px rgba(0,49,47,.07);
  --shadow2:0 10px 34px rgba(0,49,47,.12);

  --grad-main: linear-gradient(135deg,#00312f,#015450);
  --grad-hero: linear-gradient(135deg,#00312f,#0a4a46);
  --grad-soft: linear-gradient(135deg,#f2f8f7,#e9f2f1);

  --r:  12px;
  --r2: 20px;
}

/* ── DARK ────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --brand:      #ff8a1f;
  --brand-soft: #2a1a08;
  --brand-ink:  #0d0d0d;
  --accent:     #ff8a1f;

  --red:  #ff8a1f;
  --red2: #ff6a00;
  --dark: #ffffff;          /* "dark" is used as the INK colour upstream */
  --gray: #a3a3a3;
  --light:#161616;
  --white:#111111;          /* surfaces that upstream paints white */
  --border: rgba(255,255,255,.10);
  --border2:rgba(255,255,255,.18);

  --bg:    #0b0b0b;
  --bg2:   #111111;
  --card:  #151515;
  --card2: #1c1c1c;
  --off:   #ffffff;
  --muted: #a3a3a3;
  --neon:  #ff8a1f;
  --neon2: #ff6a00;
  --gold:  #ff8a1f;
  --blue:  #ffffff;
  --faint: rgba(255,138,31,.08);

  --text:      #f5f5f5;
  --text-soft: #a3a3a3;

  --glow-r: 0 6px 24px rgba(255,138,31,.30);
  --glow-p: 0 6px 24px rgba(255,138,31,.18);
  --shadow: 0 2px 16px rgba(0,0,0,.55);
  --shadow2:0 12px 40px rgba(0,0,0,.65);

  --grad-main: linear-gradient(135deg,#ff8a1f,#ff6a00);
  --grad-hero: linear-gradient(135deg,#0b0b0b,#1a1a1a);
  --grad-soft: linear-gradient(135deg,#171717,#1f1508);
}

/* ── Base ────────────────────────────────────────────────────────── */
html { color-scheme: light; }
[data-theme="dark"] html,
html[data-theme="dark"] { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--text);
  transition: background .28s ease, color .28s ease;
}

/* style.css paints a number of surfaces #fff directly. Rather than edit
   that file (and risk the layout), re-point them here. */
[data-theme="dark"] .nav,
[data-theme="dark"] .store-bar,
[data-theme="dark"] .ms,
[data-theme="dark"] .ic,
[data-theme="dark"] .cat-tab,
[data-theme="dark"] .sheet,
[data-theme="dark"] .pm-body,
[data-theme="dark"] .store-popup,
[data-theme="dark"] .cart-card,
[data-theme="dark"] .sum-card,
[data-theme="dark"] .ov-card,
[data-theme="dark"] .fi,
[data-theme="dark"] .items-list,
[data-theme="dark"] .addon-list { background: var(--card); color: var(--text); }

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--card2);
  color: var(--text);
  border-color: var(--border2);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6b6b6b; }

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav {
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.nav-name { color: var(--text); letter-spacing: -.01em; }
.nav-tagline { color: var(--text-soft); }
.cart-btn {
  background: var(--grad-main);
  color: var(--brand-ink);
  border-radius: 999px;
  box-shadow: var(--glow-r);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cart-btn:hover { transform: translateY(-1px); }

/* ── Theme toggle (injected by theme.js) ─────────────────────────── */
.theme-toggle {
  position: relative;
  width: 58px; height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--card2);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background .25s ease, border-color .25s ease;
}
.theme-toggle .tt-knob {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-main);
  display: flex; align-items: center; justify-content: center;
  transition: left .3s var(--spring), background .25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
[data-theme="dark"] .theme-toggle .tt-knob { left: 31px; }
.theme-toggle .tt-knob svg { width: 13px; height: 13px; stroke: var(--brand-ink); fill: none; stroke-width: 2.2; }
.theme-toggle:hover { border-color: var(--brand); }

/* ── Hero slider ─────────────────────────────────────────────────── */
.hero { border-radius: var(--r2); overflow: hidden; }
.hero-slide img { transition: transform 8s ease-out; }
.hero-slide::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 100%);
}
.hero-content { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-block;
  background: var(--grad-main);
  color: var(--brand-ink);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.hero-title { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5); letter-spacing: -.02em; }
.hero-sub   { color: rgba(255,255,255,.88); }
.hero-btn-primary { background: var(--grad-main); color: var(--brand-ink); border: none; box-shadow: var(--glow-r); }
.hero-btn-ghost   { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(8px); }
.hero-btn { border-radius: 999px; font-weight: 700; transition: transform .18s var(--ease); }
.hero-btn:hover { transform: translateY(-2px); }
.hero-arr {
  background: color-mix(in srgb, var(--bg2) 75%, transparent);
  color: var(--text); border: 1px solid var(--border2);
  backdrop-filter: blur(10px); border-radius: 50%;
}
.hero-arr:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.hdot { background: rgba(255,255,255,.45); transition: width .3s var(--ease), background .3s; }
.hdot.active { background: var(--brand); width: 26px; border-radius: 999px; }
.hero-price-pill { background: var(--grad-main); color: var(--brand-ink); border-radius: 999px; box-shadow: var(--glow-r); }

/* ── Ticker ──────────────────────────────────────────────────────── */
.ticker { background: var(--brand); color: var(--brand-ink); }
[data-theme="dark"] .ticker { background: var(--brand); color: #0d0d0d; }

/* ── Store bar ───────────────────────────────────────────────────── */
.store-bar {
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  background: var(--card);
}
.store-name { color: var(--text); }
.store-info-btn {
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--border2); border-radius: 999px; font-weight: 700;
}
.store-info-btn:hover { background: var(--brand); color: var(--brand-ink); }

/* ── Category rail ───────────────────────────────────────────────── */
.cat-rail-inner { scrollbar-width: none; }
.cat-rail-inner::-webkit-scrollbar { display: none; }
.cat-tab {
  border: 1px solid var(--border);
  border-radius: var(--r2);
  background: var(--card);
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s, background .2s;
}
.cat-tab:hover { transform: translateY(-3px); box-shadow: var(--shadow2); border-color: var(--brand); }
.cat-tab.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--glow-p);
}
[data-theme="dark"] .cat-tab.active { background: var(--brand-soft); }
.cat-tab .cat-label { color: var(--text); font-weight: 700; }
.cat-tab.active .cat-label { color: var(--brand); }
.cat-thumb { border-radius: 14px; overflow: hidden; background: var(--card2); }
.cat-carousel-arrow {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border2); border-radius: 50%;
  box-shadow: var(--shadow);
}
.cat-carousel-arrow:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* ── Category section headers (the "banners") ────────────────────── */
.ms-head {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--border);
}
.ms-accent { background: var(--grad-main); border-radius: 999px; }
.ms-count { color: var(--text-soft); background: var(--card2); border-radius: 999px; padding: 3px 10px; font-size: .68rem; }

/* ── Item cards ──────────────────────────────────────────────────── */
.ic {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.ic:hover { transform: translateY(-3px); box-shadow: var(--shadow2); border-color: var(--brand); }
.ic-name  { color: var(--text); font-weight: 700; }
.ic-desc  { color: var(--text-soft); }
.ic-price { color: var(--brand); font-weight: 800; }
[data-theme="dark"] .ic-price { color: var(--accent); }
.ic-addbtn {
  background: var(--grad-main); color: var(--brand-ink);
  border: none; border-radius: 50%;
  box-shadow: var(--glow-r);
  transition: transform .18s var(--spring);
}
.ic-addbtn:hover { transform: scale(1.12) rotate(90deg); }
.ic-oos { opacity: .5; filter: grayscale(.7); }

/* ── Buttons / sheets / overlays ─────────────────────────────────── */
.btn-neon { background: var(--grad-main); color: var(--brand-ink); box-shadow: var(--glow-r); border: none; }
.btn-neon:hover { filter: brightness(1.06); }
.overlay { background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.sheet, .ov-card, .store-popup { border-radius: var(--r2) var(--r2) 0 0; }
.toast-wrap .toast { background: var(--card); color: var(--text); border: 1px solid var(--border2); box-shadow: var(--shadow2); }

/* ── Responsive polish ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { border-radius: 0; }
  .store-bar { border-radius: var(--r); }
}
@media (max-width: 640px) {
  .nav { padding-left: 12px; padding-right: 12px; }
  .nav-tagline { display: none; }
  .theme-toggle { width: 50px; height: 27px; }
  .theme-toggle .tt-knob { width: 19px; height: 19px; }
  [data-theme="dark"] .theme-toggle .tt-knob { left: 28px; }
  .hero-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .cat-tab { border-radius: var(--r); }
}
@media (max-width: 420px) {
  .nav-name { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Someone arriving with reduced-motion turned on should not get the
   8-second hero zoom or the spring easing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero-slide img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   STICKY CATEGORY BAR + CATEGORY BANNERS
   ═══════════════════════════════════════════════════════════════════ */

/* The nav is sticky at 66px tall, so the rail parks directly beneath it
   and stays reachable while the customer scrolls a long menu. */
.cat-carousel {
  position: sticky;
  top: 66px;
  z-index: 800;
  background: var(--bg);
  padding: 10px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
[data-theme="dark"] .cat-carousel { background: color-mix(in srgb, var(--bg) 92%, transparent); }

/* Anchors must clear both sticky bars, or clicking a category scrolls
   the heading underneath them. */
.ms { scroll-margin-top: 150px; }

/* ── Category banner above each section ──────────────────────────── */
.cat-banner {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  border-radius: var(--r2);
  overflow: hidden;
  line-height: 0;
  background: var(--card2);
  box-shadow: var(--shadow);
}
.cat-banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 360;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.cat-banner:hover img { transform: scale(1.03); }

@media (max-width: 640px) {
  .cat-banner { border-radius: var(--r); margin-bottom: 10px; }
  .cat-banner img { aspect-ratio: 16 / 7; }
}

/* ── Mobile: text-only category bar ──────────────────────────────
   Thumbnails eat most of a phone screen and only two categories fit.
   Dropping to text pills shows four or five at a glance, which is what
   the reference layout does. */
@media (max-width: 820px) {
  .cat-carousel {
    top: 60px;
    padding: 0;
    background: var(--brand);
    border-bottom: none;
    border-radius: 0;
  }
  [data-theme="dark"] .cat-carousel { background: #141414; }

  .cat-rail-inner { gap: 0; padding: 0; }

  .cat-tab {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 13px 18px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-width: auto;
    white-space: nowrap;
  }
  .cat-tab:hover { transform: none; box-shadow: none; }

  /* The whole point of this breakpoint. */
  .cat-tab .cat-thumb { display: none !important; }

  .cat-tab .cat-label {
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--brand-ink);
    opacity: .85;
    max-width: none;
    overflow: visible;
  }
  [data-theme="dark"] .cat-tab .cat-label { color: #e8e8e8; }

  .cat-tab.active {
    background: var(--accent);
    box-shadow: none;
  }
  .cat-tab.active .cat-label { color: #0d0d0d; opacity: 1; }
  [data-theme="dark"] .cat-tab.active { background: var(--accent); }
  [data-theme="dark"] .cat-tab.active .cat-label { color: #0d0d0d; }

  .cat-carousel-arrow {
    background: var(--accent);
    color: #0d0d0d;
    border: none;
    border-radius: 0;
    width: 42px;
    box-shadow: none;
  }
  .cat-carousel-arrow:hover { background: var(--accent); color: #0d0d0d; }

  .ms { scroll-margin-top: 118px; }
}

/* ═══════════════════════════════════════════════════════════════════
   REFERENCE LAYOUT — 3-up grid of horizontal cards
   ───────────────────────────────────────────────────────────────────
   The list style stacked one full-width row per item, so a desktop
   screen showed four or five dishes. The reference puts three across,
   image left / text right, which fits roughly twelve in the same space.
   ═══════════════════════════════════════════════════════════════════ */

/* Higher specificity than the inline block in index.php, so the bar
   keeps its offsets even if that block is edited again. */
body .cat-carousel { position: sticky; top: 66px; z-index: 800; }

.main .items-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.main .items-list .ic {
  flex-direction: row-reverse;   /* photo on the left, like the reference */
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.main .items-list .ic .ic-img,
.main .items-list .ic .ic-emoji {
  flex: 0 0 40%;
  max-width: 40%;
  min-height: 100%;
  border-radius: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card2);
}
.main .items-list .ic .ic-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.main .items-list .ic .ic-info {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.main .items-list .ic .ic-bottom { margin-top: auto; }
.main .items-list .ic .ic-name {
  font-size: .98rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px;
}
.main .items-list .ic .ic-desc {
  font-size: .78rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.main .items-list .ic .ic-addbtn {
  width: 34px; height: 34px; font-size: 1rem;
}

@media (max-width: 720px) {
  /* One per row on a phone, exactly as the reference does. */
  .main .items-list { grid-template-columns: 1fr; gap: 10px; }
  .main .items-list .ic .ic-img,
  .main .items-list .ic .ic-emoji { flex-basis: 38%; max-width: 38%; }
  .main .items-list .ic .ic-info { padding: 12px 13px; }
}

/* ═══════════════════════════════════════════════════════════════════
   CATEGORY BAR · DRAWER · LIST CARDS
   ───────────────────────────────────────────────────────────────────
   Two things make this section fussier than it looks:

   1. index.php carries an inline <style> block that loads AFTER this
      file. Equal specificity there wins, so rules below are written as
      `body .x` (and occasionally tighter) to sit above it.
   2. style.css has two rules that actively fight this layout:
        .ic        { display:; }        -> invalid, so .ic is a block
        .ic-addbtn { opacity:0; }       -> only revealed on :hover
      The second is why the cart button never appeared on a phone:
      touch screens have no hover, so it stayed invisible forever.

   Colours follow the store theme, not the reference site's yellow.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bar-bg:         #00312f;
  --bar-ink:        rgba(255,255,255,.82);
  --bar-accent:     #ffffff;   /* active pill + burger + arrow */
  --bar-active-ink: #00312f;
}
[data-theme="dark"] {
  --bar-bg:         #141414;
  --bar-ink:        rgba(255,255,255,.72);
  --bar-accent:     #ff8a1f;
  --bar-active-ink: #0d0d0d;
}

/* ── The bar ─────────────────────────────────────────────────────── */
body .cat-carousel {
  position: sticky; top: 66px; z-index: 800;
  padding: 0; margin: 0;
  background: var(--bar-bg);
  border-bottom: none;
  display: flex; align-items: stretch;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body .cat-carousel .cat-rail { flex: 1 1 auto; min-width: 0; overflow: hidden; background: var(--bar-bg); }
body .cat-carousel .cat-rail-inner { gap: 0; padding: 0; align-items: stretch; background: var(--bar-bg); }

body .cat-carousel .cat-tab {
  flex: 0 0 auto;
  flex-direction: row; align-items: center; gap: 0;
  padding: 0 20px; min-height: 52px; min-width: auto;
  border: none; border-radius: 0; background: transparent;
  box-shadow: none; white-space: nowrap;
}
body .cat-carousel .cat-tab:hover { transform: none; box-shadow: none; background: rgba(255,255,255,.07); }

/* style.css caps .cat-label at 76px and allows word-break, which chops
   a name like "Special Deals" in half. Categories need their full name. */
body .cat-carousel .cat-tab .cat-label {
  font-size: .84rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--bar-ink);
  max-width: none; width: auto; word-break: normal; white-space: nowrap;
  text-align: center; line-height: 1;
}
body .cat-carousel .cat-tab.active { background: var(--bar-accent); box-shadow: none; }
body .cat-carousel .cat-tab.active .cat-label { color: var(--bar-active-ink); }
body .cat-carousel .cat-tab .cat-thumb { display: none !important; }

/* ── Burger + arrows ─────────────────────────────────────────────── */
body .cat-burger {
  display: none;
  width: 54px; flex: 0 0 54px;
  align-items: center; justify-content: center; gap: 4px;
  flex-direction: column;
  background: var(--bar-accent); border: none; cursor: pointer; padding: 0;
}
body .cat-burger span { display: block; height: 2.5px; border-radius: 2px; background: var(--bar-active-ink); }
body .cat-burger span:nth-child(1) { width: 20px; }
body .cat-burger span:nth-child(2) { width: 13px; align-self: flex-start; margin-left: 17px; }
body .cat-burger span:nth-child(3) { width: 20px; }

body .cat-carousel .cat-carousel-arrow {
  position: static; transform: none;
  width: 46px; flex: 0 0 46px; height: auto;
  border: none; border-radius: 0;
  background: var(--bar-accent); color: var(--bar-active-ink);
  box-shadow: none; font-size: 22px;
}
body .cat-carousel .cat-carousel-arrow:hover { background: var(--bar-accent); filter: brightness(.93); }

/* The inline block's `.cat-carousel.has-overflow .cat-carousel-arrow`
   is (0,3,0) and was beating the previous attempt at hiding this. */
body .cat-carousel.has-overflow .cat-carousel-arrow.prev,
body .cat-carousel .cat-carousel-arrow.prev { display: none; }

@media (max-width: 900px) {
  body .cat-carousel { top: 60px; }
  body .cat-burger { display: flex; }
  body .cat-carousel .cat-tab { padding: 0 16px; min-height: 48px; }
  body .cat-carousel .cat-tab .cat-label { font-size: .8rem; }
  .ms { scroll-margin-top: 118px; }
}

/* ── Drawer ──────────────────────────────────────────────────────── */
.cat-drawer { position: fixed; inset: 0; z-index: 1200; }
.cat-drawer[hidden] { display: none; }
.cat-drawer-back { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s ease; }
.cat-drawer.open .cat-drawer-back { opacity: 1; }
.cat-drawer-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 78vh; display: flex; flex-direction: column;
  background: var(--card); border-radius: 18px 18px 0 0;
  transform: translateY(100%); transition: transform .28s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.cat-drawer.open .cat-drawer-panel { transform: none; }
.cat-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; flex-shrink: 0;
  font-family: 'Poppins', sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--brand);
}
[data-theme="dark"] .cat-drawer-head { color: var(--accent); }
.cat-drawer-x { border: none; background: none; cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--text-soft); padding: 0 4px; }
.cat-drawer-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cat-drawer-item {
  display: block; width: 100%; text-align: left;
  padding: 16px 20px; border: none; border-bottom: 1px solid var(--border);
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: .96rem; font-weight: 600; color: var(--text);
}
.cat-drawer-item:hover { background: var(--card2); }
.cat-drawer-item.active { background: var(--bar-bg); color: var(--bar-accent); font-weight: 800; }

/* ── List cards ──────────────────────────────────────────────────── */
body .main .items-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px; background: transparent; border: none; border-radius: 0; overflow: visible;
}
body .main .items-list .ic {
  display: flex; flex-direction: row-reverse; align-items: stretch;
  gap: 0; padding: 10px; overflow: hidden;
  background: var(--card);
  border: 2px solid transparent;
  border-radius: 16px; box-shadow: var(--shadow);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
body .main .items-list .ic::before,
body .main .items-list .ic::after { display: none; }
body .main .items-list .ic:hover { background: var(--card); border-color: var(--bar-bg); }
[data-theme="dark"] body .main .items-list .ic:hover { border-color: var(--accent); }

/* Border on the item the customer just picked — set by index.php. */
body .main .items-list .ic.is-selected {
  border-color: var(--bar-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar-bg) 14%, transparent), var(--shadow2);
}
[data-theme="dark"] body .main .items-list .ic.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,138,31,.18), var(--shadow2);
}

body .main .items-list .ic .ic-img,
body .main .items-list .ic .ic-emoji {
  width: 38%; flex: 0 0 38%; height: auto; min-height: 120px;
  border-radius: 12px; overflow: hidden; border: none; background: var(--card2);
}
body .main .items-list .ic .ic-img img { width: 100%; height: 100%; object-fit: cover; }
body .main .items-list .ic .ic-info {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; padding: 6px 4px 4px 14px;
}
body .main .items-list .ic .ic-name { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
body .main .items-list .ic .ic-desc {
  font-size: .82rem; line-height: 1.5; color: var(--text-soft);
  -webkit-line-clamp: 2; margin-bottom: 10px;
}
body .main .items-list .ic .ic-bottom {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body .main .items-list .ic .ic-price { font-size: 1.02rem; font-weight: 800; color: var(--bar-bg); }
[data-theme="dark"] body .main .items-list .ic .ic-price { color: var(--accent); }

/* ── Cart button ─────────────────────────────────────────────────
   Forced visible: style.css hides it at opacity 0 and only brings it
   back on :hover, which never fires on a touch screen. The glyph is
   replaced with a cart drawn in CSS so no markup has to change. */
body .main .items-list .ic .ic-addbtn,
body .ic .ic-addbtn {
  opacity: 1 !important;
  transform: none !important;
  width: 38px; height: 38px; flex: 0 0 38px;
  background: var(--bar-bg); color: var(--bar-accent);
  box-shadow: none; font-size: 0;                /* hides the "+" glyph */
  position: relative;
}
[data-theme="dark"] body .ic .ic-addbtn { background: var(--accent); color: #0d0d0d; }
body .ic .ic-addbtn::before {
  content: '';
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--cart-svg) center / contain no-repeat;
          mask: var(--cart-svg) center / contain no-repeat;
}
:root {
  --cart-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6'/></svg>");
}
body .ic .ic-addbtn:hover { transform: scale(1.08) !important; }

@media (max-width: 720px) {
  body .main .items-list { grid-template-columns: 1fr; gap: 10px; }
  body .main .items-list .ic .ic-img,
  body .main .items-list .ic .ic-emoji { width: 36%; flex-basis: 36%; min-height: 106px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION LAYER  (pairs with assets/js/fx.js)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fly to cart ─────────────────────────────────────────────────── */
.fly-ghost {
  position: fixed; z-index: 3000; pointer-events: none;
  border-radius: 14px; object-fit: cover;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  will-change: transform, opacity;
}
@keyframes cartBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16); }
  60%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
.cart-btn.cart-bump { animation: cartBump .6s var(--spring); }

/* ── Toasts ──────────────────────────────────────────────────────── */
.toast-wrap {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 2600; display: flex; flex-direction: column; gap: 9px;
  width: min(420px, calc(100vw - 24px)); pointer-events: none;
}
.fx-toast {
  position: relative; overflow: hidden; pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; border-radius: 14px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border2);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  font-size: .86rem; font-weight: 600; line-height: 1.45;
  animation: fxToastIn .38s var(--spring) both;
}
@keyframes fxToastIn  { from { opacity:0; transform: translateY(18px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes fxToastOut { to   { opacity:0; transform: translateY(10px) scale(.96); } }
.fx-toast.out { animation: fxToastOut .3s ease forwards; }

.fx-toast-ico {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.fx-toast-ico svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fx-ok  .fx-toast-ico { background: #16a34a; }
.fx-err .fx-toast-ico { background: #dc2626; }
.fx-inf .fx-toast-ico { background: var(--bar-bg); }
[data-theme="dark"] .fx-inf .fx-toast-ico { background: var(--accent); }
.fx-toast-msg { flex: 1; min-width: 0; }

/* Progress bar so the toast visibly counts itself down. */
.fx-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; }
.fx-ok  .fx-toast-bar { background: #16a34a; }
.fx-err .fx-toast-bar { background: #dc2626; }
.fx-inf .fx-toast-bar { background: var(--bar-bg); }
.fx-toast-bar { animation: fxBar 3.2s linear forwards; }
@keyframes fxBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Reveal on scroll ────────────────────────────────────────────── */
.fx-reveal { opacity: 0; transform: translateY(16px); }
.fx-reveal.fx-in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease) var(--fx-delay, 0ms),
              transform .5s var(--ease) var(--fx-delay, 0ms);
}

/* ── Sheets / overlays ───────────────────────────────────────────── */
.overlay { background: rgba(8,12,12,.6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.overlay.open .sheet,
.overlay.open .ov-card,
.overlay.open .store-popup { animation: fxSheetIn .36s var(--spring) both; }
@keyframes fxSheetIn { from { opacity:0; transform: translateY(34px) scale(.985); } to { opacity:1; transform:none; } }

.sheet, .ov-card, .store-popup {
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--border);
  box-shadow: 0 -14px 50px rgba(0,0,0,.28);
}
/* A grab handle reads as "this can be dragged/dismissed". */
.sheet::before, .ov-card::before {
  content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 4px; border-radius: 999px;
  background: var(--border2); pointer-events: none; z-index: 5;
}

/* ── Product sheet ───────────────────────────────────────────────── */
#pm-hero { position: relative; }
#pm-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.34));
}
.pm-name  { font-weight: 800; letter-spacing: -.015em; }
.pm-price { color: var(--bar-bg); font-weight: 800; }
[data-theme="dark"] .pm-price { color: var(--accent); }
.pm-add-btn {
  border-radius: 999px; font-weight: 800; letter-spacing: .01em;
  background: var(--bar-bg); color: #fff; border: none;
  box-shadow: 0 8px 24px rgba(0,49,47,.30);
  transition: transform .18s var(--spring), filter .18s;
}
[data-theme="dark"] .pm-add-btn { background: var(--accent); color: #0d0d0d; box-shadow: 0 8px 24px rgba(255,138,31,.32); }
.pm-add-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
.pm-add-btn:active { transform: scale(.97); }

.qb {
  border-radius: 50%; border: 1.5px solid var(--border2);
  background: var(--card2); color: var(--text);
  transition: transform .15s var(--spring), background .15s, border-color .15s;
}
.qb:hover { border-color: var(--bar-bg); background: var(--card); }
.qb:active { transform: scale(.88); }
.qb.add { background: var(--bar-bg); color: #fff; border-color: var(--bar-bg); }
[data-theme="dark"] .qb.add { background: var(--accent); color: #0d0d0d; border-color: var(--accent); }

/* ── Addon rows ──────────────────────────────────────────────────── */
.addon-list label, .addon-row {
  border-radius: 12px; border: 1px solid var(--border);
  transition: border-color .18s, background .18s, transform .12s var(--ease);
}
.addon-list label:hover, .addon-row:hover { border-color: var(--bar-bg); background: var(--card2); }
.addon-list label:active, .addon-row:active { transform: scale(.995); }

/* ── Rail: hide the scrollbar now that it moves itself ───────────── */
body .cat-carousel .cat-rail-inner { scroll-behavior: smooth; }

/* ── Buttons feel ────────────────────────────────────────────────── */
.btn, .hero-btn, .cart-btn, .ic-addbtn, .store-info-btn { transition: transform .16s var(--spring), filter .16s, background .18s; }
.btn:active, .hero-btn:active, .cart-btn:active, .store-info-btn:active { transform: scale(.97); }
.ic-addbtn:active { transform: scale(.9) !important; }

@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1; transform: none; }
  .fly-ghost { display: none; }
  .fx-toast, .overlay.open .sheet, .overlay.open .ov-card { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   POPUPS — product sheet & order-type sheet
   ═══════════════════════════════════════════════════════════════════ */

.overlay { background: rgba(6,14,14,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.overlay.open .modal,
.overlay.open .sheet,
.overlay.open .ov-card { animation: fxSheetIn .36s var(--spring) both; }

#ov-prod .modal,
#ov-ot .modal,
.overlay .modal {
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 26px 70px rgba(0,0,0,.32);
  /* NOT overflow:hidden. style.css gives .modal overflow-y:auto so tall
     content can scroll; clipping it here made everything below the
     delivery map unreachable — the Continue button included. */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 90vh;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* The sticky header needs a backdrop while content scrolls under it. */
#ov-ot .m-head { position: sticky; top: 0; z-index: 3; }

/* Keep the primary action reachable without hunting for it. */
#ov-ot .mbody { padding-bottom: 1.2rem; }
@media (max-width: 640px) {
  #ov-prod .modal, #ov-ot .modal, .overlay .modal { max-height: 92vh; }
}
@media (max-width: 640px) {
  .overlay .modal { border-radius: 22px 22px 0 0; }
}

/* Close button: a floating disc over the photo reads better than a
   square tucked into a white strip. */
.m-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--card); color: var(--text-soft);
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s var(--spring), background .16s, color .16s;
}
.m-close:hover { background: var(--bar-bg); color: #fff; border-color: var(--bar-bg); transform: rotate(90deg); }
[data-theme="dark"] .m-close:hover { background: var(--accent); color: #0d0d0d; border-color: var(--accent); }

/* ── Order-type sheet ────────────────────────────────────────────── */
#ov-ot .ot-card, #ov-ot .ot-opt {
  border-radius: 16px; border: 2px solid var(--border);
  transition: border-color .2s var(--ease), background .2s, transform .16s var(--ease);
}
#ov-ot .ot-card:hover, #ov-ot .ot-opt:hover { transform: translateY(-2px); border-color: var(--bar-bg); }
#ov-ot .ot-card.sel, #ov-ot .ot-opt.sel,
#ov-ot .ot-card.active, #ov-ot .ot-opt.active {
  border-color: var(--bar-bg);
  background: color-mix(in srgb, var(--bar-bg) 7%, transparent);
}
[data-theme="dark"] #ov-ot .ot-card.sel, [data-theme="dark"] #ov-ot .ot-opt.sel { border-color: var(--accent); }
.fi {
  border-radius: 12px; border: 1.5px solid var(--border2);
  background: var(--card); color: var(--text);
  transition: border-color .18s, box-shadow .18s;
}
.fi:focus { border-color: var(--bar-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bar-bg) 14%, transparent); outline: none; }
[data-theme="dark"] .fi:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,138,31,.16); }
.btn-full { border-radius: 999px; }

/* ── Required-modifier prompt ────────────────────────────────────── */
.pm-req-notice {
  display: none; width: 100%; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 11px 14px;
  border-radius: 13px; border: 1px solid #fed7aa;
  background: #fff7ed; color: #9a3412;
  font-family: inherit; font-size: .83rem; font-weight: 700; text-align: left;
  cursor: pointer; animation: fxToastIn .3s var(--spring) both;
}
.pm-req-notice.on { display: flex; }
[data-theme="dark"] .pm-req-notice { background: #2a1a08; border-color: #5a3a12; color: #ffb870; }
.pm-req-notice svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pm-req-text { flex: 1; min-width: 0; }
.pm-req-go { flex-shrink: 0; font-weight: 800; text-decoration: underline; }
.pm-req-notice:hover { filter: brightness(.98); }

@keyframes pmShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.pm-shake { animation: pmShake .55s ease; }

/* The group the customer is being sent to. */
@keyframes pmFlash {
  0%   { box-shadow: 0 0 0 0 rgba(220,38,38,.42); }
  70%  { box-shadow: 0 0 0 12px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.pm-req-flash { animation: pmFlash 1.2s ease 2; border-radius: 12px; }
.pm-req-group { transition: background .25s, box-shadow .25s; }

/* ── Sheet footer ────────────────────────────────────────────────── */
.pm-total { font-weight: 800; letter-spacing: -.01em; color: var(--bar-bg); }
[data-theme="dark"] .pm-total { color: var(--accent); }
.pm-add-btn:disabled { filter: grayscale(.35); }

/* ── Required-modifier prompt: own row above total + button ──────── */
#ov-prod .pm-footer { flex-wrap: wrap; row-gap: 0; }
#ov-prod .pm-footer .pm-req-notice {
  flex: 1 0 100%;
  order: -1;                 /* above the total and the button */
  width: 100%;
  margin: 0 0 12px;
}
#ov-prod .pm-footer .pm-req-notice .pm-req-text { white-space: normal; line-height: 1.45; }
#ov-prod .pm-footer .pm-req-notice .pm-req-go { white-space: nowrap; margin-left: auto; }

@media (max-width: 420px) {
  .pm-req-notice { padding: 10px 12px; font-size: .79rem; gap: 8px; }
  .pm-req-go { font-size: .78rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SPEC — header · hero · store block · toggles · app bar
   ───────────────────────────────────────────────────────────────────
   Gold is introduced as an accent alongside the brand green, per the
   mockups: green carries structure, gold marks the active thing.
   ═══════════════════════════════════════════════════════════════════ */

:root       { --gold-a:#c9a227; --gold-b:#f0cf65; --glass: rgba(255,255,255,.72); }
[data-theme="dark"] { --gold-a:#ff8a1f; --gold-b:#ffb35c; --glass: rgba(18,18,18,.66); }

/* ── 1. Glassmorphism header ─────────────────────────────────────── */
body .nav {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 22px rgba(0,0,0,.05);
}
[data-theme="dark"] body .nav { box-shadow: 0 4px 22px rgba(0,0,0,.5); }
body .nav-logo { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--gold-a); }
.nav-name { font-weight: 800; letter-spacing: -.015em; }

/* "Open now" pill under the name */
.nav-tagline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d; font-size: .68rem; font-weight: 700;
}
[data-theme="dark"] .nav-tagline { color: #4ade80; }
.nav-tagline::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.22);
}

/* Cart with a gold count badge */
body .cart-btn {
  background: var(--bar-bg); color: #fff;
  border-radius: 999px; padding: 9px 16px 9px 9px;
  box-shadow: 0 6px 20px rgba(0,49,47,.28);
}
[data-theme="dark"] body .cart-btn { background: #1d1d1d; border: 1px solid var(--border2); }
body .cart-btn .js-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-b), var(--gold-a));
  color: #2a2000; font-weight: 800; font-size: .78rem;
}

/* ── 2. Hero ─────────────────────────────────────────────────────── */
body .hero { border-radius: 22px; box-shadow: var(--shadow2); }
body .hero-slide::after {
  background: linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 46%, rgba(0,0,0,.05) 100%);
}
body .hero-arr {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body .hero-arr:hover { background: rgba(255,255,255,.3); }
body .hdot.active { background: var(--gold-b); }

/* ── 3. Store header block ───────────────────────────────────────── */
body .store-bar {
  border-radius: 18px; border: 1px solid var(--border);
  background: var(--card); box-shadow: var(--shadow);
}
body .store-name { font-weight: 800; letter-spacing: -.015em; }
body .store-info-btn {
  border-radius: 999px; font-weight: 700;
  background: var(--card2); color: var(--text);
  border: 1px solid var(--border2);
}
body .store-info-btn:hover { background: var(--bar-bg); color: #fff; border-color: var(--bar-bg); }
[data-theme="dark"] body .store-info-btn:hover { background: var(--accent); color: #0d0d0d; border-color: var(--accent); }

/* ── 4. Pickup / Delivery segmented control ──────────────────────── */
body .ot-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 999px;
}
body .ot-tab {
  border: none; background: transparent; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  font-family: inherit; font-size: .84rem; font-weight: 700; color: var(--text-soft);
  transition: background .2s var(--ease), color .2s, transform .16s var(--ease);
  white-space: nowrap;
}
body .ot-tab:hover { color: var(--text); }
body .ot-tab.active {
  background: var(--bar-bg); color: #fff;
  box-shadow: 0 4px 14px rgba(0,49,47,.28);
}
[data-theme="dark"] body .ot-tab.active { background: var(--accent); color: #0d0d0d; box-shadow: 0 4px 14px rgba(255,138,31,.3); }
body .ot-tab:active { transform: scale(.96); }

/* ── Search ──────────────────────────────────────────────────────── */
body .search-wrap input {
  border-radius: 999px; border: 1.5px solid var(--border2);
  background: var(--card); color: var(--text);
  padding-left: 42px;
  transition: border-color .18s, box-shadow .18s;
}
body .search-wrap input:focus {
  border-color: var(--bar-bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bar-bg) 12%, transparent);
  outline: none;
}
[data-theme="dark"] body .search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,138,31,.14); }

/* ── 5. Category pills with a gold underline on the active one ───── */
body .cat-carousel .cat-tab.active { position: relative; }
body .cat-carousel .cat-tab.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--gold-a), var(--gold-b));
  box-shadow: 0 -2px 10px color-mix(in srgb, var(--gold-a) 55%, transparent);
}

/* ── 6. Mobile bottom app bar ────────────────────────────────────── */
.app-bar { display: none; }
@media (max-width: 900px) {
  .app-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    display: flex; align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--glass);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 26px rgba(0,0,0,.10);
  }
  [data-theme="dark"] .app-bar { box-shadow: 0 -6px 26px rgba(0,0,0,.6); }

  .ab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 0 7px;
    border: none; background: none; cursor: pointer; text-decoration: none;
    font-family: inherit; font-size: .64rem; font-weight: 700;
    color: var(--text-soft); transition: color .18s;
  }
  .ab-ico { position: relative; display: flex; }
  .ab-item svg { width: 21px; height: 21px; }
  .ab-item.active { color: var(--bar-bg); }
  [data-theme="dark"] .ab-item.active { color: var(--accent); }
  .ab-item:active { transform: scale(.94); }

  .ab-badge {
    position: absolute; top: -5px; right: -9px;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: linear-gradient(135deg, var(--gold-b), var(--gold-a));
    color: #2a2000; font-size: .6rem; font-weight: 800; font-style: normal;
    display: flex; align-items: center; justify-content: center;
  }
  .ab-badge[hidden] { display: none; }

  /* Nothing must sit under the bar. */
  body.has-app-bar { padding-bottom: 62px; }
  body.has-app-bar .toast-wrap { bottom: calc(74px + env(safe-area-inset-bottom)); }
  body.has-app-bar .cat-drawer-panel { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}

/* ── Store info popup ────────────────────────────────────────────── */
#ov-store .modal, .store-popup { border-radius: 22px; overflow: hidden; }
.si-row, .store-hours-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 11px;
  background: var(--card2); border: 1px solid var(--border);
  font-size: .84rem; margin-bottom: 7px;
}
.si-row.today, .store-hours-row.today {
  border-color: var(--bar-bg);
  background: color-mix(in srgb, var(--bar-bg) 8%, transparent);
  font-weight: 700;
}
[data-theme="dark"] .si-row.today { border-color: var(--accent); background: rgba(255,138,31,.10); }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE REFINEMENT
   ───────────────────────────────────────────────────────────────────
   The pieces were all present but each was sized for desktop, so on a
   phone the first screenful was header + ticker + a 240px hero before
   a single dish appeared. Everything below tightens the top of the
   page and gives the store block a proper layout.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ── Header: one tidy line ─────────────────────────────────────
     The "Open Now · Pickup & Delivery" pill wrapped onto a second row
     and pushed the header to ~90px. The name truncates and the pill
     shortens instead. */
  body .nav { height: 58px; padding: 0 12px; gap: 9px; }
  body .nav-logo,
  body .nav .nav-logo { width: 34px !important; height: 34px !important; flex-shrink: 0; }
  body .nav-l { min-width: 0; gap: 9px; }
  body .nav-name {
    font-size: .88rem; max-width: 38vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body .nav-tagline {
    display: inline-flex; max-width: 34vw;
    padding: 1px 7px; font-size: .6rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body .nav-r { gap: 8px; flex-shrink: 0; }
  body .cart-btn { padding: 7px 12px 7px 7px; font-size: .8rem; }
  body .cart-btn .js-count { min-width: 21px; height: 21px; font-size: .72rem; }
  .theme-toggle { width: 46px; height: 25px; }
  .theme-toggle .tt-knob { width: 19px; height: 19px; }
  [data-theme="dark"] .theme-toggle .tt-knob { left: 24px; }

  body .cat-carousel { top: 58px; }

  /* ── Ticker: thinner ───────────────────────────────────────────── */
  .ticker { font-size: .68rem; padding: 5px 0; }

  /* ── Hero: shorter, so food is visible without scrolling ───────── */
  body .hero { height: 176px; border-radius: 16px; }
  body .hero-wrap { padding: 10px 12px 0; }
  body .hero-title { font-size: clamp(1.15rem, 5.6vw, 1.6rem); line-height: 1.15; }
  body .hero-sub { font-size: .76rem; }
  body .hero-eyebrow { font-size: .58rem; padding: 3px 10px; }
  body .hero-arr { width: 32px; height: 32px; }
  body .hero-btn { padding: 8px 16px; font-size: .78rem; }

  /* ── Store block: logo left, details stacked cleanly ───────────── */
  body .store-bar {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: start;
    gap: 12px;
    padding: 13px 14px;
    margin: 10px 12px 0;
    border-radius: 16px;
  }
  body .store-avatar { width: 46px !important; height: 46px !important; }
  body .store-name {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    font-size: .95rem; line-height: 1.3;
  }
  body .store-name .badge-open,
  body .store-name .badge-closed {
    font-size: .63rem; padding: 2px 8px; border-radius: 999px; font-weight: 700;
  }
  /* The Info button sat inline with the name and broke the line; give
     it its own row so both stay readable. */
  body .store-info-btn {
    order: 3; flex-basis: 100%; width: fit-content;
    margin-top: 3px; padding: 6px 13px; font-size: .74rem;
  }
  body .store-meta {
    display: flex; flex-direction: column; gap: 5px;
    margin-top: 8px; font-size: .76rem; color: var(--text-soft); line-height: 1.45;
  }
  body .store-meta span { display: flex; align-items: flex-start; gap: 6px; }

  /* ── Menu row + search ─────────────────────────────────────────── */
  body .menu-bar { padding: 12px; gap: 10px; flex-wrap: wrap; }
  body .menu-label { font-size: .82rem; font-weight: 800; }
  body .ot-tab { padding: 8px 15px; font-size: .8rem; }

  /* The magnifier lived outside the field as a loose emoji. Tuck it in
     and let the input own the whole pill. */
  body .search-wrap {
    position: relative; border: none; background: transparent; padding: 0;
    border-radius: 999px; width: 100%;
  }
  body .search-wrap > :not(input) {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: .95rem; opacity: .55; pointer-events: none; z-index: 2;
  }
  body .search-wrap input {
    height: 44px; padding: 0 16px 0 42px;
    border: 1.5px solid var(--border2); border-radius: 999px;
    background: var(--card); font-size: .88rem;
  }

  /* ── Category bar: a real pill, not a full-height block ────────── */
  body .cat-carousel .cat-rail-inner { padding: 5px 6px; }
  body .cat-carousel .cat-tab {
    min-height: 40px; padding: 0 15px; margin-right: 5px; border-radius: 999px;
  }
  body .cat-carousel .cat-tab .cat-label { font-size: .74rem; letter-spacing: .02em; }
  body .cat-carousel .cat-tab.active::after { display: none; }   /* pill instead of underline */
  body .cat-carousel .cat-tab.active {
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
  }
  body .cat-burger { width: 46px; flex-basis: 46px; }
  body .cat-carousel .cat-carousel-arrow { width: 38px; flex-basis: 38px; font-size: 19px; }

  /* ── Banners a touch shorter so a card shows below ─────────────── */
  .cat-banner img { aspect-ratio: 16 / 6.2; }
}

/* ── Bottom app bar: raised cart + sliding indicator ──────────────── */
@media (max-width: 900px) {
  .app-bar { padding-top: 3px; }
  .ab-item { position: relative; }

  /* Small bar above the active tab — reads faster than colour alone. */
  .ab-item::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleX(0);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--gold-a), var(--gold-b));
    transition: transform .26s var(--spring);
  }
  .ab-item.active::before { transform: translateX(-50%) scaleX(1); }

  .ab-item.active .ab-ico svg { transform: translateY(-1px) scale(1.08); }
  .ab-ico svg { transition: transform .22s var(--spring); }
  .ab-lbl { letter-spacing: .01em; }

  /* Cart lifted out of the bar so it reads as the primary action. */
  .ab-item:last-child .ab-ico {
    width: 42px; height: 42px; border-radius: 50%;
    align-items: center; justify-content: center;
    background: var(--bar-bg); color: #fff;
    box-shadow: 0 6px 16px rgba(0,49,47,.34);
    margin-top: -16px; margin-bottom: 2px;
    transition: transform .2s var(--spring), box-shadow .2s;
  }
  [data-theme="dark"] .ab-item:last-child .ab-ico {
    background: var(--accent); color: #0d0d0d; box-shadow: 0 6px 16px rgba(255,138,31,.36);
  }
  .ab-item:last-child:active .ab-ico { transform: scale(.92); }
  .ab-item:last-child svg { width: 19px; height: 19px; }
  .ab-item:last-child .ab-badge { top: -3px; right: -3px; }
  .ab-item:last-child::before { display: none; }

  body.has-app-bar { padding-bottom: 66px; }
}

/* ═══════════════════════════════════════════════════════════════════
   UNIFORM CARD HEIGHT
   ───────────────────────────────────────────────────────────────────
   .ic-img was width:38% / height:auto with the <img> at height:100%.
   A percentage height only resolves against a parent with a definite
   height, and .ic had none — so the image fell back to its natural
   size and a tall product shot (a can, a bottle) stretched its card to
   several hundred pixels while a flat food photo stayed short.

   Fixing the card height gives the percentage something to resolve
   against, and every tile in the grid comes out identical.
   ═══════════════════════════════════════════════════════════════════ */

body .main .items-list { align-items: stretch; }

body .main .items-list .ic {
  height: 152px;               /* the definite height the image needs */
  align-items: stretch;
}
body .main .items-list .ic .ic-img,
body .main .items-list .ic .ic-emoji {
  height: 100%; min-height: 0; align-self: stretch;
}
body .main .items-list .ic .ic-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
body .main .items-list .ic .ic-info { overflow: hidden; }
body .main .items-list .ic .ic-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.25;
}
body .main .items-list .ic .ic-desc { -webkit-line-clamp: 2; }

@media (max-width: 720px) {
  body .main .items-list .ic { height: 132px; }
  body .main .items-list .ic .ic-name { font-size: .92rem; }
  body .main .items-list .ic .ic-desc { font-size: .78rem; -webkit-line-clamp: 2; }
}
@media (max-width: 380px) {
  body .main .items-list .ic { height: 124px; }
  body .main .items-list .ic .ic-desc { -webkit-line-clamp: 1; }
}

/* Card grid style uses the same trick, vertically. */
body .main .card-grid .ic .ic-img { aspect-ratio: 4 / 3; height: auto; }
body .main .card-grid .ic .ic-img img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════════════════ */
.to-top {
  position: fixed; right: 16px; z-index: 1050;
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--bar-bg); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0,49,47,.32);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85);
  transition: opacity .25s var(--ease), transform .25s var(--spring), visibility .25s;
}
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { filter: brightness(1.1); }
.to-top:active { transform: scale(.9); }
[data-theme="dark"] .to-top { background: var(--accent); color: #0d0d0d; border-color: transparent; box-shadow: 0 8px 24px rgba(255,138,31,.34); }

/* Sit above the app bar on a phone. */
@media (max-width: 900px) {
  body.has-app-bar .to-top { bottom: calc(78px + env(safe-area-inset-bottom)); width: 42px; height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SPLASH ANIMATIONS
   ───────────────────────────────────────────────────────────────────
   The markup and its critical colours are inline in index.php so the
   splash paints on the first frame; the motion lives here because it
   is not needed until a beat later.
   ═══════════════════════════════════════════════════════════════════ */

/* A soft glow behind the logo, tinted per theme. */
.splash::before {
  content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #00312f 13%, transparent) 0%, transparent 68%);
  animation: spGlow 3.2s ease-in-out infinite;
  pointer-events: none;
}
html[data-theme="dark"] .splash::before {
  background: radial-gradient(circle, rgba(255,138,31,.16) 0%, transparent 68%);
}
@keyframes spGlow {
  0%, 100% { transform: scale(.9);  opacity: .55; }
  50%      { transform: scale(1.1); opacity: 1; }
}

.sp-inner { position: relative; z-index: 2; }

/* Logo drops in and settles. */
.sp-logo { animation: spDrop .72s cubic-bezier(.22,1.2,.36,1) both; }
@keyframes spDrop {
  0%   { opacity: 0; transform: translateY(-22px) scale(.72); }
  60%  { opacity: 1; transform: translateY(4px)   scale(1.04); }
  100% { opacity: 1; transform: none; }
}
.sp-logo img { animation: spBreathe 2.6s ease-in-out 0.7s infinite; }
@keyframes spBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* Sweeping ring around the logo. */
.sp-ring {
  position: absolute; inset: -9px; border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: #00312f; border-right-color: #00312f;
  animation: spSpin 1.15s linear infinite;
  opacity: .85;
}
html[data-theme="dark"] .sp-ring { border-top-color: #ff8a1f; border-right-color: #ff8a1f; }
@keyframes spSpin { to { transform: rotate(360deg); } }

/* Name and credit rise in after the logo lands. */
.sp-name { animation: spRise .6s var(--ease, cubic-bezier(.4,0,.2,1)) .34s both; }
.sp-by   { animation: spRise .6s var(--ease, cubic-bezier(.4,0,.2,1)) .58s both; }
@keyframes spRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Three dots, staggered. */
.sp-dots { display: flex; gap: 6px; animation: spRise .6s ease .46s both; }
.sp-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #00312f; opacity: .35;
  animation: spDot 1.15s ease-in-out infinite;
}
html[data-theme="dark"] .sp-dots i { background: #ff8a1f; }
.sp-dots i:nth-child(2) { animation-delay: .16s; }
.sp-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes spDot {
  0%, 100% { transform: translateY(0) scale(1); opacity: .32; }
  40%      { transform: translateY(-7px) scale(1.25); opacity: 1; }
}

/* The page itself fades up as the splash clears. */
.splash.gone ~ .nav,
.splash.gone ~ .hero-wrap { animation: spRise .5s ease both; }

@media (max-width: 480px) {
  .sp-logo, .sp-logo img { width: 86px; height: 86px; }
  .sp-name { font-size: 1.08rem; }
  .splash::before { width: 300px; height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .splash::before, .sp-logo, .sp-logo img, .sp-ring,
  .sp-name, .sp-by, .sp-dots, .sp-dots i { animation: none !important; }
  .sp-ring { opacity: .4; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME — black + orange only
   ───────────────────────────────────────────────────────────────────
   White is reserved for text. Every surface is black or near-black,
   and every accent, fill and highlight is orange.

   Red is the one deliberate exception: an error that shows up orange
   looks like just another highlight, and "delete forever" must not.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --brand:      #ff8a1f;
  --brand-soft: #1f1408;
  --brand-ink:  #0d0d0d;
  --accent:     #ff8a1f;

  --gold-a: #ff8a1f;
  --gold-b: #ffb35c;

  --bg:    #000000;
  --bg2:   #0a0a0a;
  --card:  #101010;
  --card2: #171717;
  --white: #101010;
  --light: #171717;

  --bar-bg:         #0a0a0a;
  --bar-ink:        rgba(255,255,255,.70);
  --bar-accent:     #ff8a1f;
  --bar-active-ink: #0d0d0d;

  --glass: rgba(8,8,8,.72);

  --text:      #f5f5f5;
  --text-soft: #9a9a9a;
  --muted:     #9a9a9a;
}

/* ── Anything still painting a light surface ─────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] .menu-bar,
[data-theme="dark"] .hero-wrap,
[data-theme="dark"] .main,
[data-theme="dark"] .wrap { background: var(--bg); }

[data-theme="dark"] .nav,
[data-theme="dark"] .store-bar,
[data-theme="dark"] .ms,
[data-theme="dark"] .ic,
[data-theme="dark"] .cat-tab,
[data-theme="dark"] .sheet,
[data-theme="dark"] .modal,
[data-theme="dark"] .pm-body,
[data-theme="dark"] .pm-footer,
[data-theme="dark"] .store-popup,
[data-theme="dark"] .cart-card,
[data-theme="dark"] .sum-card,
[data-theme="dark"] .ov-card,
[data-theme="dark"] .fi,
[data-theme="dark"] .items-list,
[data-theme="dark"] .addon-list,
[data-theme="dark"] .ar,
[data-theme="dark"] .cat-drawer-panel,
[data-theme="dark"] .fx-toast { background: var(--card); color: var(--text); }

[data-theme="dark"] .ic-img,
[data-theme="dark"] .ic-emoji,
[data-theme="dark"] .cat-thumb,
[data-theme="dark"] .cat-banner { background: var(--card2); }

/* ── Orange replaces every green / gold accent ───────────────────── */
[data-theme="dark"] .nav-tagline {
  background: rgba(255,138,31,.14);
  color: #ffb35c;
}
[data-theme="dark"] .nav-tagline::before {
  background: #ff8a1f;
  box-shadow: 0 0 0 3px rgba(255,138,31,.22);
}
[data-theme="dark"] .badge-open {
  background: rgba(255,138,31,.14) !important;
  color: #ffb35c !important;
}
[data-theme="dark"] .fx-ok  .fx-toast-ico { background: #ff8a1f; }
[data-theme="dark"] .fx-ok  .fx-toast-bar { background: #ff8a1f; }
[data-theme="dark"] .fx-ok  .fx-toast-ico svg { stroke: #0d0d0d; }
[data-theme="dark"] .fx-inf .fx-toast-ico { background: #ff8a1f; }
[data-theme="dark"] .fx-inf .fx-toast-ico svg { stroke: #0d0d0d; }
[data-theme="dark"] .fx-inf .fx-toast-bar { background: #ff8a1f; }
/* fx-err keeps its red on purpose. */

[data-theme="dark"] .cart-btn .js-count,
[data-theme="dark"] .ab-badge {
  background: linear-gradient(135deg, #ffb35c, #ff8a1f);
  color: #0d0d0d;
}
[data-theme="dark"] .cart-btn { background: #141414; color: var(--text); border: 1px solid var(--border2); }

[data-theme="dark"] .hdot.active { background: #ff8a1f; }
[data-theme="dark"] .hero-arr { background: rgba(255,138,31,.16); border-color: rgba(255,138,31,.34); color: #ffb35c; }
[data-theme="dark"] .hero-arr:hover { background: #ff8a1f; color: #0d0d0d; }
[data-theme="dark"] .hero-eyebrow { background: linear-gradient(135deg,#ff8a1f,#ff6a00); color: #0d0d0d; }
[data-theme="dark"] .hero-btn-primary { background: linear-gradient(135deg,#ff8a1f,#ff6a00); color: #0d0d0d; }
[data-theme="dark"] .hero-btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.26); }

[data-theme="dark"] .ticker { background: #ff8a1f; color: #0d0d0d; }

[data-theme="dark"] body .cat-carousel .cat-tab:hover { background: rgba(255,138,31,.10); }
[data-theme="dark"] body .cat-carousel .cat-tab.active::after {
  background: linear-gradient(90deg,#ff6a00,#ffb35c);
  box-shadow: 0 -2px 10px rgba(255,138,31,.55);
}

[data-theme="dark"] .pm-add-btn,
[data-theme="dark"] .btn-neon,
[data-theme="dark"] .btn-full,
[data-theme="dark"] .to-top,
[data-theme="dark"] .ab-item:last-child .ab-ico,
[data-theme="dark"] .qb.add,
[data-theme="dark"] .ic .ic-addbtn {
  background: #ff8a1f; color: #0d0d0d; border-color: #ff8a1f;
}
[data-theme="dark"] .ic .ic-addbtn::before { background-color: #ff8a1f; }

[data-theme="dark"] .m-close { background: var(--card2); color: var(--text-soft); border-color: var(--border2); }
[data-theme="dark"] .m-close:hover { background: #ff8a1f; color: #0d0d0d; border-color: #ff8a1f; }

[data-theme="dark"] .cat-drawer-item.active { background: rgba(255,138,31,.14); color: #ff8a1f; }
[data-theme="dark"] .si-row.today, [data-theme="dark"] .store-hours-row.today {
  border-color: #ff8a1f; background: rgba(255,138,31,.10);
}

/* Selected item card + required prompt */
[data-theme="dark"] body .main .items-list .ic.is-selected,
[data-theme="dark"] body .main .items-list .ic:hover { border-color: #ff8a1f; }
[data-theme="dark"] .pm-req-notice { background: #1a1207; border-color: #4a3210; color: #ffb35c; }

/* Splash */
[data-theme="dark"] .splash { background: #000; }
[data-theme="dark"] .sp-ring { border-top-color: #ff8a1f; border-right-color: #ff8a1f; }
[data-theme="dark"] .sp-dots i { background: #ff8a1f; }
[data-theme="dark"] .sp-name { color: #f5f5f5; }
[data-theme="dark"] .sp-by b { color: #ff8a1f; }

/* Theme toggle knob */
[data-theme="dark"] .theme-toggle { background: #141414; border-color: var(--border2); }
[data-theme="dark"] .theme-toggle .tt-knob { background: linear-gradient(135deg,#ff8a1f,#ff6a00); }
[data-theme="dark"] .theme-toggle .tt-knob svg { stroke: #0d0d0d; }

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — cart, checkout, confirmation
   ───────────────────────────────────────────────────────────────────
   These three pages carry their own card classes, so the earlier dark
   rules (written against the menu page) never reached them and they
   stayed white.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .c-card,
[data-theme="dark"] .ci,
[data-theme="dark"] .co-sec,
[data-theme="dark"] .co-item,
[data-theme="dark"] .conf-card,
[data-theme="dark"] .cart-lay > *,
[data-theme="dark"] .co-lay > *,
[data-theme="dark"] .stripe-card-wrap,
[data-theme="dark"] .card-holder-row {
  background: var(--card) !important;
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .ci-thumb,
[data-theme="dark"] .co-thumb { background: var(--card2); }

[data-theme="dark"] .ci-nm,
[data-theme="dark"] .co-nm,
[data-theme="dark"] .co-title,
[data-theme="dark"] .cart-n { color: var(--text); }
[data-theme="dark"] .ci-adds,
[data-theme="dark"] .co-inf,
[data-theme="dark"] .co-qty { color: var(--text-soft); }
[data-theme="dark"] .ci-pr,
[data-theme="dark"] .co-pr,
[data-theme="dark"] .amt { color: var(--accent); }

/* Deal "Includes" note keeps its warm tint but on a dark base. */
[data-theme="dark"] #pm-deal-includes {
  background: #1a1207 !important;
  border-color: #4a3210 !important;
  color: #ffb35c !important;
}

/* Confirmation: the big tick stays green — it is a status, not an
   accent, and green is what people read as "it worked". */
[data-theme="dark"] .conf-card { box-shadow: 0 20px 60px rgba(0,0,0,.6); }
[data-theme="dark"] .conf-wrap { background: var(--bg); }

/* Buttons on these pages */
[data-theme="dark"] .btn-mint,
[data-theme="dark"] .btn-ghost {
  background: var(--card2); color: var(--text); border: 1px solid var(--border2);
}
[data-theme="dark"] .btn-mint:hover { background: var(--accent); color: #0d0d0d; border-color: var(--accent); }
[data-theme="dark"] .back-lnk { color: var(--text-soft); }
[data-theme="dark"] .back-lnk:hover { color: var(--accent); }

/* Inputs across every page */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--card2) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6d6d6d; }
/* Native pickers render black-on-black otherwise. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }

/* The sticky strip behind the sheet close button. */
[data-theme="dark"] #ov-prod .modal > div[style*="sticky"] { background: var(--card) !important; }

/* ── Popup header strip ──────────────────────────────────────────
   style.css line 454 paints .m-head #fff. In dark mode .m-title is
   var(--dark), which the dark palette sets to white — so the heading
   was white text on a white strip and simply vanished. */
[data-theme="dark"] .m-head {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .m-title { color: var(--text) !important; }
[data-theme="dark"] .m-close {
  background: var(--card2) !important;
  border-color: var(--border2) !important;
  color: var(--text-soft) !important;
}
[data-theme="dark"] .m-close:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0d0d0d !important;
}
[data-theme="dark"] .m-handle { background: var(--border2); }
[data-theme="dark"] .mbody { background: var(--card); }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ───────────────────────────────────────────────────────────────────
   The old footer hard-coded background:#fff, so in dark mode it sat at
   the bottom of the page as a bright white slab.
   ═══════════════════════════════════════════════════════════════════ */

.site-footer {
  margin-top: 42px;
  padding: 30px 20px calc(30px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--border);
  text-align: center;
}
[data-theme="dark"] .site-footer { background: #0a0a0a; }

.sf-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.sf-links { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.sf-links a {
  color: var(--text-soft); text-decoration: none;
  font-size: .86rem; font-weight: 600;
  padding: 4px 2px; position: relative;
  transition: color .18s;
}
.sf-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--accent); transition: right .25s var(--ease);
}
.sf-links a:hover { color: var(--accent); }
.sf-links a:hover::after { right: 0; }
.sf-sep { width: 1px; height: 14px; background: var(--border2); }

/* ── Branding ────────────────────────────────────────────────────── */
.sf-brand { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; }
.sf-by { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.sf-logo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 9px; border-radius: 999px;
  text-decoration: none; border: 1px solid var(--border2);
  background: var(--card2);
  transition: border-color .2s, transform .18s var(--ease), box-shadow .2s;
}
.sf-logo:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 22%, transparent);
}
.sf-mark {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bar-bg); color: #fff;
}
[data-theme="dark"] .sf-mark { background: var(--accent); color: #0d0d0d; }
.sf-mark svg { width: 15px; height: 15px; }
.sf-name {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .92rem; font-weight: 800; letter-spacing: .04em;
  color: var(--text);
}
.sf-logo:hover .sf-name { color: var(--accent); }

.sf-copy { font-size: .72rem; color: var(--text-soft); opacity: .8; }

/* Clear the mobile app bar. */
@media (max-width: 900px) {
  body.has-app-bar .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .sf-inner { gap: 13px; }
  .sf-links a { font-size: .82rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   STORE BAR — compact, tappable, with a closing countdown
   ═══════════════════════════════════════════════════════════════════ */

body .store-bar {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: start;
  gap: 12px 14px;
  padding: 14px 16px;
  border-radius: 16px;
}
body .store-avatar { width: 52px !important; height: 52px !important; grid-row: span 1; }

body .store-name {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 1.02rem; font-weight: 800; line-height: 1.25; margin: 0;
}
body .store-name .badge-open,
body .store-name .badge-closed {
  font-size: .66rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}

/* Phone / email / address as chips — one row on desktop, wrapping on
   mobile, and each one is a real link. */
body .store-meta {
  grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; margin: 0;
}
.sm-chip {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  max-width: 100%; padding: 6px 11px; border-radius: 999px;
  background: var(--card2); border: 1px solid var(--border);
  color: var(--text-soft); text-decoration: none;
  font-size: .77rem; font-weight: 600; line-height: 1.3;
  transition: border-color .18s, color .18s, background .18s;
}
.sm-chip svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.sm-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--card); }
.sm-addr span { max-width: 42ch; }

body .store-actions {
  grid-column: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
body .store-info-btn { padding: 7px 14px; font-size: .78rem; }

/* ── Countdown pill ──────────────────────────────────────────────── */
.close-soon {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent);
  font-size: .73rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
}
.close-soon[hidden] { display: none; }
.close-soon::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: csPulse 1.6s ease-in-out infinite;
}
@keyframes csPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Under half an hour it turns red — that is a different decision for
   the customer, not just a smaller number. */
.close-soon.urgent {
  background: rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.45);
  color: #ef4444;
}

#hoursCountdown {
  display: block; margin: 6px 0 12px; padding: 8px 12px;
  border-radius: 10px; text-align: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-size: .8rem; font-weight: 700;
}
#hoursCountdown[hidden] { display: none; }

@media (max-width: 640px) {
  body .store-bar { grid-template-columns: 44px 1fr; padding: 12px 13px; gap: 10px 11px; }
  body .store-avatar { width: 44px !important; height: 44px !important; }
  body .store-name { font-size: .94rem; }
  .sm-chip { font-size: .73rem; padding: 5px 10px; }
  .sm-addr span { max-width: 24ch; }
  .close-soon { font-size: .69rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   BOOK A TABLE · MOBILE CONTACT ICONS · ITEM TEXT FIT
   ═══════════════════════════════════════════════════════════════════ */

/* ── "Book A Table" beside Pickup / Delivery ───────────────────────── */
body .menu-bar-l { flex-wrap: wrap; row-gap: 8px; }
.book-table-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--bar-bg); background: var(--card);
  color: var(--bar-bg); text-decoration: none; white-space: nowrap;
  font-family: inherit; font-size: .84rem; font-weight: 800;
  transition: background .2s var(--ease), color .2s, transform .16s var(--ease);
}
.book-table-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.book-table-btn:hover { background: var(--bar-bg); color: #fff; }
.book-table-btn:active { transform: scale(.96); }
[data-theme="dark"] .book-table-btn { border-color: var(--accent); color: var(--accent); background: transparent; }
[data-theme="dark"] .book-table-btn:hover { background: var(--accent); color: #0d0d0d; }

/* ── Item cards: never cut text through the middle of a line ───────── */
body .main .items-list .ic .ic-name,
body .main .items-list .ic .ic-bottom { flex-shrink: 0; }
body .main .items-list .ic .ic-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; line-height: 1.25; max-height: 2.5em;
}
body .main .items-list .ic .ic-desc {
  flex-shrink: 0; overflow: hidden; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  max-height: 2.9em;           /* 2 whole lines until the fitter refines it */
  margin-bottom: 6px;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Phone / email / address: round icon buttons (tap = call / mail / map) */
  body .store-bar .store-meta {
    flex-direction: row !important; flex-wrap: nowrap; gap: 10px; margin-top: 8px;
  }
  body .store-bar .sm-chip {
    width: 40px; height: 40px; padding: 0; justify-content: center; flex: 0 0 40px;
    border-radius: 50%; color: var(--bar-bg); background: var(--card2);
  }
  [data-theme="dark"] body .store-bar .sm-chip { color: var(--accent); }
  body .store-bar .sm-chip svg { width: 18px; height: 18px; }
  body .store-bar .sm-chip span { display: none !important; }

  /* Book A Table on the same row as Pickup / Delivery: the plain
     "Menu" word makes way for it (only when the button is shown). */
  body .menu-bar-l:has(.book-table-btn) .menu-label { display: none; }
  body .menu-bar-l { gap: 8px; }
  .book-table-btn { padding: 8px 12px; font-size: .78rem; gap: 6px; }

  /* A little more room so a 2-line name still leaves a description line */
  body .main .items-list .ic { height: 140px; }
  body .main .items-list .ic .ic-name { font-size: .92rem; }
  body .main .items-list .ic .ic-desc { font-size: .78rem; }
}
@media (max-width: 380px) {
  body .main .items-list .ic { height: 134px; }
  .book-table-btn span { font-size: .76rem; }
}