/* ──────────────────────────────────────────────────────────────────────
 * Dinepe Storefront — Design System v2
 *
 * A from-scratch rebuild benchmarked against Swiggy / Zomato /
 * DoorDash / Wolt. Everything is mobile-first; desktop layouts kick
 * in at ≥1024px. The single CSS variable `--sf-brand` is injected
 * per-tenant from the layout's inline <style> block so every brand
 * surface cascades from one source of truth.
 *
 * ── Class surface contract ──
 * Every selector that existed in v1 still exists here. The
 * implementations are new, but the names, ids, and data attributes
 * are unchanged because storefront.js, Alpine stores, inline scripts
 * across 14 blade templates, and customer service-worker caches
 * all hard-code those selectors. Breaking any of them breaks the
 * cart, checkout, login, or tracking flows.
 *
 * ── File layout ──
 *   1.  Tokens (colors / type / spacing / radii / shadows)
 *   2.  Reset + base typography
 *   3.  Header + bottom nav + bottom-pill components
 *   4.  Buttons + inputs + steppers + chips
 *   5.  Drawer (off-canvas cart) + modal (login)
 *   6.  Cart drawer specifics
 *   7.  Toast region
 *   8.  Generic page chrome (home / menu / checkout / orders / track)
 *   9.  Order tracking specifics (sf-tk-*)
 *   10. Login form specifics (sf-login-*)
 *   11. Customize modal + address picker (sf-cust-* / sf-addr-*)
 *   12. Order history (sf-orders-*)
 *   13. Checkout (sf-co-*)
 *   14. Menu page rail + cards (sf-menu-* / sf-cat-pill / sf-prod-*)
 *   15. Home page sections (sf-hero / sf-rinfo / sf-coupon / sf-cat-tile / sf-promo / sf-combo / sf-bogo / sf-best / sf-hmenu / sf-hmprod / sf-about / sf-footer / sf-hh)
 *   16. Order-type dropdown + headers / brand bar
 *   17. Desktop tier (≥1024px)
 *   18. Wide desktop (≥1280px)
 *   19. Reduced motion / hover-capable polish
 * ──────────────────────────────────────────────────────────────── */


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 1. Tokens                                                    │
 * ╰──────────────────────────────────────────────────────────────╯ */

:root {
  /* Surfaces — neutral warm palette so the brand color carries weight. */
  --sf-bg:           #faf7f2;   /* page bg, soft cream */
  --sf-bg-2:         #f1ede5;   /* slightly deeper bg for inset rows */
  --sf-card:         #ffffff;
  --sf-card-2:       #fbfaf7;
  --sf-overlay:      rgba(15, 23, 42, .58);  /* hero text legibility */

  /* Text scale */
  --sf-text:         #0f172a;
  --sf-text-2:       #475569;
  --sf-text-3:       #94a3b8;
  --sf-text-muted:   #cbd5e1;
  --sf-text-on-brand:#ffffff;

  /* Lines */
  --sf-line:         #ececec;
  --sf-line-2:       #d8d8d8;
  --sf-line-3:       #f5f5f5;

  /* Status — Zomato green for ratings, Swiggy red for warnings. */
  --sf-success:      #1ba672;
  --sf-success-bg:   #e6f7f0;
  --sf-success-2:    #038a4d;
  --sf-rating:       #267e3e;   /* darker, Zomato-rating green */
  --sf-rating-bg:    #ecf6ee;
  --sf-danger:       #e23744;
  --sf-danger-bg:    #fdecee;
  --sf-warning:      #b45309;
  --sf-warning-bg:   #fff7e0;
  --sf-info:         #1f6feb;
  --sf-info-bg:      #e8f1ff;
  --sf-veg:          #1ba672;
  --sf-nv:           #e23744;

  /* Radii — slightly tighter than v1 to feel sharper. */
  --sf-radius-xs:    6px;
  --sf-radius-sm:    10px;
  --sf-radius:       14px;
  --sf-radius-lg:    20px;
  --sf-radius-xl:    28px;
  --sf-radius-pill:  999px;

  /* Shadows — softer near-black tint reads more premium than rgba black. */
  --sf-shadow-xs:    0 1px 2px rgba(15, 23, 42, .04);
  --sf-shadow-sm:    0 2px 6px rgba(15, 23, 42, .06);
  --sf-shadow:       0 4px 12px -4px rgba(15, 23, 42, .10);
  --sf-shadow-md:    0 10px 24px -12px rgba(15, 23, 42, .15);
  --sf-shadow-lg:    0 24px 48px -20px rgba(15, 23, 42, .22);
  --sf-shadow-xl:    0 32px 64px -24px rgba(15, 23, 42, .28);
  --sf-shadow-cta:   0 12px 24px -10px rgba(252, 128, 25, .45);

  /* Layout */
  --sf-header-h:     60px;
  --sf-bnav-h:       64px;
  --sf-content-w:    780px;
  --sf-rail-gap:     12px;
  /* Height of the desktop sub-nav strip (the bottom nav turns into a
     sticky top strip at >=1024px). 0 on mobile, where the nav is fixed
     to the bottom instead. Sticky page toolbars offset by this. */
  --sf-subnav-h:     0px;

  /* Type */
  --sf-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, sans-serif;

  /* Brand defaults — overridden inline per tenant. */
  --sf-brand:        #fc8019;
  --sf-brand-soft:   #fff5ec;
  --sf-brand-glow:   rgba(252, 128, 25, .25);
  --sf-brand-dark:   #c2410c;
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 2. Reset + base                                              │
 * ╰──────────────────────────────────────────────────────────────╯ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.sf-body {
  font-family: var(--sf-font);
  background: var(--sf-bg);
  color: var(--sf-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.005em;
  min-height: 100dvh;
  /* Reserve space for the bottom nav on mobile. */
  padding-bottom: calc(var(--sf-bnav-h) + env(safe-area-inset-bottom) + 16px);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sf-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--sf-brand-glow); color: var(--sf-text); }

h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: -0.02em; font-weight: 800; }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 3. Header                                                    │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--sf-header-h);
  padding: 0 14px;
  padding-top: max(0px, env(safe-area-inset-top));
  background: var(--sf-card);
  border-bottom: 1px solid var(--sf-line);
  max-width: var(--sf-content-w);
  margin: 0 auto;
}

.sf-hdr-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sf-text);
  text-decoration: none;
  min-width: 0;
}
.sf-hdr-brand:hover { text-decoration: none; }

.sf-hdr-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.sf-hdr-logo--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sf-brand), var(--sf-brand-dark));
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  box-shadow: var(--sf-shadow-xs);
}

.sf-hdr-brand-text { display: flex; flex-direction: column; min-width: 0; }
.sf-hdr-name {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32vw;
  color: var(--sf-text);
}
.sf-hdr-tagline {
  font-size: 11px;
  color: var(--sf-text-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32vw;
  font-weight: 500;
  display: none;
}

.sf-hdr-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

.sf-hdr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--sf-radius-pill);
  border: 1px solid var(--sf-line);
  background: var(--sf-card);
  color: var(--sf-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
/* The native `hidden` attribute must beat our `display:inline-flex`
   above, or the JS-driven Login ↔ Profile swap will leave both
   buttons visible at the same time. */
.sf-hdr-btn[hidden] { display: none !important; }
.sf-hdr-btn:hover { border-color: var(--sf-text-3); color: var(--sf-text); text-decoration: none; }
.sf-hdr-btn:active { transform: translateY(1px); }
.sf-hdr-btn:focus-visible { outline: 3px solid var(--sf-brand-glow); outline-offset: 2px; }
.sf-hdr-btn--ghost { background: transparent; }
.sf-hdr-btn--cart {
  width: 40px; height: 40px; padding: 0;
  background: var(--sf-brand); border-color: transparent; color: #fff;
  font-size: 16px; box-shadow: var(--sf-shadow-cta);
}
.sf-hdr-btn--cart:hover { background: var(--sf-brand-dark); border-color: transparent; color: #fff; }
.sf-hdr-btn--profile {
  /* Logged-in affordance — slightly accented so a returning customer
     spots it instantly. The icon picks up the brand colour while the
     pill stays neutral so it doesn't compete with the cart CTA. */
  border-color: var(--sf-line);
}
.sf-hdr-btn--profile i { color: var(--sf-brand); font-size: 16px; }
.sf-hdr-btn--profile:hover { border-color: var(--sf-brand); color: var(--sf-text); }
.sf-hdr-btn-text { display: none; }   /* default: icon-only on phones */

.sf-cart-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--sf-card);
  font-feature-settings: 'tnum';
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 4. Order-type dropdown                                       │
 * ╰──────────────────────────────────────────────────────────────╯
 *
 * Sits between brand and actions in the header. Compact pill style
 * tinted with brand color so it reads as the "primary mode" choice.
 * The dropdown opens downward as a card (mobile + desktop).
 */

.sf-otype-dd { position: relative; }
.sf-otype-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 11px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-brand-soft);
  color: var(--sf-brand-dark);
  border: 1px solid color-mix(in srgb, var(--sf-brand) 22%, transparent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sf-otype-dd-btn:hover { background: color-mix(in srgb, var(--sf-brand) 14%, white); }
.sf-otype-dd-btn:focus-visible { outline: 3px solid var(--sf-brand-glow); outline-offset: 2px; }
.sf-otype-dd-icon { font-size: 13px; }
.sf-otype-dd-caret { font-size: 10px; opacity: .8; transition: transform .15s ease; }
.sf-otype-dd.is-open .sf-otype-dd-caret { transform: rotate(180deg); }

.sf-otype-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow-lg);
  padding: 6px;
  z-index: 60;
  list-style: none;
  margin: 0;
}
.sf-otype-dd-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--sf-radius-sm);
  background: transparent;
  color: var(--sf-text);
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  transition: background .12s ease;
}
.sf-otype-dd-opt > i { color: var(--sf-text-2); font-size: 14px; width: 18px; text-align: center; }
.sf-otype-dd-opt > span { display: flex; flex-direction: column; }
.sf-otype-dd-opt strong { font-weight: 700; font-size: 14px; line-height: 1.2; }
.sf-otype-dd-opt small { font-size: 11.5px; color: var(--sf-text-3); margin-top: 1px; }
.sf-otype-dd-opt:hover { background: var(--sf-bg); }
.sf-otype-dd-opt.is-active { background: var(--sf-brand-soft); }
.sf-otype-dd-opt.is-active > i { color: var(--sf-brand-dark); }
.sf-otype-dd-opt.is-active strong { color: var(--sf-brand-dark); }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 5. Main + bottom nav + FAB                                   │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-main {
  max-width: var(--sf-content-w);
  margin: 0 auto;
  padding: 0 14px 24px;
  /* All page content lives directly under .sf-main, so this is the
     single source of horizontal gutter on phones + tablets. */
}
/* Home page: the hero header is full-bleed (edge-to-edge) so we
   use negative margins on the hero itself to break out of the
   .sf-main padding. The rest of the page content keeps its normal
   padding via .sf-main. */
body[data-active-nav="home"] .sf-home-hero {
  margin-left: -14px;
  margin-right: -14px;
}
@media (min-width: 768px) {
  body[data-active-nav="home"] .sf-home-hero { margin-left: -24px; margin-right: -24px; }
}
@media (min-width: 1024px) {
  body[data-active-nav="home"] .sf-home-hero { margin-left: -32px; margin-right: -32px; }
}
@media (min-width: 1280px) {
  body[data-active-nav="home"] .sf-home-hero { margin-left: 0; margin-right: 0; border-radius: 0 0 24px 24px; }
}

/* Bottom nav — Swiggy mobile pattern: icon + label, active gets a
   soft brand pill behind the icon. */
.sf-bnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--sf-line);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--sf-bnav-h) + env(safe-area-inset-bottom));
  max-width: var(--sf-content-w);
  margin: 0 auto;
}
.sf-bnav-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--sf-text-3);
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 6px 4px;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
  letter-spacing: 0.01em;
  isolation: isolate;
}
.sf-bnav-item i { font-size: 18px; transition: transform .15s ease; z-index: 1; }
.sf-bnav-item:hover { color: var(--sf-text); text-decoration: none; }
.sf-bnav-item:focus-visible { outline: 3px solid var(--sf-brand-glow); outline-offset: -3px; }
.sf-bnav-item.is-active { color: var(--sf-brand); }
.sf-bnav-item.is-active i { color: var(--sf-brand); transform: translateY(-1px); }
.sf-bnav-item.is-active::after {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 26px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-brand-soft);
  z-index: 0;
}
.sf-bnav-badge {
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(8px);
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  border: 2px solid var(--sf-card);
  font-feature-settings: 'tnum';
  z-index: 2;
}

/* Floating "View cart" pill — surfaces above the bottom nav. */
.sf-fab-cart {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sf-bnav-h) + 12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100% - 24px));
  padding: 12px 16px 12px 14px;
  border: 0;
  border-radius: var(--sf-radius);
  background: linear-gradient(135deg, var(--sf-brand), var(--sf-brand-dark));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--sf-shadow-cta), 0 8px 16px -8px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: transform .15s ease;
  animation: sfFabIn .25s cubic-bezier(.34, 1.2, .64, 1);
}
.sf-fab-cart:hover { transform: translateX(-50%) translateY(-2px); }
.sf-fab-cart:active { transform: translateX(-50%) translateY(0); }
.sf-fab-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px; height: 30px;
  padding: 0 8px;
  border-radius: var(--sf-radius-pill);
  background: rgba(255, 255, 255, .22);
  font-weight: 800;
  font-size: 13px;
  font-feature-settings: 'tnum';
}
.sf-fab-cart-text {
  flex: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-align: left;
}
.sf-fab-cart-text strong { font-weight: 800; font-size: 14px; }
.sf-fab-cart-text span   { opacity: .9; font-weight: 600; }
.sf-fab-cart-arrow { font-size: 14px; opacity: .9; }

@keyframes sfFabIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
body[data-active-nav="checkout"] .sf-fab-cart { display: none !important; }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 6. Buttons / inputs / steppers                               │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--sf-radius-sm);
  border: 1px solid var(--sf-line);
  background: var(--sf-card);
  color: var(--sf-text);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
  letter-spacing: -0.005em;
}
.sf-btn:hover { box-shadow: var(--sf-shadow-sm); }
.sf-btn:active { transform: translateY(1px); }
.sf-btn:disabled { opacity: .5; cursor: not-allowed; }
.sf-btn:focus-visible { outline: 3px solid var(--sf-brand-glow); outline-offset: 2px; }

.sf-btn--brand {
  background: var(--sf-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--sf-shadow-cta);
}
.sf-btn--brand:hover { background: var(--sf-brand-dark); }

.sf-btn--ghost {
  background: var(--sf-bg);
  color: var(--sf-text);
  border-color: var(--sf-line);
}
.sf-btn--ghost:hover { background: var(--sf-card); border-color: var(--sf-line-2); }

.sf-btn--block { width: 100%; }
.sf-btn--lg { padding: 14px 22px; font-size: 15px; border-radius: var(--sf-radius); }

.sf-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--sf-brand);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.sf-link:hover { text-decoration: underline; }

/* Inputs (used by login + customize + address picker). */
.sf-form { display: flex; flex-direction: column; gap: 14px; }

.sf-field { display: flex; flex-direction: column; gap: 6px; }
.sf-field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sf-text-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sf-field-input-wrap {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-card);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-field-input-wrap:focus-within {
  border-color: var(--sf-brand);
  box-shadow: 0 0 0 4px var(--sf-brand-glow);
}
.sf-field-prefix {
  padding: 12px 14px;
  background: var(--sf-bg);
  color: var(--sf-text-2);
  font-weight: 700;
  font-size: 14px;
  border-right: 1px solid var(--sf-line);
}
.sf-field-input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--sf-text);
  background: transparent;
  min-width: 0;
}
.sf-field-input::placeholder { color: var(--sf-text-3); }
.sf-field-input--bare {
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
}
.sf-field-input--bare:focus { border-color: var(--sf-brand); box-shadow: 0 0 0 4px var(--sf-brand-glow); }
.sf-field-error {
  font-size: 12px;
  font-weight: 600;
  color: var(--sf-danger);
}

/* Stepper */
.sf-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--sf-brand);
  border-radius: var(--sf-radius-sm);
  overflow: hidden;
  background: var(--sf-card);
  box-shadow: var(--sf-shadow-xs);
}
.sf-stepper-btn {
  width: 32px; height: 34px;
  border: 0;
  background: transparent;
  color: var(--sf-brand);
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sf-stepper-btn:hover  { background: var(--sf-brand-soft); }
.sf-stepper-btn:active { background: color-mix(in srgb, var(--sf-brand) 18%, white); }
.sf-stepper-value {
  min-width: 28px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--sf-brand);
  font-feature-settings: 'tnum';
}
/* Compact stepper — used inline on the home browse-grid card foot. */
.sf-stepper--sm .sf-stepper-btn { width: 26px; height: 28px; font-size: 15px; }
.sf-stepper--sm .sf-stepper-value { min-width: 20px; font-size: 13px; }

/* Alpine: keep x-show/x-if elements hidden until Alpine initialises so the
   Add<->stepper swap and other x-cloak'd nodes don't flash on first paint. */
[x-cloak] { display: none !important; }

