/* ═══════════════════════════════════════════════════════════════════
   Big Asere — Home premium layer (Phase 1A visual foundation).
   Home-only: loaded ONLY by index.html, AFTER the five inline <style>
   blocks, so equal-specificity rules here win by source order.
   Scope: tokens, typography, web foundation, surfaces and interaction
   states for the REAL existing markup. No DOM, logic, script, storage,
   routing or Turnstile-policy changes. Hierarchy work is Phase 1B.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Home-only design tokens ─────────────────────────────────── */
:root {
  /* Brand + ink scale */
  --home-brand: #E23744;
  --home-brand-strong: #C82F3B;
  --home-ink: #101014;
  --home-body: #2B2B31;
  --home-muted: #6E6E76;
  --home-faint: #9A9AA3;
  --home-line: #ECECEF;
  --home-soft: #F7F7F8;
  --home-surface: #FFFFFF;
  /* Semantic accents */
  --home-green: #0B7B3E;
  --home-green-soft: #E9F6EE;
  --home-blue: #1D6FDC;
  --home-blue-soft: #EAF2FD;
  --home-violet: #6D4AE0;
  --home-violet-soft: #F0EBFC;
  --home-amber: #B96A00;      /* warning-only per spec */
  --home-amber-soft: #FCF2E3;
  --home-danger: #C42030;
  --home-danger-soft: #FBEAEC;
  /* Radius */
  --home-radius-card: 18px;
  --home-radius-control: 14px;
  --home-radius-pill: 999px;
  --home-radius-modal: 22px;
  /* Shadows */
  --home-shadow-subtle: 0 1px 2px rgba(16,24,40,.05);
  --home-shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.06);
  --home-shadow-floating: 0 8px 28px rgba(16,24,40,.14);
  /* Spacing scale */
  --home-sp-1: 4px;
  --home-sp-2: 8px;
  --home-sp-3: 12px;
  --home-sp-4: 16px;
  --home-sp-5: 24px;
  --home-sp-6: 32px;
  --home-sp-7: 48px;
  /* Motion */
  --home-motion-fast: 120ms;
  --home-motion-base: 160ms;
  --home-motion-slow: 200ms;
  --home-ease: cubic-bezier(.2,.6,.3,1);
  /* Focus ring */
  --home-focus-ring: 0 0 0 2px rgba(226,55,68,.5);
  --home-focus-offset: 2px;
  /* Type families (only Geist Sans + Bricolage Grotesque) */
  --home-font-ui: 'Geist Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --home-font-display: 'Bricolage Grotesque', 'Geist Sans', sans-serif;
  /* Safe-area foundation */
  --home-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Layout */
  --home-container-max: 1140px;
  --home-gutter-desktop: 32px;
  --home-gutter-tablet: 24px;
  --home-gutter-mobile: 20px;
}