/* Generic chips (used in many places). */
.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-bg-2);
  color: var(--sf-text-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.sf-chip--brand { background: var(--sf-brand-soft); color: var(--sf-brand-dark); }
.sf-chip--success { background: var(--sf-success-bg); color: var(--sf-success-2); }
.sf-chip--danger { background: var(--sf-danger-bg); color: var(--sf-danger); }
.sf-chip--rating { background: var(--sf-rating); color: #fff; padding: 4px 8px; font-weight: 800; }
.sf-chip--rating i { font-size: 10px; }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 7. Veg / non-veg dot                                         │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-veg-dot {
  width: 14px; height: 14px;
  border: 1.5px solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 2px;
  box-sizing: border-box;
}
.sf-veg-dot::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.sf-veg-dot.veg { border-color: var(--sf-veg); }
.sf-veg-dot.veg::after { background: var(--sf-veg); }
.sf-veg-dot.nv  { border-color: var(--sf-nv); }
.sf-veg-dot.nv::after  { background: var(--sf-nv); }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 8. Drawer (cart) + modal (login)                             │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sf-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: var(--sf-overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sf-drawer-panel {
  position: relative;
  background: var(--sf-card);
  border-radius: var(--sf-radius-xl) var(--sf-radius-xl) 0 0;
  max-height: 94vh;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sf-shadow-xl);
  overscroll-behavior: contain;
}
.sf-drawer-panel::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 4px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-line-2);
  opacity: .8;
}
.sf-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 20px 14px;
  border-bottom: 1px solid var(--sf-line);
}
.sf-drawer-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.sf-drawer-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--sf-text-3);
  font-weight: 500;
}
.sf-drawer-close,
.sf-modal-close {
  width: 36px; height: 36px;
  border-radius: var(--sf-radius-pill);
  border: 0;
  background: var(--sf-bg);
  color: var(--sf-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sf-drawer-close:hover,
.sf-modal-close:hover { background: var(--sf-line); color: var(--sf-text); }
.sf-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.sf-drawer-footer {
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sf-line);
  background: var(--sf-card);
}
@media (min-width: 768px) {
  .sf-drawer { flex-direction: row; justify-content: flex-end; }
  .sf-drawer-panel {
    width: min(440px, 100%);
    max-height: 100vh;
    height: 100vh;
    border-radius: var(--sf-radius-xl) 0 0 var(--sf-radius-xl);
  }
  .sf-drawer-panel::before { display: none; }
}
.sf-drawer-enter, .sf-drawer-leave { transition: opacity .25s ease; }
.sf-drawer-enter-start, .sf-drawer-leave-end { opacity: 0; }
.sf-drawer-enter-end, .sf-drawer-leave-start { opacity: 1; }
.sf-drawer-enter .sf-drawer-panel,
.sf-drawer-leave .sf-drawer-panel { transition: transform .3s cubic-bezier(.34, 1.2, .64, 1); }
.sf-drawer-enter-start .sf-drawer-panel,
.sf-drawer-leave-end .sf-drawer-panel { transform: translateY(100%); }
.sf-drawer-enter-end .sf-drawer-panel,
.sf-drawer-leave-start .sf-drawer-panel { transform: translateY(0); }
@media (min-width: 768px) {
  .sf-drawer-enter-start .sf-drawer-panel,
  .sf-drawer-leave-end .sf-drawer-panel { transform: translateX(100%); }
  .sf-drawer-enter-end .sf-drawer-panel,
  .sf-drawer-leave-start .sf-drawer-panel { transform: translateX(0); }
}

/* Modal (login). Bottom-sheet on phones; centered card on desktop. */
.sf-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 600px) { .sf-modal { align-items: center; } }
.sf-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--sf-overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sf-modal-card {
  position: relative;
  background: var(--sf-card);
  border-radius: var(--sf-radius-xl) var(--sf-radius-xl) 0 0;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 32px 24px calc(28px + env(safe-area-inset-bottom));
  box-shadow: var(--sf-shadow-xl);
}
.sf-modal-card::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 4px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-line-2);
  opacity: .8;
}
@media (min-width: 600px) {
  .sf-modal-card { border-radius: var(--sf-radius-xl); max-height: 86vh; }
  .sf-modal-card::before { display: none; }
}
.sf-modal-close { position: absolute; top: 14px; right: 14px; }

.sf-modal-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.sf-modal-sub {
  font-size: 14px;
  color: var(--sf-text-2);
  margin: 0 0 22px;
  line-height: 1.5;
}
.sf-modal-fineprint {
  font-size: 11px;
  color: var(--sf-text-3);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 9. Cart drawer specifics                                     │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-cart-empty { text-align: center; padding: 48px 16px; }
.sf-cart-empty-glyph { font-size: 56px; opacity: .35; margin-bottom: 14px; }
.sf-cart-empty-title { font-weight: 800; font-size: 17px; margin: 0 0 6px; }
.sf-cart-empty-sub { font-size: 13px; color: var(--sf-text-3); margin: 0 0 24px; }
.sf-cart-lines { list-style: none; margin: 0; padding: 0; }
.sf-cart-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--sf-line);
}
.sf-cart-line:first-child { padding-top: 4px; }
.sf-cart-line:last-child { border-bottom: 0; }
.sf-cart-line-info { flex: 1; min-width: 0; }
.sf-cart-line-name {
  font-weight: 700;
  font-size: 14px;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.sf-cart-line-meta { font-size: 12px; color: var(--sf-text-3); margin: 3px 0 0; }
.sf-cart-line-notes {
  font-size: 12px;
  color: var(--sf-info);
  background: var(--sf-info-bg);
  padding: 4px 8px;
  border-radius: var(--sf-radius-xs);
  margin: 6px 0 0;
  display: inline-block;
}
.sf-cart-line-price {
  font-weight: 800;
  margin: 8px 0 0;
  font-size: 14px;
  font-feature-settings: 'tnum';
}
.sf-cart-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--sf-warning-bg);
  color: var(--sf-warning);
  border-radius: var(--sf-radius-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.sf-cart-totals {
  margin: 18px 0 0;
  padding: 16px;
  background: var(--sf-bg);
  border-radius: var(--sf-radius);
  border: 1px solid var(--sf-line);
}
.sf-cart-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--sf-text-2);
  margin: 0 0 8px;
  font-feature-settings: 'tnum';
}
.sf-cart-total-row dt, .sf-cart-total-row dd { margin: 0; }
.sf-cart-total-row--grand {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--sf-line-2);
  font-size: 16px;
  font-weight: 800;
  color: var(--sf-text);
}
.sf-cart-total-discount { color: var(--sf-success); font-weight: 600; }

/* ── Upsell Widgets (Cart Drawer) ─────────────────────────────── */
.sf-upsell-threshold {
  margin: 14px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 1px solid rgba(245, 158, 11, .2);
  border-radius: var(--sf-radius-sm, 10px);
}
.sf-upsell-threshold-bar {
  height: 4px;
  background: rgba(245, 158, 11, .15);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sf-upsell-threshold-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  border-radius: 4px;
  transition: width .4s ease;
}
.sf-upsell-threshold-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #92400e;
  margin: 0;
  font-weight: 500;
}
.sf-upsell-threshold-text i {
  color: #f59e0b;
  font-size: 14px;
}
.sf-upsell-threshold-text strong {
  font-weight: 700;
}

.sf-upsell-section {
  margin: 16px 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--sf-line-2, #e5e7eb);
}
.sf-upsell-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sf-text, #1f2937);
  margin: 0 0 12px;
}
.sf-upsell-title i {
  color: var(--sf-brand, #f59e0b);
  font-size: 12px;
}
.sf-upsell-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.sf-upsell-scroll::-webkit-scrollbar { display: none; }

.sf-upsell-card {
  flex-shrink: 0;
  width: 130px;
  background: var(--sf-card, #fff);
  border: 1px solid var(--sf-line-2, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
}
.sf-upsell-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.sf-upsell-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}
/* Shown when an upsell item has no image, or its image fails to load, so the
   card degrades to the same bowl glyph the menu cards use rather than a broken
   image icon. Matches .sf-upsell-img dimensions so the card height is stable. */
.sf-upsell-placeholder {
  width: 100%;
  height: 80px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--sf-line-2, #f3f4f6);
  color: var(--sf-brand, #b91c1c);
  font-size: 24px;
  opacity: .7;
}
.sf-upsell-card-body {
  padding: 8px 10px 6px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sf-upsell-veg {
  width: 14px;
  height: 14px;
  border: 1.5px solid;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.sf-upsell-veg.is-veg { border-color: #16a34a; }
.sf-upsell-veg.is-veg span { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.sf-upsell-veg.is-nonveg { border-color: #dc2626; }
.sf-upsell-veg.is-nonveg span { width: 6px; height: 6px; border-radius: 50%; background: #dc2626; }
.sf-upsell-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--sf-text, #1f2937);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-upsell-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--sf-text, #1f2937);
  margin: 4px 0 0;
}
.sf-upsell-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 0;
  background: var(--sf-brand-soft, rgba(245, 158, 11, .08));
  color: var(--sf-brand, #f59e0b);
  border: none;
  border-top: 1px solid var(--sf-line-2, #e5e7eb);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sf-upsell-add:hover {
  background: var(--sf-brand, #f59e0b);
  color: #fff;
}
.sf-upsell-add i { font-size: 9px; }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 10. Toast region                                             │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sf-bnav-h) + 90px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100% - 32px);
}
.sf-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #1c1c1c;
  color: #fff;
  border-radius: var(--sf-radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--sf-shadow-lg);
  animation: sfToastIn .25s ease;
  pointer-events: auto;
}
.sf-toast.is-leaving { animation: sfToastOut .22s ease forwards; }
.sf-toast--ok::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--sf-success); }
.sf-toast--err::before { content: '\f06a'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--sf-danger); }
.sf-toast--info::before { content: '\f05a'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--sf-info); }
@keyframes sfToastIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sfToastOut { to { opacity: 0; transform: translateY(8px); } }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 11. Generic page chrome                                      │
 * ╰──────────────────────────────────────────────────────────────╯ */

/* Section heads used across home + menu + checkout. */
.sf-sec { margin: 0 0 28px; }
.sf-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}
.sf-sec-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.025em;
}
.sf-sec-sub  { font-size: 12px; color: var(--sf-text-3); font-weight: 600; white-space: nowrap; }
.sf-sec-link { font-size: 13px; font-weight: 700; color: var(--sf-brand); white-space: nowrap; }
.sf-sec-link:hover { text-decoration: underline; }

/* Horizontal scrolling rail used by coupons / combos / bogo / bestsellers / promos. */
.sf-rail {
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 14px;
  /* Bleed to the viewport edge — but match .sf-main's gutter so the
     first/last cards still align with section headers. */
  margin: 0 -14px;
  padding: 4px 14px 8px;
  scrollbar-width: thin;
  gap: var(--sf-rail-gap);
}
.sf-rail::-webkit-scrollbar { height: 6px; }
.sf-rail::-webkit-scrollbar-thumb { background: var(--sf-line); border-radius: var(--sf-radius-pill); }
.sf-rail > * { scroll-snap-align: start; }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 12. Home — hero + restaurant info                            │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-home { padding: 0 0 32px; background: var(--sf-bg); }

/* ╭──────────────────────────────────────────────────────────────╮
 * │ 12. Home — Hero carousel (promo banner style)                 │
 * ╰──────────────────────────────────────────────────────────────╯
 *
 * Transform-based slider (not scroll-snap) so it stays in sync with
 * the dots/counter on every device. Wide 5:2 aspect so promo banners
 * don't look stretched. Dots + counter sit OUTSIDE the card (Swiggy
 * + DoorDash pattern). Prev/next arrows appear on hover-capable
 * pointers. Touch swipe via pointer events. Auto-advances every 5s,
 * pauses on hover/focus/visibility-change.
 */

.sf-home { padding: 0 0 32px; background: var(--sf-bg); }

.sf-hero {
  position: relative;
  margin: 14px 0 6px;
  border-radius: var(--sf-radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--sf-brand-soft), var(--sf-bg));
  aspect-ratio: 5 / 2;
  max-height: 220px;
  box-shadow: var(--sf-shadow-sm);
  isolation: isolate;
  /* Below the hero we render dots + counter as siblings — keep the
     wrapper non-overflow-hidden by elevating only the .sf-hero-track.
     Done via the slide-track child. */
}

.sf-hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .45s cubic-bezier(.32, .72, .35, 1);
  will-change: transform;
  touch-action: pan-y;       /* allow vertical page scroll while swiping */
}
.sf-hero.is-dragging .sf-hero-track { transition: none; }

.sf-hero-slide {
  flex: 0 0 100%;
  position: relative;
  background: var(--sf-bg);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.sf-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;       /* so swipe gestures land on the track */
}
.sf-hero-slide--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sf-brand), var(--sf-brand-dark));
  color: #fff;
}
.sf-hero-slide--placeholder span {
  font-size: 64px; font-weight: 800; letter-spacing: -.03em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}

/* Slide counter chip — top-right corner of the card. Visible only
   when there's more than one slide (the chip element is omitted by
   the blade in that case). */
.sf-hero-counter {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--sf-radius-pill);
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-feature-settings: 'tnum';
}

/* Prev / next arrow buttons — desktop hover only, hidden on mobile. */
.sf-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--sf-text);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--sf-shadow-md);
  transition: background .15s ease, transform .15s ease;
}
.sf-hero-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.sf-hero-arrow:active { transform: translateY(-50%) scale(.96); }
.sf-hero-arrow--prev { left: 10px; }
.sf-hero-arrow--next { right: 10px; }
@media (hover: hover) and (pointer: fine) {
  .sf-hero-arrow { display: inline-flex; }
}

/* Dots — sit BELOW the card, not inside it. */
.sf-hero-dots {
  display: inline-flex;
  gap: 6px;
  margin: 10px auto 0;
  justify-content: center;
  width: 100%;
}
.sf-hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sf-line-2);
  border: 0; padding: 0;
  cursor: pointer;
  transition: width .25s ease, background .15s ease;
}
.sf-hero-dot.is-active {
  background: var(--sf-brand);
  width: 22px;
  border-radius: var(--sf-radius-pill);
}
.sf-hero-dot:hover { background: var(--sf-text-3); }
.sf-hero-dot.is-active:hover { background: var(--sf-brand-dark); }

/* ── Swiggy-style home hero header ──────────────────────── */
.sf-home-hero {
  position: relative;
  padding: 0 14px 20px;
  background: var(--sf-brand);
  color: #fff;
  overflow: hidden;
  /* Pull up into the header space — the header itself gets the same
     bg on the home page, so they merge seamlessly. */
  margin-top: calc(-1 * var(--sf-header-h, 56px));
  padding-top: calc(var(--sf-header-h, 56px) + 16px);
  /* Bottom rounded corners — Swiggy-style card feel */
  border-radius: 0 0 24px 24px;
}
/* Make the site header transparent + white text on the home page so
   it visually merges with the dark hero below it. The header is
   position:sticky so it stays on top; we just strip its background
   and border so the hero gradient shows through. */
body[data-active-nav="home"] .sf-hdr {
  background: var(--sf-brand) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  color: #fff;
}
body[data-active-nav="home"] .sf-hdr-brand,
body[data-active-nav="home"] .sf-hdr-name,
body[data-active-nav="home"] .sf-hdr-tagline { color: #fff; }
body[data-active-nav="home"] .sf-hdr-btn {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  background: rgba(255, 255, 255, .12);
}
body[data-active-nav="home"] .sf-hdr-btn:hover {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .2);
  color: #fff;
}
body[data-active-nav="home"] .sf-hdr-btn--profile i { color: #fff; }
body[data-active-nav="home"] .sf-loc-chip {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}
body[data-active-nav="home"] .sf-loc-chip i { color: #a5b4fc; }

.sf-home-hero-bg {
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}

/* ── Hero: Delivery animation row ── */
.sf-hero-delivery-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.sf-hero-delivery-anim {
  position: relative;
  width: 80px;
  height: 40px;
  flex-shrink: 0;
}
.sf-hero-road {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.3);
  border-radius: 3px;
}
.sf-hero-road::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: rgba(255,255,255,.7);
  border-radius: 3px;
  animation: sfRoadDash 1.2s linear infinite;
}
@keyframes sfRoadDash {
  0% { left: -40%; }
  100% { left: 100%; }
}
.sf-hero-scooter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: sfScooterBounce 1s ease-in-out infinite;
}
@keyframes sfScooterBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
.sf-hero-status-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sf-hero-eta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  opacity: .9;
}
.sf-hero-eta-pill i {
  font-size: 11px;
  opacity: .7;
}
.sf-home-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}
.sf-home-hero-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sf-home-hero-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .25);
  flex-shrink: 0;
  background: rgba(255, 255, 255, .12);
}
.sf-home-hero-logo--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}
.sf-home-hero-brand-text { flex: 1; min-width: 0; }
.sf-home-hero-name {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-home-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.sf-home-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sf-home-hero-status.is-open { color: #4ade80; }
.sf-home-hero-status.is-closed { color: #fca5a5; }
.sf-home-hero-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.sf-home-hero-status.is-open .sf-home-hero-status-dot {
  animation: sfHeroDotPulse 1.5s ease-in-out infinite;
}
@keyframes sfHeroDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.3); }
}
.sf-home-hero-eta,
.sf-home-hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
}
.sf-home-hero-eta i,
.sf-home-hero-rating i { font-size: 10px; color: rgba(255, 255, 255, .7); }
.sf-home-hero-rating i { color: #fbbf24; }
.sf-home-hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
  backdrop-filter: blur(4px);
}
.sf-home-hero-search:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
  text-decoration: none;
}
.sf-home-hero-search i { font-size: 14px; flex-shrink: 0; }
.sf-home-hero-search span { flex: 1; }
@media (min-width: 480px) {
  .sf-home-hero { padding: 0 18px 24px; padding-top: calc(var(--sf-header-h, 56px) + 20px); }
  .sf-home-hero-logo { width: 56px; height: 56px; border-radius: 16px; }
  .sf-home-hero-name { font-size: 24px; }
  .sf-home-hero-search { padding: 14px 18px; font-size: 15px; }
}
@media (max-width: 360px) {
  .sf-home-hero { padding: 0 12px 16px; padding-top: calc(var(--sf-header-h, 56px) + 12px); }
  .sf-home-hero-logo { width: 40px; height: 40px; border-radius: 12px; }
  .sf-home-hero-name { font-size: 17px; }
  .sf-home-hero-search { padding: 10px 14px; font-size: 13px; }
}

/* Restaurant info bar — centered hero card. Brand title, optional tagline,
   cuisine pills, and rating sit stacked at the top centered; the meta strip
   (status / prep / address / min order) sits in a single centered row below. */
.sf-rinfo {
  margin: 0 0 18px;
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, var(--sf-card) 0%, var(--sf-bg) 100%);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sf-rinfo::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 90px;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--sf-brand) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.sf-rinfo-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.sf-rinfo-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sf-rinfo-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.01em;
}
.sf-rinfo-tagline {
  margin: 0;
  font-size: 13.5px;
  color: var(--sf-text-2);
  font-weight: 500;
  line-height: 1.45;
  max-width: 36ch;
}
.sf-rinfo-rating {
  margin-top: 6px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sf-rating);
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--sf-radius-pill);
  font-size: 13px;
  font-weight: 800;
  font-feature-settings: 'tnum';
  box-shadow: 0 2px 8px color-mix(in srgb, var(--sf-rating) 30%, transparent);
}
.sf-rinfo-rating i { font-size: 11px; }
.sf-rinfo-rating-count {
  display: block;
  font-size: 11px;
  color: var(--sf-text-3);
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
  white-space: nowrap;
}
.sf-rinfo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 18px;
  row-gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--sf-line);
  font-size: 13px;
  color: var(--sf-text-2);
  font-weight: 600;
  position: relative;
}
.sf-rinfo-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sf-rinfo-meta i { color: var(--sf-text-3); font-size: 12px; }

.sf-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--sf-radius-pill);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sf-status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.sf-status-pill.is-open { color: var(--sf-success-2); background: var(--sf-success-bg); }
.sf-status-pill.is-open::before { background: var(--sf-success); animation: sfPulse 2s ease-in-out infinite; }
.sf-status-pill.is-closed { color: var(--sf-danger); background: var(--sf-danger-bg); }
.sf-status-pill.is-closed::before { background: var(--sf-danger); }
@keyframes sfPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 166, 114, .35); }
  50%      { box-shadow: 0 0 0 5px rgba(27, 166, 114, .08); }
}

/* Closed banner (when outlet is shut). */
/* Closed banner (when outlet is shut). Centered to match the rinfo card. */
.sf-closed-banner {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--sf-danger-bg);
  color: var(--sf-danger);
  border-radius: var(--sf-radius);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--sf-danger) 18%, transparent);
  text-align: center;
}
.sf-closed-banner > i { margin-top: 0; flex-shrink: 0; }
.sf-closed-banner > div { max-width: 60ch; }

/* ── Happy-hour product tag ────────────────────────────────
   Shared by every storefront product card (menu page cards,
   home "Most loved" rail, home "Browse menu" grid) so the
   same rule reads identically wherever a dish is shown.
   Sits in normal flow (not absolute) so it can never be
   clipped by a card's `overflow: hidden`. */