/* ── 2. Typography foundation ───────────────────────────────────── */
body {
  font-family: var(--home-font-ui);
  color: var(--home-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hero-title, .ctitle, .section-title {
  font-family: var(--home-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--home-ink);
}
.sub-stitle { font-family: var(--home-font-ui); color: var(--home-ink); }
.hero-lead, .rc .r2, .offer-cond, footer .tg { color: var(--home-muted); }

/* ── 3. Global web foundation ───────────────────────────────────── */
::selection { background: rgba(226,55,68,.16); color: var(--home-ink); }
:focus-visible {
  outline: none;
  box-shadow: var(--home-focus-ring);
  outline-offset: var(--home-focus-offset);
  border-radius: 6px;
}
a, button { -webkit-tap-highlight-color: transparent; }
button, input { font-family: inherit; }
a { transition: color var(--home-motion-base) var(--home-ease); }

/* ── 4. Container / web layout foundation ───────────────────────── */
.container { max-width: var(--home-container-max); }
@media (min-width: 1025px) { .container { padding-inline: var(--home-gutter-desktop); } }
@media (min-width: 769px) and (max-width: 1024px) { .container { padding-inline: var(--home-gutter-tablet); } }

/* ── 5. Navbar foundation ───────────────────────────────────────── */
#navbar { border-bottom: 1px solid var(--home-line); }
.nav-loc { color: var(--home-muted); }
@media (hover: hover) {
  .nav-links a:hover { color: var(--home-brand); }
  #navToggle:hover { background: var(--home-soft); }
  .nav-logo:hover .nav-wordmark { color: var(--home-brand-strong); }
}
#navToggle, #langToggle {
  transition: background var(--home-motion-base) var(--home-ease),
              border-color var(--home-motion-base) var(--home-ease);
}

/* ── 6. Hero foundation ─────────────────────────────────────────── */
.deliver-to { transition: color var(--home-motion-base) var(--home-ease); }
@media (hover: hover) {
  .deliver-to:hover b { color: var(--home-brand); }
  .view-all:hover { color: var(--home-brand-strong); }
}
.hero-lead { max-width: 52ch; }

/* ── 7. Search foundation ───────────────────────────────────────── */
.cap {
  border: 1px solid var(--home-line);
  transition: box-shadow var(--home-motion-base) var(--home-ease),
              border-color var(--home-motion-base) var(--home-ease);
}
.cap:focus-within { border-color: rgba(226,55,68,.45); box-shadow: var(--home-shadow-card), var(--home-focus-ring); }
.cap input { color: var(--home-ink); }
.cap input::placeholder { color: var(--home-faint); }
.cap-filt {
  color: var(--home-muted); cursor: pointer;
  transition: background var(--home-motion-base) var(--home-ease),
              color var(--home-motion-base) var(--home-ease);
}
@media (hover: hover) { .cap-filt:hover { background: var(--home-soft); color: var(--home-ink); } }
.cap-filt:active { transform: scale(.96); }

/* ── 8. Button foundation ───────────────────────────────────────── */
.btn-red-cap, .aob-btn, .offer-copy, .mm-join, #loadMoreBtn, #cookieOk {
  transition: background var(--home-motion-base) var(--home-ease),
              filter var(--home-motion-base) var(--home-ease),
              transform var(--home-motion-fast) var(--home-ease);
}
@media (hover: hover) {
  .btn-red-cap:hover, .aob-btn:hover, .offer-copy:hover, .mm-join:hover { background: var(--home-brand-strong); }
  #loadMoreBtn:hover, #cookieOk:hover { filter: brightness(1.08); }
}
.btn-red-cap:active, .aob-btn:active, .offer-copy:active, .mm-join:active,
#loadMoreBtn:active, #cookieOk:active { transform: scale(.98); }
.rest-filter-btn {
  cursor: pointer;
  transition: background var(--home-motion-base) var(--home-ease),
              color var(--home-motion-base) var(--home-ease),
              border-color var(--home-motion-base) var(--home-ease);
}
@media (hover: hover) { .rest-filter-btn:not(.active):hover { border-color: var(--home-faint); color: var(--home-ink); } }

/* ── 9. Card foundations ────────────────────────────────────────── */
.rc .ph, .cat-icon-wrap, .offer-card, #activeOrderBanner, .mm-box {
  transition: box-shadow var(--home-motion-slow) var(--home-ease),
              transform var(--home-motion-slow) var(--home-ease);
}
@media (hover: hover) {
  .offer-card:hover { box-shadow: var(--home-shadow-card); }
  .cat-card:hover .cat-name { color: var(--home-brand); }
}
.members { cursor: pointer; }
@media (hover: hover) { .members:hover .arrow { transform: translateX(2px); } }
.members .arrow { transition: transform var(--home-motion-base) var(--home-ease); }

/* ── 10. Section rhythm foundation ──────────────────────────────── */
.section-header, .sec-head { align-items: baseline; }
.view-all { border-radius: 6px; }