.sf-hh-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 6px;
  background: #ea580c;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(234, 88, 12, .28);
}
.sf-hh-tag i { font-size: 9px; }
@media (min-width: 768px) {
  .sf-hh-tag { padding: 5px 10px; font-size: 10.5px; }
  .sf-hh-tag i { font-size: 10px; }
}

/* Happy-hour ribbon (legacy fallback). */
.sf-hh-ribbon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--sf-radius);
  background: linear-gradient(135deg, #fff7e0, #fde68a);
  border: 1px solid #f6d36b;
  color: #92400e;
}
.sf-hh-ribbon-icon {
  width: 36px; height: 36px;
  border-radius: var(--sf-radius-pill);
  background: #f59e0b;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(245, 158, 11, .5);
}
.sf-hh-ribbon-text { flex: 1; min-width: 0; }
.sf-hh-ribbon-headline { margin: 0; font-size: 14px; font-weight: 800; }
.sf-hh-ribbon-sub      { margin: 2px 0 0; font-size: 12px; font-weight: 600; opacity: .85; }

/* ── Happy-hour info cards (home page) ─────────────────── */
.sf-hh-sec { margin-top: 4px; }
.sf-hh-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 12px 4px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.sf-hh-cards::-webkit-scrollbar { display: none; }
.sf-hh-card {
  flex-shrink: 0;
  width: 280px;
  min-width: 260px;
  max-width: 85vw;
  background: var(--sf-card);
  border: 1.5px solid var(--sf-line);
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.sf-hh-card:hover {
  border-color: var(--sf-line-2);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  transform: translateY(-2px);
}
.sf-hh-card.is-live {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, var(--sf-card) 50%);
  box-shadow: 0 8px 24px rgba(245, 158, 11, .12);
}
.sf-hh-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(245, 158, 11, .08);
  pointer-events: none;
}
.sf-hh-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  width: fit-content;
}
.sf-hh-badge--live {
  background: #f59e0b;
  color: #fff;
  animation: sfHhPulse 2s ease-in-out infinite;
}
@keyframes sfHhPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .4); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
.sf-hh-badge--upcoming {
  background: var(--sf-bg);
  color: var(--sf-text-2);
  border: 1px solid var(--sf-line);
}
.sf-hh-badge--upcoming i { font-size: 9px; }
.sf-hh-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: sfHhDot 1.2s ease-in-out infinite;
}
@keyframes sfHhDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
.sf-hh-card-headline {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: #92400e;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sf-hh-card.is-live .sf-hh-card-headline { color: #b45309; }
.sf-hh-card-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--sf-text-1);
  line-height: 1.3;
}
.sf-hh-card-desc {
  margin: 0;
  font-size: 12px;
  color: var(--sf-text-2);
  line-height: 1.45;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-hh-card-scope {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: var(--sf-brand);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sf-hh-card-scope i {
  font-size: 10px;
  opacity: .75;
}
.sf-hh-card-timing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.sf-hh-card-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sf-text-1);
  font-feature-settings: 'tnum';
}
.sf-hh-card-time i { color: #f59e0b; font-size: 12px; }
.sf-hh-card-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sf-hh-day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--sf-bg);
  color: var(--sf-text-3);
  border: 1px solid var(--sf-line);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sf-hh-day-pill.is-on {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
  font-weight: 800;
}
.sf-hh-day-pill.is-all {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
  font-weight: 800;
  padding: 3px 12px;
}
.sf-hh-card-cap {
  margin: 0;
  font-size: 11.5px;
  color: var(--sf-text-3);
  font-weight: 600;
}
.sf-hh-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 16px;
  border-radius: 12px;
  background: #f59e0b;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .15s ease, transform .12s ease;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .25);
}
.sf-hh-card-cta:hover {
  background: #d97706;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.sf-hh-card-cta:active { transform: translateY(1px); }
.sf-hh-card-cta i { font-size: 11px; }
@media (max-width: 360px) {
  .sf-hh-card { width: 240px; min-width: 220px; padding: 14px; }
  .sf-hh-card-headline { font-size: 20px; }
  .sf-hh-card-name { font-size: 13px; }
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 13. Home — Coupon strip (DoorDash-style ticket cards)        │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-coupon-rail { grid-auto-columns: minmax(260px, 78%); }

.sf-coupon {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #fff5ec 0%, #fff 100%);
  border: 1px solid color-mix(in srgb, var(--sf-brand) 22%, transparent);
  border-radius: var(--sf-radius);
  padding: 16px 16px 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  text-align: left;
  overflow: hidden;
}
.sf-coupon::before {
  /* Brand stripe on the left edge — the "save" cue without sideways text. */
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 4px;
  background: var(--sf-brand);
  border-radius: 0 var(--sf-radius-pill) var(--sf-radius-pill) 0;
}
.sf-coupon:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); }

.sf-coupon-glyph {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  background: var(--sf-brand);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: var(--sf-radius-xs);
  margin: 0 0 8px 8px;
  /* writing-mode reset just in case any cascading rule sets it. */
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
.sf-coupon-glyph::before {
  content: '\f0a3';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 10px;
}
.sf-coupon-headline {
  margin: 0 0 4px 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--sf-text);
}
.sf-coupon-name {
  margin: 0 0 0 8px;
  font-size: 12px;
  color: var(--sf-text-2);
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-coupon-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 0 8px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--sf-brand) 30%, transparent);
  gap: 8px;
}
.sf-coupon-code {
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--sf-brand-dark);
  letter-spacing: 0.06em;
  background: var(--sf-card);
  padding: 5px 10px;
  border-radius: var(--sf-radius-xs);
  border: 1px dashed var(--sf-brand);
}
.sf-coupon-cta {
  font-size: 11px;
  font-weight: 800;
  color: var(--sf-brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 14. Home — Categories grid                                   │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 12px;
}
.sf-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--sf-text);
  transition: transform .15s ease;
}
.sf-cat-tile:hover { text-decoration: none; transform: translateY(-3px); }
.sf-cat-tile:hover .sf-cat-tile-img {
  box-shadow: 0 0 0 4px var(--sf-brand-glow), var(--sf-shadow-md);
}
.sf-cat-tile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sf-brand-soft) 0%, #fff 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-brand);
  font-size: 24px;
  border: 1px solid var(--sf-line);
  box-shadow: var(--sf-shadow-xs);
  transition: box-shadow .2s ease;
}
.sf-cat-tile-img > i {
  font-size: 26px;
  background: linear-gradient(135deg, var(--sf-brand-soft) 0%, color-mix(in srgb, var(--sf-brand) 14%, white) 100%);
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--sf-brand);
}
.sf-cat-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.sf-cat-tile-name {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-cat-tile-count {
  font-size: 10.5px;
  color: var(--sf-text-3);
  font-weight: 600;
  font-feature-settings: 'tnum';
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 15. Home — Promo / combo / BOGO / bestseller cards            │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-promo-rail { grid-auto-columns: 168px; }
.sf-promo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--sf-radius);
  border: 1px solid var(--sf-line);
  box-shadow: var(--sf-shadow-xs);
  background: linear-gradient(135deg, var(--sf-brand-soft), var(--sf-bg));
  aspect-ratio: 3 / 4;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sf-promo:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-md); text-decoration: none; }
.sf-promo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-promo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--sf-brand);
}
.sf-promo-fallback i { font-size: 32px; opacity: .55; }
.sf-promo-fallback span {
  font-size: 13px; font-weight: 700;
  color: var(--sf-text);
  text-align: center; padding: 0 14px;
  letter-spacing: -0.005em;
}

.sf-combo-rail { grid-auto-columns: minmax(248px, 76%); }
.sf-combo {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--sf-text);
  box-shadow: var(--sf-shadow-xs);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sf-combo:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sf-shadow-md); border-color: var(--sf-brand); }
.sf-combo-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--sf-brand-soft), var(--sf-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-brand);
  font-size: 36px;
  position: relative;
}
.sf-combo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-combo-img > i { opacity: .55; }
.sf-combo-savings {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--sf-success-2);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--sf-radius-pill);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-feature-settings: 'tnum';
  box-shadow: 0 4px 10px -3px rgba(3, 138, 77, .5);
}
.sf-combo-veg {
  position: absolute;
  top: 10px; right: 10px;
  width: 22px; height: 22px;
  background: #fff;
  padding: 3px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
.sf-combo-veg .sf-veg-dot { width: 100%; height: 100%; }
.sf-combo-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-combo-name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-combo-items {
  margin: 0;
  font-size: 12px;
  color: var(--sf-text-3);
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-combo-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 4px;
}
.sf-combo-price {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
}
.sf-combo-strike {
  font-size: 12px;
  color: var(--sf-text-3);
  text-decoration: line-through;
  margin-left: 6px;
  font-feature-settings: 'tnum';
}
.sf-combo-cta {
  font-size: 11px;
  font-weight: 800;
  color: var(--sf-brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sf-bogo-rail { grid-auto-columns: minmax(248px, 76%); }
.sf-bogo {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1c1c1c, #2d2d2d);
  color: #fff;
  border-radius: var(--sf-radius);
  overflow: hidden;
  padding: 16px;
  text-decoration: none;
  min-height: 168px;
  box-shadow: var(--sf-shadow-xs);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sf-bogo::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sf-brand), transparent 70%);
  opacity: .35;
}
.sf-bogo:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--sf-shadow-md); color: #fff; }
.sf-bogo-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.sf-bogo-headline {
  position: relative;
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
}
.sf-bogo-name {
  position: relative;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  opacity: .85;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-bogo-foot {
  position: relative;
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 11px;
  font-weight: 700;
  opacity: .9;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sf-bogo-foot i { color: var(--sf-brand); font-size: 12px; }

.sf-best-rail { grid-auto-columns: 168px; }
.sf-best {
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--sf-text);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--sf-shadow-xs);
}
.sf-best:hover { text-decoration: none; border-color: var(--sf-brand); transform: translateY(-3px); box-shadow: var(--sf-shadow-md); }
.sf-best-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--sf-brand-soft), var(--sf-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-brand);
  font-size: 28px;
  position: relative;
}
.sf-best-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-best-img > i { opacity: .55; }
.sf-best-rating-chip {
  position: absolute;
  bottom: 8px; left: 8px;
  background: rgba(255, 255, 255, .96);
  color: var(--sf-success-2);
  padding: 3px 8px;
  border-radius: var(--sf-radius-xs);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--sf-shadow-xs);
  font-feature-settings: 'tnum';
}
.sf-best-rating-chip i { color: #f59e0b; font-size: 10px; }
.sf-best-best {
  position: absolute;
  top: 8px; left: 8px;
  background: #b45309; color: #fff;
  padding: 3px 8px;
  border-radius: var(--sf-radius-xs);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sf-best-body {
  padding: 10px 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sf-best-name {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-best-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.sf-best-price {
  font-size: 14px;
  font-weight: 800;
  font-feature-settings: 'tnum';
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 16. Home — Browse menu (full categories with 2-col grids)    │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-hmenu { margin: 0 0 28px; }
.sf-hmenu-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 16px;
}
.sf-hmenu-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.sf-hmenu-link  { font-size: 13px; font-weight: 700; color: var(--sf-brand); }
.sf-hmenu-link:hover { text-decoration: underline; }

.sf-hmenu-cat { margin: 0 0 24px; }
.sf-hmenu-cat:last-child { margin-bottom: 0; }
.sf-hmenu-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sf-line);
}
.sf-hmenu-cat-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.sf-hmenu-cat-count { font-size: 12px; color: var(--sf-text-3); font-weight: 600; font-feature-settings: 'tnum'; }

.sf-hmenu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sf-hmprod {
  position: relative;
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  overflow: hidden;
  box-shadow: var(--sf-shadow-xs);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
}
.sf-hmprod:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-md); border-color: var(--sf-brand); }
.sf-hmprod-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--sf-brand-soft), var(--sf-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-brand);
  font-size: 26px;
  position: relative;
  overflow: hidden;
}
.sf-hmprod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-hmprod-img > i { opacity: .55; }
.sf-hmprod-veg {
  position: absolute;
  top: 6px; left: 6px;
  width: 18px; height: 18px;
  background: #fff;
  padding: 2px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sf-hmprod-veg::before {
  content: '';
  width: 100%; height: 100%;
  border: 1.5px solid transparent;
  display: block;
  box-sizing: border-box;
  position: relative;
}
.sf-hmprod-veg::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.sf-hmprod-veg--veg::before { border-color: var(--sf-veg); }
.sf-hmprod-veg--veg::after  { background: var(--sf-veg); }
.sf-hmprod-veg--nv::before  { border-color: var(--sf-nv); }
.sf-hmprod-veg--nv::after   { background: var(--sf-nv); }
.sf-hmprod-best {
  position: absolute;
  top: 6px; right: 6px;
  background: #b45309;
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--sf-radius-xs);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sf-hmprod-soldout {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-danger);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(2px);
}
.sf-hmprod-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.sf-hmprod-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.sf-hmprod-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
}
.sf-hmprod-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
  font-feature-settings: 'tnum';
}
.sf-hmprod-strike {
  font-size: 11px;
  color: var(--sf-text-3);
  text-decoration: line-through;
  font-weight: 600;
}
.sf-hmprod-actions { flex-shrink: 0; display: inline-flex; align-items: center; }
.sf-hmprod-add {
  flex-shrink: 0;
  border: 0;
  background: var(--sf-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: var(--sf-radius-sm);
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: inherit;
  line-height: 1;
  box-shadow: 0 4px 10px -4px var(--sf-brand-glow);
}
.sf-hmprod-add:hover:not([disabled]) { background: var(--sf-brand-dark); }
.sf-hmprod-add:active:not([disabled]) { transform: scale(.96); }
.sf-hmprod-add[disabled] {
  background: var(--sf-bg-2);
  color: var(--sf-text-3);
  cursor: not-allowed;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 17. Home — About + footer                                    │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-about {
  padding: 18px;
  background: var(--sf-card);
  border-radius: var(--sf-radius);
  border: 1px solid var(--sf-line);
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--sf-text-2);
  line-height: 1.6;
  box-shadow: var(--sf-shadow-xs);
}
.sf-footer {
  margin: 22px 0 0;
  padding: 24px;
  background: var(--sf-card);
  border-radius: var(--sf-radius);
  border: 1px solid var(--sf-line);
  font-size: 13px;
  color: var(--sf-text-2);
  line-height: 1.7;
  box-shadow: var(--sf-shadow-xs);
}
.sf-footer-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sf-text-3);
  margin: 0 0 6px;
}
.sf-footer-row { margin: 0 0 16px; }
.sf-footer-row:last-of-type { margin-bottom: 0; }
.sf-footer a { color: var(--sf-brand); font-weight: 700; }
.sf-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--sf-line);
  font-size: 11px;
  color: var(--sf-text-3);
  font-weight: 600;
}

/* Coupon copy flash. */
.sf-cp-flash {
  position: fixed;
  left: 50%; bottom: calc(var(--sf-bnav-h) + 90px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1400;
  background: #1c1c1c;
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--sf-radius-pill);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--sf-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.sf-cp-flash.is-on { opacity: 1; transform: translateX(-50%) translateY(-6px); }



/* ╭──────────────────────────────────────────────────────────────╮
 * │ 18. Menu page (sf-menu / sf-cat-pill / sf-prod-*)            │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-menu { padding: 0; }

.sf-menu-search {
  position: sticky;
  top: var(--sf-header-h);
  z-index: 30;
  background: var(--sf-bg);
  padding: 12px 0 10px;
  margin: 0 0 6px;
}
.sf-menu-search-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sf-card);
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 10px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-menu-search-input:focus-within {
  border-color: var(--sf-brand);
  box-shadow: 0 0 0 4px var(--sf-brand-glow);
}
.sf-menu-search-input i { color: var(--sf-text-3); }
.sf-menu-search-input input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 14.5px;
  font-family: inherit;
  background: transparent;
  color: var(--sf-text);
  min-width: 0;
}
.sf-menu-search-input input::placeholder { color: var(--sf-text-3); }
.sf-menu-search-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sf-text-3);
  font-weight: 600;
  margin-top: 6px;
}

/* Category pills strip — sticky below the search. */
.sf-cat-strip {
  position: sticky;
  top: calc(var(--sf-header-h) + 70px);
  z-index: 25;
  background: var(--sf-bg);
  padding: 8px 0;
  margin: 0 -14px 14px;
  padding-left: 14px;
  padding-right: 14px;
  border-bottom: 1px solid var(--sf-line);
}
.sf-cat-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sf-cat-pills::-webkit-scrollbar { display: none; }
.sf-cat-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-card);
  color: var(--sf-text-2);
  border: 1px solid var(--sf-line);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sf-cat-pill:hover { background: var(--sf-bg); border-color: var(--sf-line-2); text-decoration: none; }
.sf-cat-pill.is-active {
  background: var(--sf-brand);
  color: #fff;
  border-color: var(--sf-brand);
  box-shadow: 0 4px 10px -4px var(--sf-brand-glow);
}

.sf-cat-section { margin: 0 0 28px; scroll-margin-top: 160px; }
.sf-cat-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 12px;
}
.sf-cat-section-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.sf-cat-section-count { font-size: 12px; color: var(--sf-text-3); font-weight: 600; font-feature-settings: 'tnum'; }

/* Menu product card — Swiggy-style horizontal layout. */
.sf-prod-list { display: flex; flex-direction: column; gap: 14px; }
.sf-prod {
  display: flex;
  gap: 14px;
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 14px;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-prod:hover { border-color: var(--sf-line-2); box-shadow: var(--sf-shadow-sm); }
.sf-prod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sf-prod-flags { display: flex; align-items: center; gap: 6px; }
.sf-prod-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.sf-prod-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--sf-text-3);
}
.sf-prod-rating-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sf-rating-bg);
  color: var(--sf-rating);
  padding: 2px 8px;
  border-radius: var(--sf-radius-xs);
  font-size: 11.5px;
  font-weight: 800;
  font-feature-settings: 'tnum';
}
.sf-prod-rating-chip i { font-size: 10px; }
.sf-prod-bestseller {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b45309;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sf-prod-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-feature-settings: 'tnum';
}
.sf-prod-price { font-size: 15px; font-weight: 800; }
.sf-prod-strike {
  font-size: 12px;
  color: var(--sf-text-3);
  text-decoration: line-through;
}
.sf-prod-discount-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--sf-success-2);
  background: var(--sf-success-bg);
  padding: 2px 7px;
  border-radius: var(--sf-radius-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sf-prod-desc {
  font-size: 12.5px;
  color: var(--sf-text-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.sf-prod-img-wrap {
  position: relative;
  flex: 0 0 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sf-prod-img {
  width: 118px; height: 118px;
  border-radius: var(--sf-radius-sm);
  background: linear-gradient(135deg, var(--sf-brand-soft), var(--sf-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-brand);
  font-size: 30px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sf-line);
}
.sf-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-prod-img > i { opacity: .55; }
.sf-prod-img-soldout {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-danger);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sf-prod-add {
  position: absolute;
  bottom: 36px;   /* sit on bottom edge of the image */
  left: 50%;
  transform: translateX(-50%);
  background: var(--sf-card);
  color: var(--sf-brand);
  border: 1.5px solid var(--sf-brand);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 22px;
  border-radius: var(--sf-radius-sm);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: var(--sf-shadow-sm);
  transition: background .15s ease, color .15s ease;
}
.sf-prod-add:hover:not([disabled]) { background: var(--sf-brand); color: #fff; }
.sf-prod-add[disabled] {
  border-color: var(--sf-line-2);
  color: var(--sf-text-3);
  background: var(--sf-bg);
  cursor: not-allowed;
  text-transform: none;
  letter-spacing: 0;
}
.sf-prod-customize-hint {
  font-size: 10px;
  font-weight: 600;
  color: var(--sf-text-3);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sf-no-matches {
  text-align: center;
  padding: 60px 16px;
  color: var(--sf-text-3);
}
.sf-no-matches i { font-size: 36px; opacity: .4; display: block; margin-bottom: 14px; }
.sf-no-matches-title { font-weight: 800; font-size: 17px; margin: 0 0 6px; color: var(--sf-text); }
.sf-no-matches-sub { font-size: 13px; margin: 0; }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 19. Order tracking (sf-tk-*)                                 │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0;
}
.sf-tk-card {
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 18px;
  box-shadow: var(--sf-shadow-xs);
}
.sf-tk-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.sf-tk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sf-tk-head-no { margin: 0; font-size: 11px; color: var(--sf-text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.sf-tk-head-title { margin: 4px 0 0; font-size: 18px; font-weight: 800; font-feature-settings: 'tnum'; }
.sf-tk-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--sf-radius-pill);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--sf-info-bg);
  color: var(--sf-info);
}
.sf-tk-pill[data-status="pending"]      { background: var(--sf-warning-bg); color: var(--sf-warning); }
.sf-tk-pill[data-status="accepted"],
.sf-tk-pill[data-status="preparing"]    { background: var(--sf-info-bg); color: var(--sf-info); }
.sf-tk-pill[data-status="ready"],
.sf-tk-pill[data-status="out_for_delivery"] { background: var(--sf-brand-soft); color: var(--sf-brand-dark); }
.sf-tk-pill[data-status="delivered"],
.sf-tk-pill[data-status="completed"]    { background: var(--sf-success-bg); color: var(--sf-success-2); }
.sf-tk-pill[data-status="rejected"],
.sf-tk-pill[data-status="cancelled"]    { background: var(--sf-danger-bg); color: var(--sf-danger); }

.sf-tk-eta { display: flex; align-items: center; gap: 14px; }
.sf-tk-eta-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sf-brand-soft);
  color: var(--sf-brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.sf-tk-eta-label  { margin: 0; font-size: 11px; color: var(--sf-text-3); text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; }
.sf-tk-eta-value  { margin: 4px 0 2px; font-size: 18px; font-weight: 800; }
.sf-tk-eta-sub    { margin: 0; font-size: 12px; color: var(--sf-text-3); font-feature-settings: 'tnum'; }

.sf-tk-otp { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-tk-otp-label { margin: 0; font-size: 13px; font-weight: 800; }
.sf-tk-otp-sub   { margin: 4px 0 0; font-size: 11.5px; color: var(--sf-text-3); }
.sf-tk-otp-code  {
  margin: 0;
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--sf-brand);
  font-feature-settings: 'tnum';
}

.sf-tk-map {
  width: 100%;
  height: 220px;
  border-radius: var(--sf-radius-sm);
  overflow: hidden;
  border: 1px solid var(--sf-line);
  background: var(--sf-bg-2);
}
.sf-tk-map-empty {
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--sf-line-2);
  border-radius: var(--sf-radius-sm);
  color: var(--sf-text-3);
  font-size: 13px;
}

.sf-tk-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.sf-tk-timeline::before {
  content: '';
  position: absolute;
  left: 13px; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--sf-line);
}
.sf-tk-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 8px 0;
  position: relative;
}
.sf-tk-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sf-card);
  border: 2px solid var(--sf-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-text-3);
  font-size: 11px;
  position: relative;
  z-index: 1;
}
.sf-tk-step.is-done .sf-tk-dot {
  background: var(--sf-success);
  border-color: var(--sf-success);
  color: #fff;
}
.sf-tk-step.is-current .sf-tk-dot {
  background: var(--sf-brand);
  border-color: var(--sf-brand);
  color: #fff;
  animation: sfPulse 1.5s ease-in-out infinite;
}
.sf-tk-step-label {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sf-tk-step.is-current .sf-tk-step-label { color: var(--sf-brand-dark); }
.sf-tk-step-time { font-size: 11px; color: var(--sf-text-3); font-weight: 600; font-feature-settings: 'tnum'; }

.sf-tk-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sf-tk-action {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-bg);
  color: var(--sf-text);
  font-weight: 700;
  font-size: 13.5px;
  border: 1px solid var(--sf-line);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.sf-tk-action:hover { background: var(--sf-card); border-color: var(--sf-line-2); text-decoration: none; }
.sf-tk-action i { color: var(--sf-brand); }

.sf-tk-items { list-style: none; margin: 0; padding: 0; }
.sf-tk-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--sf-line);
}
.sf-tk-item:last-child { border-bottom: 0; }
.sf-tk-item-name { margin: 0; font-size: 14px; font-weight: 600; }
.sf-tk-item-qty {
  display: inline-block;
  background: var(--sf-bg);
  color: var(--sf-text-2);
  padding: 2px 7px;
  border-radius: var(--sf-radius-xs);
  font-size: 11.5px;
  font-weight: 800;
  margin-right: 6px;
  font-feature-settings: 'tnum';
}
.sf-tk-item-meta { margin: 4px 0 0; font-size: 11.5px; color: var(--sf-text-3); }
.sf-tk-item-price { font-weight: 800; font-feature-settings: 'tnum'; white-space: nowrap; }

.sf-tk-bill { display: flex; flex-direction: column; gap: 8px; }
.sf-tk-bill-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--sf-text-2);
  font-feature-settings: 'tnum';
}
.sf-tk-bill-row--total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--sf-line-2);
  font-size: 15px;
  font-weight: 800;
  color: var(--sf-text);
}
.sf-tk-empty { text-align: center; padding: 24px; color: var(--sf-text-3); font-size: 13px; }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 20. Login form (sf-login-*)                                  │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-login-modal { /* alias of .sf-modal — extra hooks live in JS only */ }
.sf-login-screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sf-login-rate-limit {
  background: var(--sf-warning-bg);
  color: var(--sf-warning);
  padding: 10px 14px;
  border-radius: var(--sf-radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sf-login-rate-limit i { font-size: 12px; }

/* ── OTP cells (6-digit split input) ─────────────────────── */
.sf-otp-group {
  border: none;
  padding: 0;
  margin: 0;
}
.sf-otp-legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--sf-text-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sf-otp-cells {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.sf-otp-cell {
  width: 44px;
  height: 54px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  border: 2px solid var(--sf-line);
  border-radius: 12px;
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-feature-settings: 'tnum';
  background: var(--sf-card);
  color: var(--sf-text);
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  caret-color: var(--sf-brand);
}
.sf-otp-cell:focus {
  border-color: var(--sf-brand);
  box-shadow: 0 0 0 4px var(--sf-brand-glow);
  transform: scale(1.05);
}
.sf-otp-cell.is-filled {
  border-color: var(--sf-brand);
  background: var(--sf-brand-soft);
}
.sf-otp-cell.is-error {
  border-color: var(--sf-danger);
  background: var(--sf-danger-bg);
}
@media (max-width: 380px) {
  .sf-otp-cells { gap: 6px; }
  .sf-otp-cell { width: 38px; height: 48px; font-size: 20px; border-radius: 10px; }
}

/* ── Resend row ──────────────────────────────────────────── */
.sf-login-resend {
  text-align: center;
  font-size: 13px;
  color: var(--sf-text-3);
  font-weight: 600;
}

/* ── Modal card polish for login ─────────────────────────── */
.sf-login-modal .sf-modal-card {
  padding: 28px 24px 24px;
}
.sf-login-modal .sf-modal-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--sf-text-1);
  margin: 0 0 4px;
}
.sf-login-modal .sf-modal-sub {
  font-size: 14px;
  color: var(--sf-text-2);
  margin: 0;
  line-height: 1.5;
  font-weight: 500;
}
.sf-login-modal .sf-modal-fineprint {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--sf-text-3);
  text-align: center;
  font-weight: 500;
  line-height: 1.5;
}
.sf-login-modal .sf-modal-fineprint a {
  color: var(--sf-brand);
  font-weight: 700;
  text-decoration: none;
}
.sf-login-modal .sf-modal-fineprint a:hover { text-decoration: underline; }

/* Phone input row — prefix + input side by side */
.sf-login-modal .sf-field-input-wrap {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--sf-line);
  border-radius: 14px;
  background: var(--sf-card);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.sf-login-modal .sf-field-input-wrap:focus-within {
  border-color: var(--sf-brand);
  box-shadow: 0 0 0 4px var(--sf-brand-glow);
}
.sf-login-modal .sf-field-prefix {
  padding: 14px 16px;
  background: var(--sf-bg);
  color: var(--sf-text-1);
  font-weight: 800;
  font-size: 15px;
  border-right: 2px solid var(--sf-line);
  flex-shrink: 0;
}
.sf-login-modal .sf-field-input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: var(--sf-text);
  background: transparent;
  min-width: 0;
  letter-spacing: 0.02em;
}
.sf-login-modal .sf-field-input::placeholder {
  color: var(--sf-text-3);
  font-weight: 500;
  letter-spacing: 0;
}

/* Send OTP / Verify button */
.sf-login-modal .sf-btn--lg {
  padding: 15px 20px;
  font-size: 15px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Legacy OTP row (kept for backward compat) */
.sf-otp-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.sf-otp-input {
  width: 44px; height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-feature-settings: 'tnum';
  background: var(--sf-card);
  color: var(--sf-text);
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-otp-input:focus { border-color: var(--sf-brand); box-shadow: 0 0 0 4px var(--sf-brand-glow); }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 21. Customize modal + address picker (sf-cust-* / sf-addr-*) │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-cust-hero {
  position: relative;
  margin: -32px -24px 16px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--sf-brand-soft), var(--sf-bg));
  overflow: hidden;
}
.sf-cust-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-cust-hero-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-brand);
  font-size: 56px;
  opacity: .55;
}
.sf-cust-section { margin: 0 0 18px; }
.sf-cust-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--sf-text);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sf-cust-section-required {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--sf-danger);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sf-cust-options { display: flex; flex-direction: column; gap: 8px; }
.sf-cust-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-card);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sf-cust-opt:hover { border-color: var(--sf-line-2); }
.sf-cust-opt input { display: none; }
.sf-cust-opt-name { font-size: 14px; font-weight: 600; }
.sf-cust-opt-price { font-size: 13.5px; font-weight: 800; color: var(--sf-text-2); font-feature-settings: 'tnum'; }
.sf-cust-opt.is-checked {
  border-color: var(--sf-brand);
  background: var(--sf-brand-soft);
}
.sf-cust-opt.is-checked .sf-cust-opt-name,
.sf-cust-opt.is-checked .sf-cust-opt-price { color: var(--sf-brand-dark); }

.sf-cust-textarea {
  width: 100%;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 64px;
  background: var(--sf-card);
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-cust-textarea:focus { border-color: var(--sf-brand); box-shadow: 0 0 0 4px var(--sf-brand-glow); }

.sf-cust-foot {
  position: sticky;
  bottom: 0;
  background: var(--sf-card);
  margin: 16px -24px -28px;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sf-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sf-cust-foot-total {
  display: flex;
  flex-direction: column;
  font-feature-settings: 'tnum';
}
.sf-cust-foot-total small { font-size: 11px; color: var(--sf-text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.sf-cust-foot-total strong { font-size: 18px; font-weight: 800; color: var(--sf-text); }

/* Address picker. */
.sf-addr-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.sf-addr-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius);
  background: var(--sf-card);
  cursor: pointer;
  transition: border-color .15s ease;
}
.sf-addr-item:hover { border-color: var(--sf-line-2); }
.sf-addr-item.is-selected {
  border-color: var(--sf-brand);
  background: var(--sf-brand-soft);
}
.sf-addr-item-icon {
  width: 36px; height: 36px;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-bg);
  color: var(--sf-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.sf-addr-item.is-selected .sf-addr-item-icon { background: var(--sf-brand); color: #fff; }
.sf-addr-item-body { flex: 1; min-width: 0; }
.sf-addr-item-label { margin: 0; font-size: 13.5px; font-weight: 800; }
.sf-addr-item-text  { margin: 4px 0 0; font-size: 12.5px; color: var(--sf-text-2); line-height: 1.4; }
.sf-addr-item-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sf-success-2);
}
.sf-addr-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--sf-card);
  color: var(--sf-brand);
  border: 1.5px dashed var(--sf-brand);
  border-radius: var(--sf-radius-sm);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}
.sf-addr-add:hover { background: var(--sf-brand-soft); }
.sf-addr-form { display: flex; flex-direction: column; gap: 12px; }
.sf-addr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-addr-error {
  background: var(--sf-danger-bg);
  color: var(--sf-danger);
  padding: 10px 14px;
  border-radius: var(--sf-radius-sm);
  font-size: 12.5px;
  font-weight: 600;
}

/* ── Address picker (Swiggy-style compact card list) ─────── */
.sf-addr {
  display: block;
  margin: 0;
}
.sf-addr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.sf-addr-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-text-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.sf-addr-title i { color: var(--sf-brand); font-size: 14px; }
.sf-link {
  background: transparent;
  border: none;
  color: var(--sf-brand);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .15s ease;
}
.sf-link:hover { background: var(--sf-brand-soft); }
.sf-link i { margin-right: 4px; }

.sf-addr-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sf-text-3);
  padding: 10px 0;
}
.sf-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--sf-line);
  border-top-color: var(--sf-brand);
  border-radius: 50%;
  animation: sfSpin .8s linear infinite;
}
@keyframes sfSpin { to { transform: rotate(360deg); } }

.sf-addr-empty {
  text-align: center;
  padding: 24px 12px;
  background: var(--sf-bg);
  border: 1.5px dashed var(--sf-line);
  border-radius: var(--sf-radius);
}
.sf-addr-empty-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-text-1);
}
.sf-addr-empty-sub {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--sf-text-3);
}

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--sf-radius-sm);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
  font-family: inherit;
  letter-spacing: .01em;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sf-btn--brand { background: var(--sf-brand); color: #fff; border-color: var(--sf-brand); }
.sf-btn--brand:hover:not(:disabled) { filter: brightness(1.06); }
.sf-btn--brand:active:not(:disabled) { transform: translateY(1px); }
.sf-btn--ghost {
  background: var(--sf-card);
  color: var(--sf-text-1);
  border-color: var(--sf-line);
}
.sf-btn--ghost:hover { border-color: var(--sf-text-3); }
.sf-btn--block { width: 100%; }
.sf-btn:disabled { opacity: .55; cursor: not-allowed; }

.sf-addr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-addr-row {
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: var(--sf-card);
  border: 1.5px solid var(--sf-line);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.sf-addr-row:hover { border-color: var(--sf-line-2); }
.sf-addr-row.is-selected {
  border-color: var(--sf-brand);
  background: var(--sf-brand-soft);
  box-shadow: 0 4px 12px var(--sf-brand-glow);
}
.sf-addr-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.sf-addr-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sf-addr-radio-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sf-addr-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sf-addr-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--sf-text-1);
  text-transform: capitalize;
}
.sf-addr-label i { color: var(--sf-brand); font-size: 12px; }
.sf-addr-default-chip {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sf-success-2);
  background: var(--sf-success-bg);
  padding: 2px 8px;
  border-radius: var(--sf-radius-pill);
}
.sf-addr-line1 {
  font-size: 12.5px;
  color: var(--sf-text-1);
  line-height: 1.45;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-addr-line2 {
  font-size: 11.5px;
  color: var(--sf-text-3);
  line-height: 1.4;
  font-weight: 600;
}
/* Show a check pip on the right when selected so the customer
   knows they've picked the address even when the radio is hidden. */
.sf-addr-row.is-selected .sf-addr-radio::after {
  content: '\f058';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--sf-brand);
  font-size: 18px;
}

.sf-addr-form { display: flex; flex-direction: column; gap: 12px; }
.sf-addr-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.sf-addr-form-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-text-1);
}
.sf-modal-close--inline {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--sf-bg);
  color: var(--sf-text-2);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sf-addr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.sf-field-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sf-text-2);
  letter-spacing: .02em;
}
.sf-req { color: var(--sf-danger); }
/* Address-picker fields are single-input (no prefix), so block display
   is correct there. The login modal's .sf-field-input-wrap needs the
   original inline-flex (set at line ~551) for the +91 prefix row. */
.sf-addr .sf-field-input-wrap,
.sf-addr-form .sf-field-input-wrap { display: block; }
.sf-field-input {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-card);
  color: var(--sf-text-1);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-field-input:focus {
  border-color: var(--sf-brand);
  box-shadow: 0 0 0 3px var(--sf-brand-glow);
}
.sf-field-error {
  display: block;
  font-size: 11.5px;
  color: var(--sf-danger);
  font-weight: 600;
}
.sf-addr-label-chips legend { padding: 0; margin-bottom: 6px; }
.sf-chip-row { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--sf-radius-pill);
  border: 1.5px solid var(--sf-line);
  background: var(--sf-card);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sf-text-2);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sf-chip input[type="radio"] { position: absolute; opacity: 0; }