/* ── 11. Skeleton foundation ────────────────────────────────────── */
.skel-circle, .skel-rest-top, .skel-line { border-radius: 12px; }
.skel-circle { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  /* Targeted (no !important): later source order beats the inline
     shimmer/fadeUp rules of equal or lower specificity. */
  .skel-circle, .skel-rest-top, .skel-line, .rv { animation: none; }
  a, button, .rc, .rc .ph, .rc .img, .members .arrow { transition: none; }
}

/* ── 12. Footer foundation ──────────────────────────────────────── */
footer { color: var(--home-body); }
.facc .body a, .fbar2 { color: var(--home-muted); }
.facc .body a { text-decoration: none; padding: 4px 0; display: inline-block; }
@media (hover: hover) { .facc .body a:hover { color: var(--home-brand); } }
footer .badges { color: var(--home-faint); }

/* ── 13. Bottom nav foundation ──────────────────────────────────── */
.bn-item { transition: color var(--home-motion-base) var(--home-ease); border-radius: 12px; }
.bn-item:active { color: var(--home-brand); }

/* ── 14. Cookie banner foundation ───────────────────────────────── */
/* The banner and its button carry element-inline styles; only states and
   properties NOT set inline are refined here (no !important added). */
#cookieBanner p { line-height: 1.5; }
#cookieBanner a { font-weight: 600; }

/* ── 15. Turnstile PRESENTATION foundation (security-adjacent) ────
   The gate is generated by a protected inline script with element-inline
   styles; the script, #tsWidget, callbacks, ba_verified/_at, TTL and all
   policy remain untouched. Rules below are presentation-only and are
   scoped with :has(#tsWidget) so the error state keeps its own UI.
   Each !important below beats ONE specific element-inline style and is
   individually justified (authorized protocol: LEGACY = inline style). */

/* [A] NEW: #tsOverlay / PROPERTY: background / LEGACY: element-inline
   cssText background:#0E0E10 / WHY: inline styles beat any selector
   unless !important; replaces the flat black with a branded dark
   composition. */
#tsOverlay {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(226,55,68,.22), transparent 60%),
    radial-gradient(80% 60% at 50% 110%, rgba(226,55,68,.10), transparent 60%),
    #0B0B0E !important;
}
/* [B] NEW: #tsOverlay / PROPERTY: font-family / LEGACY: element-inline
   cssText font-family:Arial,sans-serif / WHY: same inline-style
   precedence; aligns the gate with the site's Geist typography. */
#tsOverlay { font-family: var(--home-font-ui) !important; }

/* [C] NEW: #tsOverlay:has(#tsWidget) > div:first-child / PROPERTY:
   font-size:0 / LEGACY: element-inline font-size:1.6rem / WHY: the
   scooter emoji lives in the same JS-generated text node as the title;
   the script cannot be edited, so the original text is visually
   suppressed and replaced by the ::after wordmark below. */
#tsOverlay:has(#tsWidget) > div:first-child { font-size: 0 !important; }
#tsOverlay:has(#tsWidget) > div:first-child::before {
  content: 'BA';
  display: block; width: 52px; height: 52px; margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--home-brand), var(--home-brand-strong));
  color: #fff; border-radius: 15px;
  font-size: 20px; font-weight: 800; letter-spacing: 0;
  line-height: 52px; text-align: center;
  box-shadow: 0 10px 30px rgba(226,55,68,.35);
}
#tsOverlay:has(#tsWidget) > div:first-child::after {
  content: 'BIG ASERE';
  display: block; text-align: center;
  font-family: var(--home-font-display);
  font-size: clamp(26px, 5vw, 34px); font-weight: 700;
  letter-spacing: .02em; color: #fff;
}

/* [D] NEW: #tsOverlay:has(#tsWidget) > div:nth-child(2) / PROPERTY:
   color / LEGACY: element-inline color:#999 / WHY: inline-style
   precedence; raises the helper copy to a legible muted tone on the
   dark branded surface. (Copy text itself is inside the protected
   script and is NOT changed.) */