.sf-chip i { font-size: 11px; }
.sf-chip:hover { border-color: var(--sf-line-2); }
.sf-chip.is-active {
  border-color: var(--sf-brand);
  color: var(--sf-brand);
  background: var(--sf-brand-soft);
}
.sf-addr-geo-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-addr-geo-msg {
  margin: 0;
  font-size: 11.5px;
  color: var(--sf-text-3);
  font-weight: 600;
}
.sf-addr-coords {
  margin: 0;
  font-size: 11px;
  color: var(--sf-text-3);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sf-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sf-text-2);
  cursor: pointer;
}
.sf-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sf-brand); }
.sf-addr-form-error {
  margin: 0;
  font-size: 12px;
  color: var(--sf-danger);
  font-weight: 700;
  background: var(--sf-danger-bg);
  padding: 8px 12px;
  border-radius: var(--sf-radius-sm);
}
.sf-addr-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.sf-addr-form-actions .sf-btn { flex: 1; }
@media (min-width: 480px) {
  .sf-addr-form-actions { justify-content: flex-end; }
  .sf-addr-form-actions .sf-btn { flex: 0 0 auto; min-width: 120px; }
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 22. Order history (sf-orders-*)                              │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-orders {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sf-orders-empty {
  text-align: center;
  padding: 60px 16px;
}
.sf-orders-empty i { font-size: 56px; opacity: .35; display: block; margin-bottom: 14px; color: var(--sf-text-3); }
.sf-orders-empty-title { font-weight: 800; font-size: 17px; margin: 0 0 6px; }
.sf-orders-empty-sub   { font-size: 13px; color: var(--sf-text-3); margin: 0 0 22px; }

.sf-order {
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 16px;
  box-shadow: var(--sf-shadow-xs);
  text-decoration: none;
  color: var(--sf-text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-order:hover { border-color: var(--sf-line-2); box-shadow: var(--sf-shadow-sm); text-decoration: none; }
.sf-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sf-order-no { font-size: 12px; color: var(--sf-text-3); font-weight: 700; font-feature-settings: 'tnum'; }
.sf-order-date { font-size: 11.5px; color: var(--sf-text-3); }
.sf-order-items { font-size: 13px; color: var(--sf-text-2); line-height: 1.4; }
.sf-order-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--sf-line);
}
.sf-order-total { font-size: 15px; font-weight: 800; font-feature-settings: 'tnum'; }
.sf-order-actions { display: flex; gap: 8px; }
.sf-order-action {
  font-size: 12px;
  font-weight: 700;
  color: var(--sf-brand);
  background: var(--sf-brand-soft);
  padding: 6px 12px;
  border-radius: var(--sf-radius-pill);
  border: 0;
  cursor: pointer;
}
.sf-order-action:hover { background: color-mix(in srgb, var(--sf-brand) 14%, white); }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 23. Checkout (sf-co-*)                                       │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-co {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sf-co-card {
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 16px;
  box-shadow: var(--sf-shadow-xs);
}
.sf-co-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.sf-co-card-head--clickable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.sf-co-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.sf-co-toggle {
  display: inline-flex;
  background: var(--sf-bg);
  border-radius: var(--sf-radius-pill);
  padding: 4px;
  gap: 4px;
}
.sf-co-toggle-btn {
  padding: 8px 16px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--sf-text-2);
  border-radius: var(--sf-radius-pill);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sf-co-toggle-btn.is-active {
  background: var(--sf-card);
  color: var(--sf-brand);
  box-shadow: var(--sf-shadow-xs);
}
.sf-co-pay {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sf-co-pay-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sf-co-pay-opt:hover { border-color: var(--sf-line-2); }
.sf-co-pay-opt input { accent-color: var(--sf-brand); }
.sf-co-pay-opt.is-active { border-color: var(--sf-brand); background: var(--sf-brand-soft); }
.sf-co-pay-opt-icon {
  width: 36px; height: 36px;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-bg);
  color: var(--sf-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.sf-co-pay-opt.is-active .sf-co-pay-opt-icon { background: var(--sf-brand); color: #fff; }
.sf-co-pay-opt-text { flex: 1; min-width: 0; }
.sf-co-pay-opt-title { margin: 0; font-size: 14px; font-weight: 800; }
.sf-co-pay-opt-sub   { margin: 3px 0 0; font-size: 12px; color: var(--sf-text-3); }

.sf-co-summary-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-brand-soft);
  color: var(--sf-brand-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  margin-left: 4px;
}
.sf-co-summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sf-text-2);
  font-weight: 700;
}
.sf-co-summary-toggle-amt {
  font-feature-settings: 'tnum';
  color: var(--sf-text);
  font-weight: 800;
}

.sf-co-bill {
  background: var(--sf-bg);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-feature-settings: 'tnum';
}
.sf-co-bill-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--sf-text-2);
}
.sf-co-bill-row--success { color: var(--sf-success); font-weight: 600; }
.sf-co-bill-row--total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--sf-line-2);
  font-size: 15px;
  font-weight: 800;
  color: var(--sf-text);
}

.sf-co-place {
  position: sticky;
  bottom: 0;
  background: var(--sf-card);
  border-top: 1px solid var(--sf-line);
  margin: 14px -14px 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  z-index: 30;
}

/* Stepper used by checkout progress + customize qty. */
.sf-co-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-bg);
  font-size: 12px;
  font-weight: 800;
  color: var(--sf-text-3);
}
.sf-co-step-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sf-line-2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.sf-co-step.is-current { background: var(--sf-brand-soft); color: var(--sf-brand-dark); }
.sf-co-step.is-current .sf-co-step-num { background: var(--sf-brand); color: #fff; }
.sf-co-step.is-done .sf-co-step-label { color: var(--sf-success-2); }
.sf-co-step.is-done .sf-co-step-num   { background: var(--sf-success); color: #fff; font-size: 0; }
.sf-co-step.is-done .sf-co-step-num::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 10px;
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 24. Restaurant info bar — desktop sub-elements                │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-rinfo-cuisines {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  margin: 8px 0 0;
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 24a. Checkout polish (Swiggy-style)                          │
 * ╰──────────────────────────────────────────────────────────────╯
 *
 * Layered on top of the original sf-co-* rules. The base styles above
 * are kept for backward compatibility but this block overrides spacing,
 * typography, and adds polish for elements introduced in newer markup
 * (sf-co-pgh, sf-co-steps, sf-co-pay-list, sf-co-cta-wrap, sf-co-banner,
 * sf-co-pickup, sf-co-sched-*, sf-co-tip-*, sf-co-summary-list, etc.).
 */

.sf-co-wrap {
  padding: 12px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Page header ─────────────────────────────────────────────── */
.sf-co-pgh {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 6px;
}
.sf-co-pgh-back {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  color: var(--sf-text-1);
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.sf-co-pgh-back:hover { background: var(--sf-bg); border-color: var(--sf-line-2); }
.sf-co-pgh-back:active { transform: scale(.96); }
.sf-co-pgh-back i { font-size: 13px; }
.sf-co-pgh-text { flex: 1; min-width: 0; }
.sf-co-pgh-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sf-text-3);
}
.sf-co-pgh-title {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--sf-text-1);
  letter-spacing: -.01em;
  line-height: 1.15;
}

/* ── Step pills ───────────────────────────────────────────────── */
.sf-co-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 4px;
}
.sf-co-steps::-webkit-scrollbar { display: none; }

.sf-co-step {
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.sf-co-step-label { white-space: nowrap; }

/* ── Card refinements ────────────────────────────────────────── */
.sf-co-card {
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  transition: box-shadow .2s ease;
}
.sf-co-card:hover {
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.sf-co-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}
.sf-co-card-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--sf-text-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.sf-co-card-title > i {
  font-size: 14px;
  color: var(--sf-brand);
  width: 18px;
  text-align: center;
}

/* ── Order-type toggle (Swiggy pill) ─────────────────────────── */
.sf-co-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  background: var(--sf-bg);
  border-radius: var(--sf-radius-pill);
  padding: 4px;
  gap: 4px;
}
.sf-co-toggle-btn {
  padding: 11px 14px;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sf-text-2);
  border-radius: var(--sf-radius-pill);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sf-co-toggle-btn > i { font-size: 14px; }
.sf-co-toggle-btn:active:not(:disabled) { transform: scale(.97); }
.sf-co-toggle-btn.is-active {
  background: var(--sf-card);
  color: var(--sf-brand);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08), 0 1px 0 rgba(15, 23, 42, .04);
}
.sf-co-toggle-btn.is-disabled,
.sf-co-toggle-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Pickup box ──────────────────────────────────────────────── */
.sf-co-pickup {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: var(--sf-bg);
  border: 1px dashed var(--sf-line-2);
  border-radius: var(--sf-radius-sm);
}
.sf-co-pickup-icon {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sf-brand-soft);
  color: var(--sf-brand);
  font-size: 16px;
  flex-shrink: 0;
}
.sf-co-pickup-name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--sf-text-1);
}
.sf-co-pickup-addr {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--sf-text-2);
  line-height: 1.45;
}

/* ── Schedule chips ──────────────────────────────────────────── */
.sf-co-sched-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sf-co-sched-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-card);
  font-size: 13px;
  font-weight: 700;
  color: var(--sf-text-1);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sf-co-sched-chip:hover { border-color: var(--sf-line-2); }
.sf-co-sched-chip.is-active {
  border-color: var(--sf-brand);
  background: var(--sf-brand-soft);
  color: var(--sf-brand-dark);
}
.sf-co-sched-chip > i { font-size: 12px; opacity: .8; }
.sf-co-sched-empty {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--sf-text-3);
  text-align: center;
  padding: 16px;
  background: var(--sf-bg);
  border-radius: var(--sf-radius-sm);
}
.sf-co-sched-picker { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.sf-co-sched-day-label {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sf-text-3);
}
.sf-co-sched-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.sf-co-slot {
  padding: 9px 10px;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-card);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sf-text-2);
  cursor: pointer;
  transition: all .15s ease;
}
.sf-co-slot:hover { border-color: var(--sf-line-2); color: var(--sf-text-1); }
.sf-co-slot.is-active {
  border-color: var(--sf-brand);
  background: var(--sf-brand-soft);
  color: var(--sf-brand-dark);
  font-weight: 800;
}

/* ── Order summary list ──────────────────────────────────────── */
.sf-co-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sf-co-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--sf-line);
}
.sf-co-summary-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sf-co-summary-name {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sf-text-1);
  line-height: 1.35;
}
.sf-co-summary-qty { color: var(--sf-text-3); font-weight: 600; }
.sf-co-summary-meta {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--sf-text-3);
  line-height: 1.4;
}
.sf-co-summary-price {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--sf-text-1);
  font-feature-settings: 'tnum';
  flex-shrink: 0;
  white-space: nowrap;
}
.sf-co-summary-empty {
  text-align: center;
  padding: 20px 0;
  font-size: 13px;
  color: var(--sf-text-3);
}
.sf-co-summary-empty a {
  color: var(--sf-brand);
  font-weight: 800;
  text-decoration: none;
}
.sf-co-summary-toggle-i {
  font-size: 11px;
  transition: transform .2s ease;
}

/* ── Tip chips ───────────────────────────────────────────────── */
.sf-co-tip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sf-co-tip-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-pill);
  background: var(--sf-card);
  font-size: 13px;
  font-weight: 700;
  color: var(--sf-text-1);
  cursor: pointer;
  transition: all .15s ease;
  min-width: 60px;
}
.sf-co-tip-chip:hover { border-color: var(--sf-line-2); }
.sf-co-tip-chip.is-active {
  border-color: var(--sf-brand);
  background: var(--sf-brand-soft);
  color: var(--sf-brand-dark);
}
.sf-co-tip-chip > i { font-size: 11px; opacity: .7; }
.sf-co-tip-input {
  width: 70px;
  font-weight: 700;
  font-size: 13px;
  outline: none;
}
.sf-co-tip-hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--sf-text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sf-co-tip-hint::before {
  content: '\f06a';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 10px;
  color: var(--sf-text-3);
  opacity: .7;
}

/* ── Payment radio cards (modern) ────────────────────────────── */
.sf-co-pay-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sf-co-pay {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  position: relative;
}
.sf-co-pay:hover { border-color: var(--sf-line-2); }
.sf-co-pay.is-active {
  border-color: var(--sf-brand);
  background: var(--sf-brand-soft);
}
.sf-co-pay input[type="radio"] {
  accent-color: var(--sf-brand);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
.sf-co-pay-icon {
  width: 38px; height: 38px;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-bg);
  color: var(--sf-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.sf-co-pay.is-active .sf-co-pay-icon { background: var(--sf-brand); color: #fff; }
.sf-co-pay-text { flex: 1; min-width: 0; }
.sf-co-pay-label { margin: 0; font-size: 14px; font-weight: 800; color: var(--sf-text-1); }
.sf-co-pay-sub { margin: 3px 0 0; font-size: 11.5px; color: var(--sf-text-3); }
.sf-co-pay-empty {
  margin: 0;
  padding: 16px;
  background: var(--sf-bg);
  border-radius: var(--sf-radius-sm);
  font-size: 12.5px;
  color: var(--sf-text-3);
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  justify-content: center;
}

/* ── Bill summary card ───────────────────────────────────────── */
.sf-co-bill-card .sf-co-card-title { gap: 8px; }
.sf-co-bill-loading {
  font-size: 11.5px;
  color: var(--sf-text-3);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sf-co-bill {
  background: var(--sf-bg);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-feature-settings: 'tnum';
}
.sf-co-bill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--sf-text-2);
  font-weight: 600;
}
.sf-co-bill-row.is-discount { color: var(--sf-success); font-weight: 700; }
.sf-co-bill-row.is-fee { color: var(--sf-text-2); }
.sf-co-bill-label { display: inline-flex; align-items: center; gap: 6px; }
.sf-co-bill-value { font-weight: 700; color: var(--sf-text-1); }
.sf-co-bill-row.is-discount .sf-co-bill-value { color: var(--sf-success); }

.sf-co-bill-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--sf-line-2);
}
.sf-co-bill-total-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-text-1);
}
.sf-co-bill-total-value {
  font-size: 18px;
  font-weight: 900;
  color: var(--sf-text-1);
  font-feature-settings: 'tnum';
  letter-spacing: -.01em;
}

/* ── Banners (info / warn / err) ─────────────────────────────── */
.sf-co-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--sf-radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  border: 1px solid transparent;
}
.sf-co-banner > i { font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.sf-co-banner.is-err {
  background: var(--sf-danger-bg);
  color: var(--sf-danger);
  border-color: color-mix(in srgb, var(--sf-danger) 18%, transparent);
}
.sf-co-banner.is-warn {
  background: color-mix(in srgb, var(--sf-warning, #f59e0b) 12%, transparent);
  color: color-mix(in srgb, var(--sf-warning, #b45309) 90%, var(--sf-text-1));
  border-color: color-mix(in srgb, var(--sf-warning, #f59e0b) 22%, transparent);
}

/* ── Sticky Place Order pay-bar (Swiggy-style) ─────────────────
   Fixed at the bottom of the viewport so the customer can submit
   the order from anywhere on the page. The amount + payment
   method live on the left; the action button on the right. The
   `.sf-co-paybar-drawer` slides up from above the bar with a
   condensed bill recap so the customer can sanity-check before
   tapping. Layered on top of the bottom-nav (z 32 vs 30). */
.sf-co-paybar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 32;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--sf-card);
  border-top: 1px solid var(--sf-line);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
}
@media (min-width: 640px) {
  .sf-co-paybar { padding-left: 24px; padding-right: 24px; }
}
.sf-co-paybar-summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sf-co-paybar-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.sf-co-paybar-amount-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--sf-text-1);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
.sf-co-paybar-amount-strike {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sf-text-3);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.sf-co-paybar-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sf-brand);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.sf-co-paybar-sub i { font-size: 9px; }

.sf-co-paybar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  min-width: 168px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--sf-brand) 0%, var(--sf-brand-dark) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--sf-brand-glow), 0 2px 0 rgba(0, 0, 0, .06);
  transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.sf-co-paybar-cta:active:not(:disabled) {
  transform: translateY(1px) scale(.98);
}
.sf-co-paybar-cta:disabled {
  background: var(--sf-line-2);
  color: var(--sf-text-3);
  box-shadow: none;
  cursor: not-allowed;
}
.sf-co-paybar-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sf-co-paybar-cta-arrow {
  font-size: 12px;
  transform: translateX(0);
  transition: transform .2s ease;
}
.sf-co-paybar-cta:hover:not(:disabled) .sf-co-paybar-cta-arrow {
  transform: translateX(4px);
}
/* Subtle gleam sweep across the CTA every few seconds so it stays
   eye-catching even when the page is idle. */
.sf-co-paybar-cta:not(:disabled)::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 50%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  animation: sfPaybarGleam 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sfPaybarGleam {
  0%   { left: -60%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}

/* Drawer that opens above the pay-bar with the bill recap. */
.sf-co-paybar-drawer {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 31;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.sf-co-paybar-drawer-card {
  pointer-events: auto;
  width: calc(100% - 28px);
  max-width: 560px;
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: 16px;
  box-shadow: 0 -16px 40px rgba(15, 23, 42, .15);
  padding: 16px 18px;
  margin: 0 14px;
}
.sf-co-paybar-drawer-enter { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }
.sf-co-paybar-drawer-enter-start { transform: translateY(20px); opacity: 0; }
.sf-co-paybar-drawer-enter-end   { transform: translateY(0);    opacity: 1; }
.sf-co-paybar-drawer-leave { transition: transform .2s ease, opacity .2s ease; }
.sf-co-paybar-drawer-leave-start { transform: translateY(0);    opacity: 1; }
.sf-co-paybar-drawer-leave-end   { transform: translateY(20px); opacity: 0; }

.sf-co-paybar-drawer-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sf-text-3);
}
.sf-co-paybar-drawer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--sf-text-2);
  font-weight: 600;
  font-feature-settings: 'tnum';
}
.sf-co-paybar-drawer-row.is-saving { color: var(--sf-success); }
.sf-co-paybar-drawer-row.is-saving span:last-child { font-weight: 800; }
.sf-co-paybar-drawer-truncate {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-co-paybar-drawer-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--sf-line-2);
  font-size: 15px;
  font-weight: 900;
  color: var(--sf-text-1);
}

/* Push the page content up so the sticky bar doesn't cover the
   last card (loyalty / bill summary). The actual height is
   ~74px + safe-area on mobile; we use 110px to give the drawer
   room when expanded. */
body[data-active-nav="checkout"] .sf-co-wrap {
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}
/* Hide the bottom-nav on the checkout page — the pay-bar replaces it
   so the customer's eye doesn't compete between two sticky elements. */
body[data-active-nav="checkout"] .sf-bnav { display: none; }

/* ── Compact payment strip ────────────────────────────────── */
.sf-co-pay-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sf-co-pay-pill {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--sf-line);
  background: var(--sf-card);
  color: var(--sf-text-1);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  position: relative;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sf-co-pay-pill:hover { border-color: var(--sf-line-2); }
.sf-co-pay-pill.is-active {
  border-color: var(--sf-brand);
  background: var(--sf-brand-soft);
}
.sf-co-pay-pill-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--sf-bg);
  color: var(--sf-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.sf-co-pay-pill.is-active .sf-co-pay-pill-icon {
  background: var(--sf-brand);
  color: #fff;
}
.sf-co-pay-pill-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sf-co-pay-pill-text strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--sf-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-co-pay-pill-text small {
  font-size: 11px;
  color: var(--sf-text-3);
  font-weight: 600;
}
.sf-co-pay-pill-tick {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
  color: var(--sf-brand);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .15s ease, transform .15s ease;
}
.sf-co-pay-pill.is-active .sf-co-pay-pill-tick {
  opacity: 1;
  transform: scale(1);
}

/* Legacy CTA wrap retained for non-checkout flows (track page etc.) */
.sf-co-cta-wrap {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin: 6px -14px 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0%, var(--sf-card) 30%, var(--sf-card) 100%);
  border-top: 1px solid var(--sf-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-co-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--sf-radius);
  background: linear-gradient(180deg, var(--sf-brand) 0%, var(--sf-brand-dark) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .005em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .12), 0 2px 0 rgba(0, 0, 0, .04);
  transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sf-co-cta:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
.sf-co-cta:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--sf-text-3);
  box-shadow: none;
}
.sf-co-cta > i { font-size: 14px; }
.sf-co-cta-main { flex: 1; text-align: left; font-weight: 800; }
.sf-co-cta-amount {
  font-size: 16px;
  font-weight: 900;
  font-feature-settings: 'tnum';
  letter-spacing: -.01em;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .25);
}
.sf-co-cta-arrow { opacity: .9; }
.sf-co-cta-helper {
  margin: 0;
  font-size: 11.5px;
  color: var(--sf-text-3);
  text-align: center;
  font-weight: 600;
}

/* ── Loyalty redemption widget ─────────────────────────────── */
.sf-co-loyalty-card .sf-co-card-head { align-items: center; }
.sf-co-loyalty-bal {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--sf-text-2);
  font-weight: 600;
}
.sf-co-loyalty-bal strong {
  color: var(--sf-success);
  font-weight: 800;
  font-feature-settings: 'tnum';
}
.sf-co-loyalty-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--sf-bg);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sf-co-loyalty-toggle:hover { border-color: var(--sf-brand); }
.sf-co-loyalty-toggle input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--sf-brand);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.sf-co-loyalty-toggle-label {
  flex: 1;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sf-text-1);
  line-height: 1.4;
}
.sf-co-loyalty-toggle-label small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sf-success);
}
.sf-co-loyalty-controls {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--sf-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sf-co-loyalty-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sf-co-loyalty-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--sf-line);
  outline: none;
  cursor: pointer;
}
.sf-co-loyalty-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sf-brand);
  cursor: grab;
  box-shadow: 0 0 0 4px var(--sf-brand-glow);
}
.sf-co-loyalty-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sf-brand);
  cursor: grab;
  border: none;
  box-shadow: 0 0 0 4px var(--sf-brand-glow);
}
.sf-co-loyalty-max {
  padding: 6px 12px;
  border-radius: var(--sf-radius-pill);
  border: 1.5px solid var(--sf-brand);
  background: transparent;
  color: var(--sf-brand);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .15s ease, color .15s ease;
}
.sf-co-loyalty-max:hover {
  background: var(--sf-brand);
  color: #fff;
}
.sf-co-loyalty-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--sf-success-bg);
  border-radius: var(--sf-radius-sm);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sf-success-2);
  font-feature-settings: 'tnum';
}
.sf-co-loyalty-summary strong { font-size: 15px; }
.sf-co-loyalty-eq { color: var(--sf-text-3); }
.sf-co-loyalty-disc { font-size: 15px; font-weight: 800; }
.sf-co-loyalty-hint {
  margin: 0;
  font-size: 11.5px;
  color: var(--sf-text-3);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.45;
}
.sf-co-loyalty-hint i { font-size: 11px; color: var(--sf-brand); margin-top: 2px; flex-shrink: 0; }

/* ── Coupon teaser card on checkout ──────────────────────── */
.sf-co-coupons-teaser {
  padding: 0;
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.sf-co-coupons-trigger {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--sf-text-1);
  transition: background .15s ease;
}
.sf-co-coupons-trigger:hover { background: var(--sf-bg); }
.sf-co-coupons-trigger-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--sf-brand-soft);
  color: var(--sf-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sf-co-coupons-trigger-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sf-co-coupons-trigger-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-text-1);
  line-height: 1.3;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-co-coupons-trigger-text strong > span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.sf-co-coupons-trigger-text small {
  font-size: 12px;
  font-weight: 600;
  color: var(--sf-success);
  margin-top: 2px;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-co-coupons-trigger-chev {
  font-size: 12px;
  color: var(--sf-text-3);
  flex-shrink: 0;
}
.sf-co-coupons-trigger-remove {
  align-self: center;
  margin-right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--sf-line);
  background: var(--sf-card);
  color: var(--sf-text-2);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.sf-co-coupons-trigger-remove:hover {
  border-color: var(--sf-danger);
  color: var(--sf-danger);
}
.sf-co-coupons-trigger-remove:disabled { opacity: .65; cursor: progress; }

/* ── Coupon modal ────────────────────────────────────────── */
.sf-coupon-modal-root {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.sf-coupon-modal-root[style*="display: block"],
.sf-coupon-modal-root:not([style*="display:none"]) { pointer-events: auto; }
.sf-coupon-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}
.sf-coupon-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  background: var(--sf-card);
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -16px 48px rgba(15, 23, 42, .25);
}
@media (min-width: 640px) {
  .sf-coupon-modal-root { align-items: center; padding: 24px; }
  .sf-coupon-modal-sheet {
    max-height: 80vh;
    border-radius: 24px;
  }
}

/* Modal enter / leave transitions */
.sf-coupon-modal-enter { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }
.sf-coupon-modal-enter-start { transform: translateY(40px) scale(.98); opacity: 0; }
.sf-coupon-modal-enter-end   { transform: translateY(0)      scale(1);   opacity: 1; }
.sf-coupon-modal-leave { transition: transform .2s ease, opacity .2s ease; }
.sf-coupon-modal-leave-start { transform: translateY(0)      scale(1);   opacity: 1; }
.sf-coupon-modal-leave-end   { transform: translateY(40px)   scale(.98); opacity: 0; }

.sf-coupon-modal-head {
  position: relative;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--sf-line);
  text-align: center;
}
.sf-coupon-modal-handle {
  display: block;
  width: 40px;
  height: 4px;
  background: var(--sf-line-2);
  border-radius: 999px;
  margin: 0 auto 12px;
}
@media (min-width: 640px) { .sf-coupon-modal-handle { display: none; } }
.sf-coupon-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--sf-text-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.sf-coupon-modal-title i { color: var(--sf-brand); }
.sf-coupon-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--sf-bg);
  color: var(--sf-text-2);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.sf-coupon-modal-close:hover { background: var(--sf-line); color: var(--sf-text-1); }

.sf-coupon-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  -webkit-overflow-scrolling: touch;
}

.sf-coupon-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.sf-coupon-input {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-card);
  color: var(--sf-text-1);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-coupon-input::placeholder { letter-spacing: 0; text-transform: none; font-weight: 500; }
.sf-coupon-input:focus {
  border-color: var(--sf-brand);
  box-shadow: 0 0 0 3px var(--sf-brand-glow);
}
.sf-coupon-apply-btn {
  padding: 12px 22px;
  border-radius: var(--sf-radius-sm);
  border: 1.5px solid var(--sf-brand);
  background: var(--sf-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: filter .15s ease, transform .12s ease;
}
.sf-coupon-apply-btn:hover:not(:disabled) { filter: brightness(1.08); }
.sf-coupon-apply-btn:active:not(:disabled) { transform: translateY(1px); }
.sf-coupon-apply-btn:disabled { opacity: .55; cursor: not-allowed; }

.sf-coupon-applied-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--sf-success);
  background: var(--sf-success-bg);
  border-radius: var(--sf-radius-sm);
  margin-bottom: 16px;
}
.sf-coupon-applied-banner > i {
  font-size: 22px;
  color: var(--sf-success-2);
  flex-shrink: 0;
}
.sf-coupon-applied-banner > div { flex: 1; min-width: 0; }
.sf-coupon-applied-banner strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-success-2);
  line-height: 1.3;
}
.sf-coupon-applied-banner small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--sf-text-2);
}
.sf-coupon-applied-remove {
  padding: 7px 14px;
  border-radius: var(--sf-radius-pill);
  border: 1.5px solid var(--sf-line);
  background: var(--sf-card);
  color: var(--sf-text-2);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease;
}
.sf-coupon-applied-remove:hover {
  border-color: var(--sf-danger);
  color: var(--sf-danger);
}
.sf-coupon-applied-remove:disabled { opacity: .65; cursor: progress; }