#tsOverlay:has(#tsWidget) > div:nth-child(2) {
  color: rgba(255,255,255,.72) !important;
  max-width: 34ch; text-align: center; line-height: 1.5;
}
/* #tsWidget has no inline styles — normal rules suffice. */
#tsOverlay #tsWidget { min-height: 65px; margin-top: 4px; }


/* ═══ 17. Phase 1B — discovery hierarchy ═══════════════════════════
   Ordering intent → search → discovery → restaurants. Members demoted
   below discovery (trigger relocated in markup; restyled here because
   the legacy .hero .members layout rules no longer apply to it). */

/* ── 17.1 Members trigger: premium secondary benefit band ────────── */
#membersTrigger {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: 12px; text-align: left;
  width: min(calc(100% - 2 * var(--home-gutter-mobile)), calc(var(--home-container-max) - 2 * var(--home-gutter-desktop)));
  margin: var(--home-sp-3) auto var(--home-sp-6);
  padding: 15px 18px; border: none; cursor: pointer; font: inherit;
  border-radius: var(--home-radius-modal);
  background:
    radial-gradient(120% 200% at 100% 0, rgba(226,55,68,.20), transparent 55%),
    linear-gradient(120deg, #17171B, #26262C);
  box-shadow: var(--home-shadow-card);
  transition: transform var(--home-motion-base) var(--home-ease),
              box-shadow var(--home-motion-base) var(--home-ease);
}
@media (hover: hover) { #membersTrigger:hover { transform: translateY(-1px); box-shadow: var(--home-shadow-floating); } }
@media (min-width: 1025px) { #membersTrigger { width: min(calc(100% - 64px), calc(var(--home-container-max) - 64px)); } }
#membersTrigger .ba { background: rgba(255,255,255,.14); color: #fff; }
#membersTrigger .mtxt {
  color: #fff; font-size: 15px; font-weight: 650;
  white-space: normal; overflow: visible; text-overflow: clip; min-width: 0;
}
#membersTrigger .mtxt .sub { color: rgba(255,255,255,.68); font-weight: 500; }

/* ── 17.2 Hero: desktop web composition ──────────────────────────── */
@media (min-width: 769px) {
  .hero { padding-bottom: 34px; }
  /* Deliberate two-line break: "Your favorite food," / "delivered in
     minutes" — sized so the second line never orphans "minutes". */
  .hero-title { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.06; letter-spacing: -.02em; max-width: 21ch; }
  .hero-title .tred { white-space: nowrap; }
  .hero-lead { margin-top: 10px; max-width: 40ch; }
  .hero-food { top: 84px; }
  .hero-food img { width: clamp(240px, 33vw, 470px); }
  /* Search leads; the pill and stats support it. */
  .cap { max-width: 680px; }
  .promo1 { margin-top: 12px; padding: 7px 14px; font-size: 13px; }
  .hstats { margin-top: 16px; }
}

/* ── 17.3 Search: primary action of the hero ─────────────────────── */
.cap { border: 1.5px solid var(--home-line); }
#capMicBtn { color: var(--home-brand); }
#capFilterBtn { color: var(--home-faint); }
.promo1 { border-color: rgba(226,55,68,.16); }

/* ── 17.4 Categories: first discovery entry ──────────────────────── */
.cat-icon-wrap { border: 1px solid var(--home-line); box-shadow: none; }
.cat-name { color: var(--home-body); }
.cat-card.active .cat-name { color: var(--home-brand); }
@media (hover: hover) {
  .cat-card:hover .cat-icon-wrap { transform: translateY(-2px) scale(1.01); box-shadow: var(--home-shadow-subtle); }
}

/* ── 17.5 Restaurants: core of the home ──────────────────────────── */
#restaurants .section-title { color: var(--home-ink); }
.sub-stitle { font-weight: 700; }
/* Integrated selected filter (replaces the heavy black block) */
.rest-filter-btn.active {
  background: var(--home-danger-soft); border-color: var(--home-brand);
  color: var(--home-brand-strong); box-shadow: none;
}
.rest-filter-btn { color: var(--home-body); }
/* Card hierarchy: image-led, name > rating > context */
.rc h3 { font-weight: 650; }
.lb { box-shadow: var(--home-shadow-subtle); font-weight: 700; }
.rc .rate { background: var(--home-soft); }
.rc .r2 .fee { color: var(--home-green); }


/* ═══ 18. Phase 2 — explicit discovery states ══════════════════════
   Empty (quiet, neutral), error (calm, trustworthy, danger-soft) and
   filter-empty (compact, neutral) rendered by renderDiscoveryState()
   inside the existing #catsGrid / #restGrid targets. */
.home-discovery-state {
  width: 100%; grid-column: 1 / -1; flex: 1 1 100%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--home-sp-5) var(--home-sp-4);
  background: var(--home-soft);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius-card);
  text-align: center;
}
.home-discovery-state .hds-msg {
  margin: 0; font-size: 14px; line-height: 1.45; color: var(--home-muted);
}
.home-discovery-state--error {
  background: var(--home-danger-soft);
  border-color: rgba(196,32,48,.18);
}
.home-discovery-state--error .hds-msg { color: var(--home-danger); font-weight: 600; }
.home-discovery-state--filter-empty { padding: var(--home-sp-4); }
.hds-retry {
  border: 1px solid rgba(196,32,48,.28); background: var(--home-surface);
  color: var(--home-danger); font: inherit; font-size: 13px; font-weight: 600;
  border-radius: var(--home-radius-pill); padding: 8px 18px; min-height: 38px;
  cursor: pointer;
  transition: background var(--home-motion-base) var(--home-ease),
              border-color var(--home-motion-base) var(--home-ease);
}
@media (hover: hover) { .hds-retry:hover { background: #fff; border-color: rgba(196,32,48,.45); } }
.hds-retry:disabled { opacity: .55; cursor: default; }
/* The pre-existing i18n empty messages (cats.none / rests.none) are plain
   inline-styled <p> tags emitted by the protected renderers; give them the
   same quiet intentional surface without touching the renderers. */
#catsGrid > p, #restGrid > p {
  width: 100%; grid-column: 1 / -1; flex: 1 1 100%;
  margin: 0; padding: var(--home-sp-5) var(--home-sp-4);
  background: var(--home-soft); border: 1px solid var(--home-line);
  border-radius: var(--home-radius-card); font-size: 14px;
}

/* ═══ 19. Phase 3 — responsive web experience ══════════════════════
   Consolidated mobile block relocated to the end of the sheet so its
   ≤768 overrides win over every base rule above by source order.
   Breakpoint system: base / ≥1025 / 769–1024 / ≥769 / ≤768 / ≤480
   plus (hover:hover) and (prefers-reduced-motion). ═══ */

/* ── 19.1 Offers: desktop/tablet composition (no artificial carousel;
   a single offer ends the section naturally, never stretched). ── */
@media (min-width: 769px) {
  .offers-grid { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
  .offer-card { flex: 0 0 280px; }
  #specialOffers { padding: 40px 0 8px; }
  #specialOffers .sec-head { margin-bottom: 12px; }
}

/* ── 19.2 Discovery states: readable width on wide canvases ── */
.home-discovery-state { max-width: 640px; margin-inline: auto; }

/* ── 19.3 Members modal layering + responsive sizing (presentation only) ──
   Root cause of the reported blocker: the inline app-home rule
   `#membersModal { z-index: 200 }` sits below every fixed Home layer
   (navbar 1000, float-cart 9500, active-order 9550, bottom-nav 9600),
   so navbar and bottom nav painted over the open modal. #membersModal is
   a direct child of <body> with no transformed/opacity/filter/isolation
   ancestor (verified), so raising its own z-index is sufficient — no JS,
   no display changes. The inline z-index:200 has NO !important, so this
   later same-specificity rule wins by source order (0 new !important).
   Semantic layer bands:
     Home normal + fixed chrome ... < 10000  (max today 9600)
     Home modal/overlay band ....... 10000   (this modal)
     Security gate (Turnstile) ..... 99999   (unchanged — still on top). */
#membersModal { z-index: 10000; }
/* Phase 4: #mmTitle was promoted h3 → h2 to fix DOM heading order. The
   inline rule `.mm-hd h3` no longer matches it, so replicate the exact
   four declarations here (same specificity level, id target) to keep the
   modal title visually identical — 0 visual regression, 0 !important. */
.mm-hd #mmTitle { font-size: 23px; font-weight: 900; letter-spacing: -.5px; margin: 0; }
/* Phase 4: lock background scroll only while the Members modal is open.
   Removed on every close route (X / overlay / Escape) via the shared
   helper. The fixed modal's own .mm-box keeps its internal scroll. */
body.home-modal-open { overflow: hidden; }
.mm-box {
  width: min(100%, 480px);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── 19.4 Turnstile shell responsive presentation (CSS only; the
   overlay is fixed inset:0 so it already fills the real viewport;
   padding is NOT set inline, so no !important is needed). ── */
#tsOverlay {
  padding: 24px max(20px, env(safe-area-inset-right))
           calc(24px + env(safe-area-inset-bottom, 0px))
           max(20px, env(safe-area-inset-left));
}
#tsOverlay:has(#tsWidget) > div:nth-child(2) { padding-inline: 8px; }

/* ── 19.5 Reduced motion: cover 1B/2/3 additions too ── */
@media (prefers-reduced-motion: reduce) {
  #membersTrigger, .offer-copy, .hds-retry, .rest-filter-btn, .cap,
  .cap-filt, .bn-item, .offer-card, .cat-icon-wrap { transition: none; }
}

/* ── 19.6 Mobile web ≤768 (consolidated single block) ── */
@media (max-width: 768px) {
  /* Header must be fully opaque on mobile so scrolled content doesn't
     show through.
     !important justification (single authorized use):
       NEW SELECTOR:    #navbar (this block)
       PROPERTY:        background
       LEGACY SELECTOR: #navbar (inline shared style, index.html)
       LEGACY PROPERTY: background: rgba(255,255,255,.9) !important
       WHY REQUIRED:    the legacy declaration carries !important, so a
                        normal declaration can never override it; source
                        order only breaks the tie between two !important
                        declarations of equal specificity. */
  #navbar { background: #fff !important; }

  /* Compact restaurant carousel cards (approved reference density).
     Overrides the inline app-home rule flex:0 0 78% / max-width:320px
     by source order (same specificity, later stylesheet). */
  .rest-grid .rc, .rest-grid .skel-rest-card { flex: 0 0 216px; max-width: 216px; }
  .rc .ph { aspect-ratio: 16/10; border-radius: 16px; }
  .rc .logo { width: 36px; height: 36px; border-radius: 10px; border-width: 2px; }
  .lb { font-size: 10px; padding: 3px 7px; }
  .rc .in { padding: 8px 2px 0; }
  .rc h3 { font-size: 15px; }
  .rc .rate { font-size: 12px; padding: 3px 8px; }
  .rc .r2 { font-size: 12.5px; margin-top: 4px; }
  .sub-stitle { margin: 14px 0 10px; }

  /* Compact offer chips (approved reference density) */
  .offer-card { flex: 0 0 190px; padding: 12px 14px; gap: 4px; border-radius: 16px; }
  .offer-cond { font-size: 12.5px; }
  .offer-copy { margin-top: 6px; min-height: 34px; padding: 7px 12px; font-size: 12px; }

  /* Touch-target foundation for the real mobile controls */
  .bn-item, .cap-filt, #langToggle, #navToggle { min-height: 44px; }

  /* ── (moved here in Phase 3 consolidation — was a second ≤768 block) ──
     Mobile hero + stats (confirmed 1B findings). */
  .hero { padding-bottom: 14px; }
  /* Image accompanies the H1 only: capped height + bottom fade so it
     can never sit over the lead; no z-index hacks. */
  .hero-food { top: 98px; width: 40%; max-width: 172px; }
  .hero-food img {
    max-height: 148px; object-fit: contain; object-position: right top;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%),
                        linear-gradient(to bottom, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 12%),
                linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-composite: intersect;
  }
  .hero-title { font-size: clamp(21px, 5.9vw, 26px); line-height: 1.12; }
  .hero-lead { margin-top: 8px; font-size: 14px; line-height: 1.45; }
  .cap { margin-top: 14px; }
  /* First-order benefit: readable, deliberate two lines max, no alert feel */
  .promo1 { min-height: 44px; font-size: 13px; padding: 9px 14px; line-height: 1.35; }
  /* Stats: stable 3-column grid — all three claims fully visible,
     no horizontal clipping (replaces the cut-off carousel). */
  .hstats {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px; overflow: visible; padding: 0; margin-top: 12px;
  }
  .hstats .s {
    min-width: 0; height: auto; margin: 0; padding: 10px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    font-size: 11.5px; border-radius: 14px; white-space: normal;
  }
  .hstats .s b { font-size: 13px; }
  .hstats .s > span:not(.ic) { line-height: 1.3; }
  /* Members band: full title visible, compact grid, no truncation */
  #membersTrigger { padding: 14px 16px; gap: 11px; }
  #membersTrigger .mtxt { font-size: 14.5px; }
  #membersTrigger .mtxt .sub { display: block; font-size: 12.5px; }

  /* ── Phase 3: mobile web responsive refinements ── */
  /* Horizontal discovery rows own their scroll; the body never does.
     Softer snapping than the legacy 'mandatory' (proximity only). */
  .cats-grid, .rest-grid, .offers-grid {
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--home-gutter-mobile);
  }
  /* Touch browsers must not keep decorative hover transforms stuck */
  .rc:hover { transform: none; }
  .rest-filter-btn:hover { transform: none; }
  /* Discovery states: comfortable but not towering; ≥44px retry target */
  .home-discovery-state { padding: var(--home-sp-4); }
  .hds-retry { min-height: 44px; }
  /* Offers → Members → Footer rhythm (secondary conversion content) */
  #specialOffers { padding: 18px 0 6px; }
  footer { margin-top: 24px; }

  /* ── Fixed-layer coexistence bands (LAYERING GEOMETRY contract).
     Measured reality at 390×844: bottom nav 0–76, float-cart button band
     ~92–142, active-order band 84–158, cookie banner 84–191 — so the
     active-order banner covered the float-cart button, and it covered the
     cookie "Got it" button when both were visible. Conditional :has()
     bands keep every component at its natural position when alone and
     only lift it when a lower band is actually occupied (progressive
     enhancement: browsers without :has() keep today's behavior). */
  body:has(#baFloatCart.show) #activeOrderBanner {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }
  /* Cookie banner lift.
     CONTROLLED !IMPORTANT EXCEPTION (1 declaration, positioning only):
       INLINE PROPERTY:  bottom
       CURRENT VALUE:    84px via inline app-home rule
                         `#cookieBanner { bottom: calc(84px + env(...)) !important }`
                         (plus element-inline `bottom:0` in the style attribute)
       REQUIRED:         calc(232px + safe-area) when active-order or
                         float-cart occupy the lower bands
       WHY NORMAL CSS CANNOT WIN: the legacy declaration carries
                         !important (and the attribute value is element-
                         inline); only a later !important of equal or
                         higher specificity can override it.
       RESPONSIVE SCOPE: ≤768px, only while a lower band is occupied. */
  body:has(#activeOrderBanner:not([style*="none"])) #cookieBanner,
  body:has(#baFloatCart.show) #cookieBanner {
    bottom: calc(232px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 17.6 Small mobile web (Phase 3: consolidated 374 → 480) ─────── */
@media (max-width: 480px) {
  .hstats { gap: 6px; }
  .hstats .s { padding: 9px 8px; font-size: 11px; }
  .hstats .s b { font-size: 12px; }
}