.sf-coupon-section-label {
  margin: 4px 0 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--sf-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sf-coupon-loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sf-coupon-skel {
  display: block;
  height: 70px;
  border-radius: var(--sf-radius-sm);
  background: linear-gradient(90deg, var(--sf-line) 0%, var(--sf-bg) 50%, var(--sf-line) 100%);
  background-size: 200% 100%;
  animation: sfSkeletonShine 1.4s linear infinite;
}
@keyframes sfSkeletonShine {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.sf-coupon-empty {
  text-align: center;
  padding: 32px 12px;
  color: var(--sf-text-2);
}
.sf-coupon-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--sf-bg);
  color: var(--sf-text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.sf-coupon-empty p {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-text-1);
}
.sf-coupon-empty small { display: block; font-size: 12px; color: var(--sf-text-3); }

.sf-coupon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sf-coupon-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--sf-card);
  border: 1.5px solid var(--sf-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.sf-coupon-card:hover {
  border-color: var(--sf-brand);
  box-shadow: 0 6px 18px var(--sf-brand-glow);
  transform: translateY(-1px);
}
.sf-coupon-card.is-applied {
  border-color: var(--sf-success);
  background: var(--sf-success-bg);
}
.sf-coupon-card-stub {
  width: 52px;
  background: var(--sf-brand-soft);
  color: var(--sf-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  position: relative;
  flex-shrink: 0;
}
.sf-coupon-card.is-applied .sf-coupon-card-stub {
  background: var(--sf-success-bg);
  color: var(--sf-success-2);
}
/* Ticket "punch" effect — small notches between stub and body */
.sf-coupon-card-stub::before,
.sf-coupon-card-stub::after {
  content: '';
  position: absolute;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sf-card);
  border: 1.5px solid var(--sf-line);
}
.sf-coupon-card-stub::before { top: -6px; }
.sf-coupon-card-stub::after  { bottom: -6px; }
.sf-coupon-card.is-applied .sf-coupon-card-stub::before,
.sf-coupon-card.is-applied .sf-coupon-card-stub::after {
  background: var(--sf-success-bg);
  border-color: var(--sf-success);
}

.sf-coupon-card-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.sf-coupon-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-text-1);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sf-coupon-card-code {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-bg);
  border: 1px dashed var(--sf-line-2);
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--sf-text-2);
  text-transform: uppercase;
}
.sf-coupon-card-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--sf-text-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-coupon-card-save {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--sf-success);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sf-coupon-card-save i { font-size: 11px; }
.sf-coupon-card-cta {
  align-self: stretch;
  padding: 0 18px;
  border: none;
  border-left: 1.5px dashed var(--sf-line);
  background: transparent;
  color: var(--sf-brand);
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  flex-shrink: 0;
  min-width: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sf-coupon-card-cta:hover:not(:disabled) {
  background: var(--sf-brand);
  color: #fff;
}
.sf-coupon-card-cta.is-applied {
  background: var(--sf-success);
  color: #fff;
  border-left-color: var(--sf-success);
  cursor: default;
}
.sf-coupon-card-cta:disabled { opacity: .65; cursor: progress; }

/* ── Cart drawer: unlocked / applied offer row ────────────
   Shown in place of the threshold nudge once the customer qualifies for an
   offer, so the advertised discount has somewhere to land. */
.sf-cart-offer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--sf-brand, #b91c1c);
  background: var(--sf-brand-tint, rgba(185, 28, 28, .06));
}
.sf-cart-offer--applied {
  border-style: solid;
  border-color: var(--sf-success, #16a34a);
  background: rgba(22, 163, 74, .07);
}
.sf-cart-offer-main { flex: 1; min-width: 0; }
.sf-cart-offer-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--sf-text, #0f172a);
}
.sf-cart-offer-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-cart-offer--applied .sf-cart-offer-title i { color: var(--sf-success, #16a34a); }
.sf-cart-offer--ready .sf-cart-offer-title i { color: var(--sf-brand, #b91c1c); }
.sf-cart-offer-sub {
  margin: 2px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sf-text-3, #64748b);
}
.sf-cart-offer-btn {
  flex-shrink: 0;
  min-width: 66px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--sf-radius-pill, 999px);
  background: var(--sf-brand, #b91c1c);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s ease;
}
.sf-cart-offer-btn:hover:not(:disabled) { filter: brightness(1.08); }
.sf-cart-offer-btn:disabled { opacity: .65; cursor: default; }
.sf-cart-offer-btn--ghost {
  min-width: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  color: var(--sf-text-3, #64748b);
}
.sf-cart-offer-btn--ghost:hover:not(:disabled) {
  background: rgba(15, 23, 42, .06);
  filter: none;
}

/* ── Celebration / success popup ─────────────────────────── */
.sf-coupon-success {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(15, 23, 42, .35);
  backdrop-filter: blur(3px);
}
.sf-coupon-celeb-enter { transition: opacity .2s ease; }
.sf-coupon-celeb-enter-start { opacity: 0; }
.sf-coupon-celeb-enter-end   { opacity: 1; }
.sf-coupon-celeb-leave { transition: opacity .25s ease; }
.sf-coupon-celeb-leave-start { opacity: 1; }
.sf-coupon-celeb-leave-end   { opacity: 0; }

.sf-coupon-success-card {
  position: relative;
  width: 90%;
  max-width: 320px;
  background: var(--sf-card);
  border-radius: 22px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(15, 23, 42, .35);
  animation: sfCelebPop .55s cubic-bezier(.34, 1.65, .55, 1.05);
  z-index: 2;
}
@keyframes sfCelebPop {
  0%   { transform: scale(.6) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  80%  { transform: scale(.97); }
  100% { transform: scale(1) translateY(0); }
}
.sf-coupon-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--sf-success-bg);
  color: var(--sf-success-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  animation: sfCelebTickIn .6s .15s both cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes sfCelebTickIn {
  0%   { transform: scale(0) rotate(-25deg); }
  60%  { transform: scale(1.15) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.sf-coupon-success-savings {
  margin: 0;
  font-size: 38px;
  font-weight: 900;
  color: var(--sf-success-2);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  line-height: 1;
}
.sf-coupon-success-savings small {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-success);
  letter-spacing: 0;
  margin-top: 4px;
  text-transform: uppercase;
}
.sf-coupon-success-label {
  margin: 14px 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--sf-text-1);
  letter-spacing: -0.01em;
}
.sf-coupon-success-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--sf-text-2);
  font-weight: 600;
}

/* Confetti shower */
.sf-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.sf-confetti span {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: sfConfetti 1.4s cubic-bezier(.16, .8, .3, 1) forwards;
}
.sf-confetti span:nth-child(1)  { background: #ef4444; animation-delay: .05s; --x: -160px; --y: -180px; --r:  20deg; }
.sf-confetti span:nth-child(2)  { background: #f59e0b; animation-delay: .08s; --x:  140px; --y: -200px; --r: -30deg; }
.sf-confetti span:nth-child(3)  { background: #10b981; animation-delay: .11s; --x: -100px; --y: -240px; --r:  45deg; }
.sf-confetti span:nth-child(4)  { background: #3b82f6; animation-delay: .14s; --x:  180px; --y: -160px; --r: -15deg; }
.sf-confetti span:nth-child(5)  { background: #ec4899; animation-delay: .17s; --x: -200px; --y: -120px; --r:  60deg; }
.sf-confetti span:nth-child(6)  { background: #8b5cf6; animation-delay: .20s; --x:  220px; --y: -210px; --r:  10deg; }
.sf-confetti span:nth-child(7)  { background: #14b8a6; animation-delay: .23s; --x: -240px; --y: -140px; --r: -50deg; }
.sf-confetti span:nth-child(8)  { background: #facc15; animation-delay: .26s; --x:   60px; --y: -260px; --r:  25deg; }
.sf-confetti span:nth-child(9)  { background: #f97316; animation-delay: .29s; --x:  -60px; --y: -270px; --r: -35deg; }
.sf-confetti span:nth-child(10) { background: #a855f7; animation-delay: .32s; --x:  120px; --y: -240px; --r:  55deg; }
.sf-confetti span:nth-child(11) { background: #06b6d4; animation-delay: .35s; --x: -180px; --y: -200px; --r: -20deg; }
.sf-confetti span:nth-child(12) { background: #84cc16; animation-delay: .38s; --x:  200px; --y: -180px; --r:  40deg; }
.sf-confetti span:nth-child(13) { background: #22c55e; animation-delay: .42s; --x:  -80px; --y: -220px; --r:  10deg; }
.sf-confetti span:nth-child(14) { background: #eab308; animation-delay: .45s; --x:  -40px; --y: -250px; --r:  70deg; }
.sf-confetti span:nth-child(15) { background: #db2777; animation-delay: .48s; --x:  150px; --y: -220px; --r: -45deg; }

@keyframes sfConfetti {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(.6);
  }
  60% {
    opacity: 1;
    transform: translate(calc(-50% + var(--x) * .8), calc(-50% + var(--y) * .8)) rotate(var(--r)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 80px)) rotate(calc(var(--r) * 2)) scale(.7);
  }
}

/* ── Tablet / desktop tier polish ────────────────────────────── */
@media (min-width: 768px) {
  .sf-co-wrap { padding: 20px 0 32px; gap: 16px; }
  .sf-co-pgh-title { font-size: 26px; }
  .sf-co-card { padding: 20px; }
  .sf-co-card-title { font-size: 15.5px; }
  .sf-co-toggle-btn { padding: 13px 16px; font-size: 14px; }
  .sf-co-cta { padding: 16px 22px; font-size: 16px; }
  .sf-co-cta-amount { font-size: 18px; }
  .sf-co-bill-total-value { font-size: 20px; }
}

@media (min-width: 1024px) {
  .sf-co-wrap {
    max-width: 720px;
    margin: 0 auto;
  }
}



/* ╭──────────────────────────────────────────────────────────────╮
 * │ 25. Tablet / Desktop tier (≥ 768 / ≥ 1024 / ≥ 1280)          │
 * ╰──────────────────────────────────────────────────────────────╯ */

@media (min-width: 600px) {
  .sf-cat-grid { grid-template-columns: repeat(6, 1fr); gap: 18px 14px; }
  .sf-coupon-rail { grid-auto-columns: 320px; }
  .sf-promo-rail  { grid-auto-columns: 200px; }
  .sf-best-rail   { grid-auto-columns: 184px; }
  .sf-combo-rail  { grid-auto-columns: 280px; }
  .sf-bogo-rail   { grid-auto-columns: 280px; }
  .sf-hero { max-height: 260px; }
  .sf-rinfo-tagline { display: block; }
  .sf-hdr-tagline   { display: block; }
}

@media (min-width: 768px) {
  .sf-main { padding: 0 24px 32px; }
  .sf-hero { margin: 18px 0 8px; border-radius: var(--sf-radius-lg); max-height: 300px; }
  .sf-rail { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .sf-cat-strip { margin: 0 -24px 14px; padding-left: 24px; padding-right: 24px; }
  .sf-co-place { margin: 14px -24px 0; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); }
  .sf-hdr { padding: 0 28px; gap: 24px; }
  .sf-hdr-name { font-size: 16px; max-width: none; }
  .sf-hdr-btn-text { display: inline; }
  .sf-hdr-btn--cart { width: auto; height: auto; padding: 10px 16px; }
  .sf-hmenu-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

@media (min-width: 1024px) {

  body.sf-body { padding-bottom: 32px; }

  .sf-hdr {
    height: 72px;
    padding: 0 32px;
    gap: 32px;
  }
  .sf-hdr-logo { width: 44px; height: 44px; border-radius: 12px; }
  .sf-hdr-name { font-size: 17px; }

  .sf-main { padding: 0 32px 56px; }
  .sf-hero { margin: 24px 0 8px; border-radius: var(--sf-radius-lg); max-height: 360px; aspect-ratio: 5 / 2; }
  .sf-rail { margin: 0 -32px; padding-left: 32px; padding-right: 32px; }

  /* Bottom nav becomes a top sub-strip on desktop. */
  .sf-bnav {
    position: sticky;
    top: 72px;
    bottom: auto;
    left: 0; right: 0;
    margin: 0 auto;
    max-width: var(--sf-content-w);
    width: 100%;
    grid-template-columns: repeat(4, max-content);
    justify-content: flex-start;
    gap: 4px;
    padding: 0 32px;
    height: auto;
    border-top: 0;
    border-bottom: 1px solid var(--sf-line);
    background: rgba(255, 255, 255, .96);
  }
  .sf-bnav-item {
    flex-direction: row;
    gap: 10px;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 700;
  }
  .sf-bnav-item i { font-size: 14px; }
  .sf-bnav-item.is-active::after { display: none; }
  .sf-bnav-item.is-active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    width: calc(100% - 36px);
    height: 3px;
    background: var(--sf-brand);
    border-radius: var(--sf-radius-pill) var(--sf-radius-pill) 0 0;
  }
  .sf-bnav-badge { position: relative; top: 0; left: 0; transform: none; border: 0; }

  /* Floating cart pill: bottom-right corner. */
  .sf-fab-cart {
    left: auto;
    right: 32px;
    transform: none;
    bottom: 32px;
    width: auto;
    min-width: 240px;
    max-width: 360px;
    padding: 14px 22px;
    border-radius: var(--sf-radius-pill);
  }
  .sf-fab-cart:hover { transform: translateY(-2px); }
  .sf-fab-cart:active { transform: translateY(0); }

  /* Home — wider hero feel. Keep the centered card layout on desktop too;
     just give it more breathing room and slightly larger type. */
  .sf-rinfo {
    padding: 32px 24px 22px;
  }
  .sf-rinfo-head { margin-bottom: 16px; }
  .sf-rinfo-title { font-size: 32px; }
  .sf-rinfo-tagline { font-size: 14.5px; max-width: 50ch; }
  .sf-rinfo-meta {
    margin-top: 4px;
    padding-top: 18px;
    column-gap: 24px;
    font-size: 13.5px;
  }
  .sf-rinfo-rating-count {
    display: inline-block;
    margin-top: 0;
    margin-left: 8px;
    vertical-align: middle;
  }

  .sf-cat-grid { grid-template-columns: repeat(8, 1fr); gap: 20px 16px; }

  .sf-sec-title { font-size: 22px; }
  .sf-hmenu-title { font-size: 28px; }
  .sf-hmenu-cat-title { font-size: 19px; }
  .sf-hmenu-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }

  /* Menu page — sticky cat strip stays right under the bnav. */
  .sf-cat-strip { top: calc(72px + 64px); }
  .sf-menu-search { top: 72px; padding: 16px 0 12px; }

  /* Wider rail tiles. */
  .sf-coupon-rail { grid-auto-columns: 360px; }
  .sf-combo-rail  { grid-auto-columns: 320px; }
  .sf-bogo-rail   { grid-auto-columns: 320px; }
  .sf-best-rail   { grid-auto-columns: 220px; }
  .sf-promo-rail  { grid-auto-columns: 240px; }

  /* Address picker form — 2 columns. */
  .sf-addr-form-row { grid-template-columns: 1fr 1fr 1fr; }
}

@media (min-width: 1280px) {
  .sf-main { padding: 0 0 56px; }
  .sf-hero { margin: 28px 0 8px; border-radius: var(--sf-radius-lg); max-height: 400px; }
  .sf-rail { margin: 0; padding-left: 0; padding-right: 0; }
  .sf-cat-strip { margin: 0 0 14px; padding: 8px 0; }
  .sf-cat-grid  { grid-template-columns: repeat(10, 1fr); gap: 24px 18px; }
  .sf-rinfo { padding: 36px 28px 24px; }
  .sf-co-place { margin: 14px 0 0; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); }
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 26. Polish (reduced motion / hover-capable / printing)       │
 * ╰──────────────────────────────────────────────────────────────╯ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .sf-coupon, .sf-combo, .sf-bogo, .sf-best, .sf-promo, .sf-hmprod, .sf-prod {
    will-change: transform;
  }
}

@media print {
  .sf-hdr, .sf-bnav, .sf-fab-cart, .sf-toast-region { display: none !important; }
  .sf-main { max-width: none; padding: 0; }
}



/* ╭──────────────────────────────────────────────────────────────╮
 * │ 27. Location gate (first-visit serviceability check)         │
 * ╰──────────────────────────────────────────────────────────────╯
 *
 * Full-screen overlay rendered on the home page until the visitor
 * has either confirmed a serviceable location, chosen pickup, or
 * skipped the gate. Sits above everything (z=1200) so the page
 * underneath can finish hydrating in the background while the user
 * is still on the gate. Markup: storefront.partials.location-gate.
 */

.sf-locgate {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .68);
  /* Fade-in from the side so it doesn't pop on first paint. */
  animation: sfLocGateIn .25s ease;
  overflow-y: auto;
}
.sf-locgate[hidden] { display: none; }

.sf-locgate-card {
  position: relative;
  background: var(--sf-card);
  border-radius: var(--sf-radius-xl);
  width: min(440px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 36px 28px 28px;
  box-shadow: var(--sf-shadow-xl);
  text-align: center;
  /* Slide-up entry to mirror the modal pattern customers know from
     the cart drawer + login modal. */
  animation: sfLocGateCardIn .28s cubic-bezier(.34, 1.2, .64, 1);
}
@media (min-width: 600px) {
  .sf-locgate-card { padding: 44px 36px 32px; }
}
/* Desktop: bigger card with two-column hero feel — illustration on
   top, content below. The wider card stops the modal from looking
   tiny on a 1280px screen. */
@media (min-width: 1024px) {
  .sf-locgate { padding: 32px; }
  .sf-locgate-card {
    width: min(520px, 100%);
    padding: 52px 44px 36px;
    border-radius: var(--sf-radius-xl);
  }
}

.sf-locgate-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sf-locgate-screen[hidden] { display: none; }

.sf-locgate-glyph {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--sf-brand-soft);
  color: var(--sf-brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 0 auto 4px;
  position: relative;
}
.sf-locgate-glyph::before {
  /* soft pulse ring */
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--sf-brand-glow);
  animation: sfLocGatePulse 2s ease-in-out infinite;
}
.sf-locgate-glyph--ok {
  background: var(--sf-success-bg);
  color: var(--sf-success-2);
}
.sf-locgate-glyph--ok::before { border-color: rgba(27, 166, 114, .25); }
.sf-locgate-glyph--err {
  background: var(--sf-danger-bg);
  color: var(--sf-danger);
}
.sf-locgate-glyph--err::before { border-color: rgba(226, 55, 68, .25); }
.sf-locgate-glyph--spin::before { display: none; }   /* spinner already conveys motion */

.sf-locgate-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sf-text);
  line-height: 1.2;
  padding: 0 8px;
}
.sf-locgate-sub {
  margin: 0;
  font-size: 14px;
  color: var(--sf-text-2);
  line-height: 1.5;
  padding: 0 8px;
  max-width: 320px;
}
.sf-locgate-sub strong { color: var(--sf-text); font-weight: 700; }

.sf-locgate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.sf-locgate-skip {
  background: transparent;
  border: 0;
  padding: 8px 12px;
  margin-top: 4px;
  color: var(--sf-text-3);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sf-locgate-skip:hover { color: var(--sf-text-2); }

.sf-locgate-fineprint {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--sf-text-3);
  line-height: 1.5;
  padding: 12px 14px;
  background: var(--sf-bg);
  border-radius: var(--sf-radius-sm);
  width: 100%;
  text-align: left;
}
.sf-locgate-fineprint[hidden] { display: none; }
.sf-locgate-fineprint strong { color: var(--sf-text); font-weight: 700; }

@keyframes sfLocGateIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sfLocGateCardIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes sfLocGatePulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%      { transform: scale(1.08); opacity: .25; }
}

/* Lock scroll while the gate is up. We deliberately do NOT blur or
   hide the home content — the dark backdrop is enough to focus the
   gate, and blurring + overflow:hidden together caused the home
   content to render as a narrow ghost column on desktop. */
body.sf-locgate-active { overflow: hidden; }


/* ── Header location chip — shown after a serviceable location is
      confirmed. Replaces the "Login" CTA's left-edge whitespace with
      a "Delivering to: …" affordance the customer can tap to change
      address. */
.sf-loc-chip {
  display: none;          /* JS unhides once a location is set */
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-bg);
  color: var(--sf-text-2);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--sf-line);
  cursor: pointer;
  max-width: 180px;
  transition: background .15s ease, border-color .15s ease;
}
.sf-loc-chip.is-on { display: inline-flex; }
.sf-loc-chip:hover { background: var(--sf-card); border-color: var(--sf-line-2); }
.sf-loc-chip i { color: var(--sf-brand); font-size: 12px; }
.sf-loc-chip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 480px) {
  .sf-loc-chip { max-width: 120px; padding: 6px 10px; font-size: 11.5px; }
}
@media (min-width: 1024px) {
  .sf-loc-chip { max-width: 240px; padding: 8px 14px; font-size: 13px; }
  .sf-loc-chip i { font-size: 13px; }
}

/* ── Outlet Selector ─────────────────────────────────────────── */
.sf-outlet-selector { position: relative; }
.sf-outlet-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--sf-brand-soft, rgba(245,158,11,.08));
  border: 1px solid var(--sf-brand-glow, rgba(245,158,11,.2));
  color: var(--sf-text, #1f2937); cursor: pointer; transition: all .2s;
  max-width: 180px; white-space: nowrap;
}
.sf-outlet-chip:hover { border-color: var(--sf-brand); }
.sf-outlet-chip i:first-child { color: var(--sf-brand); font-size: 11px; }
.sf-outlet-chip-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px;
}
.sf-outlet-chip-arrow { font-size: 9px; opacity: .6; transition: transform .2s; }
.sf-outlet-chip-arrow.is-open { transform: rotate(180deg); }

.sf-outlet-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  min-width: 260px; max-width: 320px; background: var(--sf-card, #fff);
  border: 1px solid var(--sf-line, #e5e7eb); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12); padding: 6px;
  max-height: 300px; overflow-y: auto;
}
.sf-outlet-option {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 10px 12px; border: none; background: transparent;
  border-radius: 10px; cursor: pointer; text-align: left; transition: background .15s;
}
.sf-outlet-option:hover { background: var(--sf-brand-soft, rgba(245,158,11,.06)); }
.sf-outlet-option.is-active { background: var(--sf-brand-soft); border: 1px solid var(--sf-brand-glow); }
.sf-outlet-option-name { font-size: 13px; font-weight: 700; color: var(--sf-text); }
.sf-outlet-option-addr { font-size: 11px; color: var(--sf-text-3, #6b7280); line-height: 1.3; }
.sf-outlet-option-dist {
  font-size: 10px; font-weight: 700; color: var(--sf-brand);
  margin-top: 2px;
}

body[data-active-nav="home"] .sf-outlet-chip {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff;
}
body[data-active-nav="home"] .sf-outlet-chip i:first-child { color: #a5b4fc; }

@media (max-width: 480px) {
  .sf-outlet-dropdown { min-width: 220px; right: -20px; }
}

/* ── Mobile header fit ───────────────────────────────────────────
   On phones the brand name + location chip + outlet chip + profile
   used to overflow a single non-wrapping row and overlap. Here we go
   logo-only for the brand and let the two chips flex/shrink with
   ellipsis so everything stays on one tidy row. */
@media (max-width: 600px) {
  .sf-hdr { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .sf-hdr-brand { flex: 0 0 auto; }
  .sf-hdr-name, .sf-hdr-tagline { display: none; }

  .sf-hdr-actions {
    margin-left: auto;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: 6px;
    /* NOTE: no `overflow: hidden` here — it would clip the outlet
       dropdown (a descendant) on mobile. The chips already stay on one
       row via `min-width: 0` + text ellipsis, so clipping isn't needed. */
  }

  .sf-loc-chip { flex: 1 1 auto; min-width: 0; max-width: none; padding: 6px 10px; font-size: 11.5px; }
  .sf-loc-chip.is-on { display: inline-flex; }
  .sf-loc-chip-prefix { display: none; }   /* show just the area name on phones */

  .sf-outlet-selector { flex: 0 1 auto; min-width: 0; }
  .sf-outlet-chip { flex: 0 1 auto; min-width: 0; max-width: 42vw; padding: 6px 10px; font-size: 11px; }
  .sf-outlet-chip-text { max-width: none; min-width: 0; }

  .sf-hdr-btn { flex: 0 0 auto; padding: 8px 10px; }
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 24b. Customer profile page (sf-prof-*)                       │
 * ╰──────────────────────────────────────────────────────────────╯ */

.sf-prof-wrap {
  padding: 12px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Header ──────────────────────────────────────────────────── */
.sf-prof-pgh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 6px;
}
.sf-prof-pgh-text { flex: 1; min-width: 0; }
.sf-prof-pgh-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sf-text-3);
}
.sf-prof-pgh-title {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--sf-text-1);
  letter-spacing: -.01em;
}
.sf-prof-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-pill);
  color: var(--sf-text-1);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.sf-prof-logout:hover { background: var(--sf-bg); border-color: var(--sf-line-2); }
.sf-prof-logout:disabled { opacity: .55; cursor: not-allowed; }

/* ── Card primitive (shared across profile sections) ─────────── */
.sf-prof-card {
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.sf-prof-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}
.sf-prof-card-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--sf-text-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sf-prof-card-title > i {
  font-size: 14px;
  color: var(--sf-brand);
  width: 18px;
  text-align: center;
}
.sf-prof-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--sf-brand-soft);
  color: var(--sf-brand-dark);
  border: 0;
  border-radius: var(--sf-radius-pill);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease;
}
.sf-prof-card-action:hover { background: color-mix(in srgb, var(--sf-brand) 18%, white); }

/* ── Identity card ───────────────────────────────────────────── */
.sf-prof-id {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: linear-gradient(135deg, var(--sf-brand-soft) 0%, var(--sf-card) 70%);
  border: 1px solid color-mix(in srgb, var(--sf-brand) 18%, var(--sf-line));
  position: relative;
  overflow: hidden;
}
.sf-prof-id::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--sf-brand) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.sf-prof-id-avatar {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--sf-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--sf-brand) 30%, transparent);
  flex-shrink: 0;
}
.sf-prof-id-text { flex: 1; min-width: 0; position: relative; }
.sf-prof-id-name {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--sf-text-1);
  letter-spacing: -.01em;
}
.sf-prof-id-mobile,
.sf-prof-id-since {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--sf-text-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sf-prof-id-mobile > i,
.sf-prof-id-since > i {
  font-size: 11px;
  color: var(--sf-text-3);
}

/* ── Progress bar ────────────────────────────────────────────── */
.sf-prof-prog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.sf-prof-prog-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-text-1);
}
.sf-prof-prog-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--sf-text-2);
  line-height: 1.4;
}
.sf-prof-prog-pct {
  font-size: 18px;
  font-weight: 900;
  color: var(--sf-brand);
  font-feature-settings: 'tnum';
  flex-shrink: 0;
}
.sf-prof-prog-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--sf-bg);
  overflow: hidden;
  border: 1px solid var(--sf-line);
}
.sf-prof-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sf-brand) 0%, var(--sf-brand-dark) 100%);
  border-radius: 999px;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

/* ── Stats (loyalty + wallet) ────────────────────────────────── */
.sf-prof-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sf-prof-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  min-width: 0;
}
.sf-prof-stat-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.sf-prof-stat-icon--loyalty {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #b45309;
}
.sf-prof-stat-icon--wallet {
  background: color-mix(in srgb, #10b981 15%, transparent);
  color: #047857;
}
.sf-prof-stat-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sf-text-3);
}
.sf-prof-stat-value {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--sf-text-1);
  font-feature-settings: 'tnum';
  letter-spacing: -.01em;
}
.sf-prof-stat-sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--sf-text-3);
  font-weight: 600;
}
.sf-prof-stat-skel {
  display: inline-block;
  width: 60px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--sf-bg) 25%, var(--sf-line) 50%, var(--sf-bg) 75%);
  background-size: 200% 100%;
  animation: sfProfShimmer 1.4s ease-in-out infinite;
}
@keyframes sfProfShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Profile form ────────────────────────────────────────────── */
.sf-prof-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sf-prof-field { display: flex; flex-direction: column; gap: 6px; }
.sf-prof-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sf-prof-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sf-text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sf-prof-optional {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sf-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* Shown beside DOB / gender labels once those one-time fields are
   saved. Visually distinct from the "optional" tag so the customer
   instantly understands the input is no longer editable. */
.sf-prof-locked-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sf-text-3);
  background: var(--sf-bg);
  border: 1px solid var(--sf-line);
  padding: 2px 8px;
  border-radius: var(--sf-radius-pill);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sf-prof-locked-tag i { font-size: 9px; color: var(--sf-text-3); }
.sf-prof-input:disabled {
  background: var(--sf-bg);
  color: var(--sf-text-2);
  cursor: not-allowed;
  opacity: .85;
}
.sf-prof-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-card);
  color: var(--sf-text-1);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-prof-input:focus {
  border-color: var(--sf-brand);
  box-shadow: 0 0 0 3px var(--sf-brand-glow);
}
.sf-prof-input:disabled {
  background: var(--sf-bg);
  color: var(--sf-text-3);
  cursor: not-allowed;
}
.sf-prof-input::placeholder { color: var(--sf-text-3); font-weight: 500; }
.sf-prof-hint {
  font-size: 11px;
  color: var(--sf-text-3);
}

/* ── Banners (form result) ───────────────────────────────────── */
.sf-prof-banner {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--sf-radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
.sf-prof-banner.is-err {
  background: var(--sf-danger-bg);
  color: var(--sf-danger);
  border-color: color-mix(in srgb, var(--sf-danger) 18%, transparent);
}
.sf-prof-banner.is-ok {
  background: var(--sf-success-bg);
  color: var(--sf-success-2);
  border-color: color-mix(in srgb, var(--sf-success) 22%, transparent);
}

/* ── Submit button ───────────────────────────────────────────── */
.sf-prof-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--sf-radius-sm);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sf-prof-btn:active:not(:disabled) { transform: translateY(1px); }
.sf-prof-btn:disabled { opacity: .55; cursor: not-allowed; }
.sf-prof-btn--primary {
  background: linear-gradient(180deg, var(--sf-brand) 0%, var(--sf-brand-dark) 100%);
  color: #fff;
  align-self: flex-start;
  min-width: 160px;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--sf-brand) 28%, transparent);
}

/* ── Addresses ───────────────────────────────────────────────── */
.sf-prof-addr-loading,
.sf-prof-addr-empty {
  padding: 18px 12px;
  text-align: center;
}
.sf-prof-addr-empty {
  background: var(--sf-bg);
  border: 1px dashed var(--sf-line-2);
  border-radius: var(--sf-radius-sm);
}
.sf-prof-addr-empty > i {
  font-size: 24px;
  color: var(--sf-text-3);
  margin-bottom: 8px;
  display: block;
}
.sf-prof-addr-empty p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--sf-text-1);
}
.sf-prof-addr-empty small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--sf-text-3);
}
.sf-prof-addr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sf-prof-addr-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--sf-bg);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-sm);
  transition: border-color .15s ease, background .15s ease;
}
.sf-prof-addr-row:hover { border-color: var(--sf-line-2); }
.sf-prof-addr-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--sf-brand-soft);
  color: var(--sf-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sf-prof-addr-text { flex: 1; min-width: 0; }
.sf-prof-addr-label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--sf-text-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: capitalize;
}
.sf-prof-addr-default {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  background: var(--sf-success-bg);
  color: var(--sf-success-2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sf-prof-addr-line {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--sf-text-2);
  line-height: 1.4;
}
.sf-prof-addr-del {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--sf-text-3);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sf-prof-addr-del:hover {
  background: var(--sf-danger-bg);
  color: var(--sf-danger);
}
.sf-prof-addr-del:disabled { opacity: .5; cursor: not-allowed; }

/* ── Loyalty points history ─────────────────────────────────── */
.sf-prof-history-loading { padding: 8px 0; }
.sf-prof-history-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--sf-text-2);
}
.sf-prof-history-empty i {
  font-size: 24px;
  color: var(--sf-text-3);
  margin-bottom: 8px;
}
.sf-prof-history-empty p {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sf-text-1);
}
.sf-prof-history-empty small {
  display: block;
  font-size: 12px;
  color: var(--sf-text-3);
}
.sf-prof-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sf-prof-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--sf-line);
}
.sf-prof-history-row:last-child { border-bottom: none; }
.sf-prof-history-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.sf-prof-history-row.is-credit .sf-prof-history-icon {
  background: var(--sf-success-bg);
  color: var(--sf-success-2);
}
.sf-prof-history-row.is-debit .sf-prof-history-icon {
  background: var(--sf-danger-bg);
  color: var(--sf-danger);
}
.sf-prof-history-text { flex: 1; min-width: 0; }
.sf-prof-history-reason {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sf-text-1);
  /* Trim long reasons (e.g. "Order #ABC123 - Earned 50 points for…") */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-prof-history-when {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--sf-text-3);
  font-weight: 500;
  font-feature-settings: 'tnum';
}
.sf-prof-history-pts {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
  font-weight: 800;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.sf-prof-history-pts small {
  font-size: 10px;
  font-weight: 700;
  color: var(--sf-text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sf-prof-history-row.is-credit .sf-prof-history-pts { color: var(--sf-success-2); }
.sf-prof-history-row.is-debit  .sf-prof-history-pts { color: var(--sf-danger); }
.sf-prof-history-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: var(--sf-bg);
  border: 1px dashed var(--sf-line);
  border-radius: var(--sf-radius-sm);
  color: var(--sf-text-2);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sf-prof-history-more:hover {
  background: var(--sf-card);
  border-color: var(--sf-brand);
  color: var(--sf-brand);
}
.sf-prof-history-more:disabled { opacity: .6; cursor: progress; }

/* ── Subscription card variants (profile page) ──────────── */
.sf-prof-sub {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--sf-text-1);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sf-prof-sub:hover { text-decoration: none; transform: translateY(-1px); }
.sf-prof-sub--active {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sf-success) 7%, white) 0%,
        var(--sf-card) 70%);
    border-color: var(--sf-success);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--sf-success) 14%, transparent);
}
.sf-prof-sub--upsell {
    background: linear-gradient(135deg, var(--sf-brand) 0%, var(--sf-brand-dark, #c2410c) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 8px 22px var(--sf-brand-glow);
    position: relative;
    overflow: hidden;
}
.sf-prof-sub--upsell::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    pointer-events: none;
}
.sf-prof-sub--upsell .sf-prof-sub-title,
.sf-prof-sub--upsell .sf-prof-sub-sub { color: #fff; position: relative; z-index: 1; }
.sf-prof-sub-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--sf-success);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--sf-success) 30%, transparent);
}
.sf-prof-sub-icon--brand {
    background: rgba(255, 255, 255, .22);
    border: 1.5px solid rgba(255, 255, 255, .35);
    box-shadow: none;
    position: relative;
    z-index: 1;
}
.sf-prof-sub-text { flex: 1; min-width: 0; }
.sf-prof-sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.sf-prof-sub-badge.is-ok { background: var(--sf-success); color: #fff; }
.sf-prof-sub-badge.is-warn { background: var(--sf-warning, #f59e0b); color: #fff; }
.sf-prof-sub-badge i { font-size: 9px; }
.sf-prof-sub-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--sf-text-1);
    line-height: 1.3;
    word-break: break-word;
}
.sf-prof-sub-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--sf-text-2);
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}
.sf-prof-sub-chev {
    color: var(--sf-text-3);
    font-size: 14px;
    flex-shrink: 0;
}
.sf-prof-sub-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1.5px solid rgba(255, 255, 255, .4);
    position: relative;
    z-index: 1;
}
.sf-prof-sub-cta i { font-size: 10px; }

/* ── Points history summary card (tap to open modal) ──── */
.sf-prof-history-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    width: 100%;
    border: 1px solid var(--sf-line);
    background: var(--sf-card);
    border-radius: var(--sf-radius);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sf-prof-history-card:hover {
    border-color: var(--sf-line-2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.sf-prof-history-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--sf-brand-soft);
    color: var(--sf-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.sf-prof-history-card-text { flex: 1; min-width: 0; }
.sf-prof-history-card-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--sf-text-1);
    letter-spacing: -0.005em;
}
.sf-prof-history-card-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--sf-text-3);
    font-weight: 600;
    font-feature-settings: 'tnum';
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-prof-history-card-chev {
    color: var(--sf-text-3);
    font-size: 14px;
    flex-shrink: 0;
}

/* ── Points history modal (bottom-sheet) ───────────────── */
.sf-prof-history-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}
.sf-prof-history-modal[style*="display:"]:not([style*="display: none"]),
.sf-prof-history-modal:not([style*="display:none"]) { pointer-events: auto; }
.sf-prof-history-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.sf-prof-history-modal-sheet {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--sf-card);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 48px rgba(15, 23, 42, .25);
    overflow: hidden;
}
@media (min-width: 640px) {
    .sf-prof-history-modal { align-items: center; padding: 24px; }
    .sf-prof-history-modal-sheet { max-height: 80vh; border-radius: 22px; }
}
.sf-prof-modal-enter { transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.sf-prof-modal-enter-start { transform: translateY(40px) scale(.98); opacity: 0; }
.sf-prof-modal-enter-end   { transform: translateY(0)    scale(1);   opacity: 1; }
.sf-prof-modal-leave { transition: transform .2s ease, opacity .2s ease; }
.sf-prof-modal-leave-start { transform: translateY(0)    scale(1);   opacity: 1; }
.sf-prof-modal-leave-end   { transform: translateY(40px) scale(.98); opacity: 0; }

.sf-prof-history-modal-head {
    position: relative;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--sf-line);
    text-align: center;
}
.sf-prof-history-modal-handle {
    display: block;
    width: 40px;
    height: 4px;
    background: var(--sf-line-2);
    border-radius: 999px;
    margin: 0 auto 10px;
}
@media (min-width: 640px) { .sf-prof-history-modal-handle { display: none; } }
.sf-prof-history-modal-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--sf-text-1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}
.sf-prof-history-modal-title i { color: var(--sf-brand); font-size: 13px; }
.sf-prof-history-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--sf-bg);
    color: var(--sf-text-2);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.sf-prof-history-modal-close:hover { background: var(--sf-line); color: var(--sf-text-1); }
.sf-prof-history-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 18px;
    -webkit-overflow-scrolling: touch;
}

/* ── Quick-link rows ─────────────────────────────────────────── */
.sf-prof-links { padding: 6px; }
.sf-prof-link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--sf-radius-sm);
  text-decoration: none;
  color: var(--sf-text-1);
  transition: background .15s ease;
}
.sf-prof-link-row:hover { background: var(--sf-bg); }
.sf-prof-link-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--sf-bg);
  color: var(--sf-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.sf-prof-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-prof-link-text > strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--sf-text-1);
}
.sf-prof-link-text > small {
  font-size: 12px;
  color: var(--sf-text-3);
  margin-top: 2px;
}
.sf-prof-link-chev { font-size: 12px; color: var(--sf-text-3); }

/* ── Tablet / desktop tier ───────────────────────────────────── */
@media (min-width: 768px) {
  .sf-prof-wrap { padding: 20px 0 32px; gap: 16px; }
  .sf-prof-pgh-title { font-size: 26px; }
  .sf-prof-card { padding: 20px; }
  .sf-prof-id { padding: 22px; }
  .sf-prof-id-avatar { width: 72px; height: 72px; font-size: 24px; }
  .sf-prof-id-name { font-size: 20px; }
  .sf-prof-stat-value { font-size: 20px; }
}

@media (min-width: 1024px) {
  .sf-prof-wrap { max-width: 720px; margin: 0 auto; }
}


/* ── Profile guest (logged-out) state ─────────────────────────── */
.sf-prof-guest-card {
  text-align: center;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sf-prof-guest-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--sf-brand-soft);
  color: var(--sf-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 4px;
}
.sf-prof-guest-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--sf-text-1);
  letter-spacing: -.01em;
}
.sf-prof-guest-sub {
  margin: 0;
  font-size: 13px;
  color: var(--sf-text-2);
  line-height: 1.5;
  max-width: 38ch;
}
.sf-prof-guest-card .sf-prof-btn--primary {
  margin-top: 8px;
  align-self: center;
  padding: 13px 26px;
}
.sf-prof-guest-perks {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  color: var(--sf-text-3);
  font-weight: 600;
}
.sf-prof-guest-perks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sf-prof-guest-perks i {
  color: var(--sf-brand);
  font-size: 11px;
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 27. Desktop tier — wide layout                               │
 * ╰──────────────────────────────────────────────────────────────╯
 *
 * The storefront is mobile-first and every wrapper was capped at
 * --sf-content-w (780px), which on a desktop monitor rendered the whole
 * site as a narrow strip with the header/sub-nav floating as short white
 * bars in the middle of a grey page. Here we:
 *
 *   1. Scale the content width up with the viewport.
 *   2. Make the header + desktop sub-nav full-bleed while keeping their
 *      inner content aligned to the same centred column (done with
 *      padding rather than 100vw so the scrollbar can't cause overflow).
 *   3. Publish --sf-subnav-h so sticky page toolbars park below the
 *      sub-nav instead of underneath it.
 *
 * Everything here is additive and desktop-only; phones/tablets keep the
 * layout that already works well.
 */

@media (min-width: 1024px) {
  :root {
    --sf-header-h:  72px;   /* matches the .sf-hdr desktop height */
    --sf-subnav-h:  48px;   /* sticky sub-nav strip height */
    /* FLUID, never wider than the viewport. A fixed px width here (e.g.
       1060px) overflows a 1024px window and produces a horizontal
       scrollbar + clipped bars, so the ideal width is always clamped
       against the available space. */
    --sf-content-w: min(1180px, calc(100% - 64px));
  }

  /* The content column already carries its own gutters via
     --sf-content-w, so drop .sf-main's padding and let the rails sit
     flush with it instead of bleeding into the margin. */
  .sf-main {
    max-width: var(--sf-content-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 56px;
  }
  .sf-rail { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

  /* Full-bleed bars with a centred inner column. `100%` is the element's
     own width (viewport minus scrollbar), so unlike 100vw this can never
     cause horizontal overflow. */
  .sf-hdr,
  .sf-bnav {
    max-width: none;
    width: 100%;
    padding-left: max(24px, calc((100% - var(--sf-content-w)) / 2));
    padding-right: max(24px, calc((100% - var(--sf-content-w)) / 2));
  }

  /* ── Home hero on desktop ──────────────────────────────────────────
     On phones the hero is a tall brand-coloured block that merges with
     the header. On a wide screen that became a large empty orange slab
     with a stretched search bar. Desktop instead gets a compact info
     card: status + ETA on the left, a sensibly-sized search on the
     right, sitting under the full-bleed brand header. */
  body[data-active-nav="home"] .sf-home-hero {
    margin: 18px 0 0;
    padding: 16px 22px;
    background: var(--sf-card);
    color: var(--sf-text);
    border: 1px solid var(--sf-line);
    border-radius: 18px;
    box-shadow: var(--sf-shadow-sm);
  }
  body[data-active-nav="home"] .sf-home-hero-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: none;
  }
  body[data-active-nav="home"] .sf-hero-delivery-row { margin-bottom: 0; flex: 0 0 auto; }
  /* The scooter animation is drawn in white for the brand-coloured
     mobile hero — recolour it so it's visible on the white card. */
  body[data-active-nav="home"] .sf-hero-road { background: var(--sf-line-2); }
  body[data-active-nav="home"] .sf-hero-road::before { background: var(--sf-brand); }
  body[data-active-nav="home"] .sf-hero-eta-pill { color: var(--sf-text-2); opacity: 1; }
  body[data-active-nav="home"] .sf-home-hero-status.is-open { color: #16a34a; }
  body[data-active-nav="home"] .sf-home-hero-status.is-closed { color: #dc2626; }
  body[data-active-nav="home"] .sf-home-hero-search {
    flex: 0 1 440px;
    margin-left: auto;
    background: var(--sf-bg);
    border-color: var(--sf-line);
    color: var(--sf-text-3);
  }
  body[data-active-nav="home"] .sf-home-hero-search:hover {
    background: #fff;
    border-color: var(--sf-brand);
    color: var(--sf-text);
  }

  /* Roomier rails now that there's width to fill. */
  .sf-best-rail   { grid-auto-columns: 232px; }
  .sf-promo-rail  { grid-auto-columns: 252px; }
}

@media (min-width: 1600px) {
  :root { --sf-content-w: min(1320px, calc(100% - 96px)); }
}


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 28. Banner rail (responsive slides-per-view)                 │
 * ╰──────────────────────────────────────────────────────────────╯
 *
 * The banner used to be a single full-width slide at every breakpoint,
 * driven by a transform slider. On desktop one lone stretched banner
 * looked poor, so this turns it into a snap-scroll rail:
 *
 *     phones  -> 1 banner per view
 *     tablets -> 2 per view
 *     desktop -> 3 side by side
 *
 * Each SLIDE (not the container) owns the aspect ratio, so banners keep
 * their proportions and fit properly at any slides-per-view instead of
 * being letterboxed by a fixed container height.
 *
 * Scrolling is native (scroll-snap), which gives correct touch physics
 * on mobile for free; the arrows/dots/auto-advance drive `scrollLeft`
 * and the active index is derived FROM the scroll position, so the dots
 * can never desync from what's on screen.
 *
 * This section is intentionally last in the file: it supersedes the
 * older fixed `aspect-ratio` / `max-height` rules for .sf-hero that are
 * declared in the earlier breakpoint blocks.
 */

.sf-hero {
  --sf-hero-gap: 12px;
  position: relative;
  margin: 14px 0 6px;
  /* The card look now lives on each slide. */
  aspect-ratio: auto;
  max-height: none;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.sf-hero-track {
  display: flex;
  gap: var(--sf-hero-gap);
  width: 100%;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: none;          /* no longer transform-driven */
  will-change: scroll-position;
  touch-action: pan-x pan-y; /* horizontal swipe + vertical page scroll */
}
.sf-hero-track::-webkit-scrollbar { display: none; }

.sf-hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 5 / 2;
  border-radius: var(--sf-radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--sf-brand-soft), var(--sf-bg));
  box-shadow: var(--sf-shadow-sm);
  user-select: none;
  -webkit-user-select: none;
}
.sf-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* 2 per view on tablets, 3 on desktop. */
@media (min-width: 640px) {
  .sf-hero-slide { flex-basis: calc((100% - var(--sf-hero-gap)) / 2); }
  /* With several banners visible at once a "1 / N" chip is ambiguous. */
  .sf-hero-counter { display: none; }
}
@media (min-width: 1024px) {
  .sf-hero { --sf-hero-gap: 16px; margin: 20px 0 8px; }
  .sf-hero-slide { flex-basis: calc((100% - 2 * var(--sf-hero-gap)) / 3); }
  .sf-hero-arrow { width: 42px; height: 42px; font-size: 15px; }
}

/* Fewer banners than the per-view count would otherwise render tiny
   slides with dead space, so short sets stay full/half width. */
[data-sf-hero-count="1"] .sf-hero-slide { flex-basis: 100%; }
@media (min-width: 1024px) {
  [data-sf-hero-count="2"] .sf-hero-slide { flex-basis: calc((100% - var(--sf-hero-gap)) / 2); }
}

/* Arrows sit just inside the rail edge, vertically centred on the slides. */
.sf-hero-arrow--prev { left: 8px; }
.sf-hero-arrow--next { right: 8px; }
.sf-hero-arrow[hidden] { display: none !important; }
.sf-hero-dots[hidden] { display: none !important; }


/* ╭──────────────────────────────────────────────────────────────╮
 * │ 29. Happy-hour rail (full-width card, snap-scroll)           │
 * ╰──────────────────────────────────────────────────────────────╯
 *
 * Previously these were narrow 280px cards in a horizontal strip, which
 * read as a cramped afterthought on phones and left a lot of dead space
 * on desktop. Now each happy hour is ONE full-width card, and multiple
 * happy hours scroll one-at-a-time like the banner rail (native
 * scroll-snap + header arrows + dots).
 *
 * Inside the card: promo copy on the left, timing + CTA on the right at
 * >=720px; stacked on phones. Declared last in the file so it supersedes
 * the earlier .sf-hh-* sizing rules.
 */

.sf-hh-sec { margin-top: 4px; }
.sf-hh-rail-wrap { position: relative; }

.sf-hh-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 14px;
  padding: 0 14px 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.sf-hh-cards::-webkit-scrollbar { display: none; }

/* One card per view: flex-basis resolves against the track's CONTENT
   box, so the rail's own side padding becomes the card's gutter. */
.sf-hh-card {
  flex: 0 0 100%;
  width: auto;
  min-width: 0;
  max-width: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
}
.sf-hh-card:hover { transform: none; }   /* no lift on a full-width card */

.sf-hh-card-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sf-hh-card-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.sf-hh-card-headline { font-size: 26px; }
.sf-hh-card-timing { margin-top: 0; }
.sf-hh-card-cta { width: 100%; margin-top: 0; }

/* Two-column card from tablet up. */
@media (min-width: 720px) {
  .sf-hh-card {
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 24px 26px;
  }
  .sf-hh-card-main { flex: 1 1 auto; }
  .sf-hh-card-side {
    flex: 0 0 auto;
    align-items: flex-end;
    padding-left: 26px;
    border-left: 1px solid var(--sf-line);
  }
  .sf-hh-card-headline { font-size: 32px; }
  .sf-hh-card-days { justify-content: flex-end; }
  .sf-hh-card-cta { width: auto; padding: 12px 24px; }
}

@media (min-width: 1024px) {
  /* .sf-main already supplies the page gutter at this tier. */
  .sf-hh-cards { padding: 0 0 4px; scroll-padding-inline: 0; gap: 16px; }
  .sf-hh-card { padding: 26px 30px; border-radius: 22px; }
  .sf-hh-card-headline { font-size: 34px; }
}

/* Header arrows — kept out of the card so they never cover its copy. */
.sf-hh-nav { display: inline-flex; align-items: center; gap: 6px; }
.sf-hh-nav-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sf-line);
  border-radius: 50%;
  background: var(--sf-card);
  color: var(--sf-text-2);
  font-size: 11px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sf-hh-nav-btn:hover { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.sf-hh-nav-btn:active { transform: scale(.94); }
.sf-hh-nav-btn[disabled] { opacity: .4; cursor: default; }

.sf-hh-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.sf-hh-dot {
  width: 6px; height: 6px;
  padding: 0; border: 0;
  border-radius: 50%;
  background: var(--sf-line-2);
  cursor: pointer;
  transition: width .25s ease, background .15s ease;
}
.sf-hh-dot.is-active { background: #f59e0b; width: 22px; border-radius: var(--sf-radius-pill); }

@media (max-width: 360px) {
  .sf-hh-card { padding: 16px; }
  .sf-hh-card-headline { font-size: 23px; }
}