/* ============================================================================
   ODG · theme.css - Shopy theme layer
   Strict brand palette: red #ED1C24 / black #000 / white #fff / neutral
   black↔white mixes only. Poppins (display) + Roboto (body/UI).

   This sheet is loaded LAST and ONLY on non-landing routes (see routeCss.js):
   auth (/login, /join, forgot/reset, vendor apply), the customer / vendor /
   rider / admin apps, docs and error states. The marketing landing page never
   loads it, so its editorial look is untouched.

   Sections
     1. Token remap (scoped to themed body classes)
     2. Base typography, selection, focus
     3. Buttons
     4. Form controls
     5. App chrome (top bar, tab bar)
     6. Home shell + side rail
     7. User pill, avatar, popover
     8. Cards / rows / tiles / stats
     9. Chips, pills, badges
    10. Menus, tickets, alerts, settings, states
    11. Operational bits (hours, tracking, qty, wallet, switches)
    12. Customer feed (search, carousels, cravings, doodles)
    13. Skeletons / empty / banners
    14. Overlays, command bar, toasts
    15. Customer flow pages + sticky CTAs
    16. Admin
    17. Auth screens (Shopy segmented card)
    18. Docs / legal / support
    19. Boot / route loaders (unscoped - this file never loads on landing)
    20. Scrollbars
   ============================================================================ */

/* 1. Token remap ----------------------------------------------------------- */
body.home-body,
body.app-body,
body.auth-page,
body.docs-page,
body.err-page {
  /* Shopy palette */
  --shopy-red:  #ED1C24;
  --shopy-ink:  #000000;
  --shopy-text: #2b2b2b;
  --shopy-muted:#636363;
  --shopy-line: #e9e9e9;
  --shopy-soft: #f0f0f0;
  --shopy-white:#ffffff;

  /* Remap the legacy ODG tokens every existing component already consumes */
  --color-bg-base:       #ffffff;
  --color-bg-mid:        #f7f7f7;
  --color-bg-dark:       #ffffff;
  --color-bg-black:      #ffffff;
  --color-bg-elevated:   #ffffff;
  --color-bg-elevated-2: #f5f5f5;
  --color-bg-elevated-3: #f0f0f0;
  --color-bg-footer:     #000000;

  --color-text-primary:  #000000;
  --color-text-muted:    #636363;
  --color-text-dim:      #9a9a9a;
  --color-text-cream:    #000000;
  --color-accent-cream:  #ffffff;
  --color-accent-cream-dim: #b9b9b9;

  --color-brand-red:        #ED1C24;
  --color-brand-red-hover:  #000000;
  --color-brand-yellow:     #ED1C24;  /* no amber in the Shopy palette */
  --color-brand-red-ink:    #ffffff;

  --color-success:       #000000;  /* done/positive = ink, per Shopy */
  --color-danger:        #ED1C24;
  --color-danger-strong: #c2161c;

  --color-border:        #e9e9e9;
  --color-border-strong: #d4d4d4;
  --color-border-soft:   #f0f0f0;

  --color-brand:   #ED1C24;
  --color-accent:  #ED1C24;
  --color-black:   #000000;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f6f6;
  --color-text:    #000000;

  --font-sans:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;

  --radius-sm: 0.55rem;
  --radius-md: 0.75rem;
  --radius-lg: 0.85rem;
  --radius-xl: 1.05rem;
  --radius-card:   0.85rem;
  --radius-control:0.55rem;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}

/* 2. Base typography ------------------------------------------------------- */
body.home-body,
body.app-body,
body.auth-page,
body.docs-page,
body.err-page {
  background:#ffffff;
  color:var(--shopy-text);
  font-family:var(--font-body);
}
body.home-body h1, body.home-body h2, body.home-body h3, body.home-body h4, body.home-body h5,
body.app-body  h1, body.app-body  h2, body.app-body  h3, body.app-body  h4, body.app-body  h5,
body.auth-page h1, body.auth-page h2, body.auth-page h3, body.auth-page h4, body.auth-page h5,
body.err-page  h1, body.err-page  h2, body.err-page  h3, body.err-page  h4, body.err-page  h5 {
  color:var(--shopy-ink);
  font-family:var(--font-display);
}
body.home-body strong, body.app-body strong,
body.auth-page strong, body.err-page strong { color:inherit; }

::selection { background:var(--shopy-red); color:#fff; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--shopy-red);
  outline-offset:2px;
}

/* 3. Buttons -------------------------------------------------------------- */
/* Shopy controls are pill-shaped; primary red goes to ink on hover. */
.button, .btn, .btn--primary {
  border-radius:999px;
  background:var(--shopy-red);
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  border:1px solid transparent;
}
.button:hover, .btn:hover,
.btn--primary:hover { background:var(--shopy-ink); color:#fff; }
.button:active, .btn:active { transform:translateY(1px); }

.button-variant-ghost, .btn--ghost {
  background:#fff;
  color:var(--shopy-ink);
  border:1px solid var(--shopy-line);
}
.button-variant-ghost:hover, .btn--ghost:hover {
  background:#fff;
  border-color:var(--shopy-ink);
  color:var(--shopy-red);
}
.button-variant-dark, .btn--secondary {
  background:var(--shopy-ink);
  color:#fff;
  border-color:var(--shopy-ink);
}
.button-variant-dark:hover, .btn--secondary:hover {
  background:var(--shopy-red);
  border-color:var(--shopy-red);
  color:#fff;
}
.btn--danger { background:var(--shopy-red); color:#fff; border-color:transparent; }

/* 4. Form controls -------------------------------------------------------- */
input, select, textarea {
  background:#fff;
  border:1px solid var(--shopy-line);
  border-radius:0.55rem;
  color:var(--shopy-ink);
  font-family:var(--font-body);
  font-weight:500;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--shopy-red) !important;
  box-shadow:none;
}
input::placeholder, textarea::placeholder { color:#9a9a9a; }
input[type="checkbox"], input[type="radio"] { accent-color:var(--shopy-red); }
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23636363' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.field-stack input, .field-stack select, .field-stack textarea,
.settings-field__input {
  background:#fff;
  border:1px solid var(--shopy-line);
  color:var(--shopy-ink);
}

/* Password strength - strict palette (ink / red only, no green/amber) */
.pw-bar { background:rgba(0,0,0,.08); }
.pw-rules li.ok { color:var(--shopy-ink); }
.pw-rules li.missing { color:#9a9a9a; }

/* 5. App chrome ----------------------------------------------------------- */
.app-top {
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--shopy-line);
}
.app-top h1 { color:var(--shopy-ink); font-family:var(--font-display); font-weight:600; }
.app-icon-btn { color:var(--shopy-ink); border-radius:50%; }
.app-icon-btn:hover { background:var(--shopy-soft); }
.app-icon-btn__badge { background:var(--shopy-red); color:#fff; }

.app-tabbar {
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--shopy-line);
}
.app-tabbar a {
  color:var(--shopy-muted);
  font-family:var(--font-body);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.04em;
}
.app-tabbar a.is-active { color:var(--shopy-red); }

/* 6. Home shell + side rail ----------------------------------------------- */
.home-body, .app-body { background:#ffffff; color:var(--shopy-text); }
.home-shell { background:#ffffff; }
.home-side {
  background:#ffffff;
  color:var(--shopy-ink);
  border-right:1px solid var(--shopy-line);
}
@media (max-width:800px) {
  .home-side { border-bottom:1px solid var(--shopy-line); border-right:0; }
}
/* Desktop rail: brand on its own row, account tools beneath (vendor/admin
   shells have no separate top bar). Customer shell already hides these. */
@media (min-width:801px) {
  .home-side .mobile-nav-top { flex-wrap:wrap; row-gap:.6rem; }
  .home-side .brand-mark { flex:1 1 100%; }
  .home-side .rail-account-tools { margin-left:auto; }
  .customer-shell .rail-account-tools { display:none !important; }
}
.home-side .brand-mark-word {
  background-image:url('../images/odg-logo-primary.png');
}
.nav-toggle-btn { color:var(--shopy-ink); }
.nav-toggle-btn:hover { background:var(--shopy-soft); }

.home-nav a, .app-nav-item {
  color:var(--shopy-muted);
  border:1px solid transparent;
  border-radius:0.8rem;
  padding:0.5rem 0.75rem;
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:600;
}
.home-nav a .lucide, .app-nav-item .lucide { color:inherit; }
.home-nav a:hover, .app-nav-item:hover {
  background:var(--shopy-soft);
  color:var(--shopy-ink);
}
.home-nav a.is-on, .app-nav-item.is-active {
  background:var(--shopy-red);
  border-color:var(--shopy-red);
  color:#fff;
}
.home-nav a.is-on .lucide, .app-nav-item.is-active .lucide { color:#fff; }
.home-logout {
  background:var(--shopy-ink);
  color:#fff;
  border-radius:0.8rem;
  padding:0.5rem 0.9rem;
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:700;
}
.home-logout:hover { background:var(--shopy-red); color:#fff; }
.home-logout svg { color:inherit; }

.home-main { background:#ffffff; color:var(--shopy-text); }
.home-kicker { color:var(--shopy-muted); }
.home-section-head h3 { color:var(--shopy-ink); }
.home-section-head a { color:var(--shopy-muted); }
.home-section-head a:hover { color:var(--shopy-red); }

.set-name { color:var(--shopy-ink); }
.set-email, .set-meta { color:var(--shopy-muted); }
.set-label { color:var(--shopy-muted); }
.set-group { border-top:1px solid var(--shopy-line); }
.set-row { border-bottom:1px solid var(--shopy-line); }
.set-row span { color:var(--shopy-ink); }
.set-row em { color:var(--shopy-muted); }
.set-row.is-danger span { color:var(--shopy-red); }
a.set-row:hover { background:var(--shopy-soft); }

/* Identity avatar - flat Shopy red, no engraved gradients */
.set-avatar {
  background:var(--shopy-red) !important;
  color:#fff !important;
  text-shadow:none !important;
  box-shadow:none !important;
  animation:none !important;
}
.set-avatar::after { display:none !important; }

/* 7. User pill, account popover ------------------------------------------- */
.user-pill {
  background:#fff;
  border:1px solid var(--shopy-line);
  color:var(--shopy-ink);
}
.user-pill .avatar { background:var(--shopy-red); color:#fff; }
.user-pill[role="button"]:focus-visible { outline:2px solid var(--shopy-ink); }
.account-popover {
  background:#fff;
  border:1px solid var(--shopy-line);
  box-shadow:0 18px 42px rgba(0,0,0,.12);
}
.account-popover-list a { color:var(--shopy-ink); }
.account-popover-list a:hover, .account-popover-list a:focus-visible {
  background:var(--shopy-soft);
  color:var(--shopy-ink);
}
.account-popover-list .lucide { color:var(--shopy-red); }

/* 8. Cards / rows / tiles / stats ----------------------------------------- */
.card, .food-card, .vendor-card, .order-card, .address-card,
.card-row-minimal, .card-tile-minimal, .card-status-minimal,
.card-metric-minimal, .stat-pill, .menu-item,
.vendor-row, .order-row, .job-card,
.card-vendor-minimal, .stat-card, .dish-row, .analytics-cta,
.rider-presence-card, .checkout-lines-card, .track-card {
  background:#ffffff;
  border:1px solid var(--shopy-line);
  border-radius:0.85rem;
}
.card-tile-minimal:hover, .tile:hover,
.card-status-minimal:hover, .job-card:hover,
.vendor-row:hover, .order-row:hover {
  background:#fafafa;
  border-color:var(--shopy-ink);
}
.menu-item h3, .vendor-row h3, .order-row h3, .job-card h3,
.status-title, .vendor-name { color:var(--shopy-ink); }
.meta, .hero-card-meta { color:var(--shopy-muted); }
.price, .dish-card__price-current { color:var(--shopy-red); }

.menu-thumb, .vendor-row img, .hero-tile img,
.home-list-row img, .dish-card__thumb { background:var(--shopy-soft); }

/* Tiles (choose-role grid / generic) */
.tile {
  background:#fff;
  border:1px solid var(--shopy-line);
  border-radius:0.85rem;
}
.tile .tile-t strong { color:var(--shopy-ink); }
.tile .tile-t em { color:var(--shopy-muted); }
.tile .tile-ic .lucide, .tile-ic i, .tile-ic svg { color:var(--shopy-red); }

/* Stat tiles - Poppins numerals, muted uppercase labels */
.stat-pill b, .a-metric .v, .stat-card__value,
.wallet-card-compact .metric-value {
  color:var(--shopy-ink);
  font-family:var(--font-display);
}
.stat-pill span, .a-metric .l, .stat-card__label,
.wallet-card-compact .metric-head { color:var(--shopy-muted); }
.a-metric {
  background:#fff;
  border:1px solid var(--shopy-line);
  border-radius:0.85rem;
}
.a-metric:hover { border-color:var(--shopy-ink); }
.a-metric .h { color:var(--shopy-muted); }
.stat-card__value--warn { color:var(--shopy-red); }
.stat-dot--warn { background:var(--shopy-red); }

/* Hero / location cards */
.hero-action-card, .location-header-bar {
  background:#fff;
  border:1px solid var(--shopy-line);
  border-radius:0.85rem;
}
.hero-action-card:hover { background:#fafafa; border-color:var(--shopy-line); }
.hero-card-title { color:var(--shopy-ink); }
.hero-card-kicker, .hero-card-cta,
.loc-pill i, .loc-change-link:hover { color:var(--shopy-red); }
.loc-pill { color:var(--shopy-ink); }
.loc-change-link { color:var(--shopy-muted); }

/* 9. Chips, pills, badges -------------------------------------------------- */
.chip {
  background:#fff;
  border:1px solid var(--shopy-line);
  color:var(--shopy-muted);
  border-radius:999px;
}
.chip:hover { border-color:var(--shopy-ink); color:var(--shopy-ink); background:#fff; }
.chip.is-on { background:var(--shopy-ink); border-color:var(--shopy-ink); color:#fff; }

.pill {
  background:#fff;
  border:1px solid var(--shopy-line);
  color:var(--shopy-ink);
  font-family:var(--font-body);
  font-weight:700;
  border-radius:999px;
}
.pill::before { background:currentColor; }
.pill-ready { background:var(--shopy-red); border-color:var(--shopy-red); color:#fff; }
.pill-done  { background:var(--shopy-ink); border-color:var(--shopy-ink); color:#fff; }

.status-chip, .a-status {
  background:var(--shopy-red);
  color:#fff;
  border-radius:999px;
  font-family:var(--font-body);
}
.status-badge, .status-action { color:var(--shopy-red); }
.status-id { color:var(--shopy-ink); }
.a-online { color:var(--shopy-ink); }
.a-online::before { background:var(--shopy-ink); }

/* 10. Menus, tickets, alerts, settings, states ---------------------------- */
.dish-card { background:#fff; border-color:var(--shopy-line); }
.dish-card__name { color:var(--shopy-ink); }
.dish-card__tag, .dish-card__desc { color:var(--shopy-muted); }
.dish-card__category { color:var(--shopy-red); }
.dish-card__price-original { color:#9a9a9a; }
.dish-card__menu { background:#fff; border-color:var(--shopy-line); color:var(--shopy-muted); }
.dish-card__menu:hover { background:var(--shopy-soft); color:var(--shopy-ink); }
.dish-card__status.is-on {
  color:var(--shopy-red);
  background:rgba(237,28,36,.1);
  border-color:rgba(237,28,36,.35);
}
.dish-card__status.is-off {
  color:var(--shopy-muted);
  background:var(--shopy-soft);
  border-color:var(--shopy-line);
}
.dish-card.is-sold .dish-card__name,
.dish-card.is-sold .dish-card__desc { color:#9a9a9a; }

.dish-editor { background:#fff; border-color:var(--shopy-line); }
.dish-editor__title { color:var(--shopy-ink); }
.dish-editor__eyebrow, .dish-editor__label,
.dish-editor__hint, .dish-editor__photo-hint { color:var(--shopy-muted); }
.dish-editor__input, .dish-editor__select, .dish-editor__textarea {
  background:#fff; border-color:var(--shopy-line); color:var(--shopy-ink);
}
.dish-editor__input:focus, .dish-editor__select:focus, .dish-editor__textarea:focus {
  border-color:var(--shopy-red);
}
.dish-editor__photo { background:var(--shopy-soft); border-color:var(--shopy-line); }
.dish-editor__photo-icon { background:#fff; color:var(--shopy-red); }
.dish-editor__cancel {
  background:#fff; border:1px solid var(--shopy-line); color:var(--shopy-muted);
}
.dish-editor__save { background:var(--shopy-red); border-radius:0.55rem; }
.dish-editor__save:hover:not(:disabled) { background:var(--shopy-ink); }

.ticket-card { background:#fff; border-color:var(--shopy-line); }
.ticket-card::before { background:var(--shopy-line); }
.ticket-card--pending::before { background:var(--shopy-ink); }
.ticket-card--active::before  { background:var(--shopy-red); }
.ticket-card--delivered::before { background:#c4c4c4; }
.ticket-card--cancelled::before { background:var(--shopy-red); }
.ticket-card__id, .ticket-card__item { color:var(--shopy-ink); }
.ticket-card__meta, .ticket-card__time { color:var(--shopy-muted); }
.ticket-card__price { color:var(--shopy-ink); }

.alert-card { background:#fff; border-color:var(--shopy-line); }
.alert-card:hover { border-color:var(--shopy-line); }
.alert-card--unread { background:#fafafa; border-color:var(--shopy-line); }
.alert-card__icon { background:var(--shopy-soft); color:var(--shopy-muted); }
.alert-card--unread .alert-card__icon {
  background:rgba(237,28,36,.1);
  color:var(--shopy-red);
}
.alert-card__title { color:var(--shopy-ink); }
.alert-card__msg { color:var(--shopy-muted); }
.alert-card__time { color:#9a9a9a; }
.unread-dot { background:var(--shopy-red); }

.settings-card, .profile-card { background:#fff; border-color:var(--shopy-line); }
.settings-label, .settings-field__label, .settings-field__hint,
.profile-email { color:var(--shopy-muted); }
.settings-field__input { background:#fff; border-color:var(--shopy-line); color:var(--shopy-ink); }
.settings-field__input:focus { border-color:var(--shopy-red); }
.profile-name, .link-row__title { color:var(--shopy-ink); }
.profile-avatar { background:var(--shopy-red); color:#fff; }
.profile-meta {
  color:var(--shopy-ink);
  background:var(--shopy-soft);
  border:1px solid var(--shopy-line);
}
.link-row { border-bottom:1px solid var(--shopy-line); }
.link-row__sub, .link-row .lucide { color:var(--shopy-muted); }
.link-row__title--danger { color:var(--shopy-red); }
.danger-zone { border:1px solid rgba(237,28,36,.3); }
.danger-zone .link-row { border-bottom:1px solid rgba(237,28,36,.15); }

.state-panel {
  background:#fafafa;
  border:1px dashed var(--shopy-line);
  border-radius:0.85rem;
}
.state-panel__title { color:var(--shopy-ink); }
.state-panel__copy { color:var(--shopy-muted); }
.state-panel__icon {
  background:var(--shopy-soft);
  color:var(--shopy-ink);
  border-radius:0.7rem;
}

.auth-status { color:var(--shopy-ink); }
.auth-status.is-error { color:var(--shopy-red); }

/* 11. Operational bits ----------------------------------------------------- */
.hours-row { background:#fff; border:1px solid var(--shopy-line); border-radius:0.85rem; }
.hours-times i { color:var(--shopy-muted); }
.hours-row b { color:var(--shopy-ink); }
.hours-row input[type="time"] {
  background:#fff;
  color:var(--shopy-ink);
  border:1px solid var(--shopy-line);
  color-scheme:light;
}
.hours-row input[type="time"]:focus { border-color:var(--shopy-red); }

.track-step i { background:var(--shopy-line); }
.track-step i::after { background:var(--shopy-line); }
.track-step.is-done i, .track-step.is-now i { background:var(--shopy-red); }
.track-step p { color:var(--shopy-ink); }
.track-step small { color:var(--shopy-muted); }

.qty { background:#fff; border:1px solid var(--shopy-line); }
.qty button:hover { background:var(--shopy-soft); }
.qty em { color:var(--shopy-ink); }

.banner {
  background:var(--shopy-soft);
  border:1px solid var(--shopy-line);
  color:var(--shopy-text);
  border-radius:0.75rem;
}

.wallet-card {
  background:#fff;
  background-image:none;
  border:1px solid var(--shopy-line);
  border-radius:1.05rem;
}
.wallet-card .set-name { color:var(--shopy-ink); }
.wallet-card-compact { background:#fff; border-color:var(--shopy-line); }
.wallet-card-compact .metric-sub { color:var(--shopy-muted); }
.bill-row { border-bottom:1px solid var(--shopy-line); }
.bill-row.is-total { color:var(--shopy-ink); }
.set-row em.credit { color:var(--shopy-ink); }
.set-row em.debit  { color:var(--shopy-red); }

.switch i { background:var(--shopy-soft); border:1px solid var(--shopy-line); }
.switch i::after { background:#fff; border:1px solid var(--shopy-line); }
.switch input:checked + i { background:var(--shopy-red); border-color:var(--shopy-red); }
.switch input:focus-visible + i { outline:2px solid var(--shopy-red); outline-offset:2px; }

/* 12. Customer feed -------------------------------------------------------- */
.customer-discovery-title { color:var(--shopy-ink); }
.customer-location-link { color:var(--shopy-muted); }
.customer-location-link:hover { color:var(--shopy-ink); }

.customer-search, .customer-search-launcher, .vendor-search, .a-search {
  background:#fff;
  border:1px solid var(--shopy-line);
}
.customer-search, .customer-search-launcher { border-radius:999px; }
.vendor-search, .a-search { border-radius:99px; }
.customer-search-launcher:hover { border-color:var(--shopy-ink); background:#fff; color:var(--shopy-muted); }
.customer-search:focus-within { border-color:var(--shopy-red); background:#fff; }
.customer-search__input { color:var(--shopy-ink); }
.customer-search__clear { background:var(--shopy-soft); color:var(--shopy-muted); }
.customer-search__clear:hover { background:var(--shopy-line); color:var(--shopy-ink); }
.vendor-search__clear:hover { background:var(--shopy-soft); color:var(--shopy-ink); }
.a-search { color:var(--shopy-ink); padding:0.85rem 1.15rem; }
.a-search::placeholder { color:#9a9a9a; }
.a-search:focus { border-color:var(--shopy-red); }

.ai-box {
  background:#fff;
  border:1px solid var(--shopy-line);
  border-radius:1rem;
}

.card-vendor-minimal { background:#fff; border-color:var(--shopy-line); }
#near-you .card-vendor-minimal { background:#fff; }
#near-you .card-vendor-minimal:hover {
  border-color:var(--shopy-ink);
  background:#fff;
  transform:translateY(-1px);
}
#near-you .vendor-name { color:var(--shopy-ink); }
#near-you .vendor-area { color:var(--shopy-red); }
#near-you .vendor-cuisines { color:var(--shopy-muted); }
#near-you .sk-row { background:#fff; border-color:var(--shopy-line); }

.home-list-row strong { color:var(--shopy-ink); }
.home-list-row span { color:var(--shopy-muted); }
.home-list-row b, .style-02-kicker { color:var(--shopy-red); }
.home-list-row b { color:var(--shopy-red); }

.carousel-card { background:#fff; border-color:var(--shopy-line); }
.style-03-info-half { background:#fff; }

/* Photo-less craving cards: calm white/soft panel with a faint red mark */
.craving-panel {
  background:
    radial-gradient(130% 130% at 82% 8%, rgba(237,28,36,.10) 0%, rgba(237,28,36,0) 55%),
    var(--shopy-soft) !important;
}
.card-style-02 > .craving-panel .lucide { color:rgba(237,28,36,.20) !important; }
.card-style-03 .style-03-img-half .craving-panel .lucide { color:rgba(237,28,36,.24) !important; }

/* Empty-orders food doodles: neutral black silhouettes on white */
.orders-doodle {
  filter:grayscale(1) brightness(0) !important;
  opacity:.07 !important;
}

/* 13. Skeletons / empty / banners ----------------------------------------- */
.skeleton, .sk-view-wrap .skeleton, .sk-52 {
  background:#e3e3e3 !important;
}
.skeleton::after, .sk-view-wrap .skeleton::after {
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%) !important;
}
.empty {
  border:1px dashed var(--shopy-line);
  border-radius:0.85rem;
  color:var(--shopy-muted);
}
.empty b { color:var(--shopy-ink); }

/* 14. Overlays, command bar, toasts ---------------------------------------- */
.odg-pop-scrim { background:rgba(0,0,0,.45); }
.odg-pop-card {
  background:var(--shopy-ink);
  color:#fff;
  border-radius:0.9rem;
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}
.odg-pop-line { color:#fff; }

.odg-cmdbar__scrim { background:rgba(0,0,0,.45); }
.odg-cmdbar__bar { background:#fff; border-top:1px solid var(--shopy-line); }
.odg-cmdbar__name { color:var(--shopy-ink); }
.odg-cmdbar__price { color:var(--shopy-red); }
.odg-cmdbar__close { color:var(--shopy-muted); }
.odg-cmdbar__close:hover { background:var(--shopy-soft); color:var(--shopy-ink); }
.odg-cmdbar__list .cmd { color:var(--shopy-ink); }
.odg-cmdbar__list .cmd:hover { background:var(--shopy-soft); }
.odg-cmdbar__list .cmd .lucide { color:var(--shopy-red); }

/* 15. Customer flow + sticky CTAs ----------------------------------------- */
.checkout-page-header .set-name,
.kitchen-page-header .set-name { color:var(--shopy-ink); }
.checkout-page-header #co-drop, .kitchen-page-note { color:var(--shopy-muted); }
#v-menu .menu-item { background:#fff; }
/* Photo-less menu rows: soft hairline tile holding the food doodle */
.menu-item__art {
  display:grid;
  place-items:center;
  background:var(--shopy-soft);
  border:1px solid var(--shopy-line);
  overflow:hidden;
}
.menu-item__art img { filter:grayscale(1) brightness(.28); opacity:.85; }
.pay-bar .button,
.hours-save-bar .button,
.rider-active-main .action-bar .button {
  box-shadow:0 10px 28px rgba(237,28,36,.28);
}

/* Analytics */
.dish-row__rank { background:var(--shopy-red); color:#fff; }
.dish-row__name { color:var(--shopy-ink); }
.analytics-cta { background:transparent; }
.analytics-cta:hover { border-color:var(--shopy-ink); background:#fafafa; }
.section-label { color:var(--shopy-muted); }

/* 16. Admin ---------------------------------------------------------------- */
.a-card-top h3 { color:var(--shopy-ink); }
.a-when { color:var(--shopy-muted); }
#v-list .settings-card, #r-list .settings-card,
#list .settings-card { background:#fff; border-color:var(--shopy-line); }

/* 17. Auth screens - Shopy segmented card --------------------------------- */
body.auth-page {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.2rem 1rem 2rem;
  background:#ffffff;
}
body.auth-page #root {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.auth-page .auth-split {
  width:min(30rem,100%);
  min-height:0;
  margin:auto 0;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--shopy-line);
  border-radius:1.75rem;
  padding:clamp(1.4rem,4vw,2.2rem);
  gap:1.1rem;
}
/* Mobile and tablet: the card stands alone. From 1000px the brand half
   returns (see the login-page block at the end of this sheet), which is what
   the login and join pages were designed around. */
.auth-page .auth-promo { display:none; }
.auth-page .auth-panel {
  order:0;
  width:100%;
  min-height:0;
  padding:0;
  background:transparent;
  display:block;
}
.auth-page .auth-panel-inner {
  max-width:none;
  margin:0;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}

/* Brand sits centered at the top of the card */
.auth-page .auth-mobile-brand {
  display:flex;
  justify-content:center;
  margin:0 0 .1rem;
}
.auth-page .auth-mobile-brand .brand-mark-word {
  width:118px;
  height:34px;
  flex-basis:118px;
  background-image:url('../images/odg-logo-primary.png') !important;
  background-size:contain;
}

/* Segmented Sign in / Create account switch */
.auth-switch {
  display:flex;
  gap:.25rem;
  padding:.25rem;
  border:1px solid var(--shopy-line);
  border-radius:99px;
  background:#fff;
}
.auth-switch button {
  flex:1;
  padding:.6rem .5rem;
  border:0;
  border-radius:99px;
  background:transparent;
  color:var(--shopy-muted);
  font-family:var(--font-display);
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.auth-switch button:hover { color:var(--shopy-ink); }
.auth-switch button.active { background:var(--shopy-ink); color:#fff; }

.auth-page .auth-title {
  justify-content:center;
  text-align:center;
  color:var(--shopy-ink);
  font-size:clamp(1.55rem,5vw,1.95rem);
  margin:0;
}
.auth-page .auth-lede {
  justify-content:center;
  text-align:center;
  color:var(--shopy-muted);
  font-family:var(--font-body);
  font-weight:400;
  font-size:.92rem;
  margin:-.45rem 0 0;
}

.auth-page .auth-google {
  width:100%;
  min-height:3.1rem;
  background:#fff;
  color:var(--shopy-ink);
  border:1px solid var(--shopy-line);
  border-radius:99px;
  font-family:var(--font-display);
  font-weight:700;
  transition:border-color .2s ease;
}
.auth-page .auth-google:hover { border-color:var(--shopy-ink); opacity:1; }

.auth-page .auth-divider {
  color:var(--shopy-muted);
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}
.auth-page .auth-divider::before,
.auth-page .auth-divider::after { background:var(--shopy-line); }

.auth-page .auth-form { gap:.85rem; }
.auth-page .auth-form label:not(.round-check) { gap:.35rem; }
.auth-page .field-label {
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--shopy-ink);
}
.auth-page .auth-form input,
.auth-page .vendor-application-form input {
  width:100%;
  min-height:3.1rem;
  padding:.35rem 1.15rem;
  background:#fff;
  color:var(--shopy-ink);
  border:1px solid var(--shopy-line);
  border-radius:99px;
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:500;
}
.auth-page .auth-form input:focus,
.auth-page .vendor-application-form input:focus { border-color:var(--shopy-red); }
.auth-page .auth-form input::placeholder { color:var(--shopy-muted); font-weight:400; }

.auth-page .auth-submit {
  width:100%;
  min-height:3.1rem;
  padding:.8rem 1rem;
  border-radius:99px;
  background:var(--shopy-red);
  border-color:transparent;
  font-family:var(--font-display);
  font-size:.95rem;
  font-weight:600;
  transition:background .2s ease;
}
.auth-page .auth-submit:hover:not(:disabled) { background:var(--shopy-ink); }

.auth-page .auth-foot,
.auth-page .auth-legal {
  text-align:center;
  color:var(--shopy-muted);
  font-family:var(--font-body);
}
.auth-page .auth-foot { margin-top:.6rem; }
.auth-page .auth-legal { margin-top:.2rem; font-size:.8rem; }
.auth-page .auth-foot a,
.auth-page .auth-legal a,
.auth-page .auth-text-btn {
  color:var(--shopy-red);
  font-weight:700;
}

/* Trust line under social auth */
.auth-trust {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.4rem 1.3rem;
  color:var(--shopy-muted);
  font-size:.78rem;
  font-weight:500;
}
.auth-trust span { display:inline-flex; align-items:center; }
.auth-trust .lucide {
  width:.95rem;
  height:.95rem;
  margin:0 .35rem 0 0;
  color:var(--shopy-red);
}

/* Join (location / waitlist / role picker) */
.auth-page .join-role {
  background:#fff;
  border:1px solid var(--shopy-line);
  border-radius:0.9rem;
  transition:border-color .15s ease, transform .1s ease;
}
.auth-page .join-role:hover { border-color:var(--shopy-red); transform:translateY(-1px); }
.auth-page .join-role__ic { background:var(--shopy-soft); color:var(--shopy-red); border-radius:0.7rem; }
.auth-page .join-role__body b { color:var(--shopy-ink); font-family:var(--font-display); }
.auth-page .join-role__body em { color:var(--shopy-muted); }
.auth-page .join-role__chevron { color:var(--shopy-muted); }

/* Vendor application (uses the auth split) */
.vendor-apply-page .vendor-application-form select {
  background:#fff;
  color:var(--shopy-ink);
  border:1px solid var(--shopy-line);
  border-radius:99px;
  padding:0.85rem 2.6rem .85rem 1.15rem;
}
.vendor-apply-page .vendor-application-form select:focus { border-color:var(--shopy-red); }
.vendor-select-wrap > .lucide { color:var(--shopy-muted); }
.vendor-apply-page .vendor-location-button {
  background:#fff;
  color:var(--shopy-ink);
  border:1px solid var(--shopy-line);
  border-radius:99px;
  min-height:3.1rem;
  transition:border-color .15s ease, background .15s ease;
}
.vendor-apply-page .vendor-location-button:hover {
  border-color:var(--shopy-red);
  background:#fafafa;
}
.vendor-apply-page .vendor-field-note {
  background:var(--shopy-soft);
  color:var(--shopy-muted);
  border-radius:0.7rem;
}
.vendor-apply-page .vendor-application-form .auth-status { color:var(--shopy-muted); }
.vendor-apply-page .vendor-application-form .auth-status.is-error { color:var(--shopy-red); }

@media (max-width:900px) {
  body.auth-page { padding:.9rem .9rem 1.6rem; }
  .auth-page .auth-split { border-radius:1.4rem; }
}

/* 18. Docs / legal / support ---------------------------------------------- */
body.docs-page { background:#ffffff; color:var(--shopy-text); font-family:var(--font-body); }
.docs-header {
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--shopy-line);
}
.docs-nav a { color:var(--shopy-ink); font-family:var(--font-display); font-weight:600; }
.docs-nav a:hover { color:var(--shopy-red); border-color:var(--shopy-red); }
.docs-kicker, .docs-num { color:var(--shopy-red); }
.docs-h1 { color:var(--shopy-ink); font-family:var(--font-display); }
.docs-updated { color:var(--shopy-muted); }
.docs-section { border-top:1px solid var(--shopy-line); }
.docs-section h2 { color:var(--shopy-ink); font-family:var(--font-display); }
.docs-section p { color:#444444; }
.docs-section p a, .docs-callout a { color:var(--shopy-red); }
.docs-contact-card {
  background:#fff;
  border:1px solid var(--shopy-line);
  border-radius:0.85rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.docs-contact-card:hover {
  border-color:var(--shopy-red);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.docs-contact-card strong { color:var(--shopy-red); }
.docs-contact-card span { color:var(--shopy-ink); }
.docs-callout {
  background:var(--shopy-soft);
  border:1px solid var(--shopy-line);
  border-radius:0.85rem;
}
.docs-callout strong { color:var(--shopy-ink); }
.docs-callout p { color:#333333; }
.docs-footer { background:var(--shopy-ink); color:rgba(255,255,255,.8); }
.docs-footer-links a:hover { color:var(--shopy-red); }

/* 19. Boot / route loaders (this file never loads on the landing) --------- */
.odg-boot {
  background:#ffffff;
  background-image:none;
}
.odg-boot__mark {
  color:var(--shopy-ink);
  font-family:var(--font-display);
}
.odg-boot__mark b { color:var(--shopy-red); }
.odg-boot__bar { background:#eeeeee; }
.odg-boot__bar i { background:var(--shopy-red); }
.odg-boot__label { color:#8a8a8a; }
.odg-boot--overlay { background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.odg-routebar i { background:var(--shopy-red); }

/* 20. Scrollbars ----------------------------------------------------------- */
.home-main::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:8px; border:3px solid #fff; }
.home-main::-webkit-scrollbar-track { background:transparent; }

/* ============================================================================
   21. POLISH LAYER
   ---------------------------------------------------------------------------
   One place where the app-wide craft pass lives: surface depth, a locked
   radius scale, tinted elevation, status semantics, tabular figures, and
   hover / press / focus feedback on every interactive surface.

   It is appended last on purpose: theme.css is the final sheet on every
   themed route (see routeCss.js), so these rules win the cascade against the
   component blocks above without a specificity arms race. Nothing here
   changes markup, routes, class names, or copy.

   Rules of the layer:
     - one neutral family (warm paper), one brand accent (#ED1C24) for actions
       and prices; status colors are data colors, never decoration;
     - elevation always comes from above-left light, so every shadow falls
       down and to the right;
     - motion only on transform / opacity / box-shadow / border-color, always
       behind @media (hover:hover), and fully off under prefers-reduced-motion.
   ========================================================================== */

/* 21.1 Surfaces & Two-Tier Semantic Color System (better-colors) ----------- */
:root {
  /* Tier 1: Primitive palette */
  --gray-0:   #ffffff;
  --gray-50:  #f8f9fa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #111315;

  --red-50:   #fef2f2;
  --red-100:  #fee2e2;
  --red-500:  #ED1C24;
  --red-600:  #d61920;
  --red-700:  #b3161d;

  /* Tier 2: Semantic role tokens */
  --color-bg-primary:     var(--gray-50);
  --color-bg-elevated:    var(--gray-0);
  --color-bg-subtle:      var(--gray-100);
  --color-text-primary:   var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-text-muted:     var(--gray-600);
  --color-border-default: var(--gray-200);
  --color-border-subtle:  var(--gray-100);
  --color-accent-default: var(--red-500);
  --color-accent-hover:   var(--red-600);
  --color-accent-subtle:  rgba(237, 28, 36, 0.08);

  --color-success-fg: #15803d;
  --color-success-bg: rgba(21, 128, 61, 0.10);
  --color-warning-fg: #b45309;
  --color-warning-bg: rgba(180, 83, 9, 0.12);
  --color-danger-fg:  #b91c1c;
  --color-danger-bg:  rgba(185, 28, 28, 0.10);
  --color-info-fg:    #1d4ed8;
  --color-info-bg:    rgba(29, 78, 216, 0.10);

  /* better-ui 3-layer shadow-border & image outline */
  --shadow-border: 0 0 0 1px rgba(17, 19, 21, 0.06), 0 1px 2px -1px rgba(17, 19, 21, 0.06), 0 2px 4px 0 rgba(17, 19, 21, 0.04);
  --image-outline: rgba(17, 19, 21, 0.08);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-contrast: more) {
  :root {
    --color-border-default: var(--gray-400);
    --color-text-muted: var(--gray-800);
    --shadow-border: 0 0 0 1px rgba(17, 19, 21, 0.24);
  }
}

body.home-body,
body.app-body,
body.docs-page,
body.err-page {
  --paper:      var(--color-bg-primary);
  --paper-2:    var(--color-bg-subtle);
  --surface:    var(--color-bg-elevated);
  --surface-2:  var(--gray-50);
  --ink:        var(--color-text-primary);
  --ink-soft:   var(--color-text-secondary);
  --muted:      var(--color-text-muted);
  --faint:      var(--gray-500);
  --hair:       var(--color-border-default);
  --hair-soft:  var(--color-border-subtle);
  --red:        var(--color-accent-default);
  --red-ink:    var(--red-700);
  --red-wash:   var(--color-accent-subtle);

  /* Concentric shape lock: inner 8px, controls 10px, cards 14px, panels 20px, pills 999px */
  --r-in:   8px;
  --r-ctl:  10px;
  --r-card: 14px;
  --r-panel:20px;
  --r-pill: 999px;

  /* Elevation, one light source */
  --el-hair: var(--shadow-border);
  --el-1:    0 1px 2px rgba(17, 19, 21, .05), 0 10px 20px -14px rgba(17, 19, 21, .14);
  --el-2:    0 2px 4px rgba(17, 19, 21, .05), 0 18px 34px -20px rgba(17, 19, 21, .20);
  --el-3:    0 28px 60px -26px rgba(17, 19, 21, .28), 0 4px 10px rgba(17, 19, 21, .05);
  --el-red:  0 10px 24px -12px rgba(237, 28, 36, .42);

  /* Rhythm */
  --pad-card:  clamp(14px, 2vw, 18px);
  --gap-flow:  18px;

  background: var(--paper);
  color: var(--ink-soft);
}

body.home-body .home-shell,
body.home-body .home-main,
body.app-body .home-shell,
body.app-body .home-main,
body.app-body .app-main,
body.docs-page .app-main,
body.err-page .app-main {
  background: var(--paper);
  color: var(--ink-soft);
}

/* Rail: its own plate, so the nav reads as furniture rather than a hole. */
body.home-body .home-side,
body.app-body .home-side {
  background: var(--surface);
  border-right: 1px solid var(--hair);
}

/* The rail takes the space a 6-item list needs, not a quarter of the
   viewport; the main column gets the rest. */
@media (min-width:801px) {
  body.home-body .home-side,
  body.app-body .home-side { width: 268px; flex: 0 0 268px; padding: 22px 18px; }
  body.home-body .home-main,
  body.app-body .home-main { width: calc(100% - 268px); flex: 0 0 calc(100% - 268px); padding: 26px clamp(20px, 3vw, 40px) 64px; }
  .home-main > *,
  .home-main > .view > * { max-width: 1180px; margin-inline: auto; }
  .home-main > .customer-topbar { max-width: none; }
}
@media (min-width:1500px) {
  body.home-body .home-side,
  body.app-body .home-side { width: 292px; flex: 0 0 292px; }
  body.home-body .home-main,
  body.app-body .home-main { width: calc(100% - 292px); flex: 0 0 calc(100% - 292px); }
}

/* 21.2 Typography & numerals ---------------------------------------------- */
body.home-body,
body.app-body,
body.auth-page,
body.docs-page,
body.err-page {
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.home-body h1, body.app-body h1, body.auth-page h1, body.err-page h1, body.docs-page h1 {
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
}
body.home-body h2, body.app-body h2, body.auth-page h2, body.docs-page h2, body.err-page h2 {
  letter-spacing: -.022em;
  line-height: 1.15;
}
body.home-body h3, body.app-body h3, body.auth-page h3, body.docs-page h3 {
  letter-spacing: -.012em;
  line-height: 1.25;
}
/* Page titles inside the app shell are display type, not body size. */
.home-main > .home-kicker + .set-name,
.app-main > .set-name,
.vendor-page-header .set-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.1;
  color: var(--ink);
}
.home-main p, .app-main p { text-wrap: pretty; }

/* Money, ids, counters and times are tabular, so columns hold their edges. */
.price, .dish-card__price-current, .dish-card__price-original,
.stat-pill b, .a-metric .v, .stat-card__value, .stat-card__label + *,
.wallet-card-compact .metric-value, .bill-row, .bill-row b, .set-row em,
.status-id, .ticket-card__id, .ticket-card__price, .a-when, .a-status,
.hours-times, .hours-row b, .menu-item .price, .qty em, .feed-count,
.vendor-metric, .checkout-lines-card .bill-row, .track-card .meta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Section kickers are labels, not shouts: quieter, tighter, same register
   everywhere. Red is reserved for action, price and status. */
.home-kicker, .section-label, .home-section-head .home-kicker {
  color: var(--faint);
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.home-kicker .lucide { color: var(--muted); }
.meta, .hero-card-meta, .set-meta, .set-email { color: var(--muted); }

/* 21.3 + 21.4 Shapes, borders and elevation -------------------------------- */
body.home-body .card, body.app-body .card,
body.home-body .food-card, body.app-body .food-card,
body.home-body .vendor-card, body.app-body .vendor-card,
body.home-body .order-card, body.app-body .order-card,
body.home-body .address-card, body.app-body .address-card,
body.home-body .menu-item, body.app-body .menu-item,
body.home-body .dish-card, body.app-body .dish-card,
body.home-body .job-card, body.app-body .job-card,
body.home-body .vendor-row, body.app-body .vendor-row,
body.home-body .order-row, body.app-body .order-row,
body.home-body .a-metric, body.app-body .a-metric,
body.home-body .stat-card, body.app-body .stat-card,
body.home-body .stat-pill, body.app-body .stat-pill,
body.home-body .hours-row, body.app-body .hours-row,
body.home-body .settings-card, body.app-body .settings-card,
body.home-body .profile-card, body.app-body .profile-card,
body.home-body .hero-action-card, body.app-body .hero-action-card,
body.home-body .track-card, body.app-body .track-card,
body.home-body .checkout-lines-card, body.app-body .checkout-lines-card,
body.home-body .wallet-card, body.app-body .wallet-card,
body.home-body .ai-box, body.app-body .ai-box,
body.home-body .ticket-card, body.app-body .ticket-card,
body.home-body .alert-card, body.app-body .alert-card,
body.home-body .carousel-card, body.app-body .carousel-card,
body.home-body .state-panel, body.app-body .state-panel,
body.home-body .tile, body.app-body .tile,
body.home-body .empty, body.app-body .empty,
body.home-body .banner, body.app-body .banner,
body.home-body .card-row-minimal, body.app-body .card-row-minimal,
body.home-body .card-tile-minimal, body.app-body .card-tile-minimal,
body.home-body .card-status-minimal, body.app-body .card-status-minimal,
body.home-body .card-metric-minimal, body.app-body .card-metric-minimal,
body.home-body .card-vendor-minimal, body.app-body .card-vendor-minimal {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--el-hair);
}
body.home-body .tile, body.app-body .tile,
body.home-body .state-panel, body.app-body .state-panel,
body.home-body .hero-action-card, body.app-body .hero-action-card,
body.home-body .wallet-card, body.app-body .wallet-card {
  border-radius: var(--r-panel);
  box-shadow: var(--el-1);
}
/* Inner elements one step tighter than the card they sit in. */
body.home-body .dish-card__thumb, body.app-body .dish-card__thumb,
body.home-body .menu-thumb, body.app-body .menu-thumb,
body.home-body .menu-item__art, body.app-body .menu-item__art,
body.home-body .state-panel__icon, body.app-body .state-panel__icon,
body.home-body .hours-row input[type="time"], body.app-body .hours-row input[type="time"],
body.home-body .qty, body.app-body .qty,
body.home-body .chip, body.app-body .chip,
body.home-body .pill, body.app-body .pill,
body.home-body .profile-meta, body.app-body .profile-meta {
  border-radius: var(--r-in);
}
body.home-body .qty, body.app-body .qty,
body.home-body .chip, body.app-body .chip,
body.home-body .pill, body.app-body .pill,
body.home-body .status-chip, body.app-body .status-chip,
body.home-body .a-status, body.app-body .a-status {
  border-radius: var(--r-pill);
}

/* 21.5 Status semantics ---------------------------------------------------- */
/* Data colors, deliberately desaturated and never used on a button. An order
   status is the one thing a kitchen or customer has to read at a glance, and
   until now "ready", "delivered", "cancelled" and "live" all shared brand red
   or plain ink. */
body.home-body, body.app-body, body.auth-page, body.docs-page, body.err-page {
  --st-queue:  #6a6258;
  --st-cook:   #8a4f12;
  --st-ready:  #15624a;
  --st-transit:#155e75;
  --st-bad:    #a02218;
  --st-queue-bg: rgba(106, 98, 88, .10);
  --st-cook-bg:  rgba(138, 79, 18, .10);
  --st-ready-bg: rgba(21, 98, 74, .10);
  --st-transit-bg: rgba(21, 94, 117, .10);
  --st-bad-bg: rgba(160, 34, 24, .08);
}

.order-state,
body.home-body .badge, body.app-body .badge,
body.home-body .status-badge, body.app-body .status-badge,
body.home-body .a-status, body.app-body .a-status,
body.home-body .status-chip, body.app-body .status-chip,
body.home-body .dish-card__status, body.app-body .dish-card__status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .55rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--st-queue-bg);
  color: var(--st-queue);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
}
.order-state::before,
.badge::before, .status-badge::before, .a-status::before, .status-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.order-state--pending, .badge--pending, .a-status.pending {
  background: var(--st-queue-bg); color: var(--st-queue);
}
.order-state--accepted, .order-state--preparing, .order-state--awaiting_rider {
  background: var(--st-cook-bg); color: var(--st-cook);
}
.order-state--ready, .order-state--delivered, .badge-green, .a-status.ok {
  background: var(--st-ready-bg); color: var(--st-ready);
}
.order-state--rider_assigned, .order-state--in_transit {
  background: var(--st-transit-bg); color: var(--st-transit);
}
.order-state--cancelled, .a-status.danger, .badge--danger {
  background: var(--st-bad-bg); color: var(--st-bad);
}
/* Menu availability keeps its own two states. */
body.home-body .dish-card__status.is-on, body.app-body .dish-card__status.is-on {
  background: var(--st-ready-bg);
  border-color: rgba(21, 98, 74, .22);
  color: var(--st-ready);
}
body.home-body .dish-card__status.is-off, body.app-body .dish-card__status.is-off {
  background: var(--st-queue-bg);
  border-color: rgba(106, 98, 88, .18);
  color: var(--st-queue);
}
/* Directory lifecycle (admin vendors / riders). */
.status-chip--live, .a-status.live { background: var(--st-ready-bg); color: var(--st-ready); }
.status-chip--pending, .a-status.pending { background: var(--st-cook-bg); color: var(--st-cook); }
.status-chip--paused { background: var(--st-queue-bg); color: var(--st-queue); }
.status-chip--suspended, .status-chip--rejected, .status-chip--disabled,
.a-status.bad { background: var(--st-bad-bg); color: var(--st-bad); }
/* Rider availability is a real signal, so it stays a dot + word. */
.a-online { color: var(--st-ready); }
.a-online::before { background: var(--st-ready); }
.a-offline { color: var(--st-queue); }

/* Tracking rail: done steps are green, the live step keeps brand red. */
body.home-body .track-step.is-done i, body.app-body .track-step.is-done i { background: var(--st-ready); }
body.home-body .track-step.is-done i::after, body.app-body .track-step.is-done i::after { background: var(--st-ready); }
body.home-body .track-step.is-now i, body.app-body .track-step.is-now i {
  background: var(--red);
  box-shadow: 0 0 0 4px var(--red-wash);
}

/* 21.6 Controls ------------------------------------------------------------- */
body.home-body .button, body.app-body .button,
body.home-body .btn, body.app-body .btn,
body.home-body .btn--primary, body.app-body .btn--primary {
  min-height: 42px;
  padding: .6rem 1.15rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .005em;
  box-shadow: var(--el-hair);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
    box-shadow .2s ease, transform .12s ease;
}
/* Hover darkens within the brand instead of jumping to black, and the control
   lifts; press puts it back down. Same feedback on every action in the app. */
body.home-body .button:hover:not(:disabled), body.app-body .button:hover:not(:disabled),
body.home-body .btn--primary:hover:not(:disabled), body.app-body .btn--primary:hover:not(:disabled) {
  background: var(--red-ink);
  box-shadow: var(--el-red);
  transform: translateY(-1px);
}
body.home-body .button:active:not(:disabled), body.app-body .button:active:not(:disabled),
body.home-body .btn--primary:active:not(:disabled), body.app-body .btn--primary:active:not(:disabled) {
  transform: translateY(0) scale(.985);
  box-shadow: var(--el-hair);
}
body.home-body .button-variant-ghost, body.app-body .button-variant-ghost,
body.home-body .btn--ghost, body.app-body .btn--ghost {
  background: var(--surface);
  border: 1px solid var(--hair);
  color: var(--ink);
  font-weight: 600;
}
body.home-body .button-variant-ghost:hover:not(:disabled), body.app-body .button-variant-ghost:hover:not(:disabled),
body.home-body .btn--ghost:hover:not(:disabled), body.app-body .btn--ghost:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: var(--el-1);
  transform: translateY(-1px);
}
body.home-body .btn--danger:hover:not(:disabled), body.app-body .btn--danger:hover:not(:disabled) {
  background: var(--st-bad);
  border-color: var(--st-bad);
}
body.home-body .button:disabled, body.app-body .button:disabled,
body.home-body .btn:disabled, body.app-body .btn:disabled {
  opacity: .45;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
/* Text buttons and links show their hit area on hover instead of being a
   naked label. */
.link-arrow, .feed-more, .home-section-head a, .loc-change-link {
  border-radius: var(--r-in);
  padding: .25rem .5rem;
  margin: -.25rem -.5rem;
  transition: background-color .16s ease, color .16s ease;
}
.link-arrow:hover, .feed-more:hover, .home-section-head a:hover { background: var(--red-wash, rgba(237, 28, 36, .07)); }

input, select, textarea {
  border-radius: var(--r-ctl);
  border-color: var(--hair);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .16s ease, box-shadow .18s ease, background-color .16s ease;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #d7d3cb; }
input:focus, select:focus, textarea:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-wash);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--paper-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* Keyboard focus: one ring, everywhere, with a white halo so it survives
   red fills, photos and paper. */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--red, #ED1C24);
  outline-offset: 2px;
}
body.home-body .home-nav a:focus-visible,
body.home-body .user-pill:focus-visible { outline-offset: 3px; }

/* 21.7 Cards that respond -------------------------------------------------- */
@media (hover:hover) {
  body.home-body .card-tile-minimal:hover, body.app-body .card-tile-minimal:hover,
  body.home-body .card-status-minimal:hover, body.app-body .card-status-minimal:hover,
  body.home-body .card-row-minimal:hover, body.app-body .card-row-minimal:hover,
  body.home-body .vendor-row:hover, body.app-body .vendor-row:hover,
  body.home-body .order-row:hover, body.app-body .order-row:hover,
  body.home-body .job-card:hover, body.app-body .job-card:hover,
  body.home-body .dish-card:hover, body.app-body .dish-card:hover,
  body.home-body .menu-item:hover, body.app-body .menu-item:hover,
  body.home-body .ticket-card:hover, body.app-body .ticket-card:hover,
  body.home-body .alert-card:hover, body.app-body .alert-card:hover,
  body.home-body .a-metric:hover, body.app-body .a-metric:hover,
  body.home-body .hours-row:hover, body.app-body .hours-row:hover,
  body.home-body .tile:hover, body.app-body .tile:hover {
    border-color: #d9d5cd;
    box-shadow: var(--el-2);
    transform: translateY(-2px);
  }
  body.home-body .a-metric:hover, body.app-body .a-metric:hover { transform: translateY(-1px); }
}
body.home-body .home-nav a:hover, body.app-body .home-nav a:hover { background: var(--paper-2); color: var(--ink); }
body.home-body .home-nav a.is-on, body.app-body .home-nav a.is-on,
body.home-body .app-nav-item.is-active, body.app-body .app-nav-item.is-active {
  background: var(--red);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--el-red);
  font-weight: 600;
}
body.home-body .home-nav a.is-on:hover, body.app-body .home-nav a.is-on:hover { background: var(--red-ink); color: #fff; }
.home-nav a, .app-nav-item { transition: background-color .16s ease, color .16s ease, box-shadow .2s ease, transform .12s ease; }

/* Rows inside cards: separator rhythm, no boxy stacking. */
a.set-row:hover, .link-row:hover { background: var(--surface-2); }
.set-group { border-top: 1px solid var(--hair); }
.set-row { border-bottom: 1px solid var(--hair-soft); }
.link-row { border-bottom: 1px solid var(--hair-soft); }

/* 21.8 Chrome --------------------------------------------------------------- */
.app-top, body.home-body .customer-topbar {
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 1px 0 rgba(23, 19, 16, .02);
}
.app-top h1 { letter-spacing: -.015em; }
.app-icon-btn { transition: background-color .16s ease, color .16s ease, transform .12s ease; }
@media (hover:hover) {
  .app-icon-btn:hover { background: var(--paper-2); transform: translateY(-1px); }
  .app-icon-btn:active { transform: translateY(0) scale(.94); }
}
.app-icon-btn__badge {
  box-shadow: 0 0 0 2px var(--surface);
  font-variant-numeric: tabular-nums;
}
.user-pill { box-shadow: var(--el-hair); border-color: var(--hair); transition: box-shadow .2s ease, border-color .16s ease; }
@media (hover:hover) { .user-pill:hover { border-color: #d9d5cd; box-shadow: var(--el-1); } }
.account-popover { border-color: var(--hair); box-shadow: var(--el-3); border-radius: var(--r-card); }

/* The mobile tab bar is a floating capsule on a wide screen instead of a
   full-bleed strip with four icons stranded at the screen edges. */
@media (min-width:801px) {
  .app-tabbar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 16px;
    width: min(600px, calc(100% - 32px));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--hair);
    border-radius: var(--r-pill);
    padding: 6px;
    box-shadow: var(--el-3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .app-tabbar a { border-radius: var(--r-pill); padding-block: .35rem; }
  .app-tabbar a.is-active { background: var(--red-wash); }
}

/* 21.9 Feedback states ----------------------------------------------------- */
.skeleton, .sk-view-wrap .skeleton, .sk-52 { background: #eae7e1 !important; border-radius: var(--r-in) !important; }
.skeleton::after, .sk-view-wrap .skeleton::after {
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%) !important;
}
body.home-body .state-panel, body.app-body .state-panel {
  background: var(--surface);
  border: 1px dashed var(--hair);
  box-shadow: none;
}
body.home-body .state-panel__icon, body.app-body .state-panel__icon {
  background: var(--red-wash);
  color: var(--red);
}
.empty { border: 1px dashed var(--hair); background: var(--surface-2); }
.empty b { color: var(--ink); }
.banner { background: var(--paper-2); border-color: var(--hair); color: var(--ink-soft); }
.odg-pop-card { box-shadow: var(--el-3); }

/* Auth surfaces sit on the paper bed, so the card reads as an object. */
body.auth-page { background: var(--paper); }
body.auth-page .auth-split {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-panel);
  box-shadow: var(--el-2);
}
.auth-switch { background: var(--paper-2); border-color: transparent; }
.auth-switch button { color: var(--muted); }
.auth-switch button.active { background: var(--surface); color: var(--ink); box-shadow: var(--el-hair); }
body.auth-page .auth-submit { box-shadow: var(--el-hair); }
@media (hover:hover) {
  body.auth-page .auth-submit:hover:not(:disabled) { background: var(--red-ink); box-shadow: var(--el-red); transform: translateY(-1px); }
}
.auth-page .join-role { border-color: var(--hair); box-shadow: var(--el-hair); }
@media (hover:hover) {
  .auth-page .join-role:hover {
    border-color: rgba(237, 28, 36, .35);
    box-shadow: var(--el-2);
    transform: translateY(-2px);
  }
}
.auth-page .join-role__ic { background: var(--red-wash); }

/* Docs & legal. */
body.docs-page { background: var(--paper); }
.docs-header { background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--hair); }
body.docs-page .docs-contact-card { box-shadow: var(--el-hair); }
@media (hover:hover) {
  body.docs-page .docs-contact-card:hover {
    border-color: rgba(237, 28, 36, .3);
    box-shadow: var(--el-2);
    transform: translateY(-2px);
  }
}

/* 21.10 Scrollbars, selection, reduced motion ----------------------------- */
::selection { background: rgba(237, 28, 36, .16); color: var(--ink); }
.home-main::-webkit-scrollbar, .app-main::-webkit-scrollbar { width: 10px; }
.home-main::-webkit-scrollbar-thumb, .app-main::-webkit-scrollbar-thumb {
  background: #ded9d1;
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.home-main::-webkit-scrollbar-thumb:hover, .app-main::-webkit-scrollbar-thumb:hover { background: #c9c3b8; background-clip: padding-box; }
.home-main { scrollbar-width: thin; scrollbar-color: #ded9d1 transparent; }

@media (prefers-reduced-motion: reduce) {
  body.home-body *, body.app-body *, body.auth-page *, body.docs-page *, body.err-page * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  body.home-body .button:hover, body.app-body .button:hover,
  body.home-body .card-tile-minimal:hover, body.app-body .card-tile-minimal:hover,
  body.home-body .card-status-minimal:hover, body.app-body .card-status-minimal:hover,
  body.home-body .dish-card:hover, body.app-body .dish-card:hover,
  body.home-body .job-card:hover, body.app-body .job-card:hover { transform: none !important; }
}

/* 21.12 Status tones per component ---------------------------------------- */
/* The words "active" and "pending" carry different meanings in different
   corners of the app: an APPROVED rider is healthy, an IN-PROGRESS order is
   not. So tones are mapped per component instead of per word, and every
   status now reads the same way wherever it appears. */
body.home-body .a-status, body.app-body .a-status, .a-status {
  background: var(--st-queue-bg, rgba(106, 98, 88, .1));
  color: var(--st-queue, #6a6258);
}
.a-status.live, .a-status.ok, .a-status.active, .badge-green,
.status-chip--delivered, .pill-done {
  background: var(--st-ready-bg);
  color: var(--st-ready);
}
.a-status.pending, .a-status.paused_audit, .status-chip--pending {
  background: var(--st-cook-bg);
  color: var(--st-cook);
}
.a-status.paused { background: var(--st-queue-bg); color: var(--st-queue); }
.a-status.rejected, .a-status.suspended, .a-status.disabled, .a-status.bad,
.status-chip--cancelled, .ticket-card--cancelled .status-chip {
  background: var(--st-bad-bg);
  color: var(--st-bad);
}
/* Kitchens tickets: new = waiting, active = on the fire, delivered = done. */
.status-chip--active, .ticket-card--active .status-chip {
  background: var(--st-cook-bg);
  color: var(--st-cook);
}
.status-chip--delivered { background: var(--st-ready-bg); color: var(--st-ready); }

/* Customer order strip. */
body.home-body .status-badge, body.app-body .status-badge, .status-badge {
  background: var(--st-cook-bg);
  color: var(--st-cook);
  border-color: transparent;
}
.status-badge.st-queue { background: var(--st-queue-bg); color: var(--st-queue); }
.status-badge.st-transit { background: var(--st-transit-bg); color: var(--st-transit); }
.status-badge.st-ready { background: var(--st-ready-bg); color: var(--st-ready); }
.status-badge.st-bad { background: var(--st-bad-bg); color: var(--st-bad); }

/* Pills used as status flags (rider presence, menu availability). */
body.home-body .pill, body.app-body .pill, .pill {
  background: var(--surface);
  border: 1px solid var(--hair);
  color: var(--muted);
  padding: .25rem .6rem;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pill-online, .pill-ready {
  background: var(--st-ready-bg);
  border-color: transparent;
  color: var(--st-ready);
}
.pill-online::before, .pill-ready::before { background: currentColor; }
.pill-off, .pill-soldout {
  background: var(--st-queue-bg);
  border-color: transparent;
  color: var(--st-queue);
}

/* 21.13 Tone overrides ------------------------------------------------------ */
/* Specificity note: the base rules above are scoped as `body.<page> .thing`
   (0,2,1), so every tone rule repeats that shape. Writing them as a bare
   `.thing.tone` (0,2,0) loses the cascade and silently leaves everything on
   the neutral tone. */
body.home-body .order-state--pending, body.app-body .order-state--pending,
body.home-body .a-status.pending, body.app-body .a-status.pending,
body.home-body .status-chip--pending, body.app-body .status-chip--pending,
body.home-body .status-badge:not([class*="st-"]), body.app-body .status-badge:not([class*="st-"]) {
  background: var(--st-cook-bg);
  color: var(--st-cook);
}
body.home-body .order-state--accepted, body.app-body .order-state--accepted,
body.home-body .order-state--preparing, body.app-body .order-state--preparing,
body.home-body .order-state--awaiting_rider, body.app-body .order-state--awaiting_rider {
  background: var(--st-cook-bg);
  color: var(--st-cook);
}
body.home-body .order-state--ready, body.app-body .order-state--ready,
body.home-body .order-state--delivered, body.app-body .order-state--delivered,
body.home-body .status-badge.st-ready, body.app-body .status-badge.st-ready,
body.home-body .badge-green, body.app-body .badge-green,
body.home-body .a-status.live, body.app-body .a-status.live,
body.home-body .a-status.ok, body.app-body .a-status.ok,
body.home-body .a-status.active, body.app-body .a-status.active,
body.home-body .status-chip--delivered, body.app-body .status-chip--delivered,
body.home-body .pill-online, body.app-body .pill-online,
body.home-body .pill-done, body.app-body .pill-done {
  background: var(--st-ready-bg);
  color: var(--st-ready);
}
body.home-body .order-state--rider_assigned, body.app-body .order-state--rider_assigned,
body.home-body .order-state--in_transit, body.app-body .order-state--in_transit,
body.home-body .status-badge.st-transit, body.app-body .status-badge.st-transit {
  background: var(--st-transit-bg);
  color: var(--st-transit);
}
body.home-body .order-state--cancelled, body.app-body .order-state--cancelled,
body.home-body .status-badge.st-bad, body.app-body .status-badge.st-bad,
body.home-body .a-status.rejected, body.app-body .a-status.rejected,
body.home-body .a-status.suspended, body.app-body .a-status.suspended,
body.home-body .a-status.disabled, body.app-body .a-status.disabled,
body.home-body .a-status.bad, body.app-body .a-status.bad,
body.home-body .status-chip--cancelled, body.app-body .status-chip--cancelled {
  background: var(--st-bad-bg);
  color: var(--st-bad);
}
body.home-body .status-badge.st-queue, body.app-body .status-badge.st-queue,
body.home-body .a-status.paused, body.app-body .a-status.paused,
body.home-body .pill-off, body.app-body .pill-off,
body.home-body .pill-soldout, body.app-body .pill-soldout,
body.home-body .ticket-card--delivered .status-chip, body.app-body .ticket-card--delivered .status-chip {
  background: var(--st-queue-bg);
  color: var(--st-queue);
}
/* Kitchens tickets: in-progress is the state that needs watching. */
body.home-body .ticket-card--active .status-chip, body.app-body .ticket-card--active .status-chip,
body.home-body .status-chip--active, body.app-body .status-chip--active {
  background: var(--st-cook-bg);
  color: var(--st-cook);
}
/* Raw `a-status` with no tone (a date, a note) stays quiet ink, never red. */
body.home-body .a-status, body.app-body .a-status { background: var(--paper-2); color: var(--muted); }
body.home-body .a-status[class], body.app-body .a-status[class] { background: var(--st-queue-bg); color: var(--st-queue); }

/* 21.14 Auth: the brand half, back where it fits -------------------------- */
/* The marketing-to-product seam. A single 480px card in a white field made the
   front door look unfinished; on wide screens the split returns: photography
   and one proof line on the left, the form on the right. */
@media (min-width:1000px) {
  body.auth-page.login-page { padding: clamp(1.5rem, 4vh, 3rem) 1.5rem; }
  body.auth-page.login-page .auth-split {
    width: min(68rem, 100%);
    min-height: 34rem;
    margin: auto;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--el-3);
  }
  body.auth-page.login-page .auth-promo {
    display: flex;
    order: 0;
    flex: 1 1 46%;
    min-width: 0;
    padding: clamp(1.6rem, 2.6vw, 2.6rem);
    border-right: 1px solid var(--hair);
  }
  body.auth-page.login-page .auth-panel {
    order: 1;
    flex: 1 1 54%;
    display: grid;
    place-items: center;
    padding: clamp(1.8rem, 3vw, 3rem);
    background: #fff;
  }
  body.auth-page.login-page .auth-panel-inner { width: min(100%, 26rem); }
  /* The form column is the quiet one: no centred hero type inside a form. */
  body.auth-page.login-page .auth-title { justify-content: flex-start; text-align: left; font-size: clamp(1.5rem, 1rem + 1.2vw, 1.95rem); }
  body.auth-page.login-page .auth-lede { justify-content: flex-start; text-align: left; margin: 0; }
  body.auth-page.login-page .auth-mobile-brand { display: none; }
  body.auth-page.login-page .auth-page-head { display: none; }
}

/* 21.15 Flow pages: use the width ----------------------------------------- */
/* Rider, tracking, support and role pages ran a 35rem column inside a 90rem
   window, so most of a desktop screen was blank. The column grows, and the
   pieces inside it are laid out to earn that width. */
body.app-body .app-main,
body.err-page .app-main {
  width: min(100% - 2rem, 46rem);
  padding-top: clamp(20px, 3vh, 34px);
}
.app-main form,
.app-main .field-stack:not(.ai-box) { width: min(100%, 34rem); }

/* Rider home: availability and the live offer share a row on wide screens. */
.rider-presence-card {
  display: grid;
  gap: 1rem;
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: var(--r-panel);
  box-shadow: var(--el-1);
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(237, 28, 36, .08) 0%, rgba(237, 28, 36, 0) 60%),
    #fff;
}
.rider-presence-card > div { min-width: 0; }
.rider-presence-card strong {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.rider-presence-card p { margin: .3rem 0 0; color: var(--muted); max-width: 52ch; }
.rider-presence-card .button { justify-self: start; }
@media (min-width:720px) {
  .rider-presence-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rider-presence-card .button { justify-self: end; }
}
.rider-offers-section { margin-top: clamp(20px, 3vw, 30px); }
.rider-offer-card .button { margin-top: .35rem; }

/* Active delivery: the strip is the whole screen, so frame it and pin the
   action. On a phone the CTA stays under the thumb. */
.rider-active-main .track-steps,
.rider-job-main .track-steps {
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--el-hair);
}
.rider-active-main .action-bar,
.hours-save-bar {
  position: sticky;
  bottom: 10px;
  z-index: 12;
  margin-top: 18px;
  padding: 10px;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--el-2);
}
.rider-active-main .action-bar .button.full,
.hours-save-bar .button { width: auto; min-width: min(100%, 22rem); }
@media (min-width:720px) {
  .rider-active-main .action-bar,
  .hours-save-bar { display: flex; justify-content: flex-end; background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; position: static; padding: 0; }
  .rider-active-main .action-bar .button.full,
  .hours-save-bar .button { min-width: 15rem; }
}

/* Tracking: progress, update and trail as one composed page. */
.track-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.track-grid { display: grid; gap: 14px; }
@media (min-width:820px) { .track-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; } }
.ping-card {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--el-hair);
}
.ping-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.ping-card__title { font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; color: var(--ink); }
.ping-card__meta { color: var(--faint); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ping-card__plot { width: 100%; height: clamp(58px, 9vw, 84px); border-radius: var(--r-in); background: var(--surface-2); }
.ping-card__line { stroke: var(--st-transit); opacity: .85; stroke-linejoin: round; stroke-linecap: round; }
.ping-card__dot { fill: var(--st-transit); opacity: .5; }
.ping-card__now { fill: var(--red); stroke: #fff; stroke-width: 1.2; }
.ping-card__foot { margin: 0; color: var(--faint); font-size: .72rem; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: no-preference) { .ping-card__plot { background: #f4f2ee; } }

/* 21.16 Vendor operations --------------------------------------------------- */
.vendor-page-header { display: grid; gap: 1rem; margin-bottom: clamp(18px, 2.6vw, 26px); }
@media (min-width:900px) {
  .vendor-page-header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .vendor-page-header__row { justify-content: flex-end; }
}
.vendor-page-header__copy p { max-width: 54ch; color: var(--muted); }
.a-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.stat-card { padding: clamp(14px, 1.8vw, 18px); }
.stat-card__label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.stat-card__value { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-card__sub { color: var(--faint); font-size: .76rem; }

/* Kitchen tickets: the two-column grid left a third of the board empty. */
.vendor-orders-main #o-list,
.vendor-orders-main [id*="orders"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 14px;
  align-items: start;
}
.ticket-card { padding: 1rem 1.1rem; box-shadow: var(--el-hair); }
.ticket-card__item {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: .95rem;
  line-height: 1.3;
}
.ticket-card .app-actions { gap: 8px; }
.o-filters { gap: 6px; }

/* Menu board: rows, not boxes, and the art never shows a broken frame. */
#v-menu .menu-item { border-radius: var(--r-card); }
.menu-item__art { border-radius: var(--r-in); }
.menu-item h3 { font-size: 1rem; letter-spacing: -.015em; }
.vendor-menu-main .vendor-search { max-width: 34rem; }

/* Opening hours: one row per day, aligned like a ledger. */
.hours-list { display: grid; gap: 8px; }
.hours-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: .7rem .9rem;
}
.hours-day b, .hours-row b { font-family: var(--font-display); font-size: .95rem; }
.hours-times { display: flex; align-items: center; gap: .45rem; font-variant-numeric: tabular-nums; }
.hours-times i { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
.hours-row input[type="time"] { border-radius: var(--r-in); padding: .35rem .5rem; }

/* Analytics: rank rows read as a table, the CTA as a row action. */
.analytics-grid { display: grid; gap: 14px; }
.dish-row { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--hair); border-radius: var(--r-card); background: #fff; }
.dish-row__rank { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.dish-row__sold { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.analytics-cta { padding: .9rem 1rem; }

/* 21.17 Admin --------------------------------------------------------------- */
#list .settings-card, #v-list .settings-card, #r-list .settings-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.1rem;
  box-shadow: var(--el-hair);
  transition: box-shadow .22s ease, transform .16s ease, border-color .16s ease;
}
@media (hover:hover) {
  #list .settings-card:hover, #v-list .settings-card:hover, #r-list .settings-card:hover {
    border-color: #d9d5cd;
    box-shadow: var(--el-2);
    transform: translateY(-1px);
  }
}
.a-card-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.a-card-top h3 { font-size: 1rem; letter-spacing: -.018em; }
.a-metric { padding: clamp(14px, 1.8vw, 18px); }
.a-metric .v { font-size: clamp(1.45rem, 1.05rem + 1vw, 1.9rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.a-metric .l { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.a-search { max-width: 34rem; }
.a-filters { gap: 6px; }
.a-when { font-variant-numeric: tabular-nums; }

/* 21.18 Support, alerts, setup, checkout, ratings -------------------------- */
.alerts-page-head { display: grid; gap: .35rem; margin-bottom: clamp(16px, 2.4vw, 24px); }
.alerts-page-desc { color: var(--muted); max-width: 60ch; }
.checkout-lines-card, .pay-bar { box-shadow: var(--el-hair); }
.checkout-lines-card .bill-row { padding-block: .55rem; }
.checkout-lines-card .bill-row.is-total {
  margin-top: .35rem;
  padding-top: .7rem;
  border-top: 1px solid var(--hair);
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.pay-bar .button { min-width: min(100%, 20rem); }
@media (min-width:720px) { .pay-bar { justify-content: flex-end; } }
/* The basket is empty most of the time on a preview build: give that state a
   shape instead of a dashed box inside a box. */
.checkout-empty {
  display: grid;
  justify-items: start;
  gap: .6rem;
  padding: clamp(20px, 3.4vw, 34px);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--el-hair);
}

/* Correction to 21.14: inside the split the promo is a column with the brand
   at the top and the story card at the bottom, not a 56vh mobile stage. */
@media (min-width:1000px) {
  body.auth-page.login-page .auth-promo {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 0;
    padding: clamp(1.5rem, 2.4vw, 2.4rem);
  }
  body.auth-page.login-page .auth-promo-brand { order: 0; }
  body.auth-page.login-page .auth-promo-visual { order: 1; width: 100%; }
  body.auth-page.login-page .auth-promo-copy { order: 2; width: 100%; margin: 1.3rem 0 0; }
  body.auth-page.login-page .auth-promo-copy p { max-width: 34ch; }
  body.auth-page.login-page .auth-promo-card { max-width: 26rem; }
}

/* 21.19 Filter chip rows ---------------------------------------------------- */
/* Chips are a control strip, not a stack of inputs: they keep their own
   width, sit on one line and scroll when the page is narrow. */
.o-filters, .a-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 18px;
}
.o-filters .chip, .a-filters .chip {
  flex: 0 0 auto;
  width: auto;
  min-height: 34px;
  padding: .35rem .85rem;
  font-size: .78rem;
}
/* The basket card already has a border; its empty state should not add a second
   dashed frame inside the first. */
.checkout-lines-card .empty,
.checkout-lines-card .state-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: clamp(14px, 2.4vw, 22px) 0;
  justify-items: center;
  text-align: center;
}

/* 21.20 Last-mile overrides -------------------------------------------------- */
/* Filter strips: app.css lays them out as a grid, which turns five short
   labels into five full-width bars. Back to a wrapping chip row. */
body.home-body .home-main .o-filters,
body.home-body .home-main .a-filters,
.home-main .o-filters, .home-main .a-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
}
.home-main .o-filters .chip,
.home-main .a-filters .chip {
  flex: 0 0 auto;
  width: auto;
  min-height: 34px;
  padding: .35rem .85rem;
  font-size: .78rem;
}
/* The basket card frames the state, so the state does not frame itself again. */
body.app-body .checkout-lines-card > .empty,
.checkout-lines-card > .empty,
body.app-body .checkout-lines-card .empty,
.checkout-lines-card .empty {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  padding: clamp(16px, 2.6vw, 26px) clamp(14px, 2.4vw, 22px);
  text-align: center;
}

/* ============================================================================
   21.21 Skill Enforcement Layer (better-ui, better-layout, apple-design)
   ========================================================================== */

/* 100dvh full-height shells with 100vh fallback (better-layout) */
.home-shell,
.auth-split {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Subtle 1px inner outline on all dish and menu imagery (better-ui §3) */
.dish-card__media img,
.menu-item img,
.vendor-dish__media img,
.feed-suggest__row img {
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}

/* Tactile press feedback on interactive controls (better-ui §5, interaction-design) */
.button:not(:disabled):active,
.chip:not(:disabled):active,
.dish-quick-add:not(:disabled):active,
.dish-quick-step__btn:not(:disabled):active,
.qty button:not(:disabled):active {
  transform: scale(0.96);
  transition-duration: 120ms;
}

/* Overscroll containment on overlays, menus, and sheets (better-ui §10) */
.a-chips.feed-cat-menu,
.feed-suggest,
.odg-cmdbar__bar,
.home-side.is-open {
  overscroll-behavior: contain;
}

/* Reduced transparency fallback for frosted surfaces (apple-design surfaces.md) */
@media (prefers-reduced-transparency: reduce) {
  .app-top,
  .customer-topbar,
  .rider-active-main .action-bar,
  .hours-save-bar,
  .odg-boot--overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--surface, #ffffff) !important;
  }
}

/* Quick add-to-basket & quantity steppers on DishCards */
.dish-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-width: 0;
}

.dish-foot--rail {
  align-items: center;
  margin-top: auto;
  padding-top: 0.45rem;
}

.dish-quick-add {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 30px;
  padding: 0 0.68rem 0 0.54rem;
  border: 1px solid var(--color-border-default);
  border-radius: var(--r-pill);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-border);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.dish-quick-add [data-lucide] {
  width: 12px;
  height: 12px;
  color: var(--color-accent-default);
  transition: color 150ms var(--ease-out);
}
@media (hover: hover) {
  .dish-quick-add:hover {
    background: var(--color-accent-default);
    border-color: var(--color-accent-default);
    color: #ffffff;
  }
  .dish-quick-add:hover [data-lucide] {
    color: #ffffff;
  }
}

.dish-quick-step {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 30px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--color-text-primary);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.dish-quick-step__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
@media (hover: hover) {
  .dish-quick-step__btn:hover {
    background: var(--color-accent-default);
  }
}
.dish-quick-step__val {
  min-width: 18px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Partner journey entry strip (CustomerHomePage) */
.partner-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin-bottom: 24px;
}
.partner-entry-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--el-hair);
}
.partner-entry-card__body {
  display: grid;
  gap: 6px;
}
.partner-entry-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-default);
}
.partner-entry-card__kicker [data-lucide] {
  width: 13px;
  height: 13px;
}
.partner-entry-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.partner-entry-card__body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}
.partner-entry-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================================================
   21.22 Uber Eats / DoorDash / Deliveroo / Shopify Polaris Reference Patterns
   ========================================================================== */

/* Topbar Mode Toggle & Basket Button */
.customer-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.ue-mode-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2, #f4f4f5);
  border: 1px solid var(--hair);
}
.ue-mode-toggle button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.ue-mode-toggle button.is-active {
  background: var(--ink, #09090b);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.14);
}

.ue-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--surface, #ffffff);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--el-hair);
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.ue-cart-btn [data-lucide] {
  width: 15px;
  height: 15px;
}
.ue-cart-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2, #f4f4f5);
  color: var(--ink);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}
.ue-cart-btn.has-items {
  background: var(--ink, #09090b);
  border-color: var(--ink, #09090b);
  color: #ffffff;
}
.ue-cart-btn.has-items .ue-cart-btn__count {
  background: var(--brand, #e02927);
  color: #ffffff;
}

/* Visual Cuisine Category Strip (Uber Eats / DoorDash pattern) */
.ue-cuisine-strip {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  margin-bottom: 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ue-cuisine-strip::-webkit-scrollbar {
  display: none;
}
.ue-cuisine-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 88px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: var(--surface, #ffffff);
  color: var(--ink);
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: var(--el-hair);
  transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.ue-cuisine-item__thumb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
}
.ue-cuisine-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}
.ue-cuisine-item__label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.ue-cuisine-item.is-active {
  border-color: var(--ink, #09090b);
  background: var(--ink, #09090b);
  color: #ffffff;
}

/* Quick Filter Chips Row (Uber Eats / DoorDash pattern) */
.ue-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.ue-filter-row::-webkit-scrollbar {
  display: none;
}
.ue-filter-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--surface, #ffffff);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--el-hair);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.ue-filter-chip [data-lucide] {
  width: 13px;
  height: 13px;
  color: var(--muted);
}
.ue-filter-chip.is-active {
  background: var(--ink, #09090b);
  border-color: var(--ink, #09090b);
  color: #ffffff;
}
.ue-filter-chip.is-active [data-lucide] {
  color: #ffffff;
}

.feed-sec-sub {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
}

/* Uber Eats / Deliveroo Restaurant Store Cards (.k-card--store) */
.ue-kitchen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin-bottom: 28px;
}

body.home-body .k-card.k-card--store,
.k-card.k-card--store {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  border-radius: var(--r-card, 14px);
  border: 1px solid transparent;
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-border);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) {
  body.home-body .k-card.k-card--store:hover,
  .k-card.k-card--store:hover {
    transform: translateY(-2px);
    box-shadow: var(--el-2);
  }
}
.k-card--store .k-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  border-radius: var(--r-inner, 8px);
  overflow: hidden;
  background: var(--surface-2);
}
.k-card--store .k-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
  transition: transform 280ms var(--ease-out);
}
@media (hover: hover) {
  .k-card--store:hover .k-card__media img {
    transform: scale(1.03);
  }
}
.k-card__promo {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: #15803d;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.k-card__eta {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.k-card--store .k-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 8px 6px;
}
.k-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.k-card__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.k-card--store .k-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2, #f4f4f5);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.k-card--store .k-card__rating [data-lucide] {
  width: 11px;
  height: 11px;
  color: #f59e0b;
}
.k-card--store .k-card__meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.k-card__fee.is-free {
  color: #15803d;
  font-weight: 600;
}
.k-card__tags {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted-2, #71717a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dish-card__desc {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Uber Eats / Deliveroo Restaurant Storefront (KitchenPage) */
.customer-flow-shell .home-main.ue-store-main {
  width: min(100% - 2rem, 72rem);
  padding-top: 16px;
}
.ue-store-header {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}
.ue-store-cover {
  position: relative;
  width: 100%;
  height: clamp(160px, 24vw, 230px);
  border-radius: var(--r-card, 14px);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-border);
}
.ue-store-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}
.ue-store-cover__promo {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: #15803d;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.ue-store-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ue-store-info__main {
  display: grid;
  gap: 4px;
}
.ue-store-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.ue-store-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ue-store-rating [data-lucide] {
  width: 14px;
  height: 14px;
  color: #f59e0b;
}
.ue-store-address {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.ue-store-address [data-lucide] {
  width: 14px;
  height: 14px;
}
.ue-store-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.ue-store-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: var(--surface, #ffffff);
  box-shadow: var(--el-hair);
  overflow: hidden;
}
.ue-store-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ue-store-metric + .ue-store-metric {
  border-left: 1px solid var(--hair);
}
.ue-store-metric strong {
  font-family: var(--font-display);
  font-size: 0.86rem;
  color: var(--ink);
}
.ue-store-metric span {
  font-size: 0.72rem;
  color: var(--muted);
}

.ue-store-toolbar {
  position: sticky;
  top: 58px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 0;
  margin-bottom: 18px;
  background: rgba(248, 249, 250, 0.92);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--hair);
}
.ue-store-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ue-store-tabs::-webkit-scrollbar {
  display: none;
}
.ue-store-tab {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--surface, #ffffff);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.ue-store-tab.is-active {
  background: var(--ink, #09090b);
  border-color: var(--ink, #09090b);
  color: #ffffff;
}
.ue-store-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--surface, #ffffff);
  min-width: min(100%, 240px);
}
.ue-store-search [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.ue-store-search input {
  border: 0;
  background: transparent;
  outline: none;
  font-size: 0.82rem;
  color: var(--ink);
  width: 100%;
}

.ue-store-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (min-width: 980px) {
  .ue-store-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

.ue-store-menu#v-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.ue-menu-section {
  display: grid;
  gap: 12px;
}
.ue-menu-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ue-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 14px;
}

/* 2-Column Horizontal Menu Item Card (Uber Eats / Deliveroo pattern) */
#v-menu .menu-item.ue-menu-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: stretch;
  gap: 14px;
  min-height: 0;
  padding: 14px;
  border-radius: var(--r-card, 14px);
  border: 1px solid transparent;
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-border);
  cursor: pointer;
  transition: transform 150ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
@media (hover: hover) {
  #v-menu .menu-item.ue-menu-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--el-2);
  }
}
.ue-menu-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ue-menu-card__badge {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: #15803d;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
}
.ue-menu-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--ink);
}
.ue-menu-card__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.ue-menu-card__price-row .price {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.ue-menu-card__likes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--muted);
}
.ue-menu-card__likes [data-lucide] {
  width: 11px;
  height: 11px;
  color: #f59e0b;
}
.ue-menu-card__desc {
  margin: 2px 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ue-menu-card__customizable {
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.72rem;
  color: var(--muted-2, #71717a);
}
.ue-menu-card__media {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
}
.ue-menu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}
.ue-menu-card__action {
  position: absolute;
  right: 6px;
  bottom: 6px;
}
.ue-menu-card__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.ue-menu-card__add-btn [data-lucide] {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .ue-menu-card__add-btn:hover {
    background: var(--ink);
    color: #ffffff;
  }
}

/* Sticky Basket Sidebar on Storefront */
.ue-store-sidebar {
  position: sticky;
  top: 120px;
}
.ue-basket-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-card, 14px);
  border: 1px solid transparent;
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-border);
}
.ue-basket-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.ue-basket-card__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}
.ue-basket-card__head span {
  font-size: 0.78rem;
  color: var(--muted);
}
.ue-basket-card__empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
}
.ue-basket-card__empty [data-lucide] {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}
.ue-basket-card__lines {
  display: grid;
  gap: 12px;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ue-basket-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ue-basket-line__info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ue-basket-line__info strong {
  font-size: 0.84rem;
  color: var(--ink);
}
.ue-basket-line__info small {
  font-size: 0.74rem;
  color: var(--muted);
}
.ue-basket-line__info span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ue-basket-card__totals {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
.ue-basket-card__totals > div {
  display: flex;
  justify-content: space-between;
}
.ue-basket-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* DoorDash / Uber Eats Item Detail & Customization Modal (.ue-modal-*) */
.ue-modal-backdrop,
.ue-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(9, 9, 11, 0.52);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overscroll-behavior: contain;
}
.ue-modal-sheet {
  width: min(100%, 520px);
  max-height: min(90dvh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--surface, #ffffff);
  box-shadow: 0 24px 48px rgba(9, 9, 11, 0.24);
  overflow: hidden;
}
.ue-modal-hero {
  position: relative;
  width: 100%;
  height: 220px;
  background: var(--surface-2);
  flex-shrink: 0;
}
.ue-modal-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ue-modal-close {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.ue-modal-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: #15803d;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
}
.ue-modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ue-modal-header {
  display: grid;
  gap: 6px;
}
.ue-modal-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
}
.ue-modal-kitchen-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--brand, #e02927);
  font-weight: 600;
  text-decoration: none;
}
.ue-modal-approval {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ue-modal-approval [data-lucide] {
  width: 13px;
  height: 13px;
  color: #f59e0b;
}
.ue-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ue-modal-price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ue-modal-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}
.ue-modal-section {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.ue-modal-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.ue-modal-section__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 700;
}
.ue-modal-section__head p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.ue-modal-tag {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-2, #f4f4f5);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
}
.ue-addon-list {
  display: grid;
  gap: 8px;
}
.ue-addon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: var(--surface, #ffffff);
  cursor: pointer;
  transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}
.ue-addon-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ue-addon-row.is-checked {
  border-color: var(--ink, #09090b);
  background: var(--surface-2, #f4f4f5);
}
.ue-addon-row__info {
  display: grid;
  gap: 2px;
}
.ue-addon-row__info strong {
  font-size: 0.86rem;
  color: var(--ink);
}
.ue-addon-row__info span {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ue-addon-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: #ffffff;
  color: var(--ink);
}
.ue-addon-row.is-checked .ue-addon-check {
  background: var(--ink, #09090b);
  border-color: var(--ink, #09090b);
  color: #ffffff;
}
.ue-modal-note {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: var(--surface-2, #f4f4f5);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink);
  resize: vertical;
}
.ue-modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.ue-modal-qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2, #f4f4f5);
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ue-modal-qty button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: #ffffff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.ue-modal-submit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding-inline: 18px;
  font-variant-numeric: tabular-nums;
}

/* Slide-Over Basket Drawer (.ue-drawer-*) */
.ue-drawer-backdrop {
  justify-content: flex-end;
  padding: 0;
}
.ue-drawer-panel {
  width: min(100%, 420px);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface, #ffffff);
  box-shadow: -12px 0 36px rgba(9, 9, 11, 0.18);
}
.ue-drawer-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--hair);
}
.ue-drawer-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}
.ue-drawer-sub {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.ue-drawer-close {
  position: static;
  background: var(--surface-2);
  box-shadow: none;
}
.ue-drawer-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 24px;
  text-align: center;
}
.ue-drawer-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
}
.ue-drawer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ue-drawer-dest {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 0.82rem;
}
.ue-drawer-dest div {
  flex: 1;
  display: grid;
  min-width: 0;
}
.ue-drawer-dest span {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ue-drawer-link {
  color: var(--brand, #e02927);
  font-weight: 600;
  text-decoration: none;
}
.ue-drawer-kitchen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ue-drawer-kitchen-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.ue-drawer-clear {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
}
.ue-drawer-lines {
  display: grid;
  gap: 12px;
}
.ue-drawer-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.ue-drawer-line__img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}
.ue-drawer-line__info {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ue-drawer-line__info strong {
  font-size: 0.86rem;
}
.ue-drawer-line__note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.ue-drawer-line__price {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ue-drawer-qty {
  height: 34px;
  padding: 0 6px;
  gap: 6px;
}
.ue-drawer-qty button {
  width: 24px;
  height: 24px;
}
.ue-drawer-bill {
  margin-top: auto;
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.ue-drawer-bill__row {
  display: flex;
  justify-content: space-between;
}
.ue-drawer-bill__row.is-total {
  padding-top: 8px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-display);
  font-size: 1rem;
}
.ue-drawer-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--hair);
}
.ue-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding-inline: 18px;
  font-variant-numeric: tabular-nums;
}

/* 2-Column Checkout Layout (.ue-checkout-*) */
.customer-flow-shell .home-main.ue-checkout-main {
  width: min(100% - 2rem, 68rem);
}
.ue-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (min-width: 920px) {
  .ue-checkout-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}
.ue-checkout-col {
  display: grid;
  gap: 16px;
}
.ue-co-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: var(--r-card, 14px);
  border: 1px solid transparent;
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-border);
}
.ue-co-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ue-co-card__head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.ue-co-card__head h2 [data-lucide] {
  width: 16px;
  height: 16px;
  color: var(--brand, #e02927);
}
.ue-co-link {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand, #e02927);
  text-decoration: none;
}
.ue-co-route {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-2, #f4f4f5);
}
.ue-co-route__node {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ue-co-route__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ue-co-route__dot.is-home {
  background: var(--brand, #e02927);
  color: #ffffff;
}
.ue-co-route__dot [data-lucide] {
  width: 14px;
  height: 14px;
}
.ue-co-route__node div {
  display: grid;
  gap: 2px;
  font-size: 0.84rem;
}
.ue-co-route__node span {
  color: var(--muted);
  font-size: 0.78rem;
}
.ue-co-subblock {
  display: grid;
  gap: 8px;
}
.ue-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ue-co-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: var(--surface-2);
  font-size: 0.84rem;
  color: var(--ink);
}
.ue-speed-options {
  display: grid;
  gap: 10px;
}
.ue-speed-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: var(--surface, #ffffff);
  cursor: pointer;
}
.ue-speed-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ue-speed-card.is-selected {
  border-color: var(--ink, #09090b);
  background: var(--surface-2);
}
.ue-speed-card div {
  display: grid;
  gap: 2px;
}
.ue-speed-card strong {
  font-size: 0.88rem;
}
.ue-speed-card span {
  font-size: 0.78rem;
  color: var(--muted);
}
.ue-speed-card__fee {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.ue-pay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ink, #09090b);
  background: var(--surface-2);
}
.ue-pay-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
}
.ue-pay-option div {
  flex: 1;
  display: grid;
  gap: 2px;
}
.ue-pay-option strong {
  font-size: 0.88rem;
}
.ue-pay-option span {
  font-size: 0.78rem;
  color: var(--muted);
}
.ue-co-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ue-co-item__img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}
.ue-co-item__info {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ue-co-item__info small {
  color: var(--muted);
  font-size: 0.75rem;
}
.ue-co-item__info span {
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ue-promo-form {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}
.ue-promo-form input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: var(--surface-2);
  font-size: 0.84rem;
}
.ue-bill-discount {
  color: #15803d !important;
}
.ue-co-submit#co-pay-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding-inline: 18px;
  font-variant-numeric: tabular-nums;
}

/* Order Tracking Screen (DoorDash / Uber Eats pattern) */
.customer-flow-shell .home-main.ue-track-main {
  width: min(100% - 2rem, 56rem);
}
.ue-track-layout {
  display: grid;
  gap: 18px;
}
.ue-track-map {
  border-radius: var(--r-card, 14px);
  border: 1px solid transparent;
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-border);
  overflow: hidden;
}
.ue-track-map__canvas {
  position: relative;
  height: 210px;
  background: linear-gradient(180deg, #eef2f6 0%, #e5ebf1 100%);
  overflow: hidden;
}
.ue-track-map__svg {
  width: 100%;
  height: 100%;
}
.ue-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ue-map-pin__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink, #09090b);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.ue-map-pin.is-rider .ue-map-pin__bubble {
  background: var(--brand, #e02927);
}
.ue-map-pin small {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.ue-track-map__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ue-track-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ue-track-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.ue-progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 0 4px;
}
.ue-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: var(--muted);
}
.ue-progress-step__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-2, #f4f4f5);
  color: var(--muted);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.ue-progress-step.is-done .ue-progress-step__node {
  background: var(--ink, #09090b);
  color: #ffffff;
}
.ue-progress-step.is-current .ue-progress-step__node {
  background: var(--brand, #e02927);
  color: #ffffff;
}
.ue-progress-step__label {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
}
.ue-track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ue-track-bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.ue-courier-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ue-courier-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink, #09090b);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
}
.ue-courier-info {
  flex: 1;
  display: grid;
  gap: 2px;
  font-size: 0.84rem;
}
.ue-courier-info span,
.ue-courier-info small {
  color: var(--muted);
  font-size: 0.76rem;
}
.ue-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}

/* Rate Order Screen (Uber Eats Rate pattern) */
.ue-rate-main {
  display: flex;
  justify-content: center;
}
.ue-rate-card {
  width: min(100%, 480px);
  justify-items: center;
  text-align: center;
  padding: 28px 24px;
}
.ue-rate-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--brand, #e02927);
}
.ue-rate-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.ue-rate-block {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}
.ue-star-group {
  display: inline-flex;
  gap: 8px;
}
.ue-star-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}
.ue-star-btn.is-lit {
  color: #f59e0b;
  background: #fffbeb;
  border-color: #fde68a;
}
.ue-rate-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ue-rate-note {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 6px;
}

/* Shopify Polaris / Uber Eats Manager / DoorDash Dasher KPI & Status Bars */
.ue-polaris-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ue-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}
.ue-status-toggle.is-open {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.ue-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.ue-kpi-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-border);
  font-variant-numeric: tabular-nums;
}
.ue-kpi-card span {
  font-size: 0.76rem;
  color: var(--muted);
}
.ue-kpi-card strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}
.ue-dispatch-card {
  display: grid;
  gap: 14px;
}
.ue-dispatch-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ue-dispatch-card__payout {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ue-dispatch-card__timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: #fef2f2;
  color: #b91c1c;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   21.23 Site-Wide Anti-Slop Polish, Frameless Surface Architecture &
         Mobile Responsiveness Overhaul (taste-skill / redesign-skill / minimalist-skill)
   ----------------------------------------------------------------------------
   1. Pure white page canvas (#ffffff) with soft tonal surfaces (#f6f6f6).
   2. Zero drop shadows under cards and zero thin 1px border lines / hairline
      dividers site-wide.
   3. Frameless Uber Eats / Deliveroo media tiles for restaurant & dish cards
      with quick-add (+) / stepper overlaid on the dish photo.
   4. Full-width 100% mobile layout containment (min-width: 0; max-width: 100%;
      width: 100%; box-sizing: border-box) across every route so no screen
      shrinks to 90% width or overflows horizontally.
   ========================================================================== */

:root,
body,
body.home-body,
body.app-body,
body.auth-page,
body.docs-page,
body.err-page {
  --paper: #ffffff;
  --paper-2: #f6f6f6;
  --surface: #f6f6f6;
  --surface-2: #f4f4f5;
  --surface-3: #ededf0;
  --hair: transparent;
  --hair-soft: transparent;
  --hair-strong: transparent;
  --el-hair: none;
  --el-1: none;
  --el-2: none;
  --el-3: none;
  --shadow-border: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --image-outline: transparent;
  --color-bg-primary: #ffffff;
  --color-bg-elevated: #f6f6f6;
  --color-bg-elevated-2: #f4f4f5;
  --color-bg-elevated-3: #ededf0;
  --color-surface: #f6f6f6;
  --color-surface-muted: #f4f4f5;
  --color-border: transparent;
  --color-border-strong: transparent;
  --feed-line: transparent;
  --feed-soft: #f4f4f5;
  background-color: #ffffff;
}

/* Remove thin 1px outlines around images site-wide */
img,
.dish-img,
.k-card__media img,
.ue-menu-card__media img,
.ue-store-cover img {
  outline: 0 !important;
  border: 0 !important;
}

/* Global viewport & flex/grid blowout prevention so no mobile container
   can expand past 100vw or shrink the top bar to ~90% width */
html,
body,
#root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

.home-shell,
.home-side,
.home-main,
.home-main > *,
.view,
.view > *,
.app-main,
.customer-flow-shell,
.customer-flow-shell .home-main {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Horizontal scroll strips: always constrained to parent inline size */
.ue-cuisine-strip,
.ue-filter-row,
.a-rail,
.a-rail.feed-rail,
.a-rail.feed-kitchens,
.ue-store-tabs,
.o-filters,
.a-filters {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Eliminate card borders and drop shadows site-wide; use soft tonal fill (#f6f6f6) */
body.home-body :is(
  .card, .food-card, .vendor-card, .order-card, .address-card,
  .job-card, .vendor-row, .order-row,
  .a-metric, .stat-card, .stat-pill,
  .hours-row, .settings-card, .profile-card,
  .hero-action-card, .track-card, .checkout-lines-card, .wallet-card,
  .ai-box, .ticket-card, .alert-card, .state-panel, .tile, .empty,
  .banner, .card-row-minimal, .card-tile-minimal, .card-status-minimal,
  .card-metric-minimal, .card-vendor-minimal, .ue-co-card, .ue-kpi-card,
  .ue-basket-card, .partner-entry-card, .r-card, .r-current, .form-narrow,
  .ping-card, .rider-presence-card, .dish-editor,
  .dish-card:not(.dish-card--grid):not(.dish-card--rail)
),
body.app-body :is(
  .card, .food-card, .vendor-card, .order-card, .address-card,
  .job-card, .vendor-row, .order-row,
  .a-metric, .stat-card, .stat-pill,
  .hours-row, .settings-card, .profile-card,
  .hero-action-card, .track-card, .checkout-lines-card, .wallet-card,
  .ai-box, .ticket-card, .alert-card, .state-panel, .tile, .empty,
  .banner, .card-row-minimal, .card-tile-minimal, .card-status-minimal,
  .card-metric-minimal, .card-vendor-minimal, .ue-co-card, .ue-kpi-card,
  .ue-basket-card, .partner-entry-card, .r-card, .r-current, .form-narrow,
  .ping-card, .rider-presence-card, .dish-editor,
  .dish-card:not(.dish-card--grid):not(.dish-card--rail)
) {
  background: #f6f6f6 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep intentional dark hero wallet card dark but borderless & shadowless */
body.home-body .wallet-card,
body.app-body .wallet-card {
  background: #141414 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove hover drop shadows & borders on cards */
@media (hover: hover) {
  body.home-body :is(
    .vendor-card, .order-card, .job-card, .vendor-row, .order-row,
    .ticket-card, .alert-card, .hero-action-card, .card-vendor-minimal,
    .card-row-minimal, .card-tile-minimal, .partner-entry-card, .ue-co-card,
    .ue-kpi-card
  ):hover,
  body.app-body :is(
    .vendor-card, .order-card, .job-card, .vendor-row, .order-row,
    .ticket-card, .alert-card, .hero-action-card, .card-vendor-minimal,
    .card-row-minimal, .card-tile-minimal, .partner-entry-card, .ue-co-card,
    .ue-kpi-card
  ):hover {
    border: 0 !important;
    box-shadow: none !important;
    background: #efefef !important;
  }
}

/* Remove thin hairline borders from headers, rails, settings groups, and bill rows */
.app-top,
.home-side,
.customer-topbar,
.ue-store-toolbar,
.ue-modal-section,
.ue-modal-addon-row,
.ue-modal-foot,
.ue-drawer-head,
.ue-drawer-item,
.ue-drawer-summary,
.ue-drawer-total,
.ue-drawer-foot,
.ue-co-item,
.ue-co-totals,
.ue-co-total-row,
.ue-track-rider,
.ue-track-items,
.ue-track-item,
.ue-track-total,
.ue-basket-line,
.ue-basket-summary,
.set-group,
.set-row,
.link-row,
.bill-row,
.danger-zone,
.tab-bar {
  border: 0 !important;
  box-shadow: none !important;
}

.app-top {
  background: rgba(255, 255, 255, 0.96) !important;
}

.set-group {
  background: #f6f6f6 !important;
  border-radius: 16px !important;
  padding: 4px 16px !important;
}

/* Controls, pills, chips, buttons: soft tonal fills, zero borders, zero shadows */
.chip,
.pill,
.ue-filter-chip,
.ue-cuisine-item,
.ue-cuisine-item__icon,
.ue-mode-toggle,
.ue-mode-toggle button,
.ue-cart-btn,
.customer-loc,
.user-pill,
.notif-bell,
.app-icon-btn,
.a-search.feed-search,
.a-catbtn,
.ue-store-tab,
.ue-store-search,
.ue-store-metrics,
.ue-store-metrics__divider,
.ue-status-toggle,
.ue-rate-tag,
.ue-tip-pill,
.ue-pay-option,
.button,
.btn,
.button-variant-ghost,
.btn--ghost,
.btn--secondary {
  border: 0 !important;
  box-shadow: none !important;
}

.ue-mode-toggle,
.customer-loc,
.ue-filter-chip,
.ue-store-tab,
.ue-store-search,
.ue-store-metrics,
.ue-rate-tag,
.ue-tip-pill,
.button-variant-ghost,
.btn--ghost,
.chip,
.user-pill,
.notif-bell,
.app-icon-btn {
  background: #f4f4f5 !important;
  color: #111315 !important;
}

.ue-mode-toggle button {
  background: transparent !important;
  color: #52525b !important;
}
.ue-mode-toggle button.is-active {
  background: #ffffff !important;
  color: #111315 !important;
  box-shadow: none !important;
}

.ue-filter-chip.is-active,
.ue-store-tab.is-active,
.ue-rate-tag.is-active,
.ue-tip-pill.is-active,
.chip.is-on,
.chip.is-active {
  background: #111315 !important;
  color: #ffffff !important;
}

.ue-cart-btn {
  background: #111315 !important;
  color: #ffffff !important;
}
.ue-cart-btn.has-items {
  background: var(--brand, #e02927) !important;
  color: #ffffff !important;
}

.button:not(.button-variant-ghost):not(.btn--ghost):not(.btn--secondary),
.btn--primary {
  background: var(--brand, #e02927) !important;
  color: #ffffff !important;
}

/* Inputs, selects, textareas: soft tonal surface, no 1px border line */
body.home-body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
body.app-body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
body.auth-page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  background: #f4f4f5 !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #111315 !important;
}
body.home-body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus,
body.app-body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus,
body.auth-page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus {
  background: #ededf0 !important;
  box-shadow: 0 0 0 2px #111315 !important;
}
.a-search.feed-search input,
.a-search.feed-search input:focus,
.ue-store-search input,
.ue-store-search input:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================================================
   Frameless Uber Eats Restaurant Cards (.k-card.k-card--store) &
   Frameless Dish Cards (.dish-card--grid, .dish-card--rail)
   ========================================================================== */
.ue-kitchen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
  gap: clamp(20px, 2.4vw, 28px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.k-card.k-card--store {
  display: flex;
  flex-direction: column;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  min-width: 0;
}
.k-card.k-card--store:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}
.k-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f4f5;
}
.k-card__body {
  display: grid;
  gap: 3px;
  padding: 10px 2px 2px !important;
  background: transparent !important;
}
.k-card__head h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #111315;
  margin: 0;
}
.k-card__rating {
  background: #f4f4f5 !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  min-width: 52px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.k-card__rating svg,
.k-card__rating [data-lucide] {
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  display: block !important;
  color: #f59e0b !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
}

/* Customer Feed Dish Cards: Frameless Uber Eats / Deliveroo Tile */
body.home-body .dish-card,
.dish-card.dish-card--grid,
.dish-card.dish-card--rail {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  min-width: 0;
}
body.home-body .dish-card:hover,
.dish-card.dish-card--grid:hover,
.dish-card.dish-card--rail:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}
body.home-body .dish-card__media,
.dish-card.dish-card--grid .dish-card__media,
.dish-card.dish-card--rail .dish-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto !important;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f4f5;
}
.dish-card__quick-wrap {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
}
.dish-quick-add {
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #111315 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}
.dish-quick-add svg,
.dish-quick-add [data-lucide] {
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  display: block !important;
  color: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
}
.dish-quick-add:hover {
  background: #111315 !important;
  color: #ffffff !important;
  transform: scale(1.05);
}
.dish-card__fav,
.dish-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #111315 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.dish-card__fav svg,
.dish-fav svg,
.dish-card__fav [data-lucide],
.dish-fav [data-lucide] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  display: block !important;
  color: currentColor !important;
}
.dish-card__fav.is-saved,
.dish-fav.is-saved {
  color: var(--brand, #e02927) !important;
}
.dish-stepper--overlay {
  background: #111315 !important;
  color: #ffffff !important;
  border-radius: 999px;
  padding: 2px 4px !important;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dish-stepper__btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  font-weight: 700;
  cursor: pointer;
}
body.home-body .dish-card__info,
.dish-card.dish-card--grid .dish-card__info,
.dish-card.dish-card--rail .dish-card__info {
  display: grid;
  gap: 2px;
  padding: 8px 2px 4px !important;
  background: transparent !important;
}
body.home-body .dish-card .dish-card__info h3,
body.home-body .dish-card__info h3,
.dish-card.dish-card--grid .dish-card__info h3,
.dish-card.dish-card--rail .dish-card__info h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  color: #111315;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
}
.dish-card__price-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.dish-card__price-val {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  color: #111315;
  white-space: nowrap;
}
.dish-card__price-line del {
  font-size: 0.75rem;
  color: #9ca3af;
  white-space: nowrap;
}
.dish-card__dot {
  color: #9ca3af;
  font-size: 0.78rem;
}
.dish-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.76rem;
  color: #4b5563;
  white-space: nowrap;
  min-width: 0;
}
.dish-stars__glyphs {
  display: inline-flex;
  align-items: center;
}
.dish-star {
  width: 12px;
  height: 12px;
  fill: #f59e0b;
}
.dish-stars__val {
  font-weight: 700;
  color: #111315;
}
.dish-stars__cnt {
  color: #6b7280;
}
body.home-body .dish-seller,
.dish-card .dish-seller {
  margin: 0;
  font-size: 0.76rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Partner entry cards: clean sentence-case kicker, no loud uppercase red */
.partner-entry-card__kicker {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #6b7280 !important;
}

/* Storefront (/app/user/vendor) menu cards & toolbar */
#v-menu .menu-item.ue-menu-card {
  background: #f6f6f6 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
}
#v-menu .menu-item.ue-menu-card:hover {
  background: #efefef !important;
  box-shadow: none !important;
}
.ue-store-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
}
@media (min-width: 720px) {
  .ue-store-toolbar {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
}
@media (max-width: 979px) {
  .ue-store-sidebar {
    display: none !important;
  }
}
@media (max-width: 719px) {
  .ue-store-controls {
    width: 100%;
    align-items: stretch !important;
  }
  .ue-store-controls .ue-mode-toggle {
    align-self: flex-start;
  }
  .ue-store-metrics {
    width: 100%;
    justify-content: space-around;
  }
}

/* Full-width container alignment across all customer, rider, vendor, and setup shells
   (eliminates the `width: min(100% - 2rem, ...)` 90%-width shrinkage on mobile) */
.customer-flow-shell .home-main,
.customer-flow-shell .home-main.ue-store-main,
.customer-flow-shell .home-main.ue-checkout-main,
.customer-flow-shell .home-main.ue-track-main,
body.app-body .app-main,
body.app-body .setup-main,
body.app-body .app-main:has(.form-narrow) {
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 3vw, 32px) !important;
  box-sizing: border-box !important;
}
.customer-flow-shell .home-main.ue-store-main {
  max-width: 74rem !important;
}
.customer-flow-shell .home-main.ue-checkout-main {
  max-width: 68rem !important;
}
.customer-flow-shell .home-main.ue-track-main {
  max-width: 48rem !important;
}

/* Desktop customer topbar account tools */
.customer-desktop-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================================
   Mobile Layout & Responsiveness Overhaul (<= 800px and <= 640px)
   ========================================================================== */
@media (max-width: 800px) {
  body.home-body .home-shell,
  body.app-body .home-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow-x: clip !important;
  }

  body.home-body .home-side,
  body.app-body .home-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 12px 16px !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  body.home-body .home-main,
  body.app-body .home-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    height: auto !important;
    padding: 12px 16px 88px !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  /* Hide duplicate bell & user pill inside customer-topbar on mobile because
     SideRail already renders them in the mobile top header */
  .customer-desktop-tools {
    display: none !important;
  }

  /* Arrange Delivery/Pickup toggle + Basket on Row 1, and full-width Address pill
     on Row 2 so the address never truncates or overflows the mobile viewport */
  .customer-topbar {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 0 0 8px !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .customer-topbar__left {
    display: contents !important;
  }
  .customer-topbar .ue-mode-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .customer-topbar .customer-account-tools {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .customer-topbar .customer-loc {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
  }
  .customer-topbar .customer-loc strong {
    max-width: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 768px) {
  /* Auth pages (/login, /join, /forgot-password, /reset-password, /app/vendor/apply):
     full-width frameless mobile layout instead of a 92% shrunk bordered box */
  body.auth-page {
    padding: 0 !important;
    align-items: stretch !important;
  }
  body.auth-page .auth-split {
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px 16px 40px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 640px) {
  /* DishDetailModal: native-style full-width bottom sheet on mobile */
  .ue-modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .ue-modal-sheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 20px 20px 0 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Admin & Vendor settings rows: stack cleanly on narrow phones */
  #list .settings-card,
  #v-list .settings-card,
  #r-list .settings-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 2-column food grid on mobile with clean spacing */
  body.home-body .a-grid.feed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
  }

  /* Restaurant cards: 1 full-width card per row on mobile */
  .ue-kitchen-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
}

/* ============================================================================
   21.24 — Site-Wide Icon Centering, Edge-to-Edge Mobile Rails & Page Polish
   ========================================================================== */

/* 1. Preserve filled SVG icons (stars, saved hearts) while keeping strokes crisp */
svg[fill="currentColor"],
[data-lucide][fill="currentColor"],
.lucide[fill="currentColor"] {
  fill: currentColor !important;
}

/* Keep .brand-mark-icon hidden because .brand-mark-word renders the full ODG logo image */
.brand-mark-icon {
  display: none !important;
}

/* Remove vertical accent stripes on order & ticket cards */
.card-status-minimal::before,
body.home-body .card-status-minimal::before,
.ticket-card::before,
body.home-body .home-side::after {
  display: none !important;
  content: none !important;
}
body.home-body .card-status-minimal,
.card-status-minimal,
.job-card,
.ticket-card {
  border-left: 0 !important;
  padding: 16px 18px !important;
}

/* Guest Sign-in pill (no fake "G" avatar circle) */
.user-pill--guest {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #f4f4f5 !important;
  color: #111315 !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
}
.user-pill--guest svg,
.user-pill--guest [data-lucide] {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  display: block !important;
}

/* 2. Geometric centering for every circular & square icon button across all routes */
.dish-quick-add,
.dish-card__fav,
.dish-fav,
.kitchen-card__fav,
.ue-menu-card__add-btn,
.ue-modal-close,
.ue-drawer-close,
.ue-addon-check,
.ue-modal-qty button,
.ue-drawer-qty button,
.ue-qty-stepper button,
.qty-btn,
.cart-qty button,
.ue-store-circle-btn,
.ue-courier-btn,
.ue-icon-circle,
.ue-star-btn,
.ue-track-step__node,
.ue-map-pin__bubble,
.ue-co-route__dot,
.ue-pay-option__icon,
.ue-rate-badge,
.ue-drawer-empty__icon,
.app-back,
.chat-send,
.user-pill-avatar,
.r-card__icon,
.r-card__chevron,
.state-panel__icon,
.alert-card__icon,
.menu-card__act,
.odg-cmdbar__close,
.dish-stepper__btn {
  padding: 0 !important;
  line-height: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
}

.dish-quick-add > svg,
.dish-card__fav > svg,
.dish-fav > svg,
.kitchen-card__fav > svg,
.ue-menu-card__add-btn > svg,
.ue-modal-close > svg,
.ue-drawer-close > svg,
.ue-addon-check > svg,
.ue-store-circle-btn > svg,
.ue-courier-btn > svg,
.ue-icon-circle > svg,
.ue-star-btn > svg,
.ue-track-step__node > svg,
.ue-map-pin__bubble > svg,
.ue-co-route__dot > svg,
.ue-pay-option__icon > svg,
.ue-rate-badge > svg,
.ue-drawer-empty__icon > svg,
.app-back > svg,
.chat-send > svg,
.r-card__icon > svg,
.r-card__chevron > svg,
.state-panel__icon > svg,
.alert-card__icon > svg,
.menu-card__act > svg,
.odg-cmdbar__close > svg {
  margin: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.ue-icon-circle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #f4f4f5 !important;
  color: #111315 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* RatePage stars: crisp 22px glyphs that fill gold when selected */
.ue-star-btn {
  border: 0 !important;
  box-shadow: none !important;
  background: #f4f4f5 !important;
  color: #a1a1aa !important;
}
.ue-star-btn svg,
.ue-star-btn [data-lucide] {
  width: 22px !important;
  height: 22px !important;
}
.ue-star-btn.is-lit {
  background: #fef3c7 !important;
  color: #f59e0b !important;
}
.ue-star-btn.is-lit svg,
.ue-star-btn.is-lit [data-lucide] {
  fill: currentColor !important;
  color: #f59e0b !important;
}

/* 3. Section headers & "See all" pill: never wrap onto multiple lines */
body.home-body .a-sec-head.feed-sec-head,
.a-sec-head.feed-sec-head,
.a-head-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}
body.home-body .a-sec-head.feed-sec-head h2,
.a-sec-head.feed-sec-head h2 {
  margin: 0 !important;
  min-width: 0;
}
.feed-more,
.home-section-link {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
body.home-body .feed-more {
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #f4f4f5 !important;
  color: #111315 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
body.home-body .feed-more:hover {
  background: #e4e4e7 !important;
}

/* 4. Remove remaining borders & outlines in Modals, Drawers, Storefront & Checkout */
.ue-modal-section,
.ue-modal-footer,
.ue-addon-row,
.ue-addon-check,
.ue-modal-note,
.ue-drawer-head,
.ue-drawer-line,
.ue-drawer-bill,
.ue-drawer-bill__row.is-total,
.ue-drawer-foot,
.ue-basket-card__head,
.ue-basket-card__totals,
.ue-menu-card__add-btn,
.ue-speed-card,
.ue-pay-option,
.ue-co-input,
.ue-promo-form input {
  border: 0 !important;
  outline: 0 !important;
}
.ue-menu-card__media img,
.ue-drawer-line__img,
.ue-co-item__img {
  outline: 0 !important;
  border: 0 !important;
}
.ue-addon-row,
.ue-speed-card {
  background: #f6f6f6 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
.ue-addon-row.is-checked,
.ue-speed-card.is-selected,
.ue-pay-option {
  background: #ededf0 !important;
}
.ue-addon-check {
  width: 28px !important;
  height: 28px !important;
  background: #ffffff !important;
  color: #111315 !important;
}
.ue-addon-row.is-checked .ue-addon-check {
  background: #111315 !important;
  color: #ffffff !important;
}
.ue-menu-card__add-btn {
  width: 34px !important;
  height: 34px !important;
  background: #ffffff !important;
  color: #111315 !important;
  box-shadow: none !important;
}
.ue-menu-card__add-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.4 !important;
}

/* 5. Hide duplicate chevron icon inside .vendor-select-wrap (select already has SVG chevron) */
.vendor-select-wrap > svg,
.vendor-select-wrap > [data-lucide] {
  display: none !important;
}

/* 6. Edge-to-Edge Horizontal Scroll Rails & Mobile Page Responsiveness */
@media (max-width: 767px) {
  body.home-body .a-rail.feed-rail,
  body.home-body .a-rail.feed-kitchens,
  .a-rail.feed-rail,
  .a-rail.feed-kitchens {
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-inline: 16px !important;
    box-sizing: border-box !important;
  }

  .ue-cuisine-strip,
  .ue-filter-row,
  .ue-store-tabs,
  .o-filters,
  .a-filters {
    width: calc(100% + 16px) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: -16px !important;
    padding-left: 2px !important;
    padding-right: 16px !important;
    scroll-padding-left: 2px !important;
    box-sizing: border-box !important;
  }

  body.home-body .a-rail.feed-rail > .dish-card,
  body.home-body .dish-card--rail,
  .dish-card.dish-card--rail {
    flex: 0 0 calc((100vw - 44px) / 2) !important;
    width: calc((100vw - 44px) / 2) !important;
    min-width: 156px !important;
    max-width: 210px !important;
  }
}

@media (max-width: 639px) {
  /* Vendor Opening Hours (/app/vendor/hours): stack day toggle + time range cleanly on mobile */
  .hours-row {
    grid-template-columns: 1fr auto !important;
    gap: 8px 12px !important;
    padding: 12px 14px !important;
  }
  .hours-row__range {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .hours-row__range input[type="time"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Vendor Orders & Rider Home header actions wrap cleanly on small phones */
  .ue-vendor-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .ue-vendor-topbar__right {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* ============================================================================
   21.25 — Apple-Style Typography, Hierarchy, Arrangement & Composition
   ========================================================================== */

:root,
body,
body.home-body,
body.app-body,
body.auth-page,
body.docs-page,
body.err-page {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  --font-mono: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif !important;
  font-family: var(--font-body) !important;
  color: #1d1d1f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 1. Replace loud uppercase tracked-out monospace kickers with calm Apple labels */
.home-kicker,
.settings-label,
.settings-field__label,
.field-label,
.stat-card__label,
.dish-editor__eyebrow,
.section-label {
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: -0.008em !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
  color: #6e6e73 !important;
}

/* 2. Unified Page Title Block & Section Header Hierarchy */
.ue-page-title-block,
.vendor-page-header {
  margin: 0 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.ue-page-title-block .set-name,
.vendor-page-header .set-name,
.set-name {
  font-family: var(--font-display) !important;
  font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.15 !important;
  color: #1d1d1f !important;
  margin: 0 !important;
}

.ue-page-subtitle,
.vendor-page-header__copy,
.alerts-page-desc,
.support-note {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #6e6e73 !important;
  margin: 0 !important;
}

.vendor-page-header__row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

body.home-body .a-sec-head.feed-sec-head,
.a-sec-head.feed-sec-head {
  margin: 26px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
}

body.home-body .a-sec-head.feed-sec-head h2,
.a-sec-head.feed-sec-head h2 {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  color: #1d1d1f !important;
  margin: 0 !important;
}

/* 3. Sleek Compact Customer Topbar & Spotlight Search Bar */
.customer-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.customer-location-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.ue-mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  background: #f2f2f7 !important;
  padding: 3px !important;
  border-radius: 999px !important;
  border: 0 !important;
  flex-shrink: 0 !important;
}

.ue-mode-toggle button {
  height: 30px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #6e6e73 !important;
  background: transparent !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

.ue-mode-toggle button.is-active {
  background: #1d1d1f !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.home-body .customer-loc,
.customer-loc {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: #f2f2f7 !important;
  border: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.home-body .customer-loc span,
.customer-loc span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.home-body .customer-loc small,
.customer-loc small {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #6e6e73 !important;
  white-space: nowrap !important;
}

body.home-body .customer-loc strong,
.customer-loc strong {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 640px) {
  body.home-body .customer-loc small,
  .customer-loc small {
    display: none !important;
  }
}

/* 4. Cuisine Strip & Filter Chips: Smooth Apple Proportions */
.ue-cuisine-strip {
  gap: 10px !important;
  padding-top: 6px !important;
  padding-bottom: 10px !important;
  margin-bottom: 4px !important;
}

.ue-cuisine-item {
  min-width: 76px !important;
  padding: 8px 10px 9px !important;
  border-radius: 16px !important;
  gap: 6px !important;
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ue-cuisine-item__thumb {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
}

.ue-cuisine-item__label {
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #1d1d1f !important;
}

.ue-cuisine-item.is-active {
  background: #1d1d1f !important;
  color: #ffffff !important;
}

.ue-cuisine-item.is-active .ue-cuisine-item__label {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.ue-filter-row {
  gap: 8px !important;
  padding-top: 2px !important;
  padding-bottom: 12px !important;
}

.ue-filter-chip {
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #f2f2f7 !important;
  color: #1d1d1f !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 6px !important;
}

.ue-filter-chip.is-active {
  background: #1d1d1f !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* 5. Food AI Search Card */
.ue-ai-search-card {
  background: #f5f5f7 !important;
  border-radius: 20px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ue-ai-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 6px 6px 6px 14px !important;
}

.ue-ai-input-row > svg {
  color: #e02927 !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.ue-ai-input-row input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 36px !important;
  padding: 0 !important;
  font-size: 0.92rem !important;
  color: #1d1d1f !important;
  outline: none !important;
}

/* 6. Orders Card (.ue-order-card) & Wallet Promo Pass (.ue-promo-pass) */
body.home-body .card-status-minimal.ue-order-card,
.ue-order-card {
  background: #f5f5f7 !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.ue-order-card__top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.ue-order-card__top .status-title {
  font-family: var(--font-display) !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  color: #1d1d1f !important;
  margin: 0 !important;
}

.ue-order-card__items {
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  color: #6e6e73 !important;
  margin: 0 !important;
}

.ue-order-card__foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 10px !important;
  margin-top: 2px !important;
  border-top: 1px solid rgba(60, 60, 67, 0.08) !important;
}

.ue-order-card__meta {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  font-size: 0.8125rem !important;
  color: #86868b !important;
}

.ue-order-card__meta strong {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  font-variant-numeric: tabular-nums !important;
}

.ue-order-card .status-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
  color: #e02927 !important;
  margin: 0 !important;
}

.ue-promo-pass {
  background: #f5f5f7 !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.ue-promo-pass__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.ue-promo-pass__tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  align-self: flex-start !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(224, 41, 39, 0.1) !important;
  color: #e02927 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

.ue-promo-pass__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #1d1d1f !important;
}

.ue-promo-pass__desc {
  font-size: 0.825rem !important;
  color: #6e6e73 !important;
  margin: 0 !important;
}

/* 7. iOS Inset Grouped Settings, Profile Card & Setup Container */
.profile-card {
  background: #f5f5f7 !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}

.profile-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #e8e8ed !important;
  color: #1d1d1f !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.profile-name {
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  color: #1d1d1f !important;
  margin: 0 0 2px !important;
}

.profile-email {
  font-size: 0.825rem !important;
  color: #6e6e73 !important;
  margin: 0 0 6px !important;
}

.profile-meta {
  background: #e8e8ed !important;
  color: #1d1d1f !important;
  border: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
}

.settings-section {
  margin-bottom: 22px !important;
}

.settings-card {
  background: #f5f5f7 !important;
  border-radius: 18px !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.link-row {
  padding: 14px 18px !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.link-row + .link-row {
  border-top: 1px solid rgba(60, 60, 67, 0.08) !important;
}

.link-row__title {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  color: #1d1d1f !important;
}

.link-row__sub {
  font-size: 0.8125rem !important;
  font-style: normal !important;
  color: #6e6e73 !important;
}

.ue-setup-shell {
  max-width: 580px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* 8. Auth Pages (/login, /join, /forgot-password, /reset-password):
      Crisp Apple Surface Hierarchy, Segmented Switcher & Input Contrast */
body.auth-page,
body.auth-page .auth-split,
body.auth-page .auth-panel {
  background: #ffffff !important;
  color: #1d1d1f !important;
}

body.auth-page .auth-panel {
  padding: clamp(24px, 5vh, 48px) 20px 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.auth-page .auth-panel-inner {
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

body.auth-page .auth-mobile-brand {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto 2px !important;
}

body.auth-page .auth-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  background: #eff0f4 !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.auth-page .auth-switch button {
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  border: 0 !important;
  background: transparent !important;
  color: #6e6e73 !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

body.auth-page .auth-switch button.active {
  background: #ffffff !important;
  color: #1d1d1f !important;
  box-shadow: none !important;
}

.auth-head-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  text-align: center !important;
}

body.auth-page .auth-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.55rem, 4vw, 1.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.15 !important;
  color: #1d1d1f !important;
  text-align: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

body.auth-page .auth-lede {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #6e6e73 !important;
  text-align: center !important;
  justify-content: center !important;
  margin: -4px 0 0 !important;
}

.auth-head-block .auth-lede {
  margin: 0 !important;
}

body.auth-page .auth-google {
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  background: #eff0f4 !important;
  color: #1d1d1f !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: background-color 0.16s ease !important;
}

body.auth-page .auth-google:hover:not(:disabled) {
  background: #e4e6ec !important;
}

body.auth-page .auth-divider {
  margin: -2px 0 !important;
  font-size: 0.78rem !important;
  color: #86868b !important;
}

body.auth-page .auth-divider::before,
body.auth-page .auth-divider::after {
  background: rgba(60, 60, 67, 0.12) !important;
}

body.auth-page .auth-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

body.auth-page .auth-form label:not(.round-check) {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.auth-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

.auth-forgot-inline {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #6e6e73 !important;
  text-decoration: none !important;
}

.auth-forgot-inline:hover {
  color: #1d1d1f !important;
}

body.auth-page .auth-form input,
body.auth-page .password-field input,
body.auth-page .vendor-application-form input,
body.auth-page .vendor-application-form select,
body.auth-page .vendor-application-form textarea {
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  background: #eff0f4 !important;
  color: #1d1d1f !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  box-sizing: border-box !important;
}

body.auth-page .auth-form input::placeholder,
body.auth-page .password-field input::placeholder {
  color: #86868b !important;
}

body.auth-page .auth-form input:focus,
body.auth-page .password-field input:focus {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px #1d1d1f !important;
  outline: none !important;
}

.turnstile-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 2px 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.auth-page .auth-submit {
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
  background: #e02927 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

body.auth-page .auth-foot {
  text-align: center !important;
  font-size: 0.875rem !important;
  color: #6e6e73 !important;
  margin: 4px 0 0 !important;
}

body.auth-page .auth-foot a,
body.auth-page .auth-foot .auth-text-btn {
  color: #1d1d1f !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

body.auth-page .auth-legal {
  text-align: center !important;
  font-size: 0.78rem !important;
  color: #86868b !important;
  margin: 0 !important;
}

body.auth-page .auth-legal a {
  color: #86868b !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 0 !important;
}

body.auth-page .auth-legal a:hover {
  color: #1d1d1f !important;
}

body.auth-page .join-role {
  background: #f5f5f7 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
}

body.auth-page .join-role:hover {
  background: #ededf0 !important;
}

/* 9. Public Docs, Privacy, Terms & Help (/privacy, /terms, /support) — Full Width & Normal Readable Scale */
body.docs-page,
.docs-page {
  background: #ffffff !important;
  color: #1d1d1f !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.docs-header {
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.docs-header-inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px clamp(16px, 3vw, 32px) !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

.docs-brand {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.docs-brand img {
  width: 60px !important;
  height: auto !important;
  display: block !important;
}

.docs-nav {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

.docs-nav a {
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #6e6e73 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 2px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

.docs-nav a.is-active,
.docs-nav a:hover {
  color: #1d1d1f !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.docs-nav a.docs-nav__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1d1d1f !important;
  color: #ffffff !important;
  height: 36px !important;
  padding: 0 14px !important;
  margin: 0 0 0 2px !important;
  border-radius: 999px !important;
  font-size: 0.84375rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.docs-nav a.docs-nav__cta:hover {
  background: #333336 !important;
  color: #ffffff !important;
}

.docs-main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 24px clamp(16px, 3vw, 32px) 48px !important;
  box-sizing: border-box !important;
}

.docs-hero {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 20px !important;
}

.docs-h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.65rem, 3.5vw, 2.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.15 !important;
  color: #1d1d1f !important;
  margin: 0 0 6px !important;
}

.docs-updated {
  font-size: 0.9375rem !important;
  color: #6e6e73 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

.docs-contact {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
}

@media (max-width: 680px) {
  .docs-contact {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.docs-contact-card {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #f5f5f7 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  text-decoration: none !important;
}

.docs-contact-card:hover {
  background: #ededf0 !important;
  box-shadow: none !important;
}

.docs-contact-card__icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #1d1d1f !important;
  display: inline-grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

.docs-contact-card__icon > svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  display: block !important;
}

.docs-contact-card strong {
  display: block !important;
  font-family: var(--font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #6e6e73 !important;
  margin: 0 0 2px !important;
}

.docs-contact-card span {
  font-size: 0.96875rem !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
}

.docs-body {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.docs-section {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #f5f5f7 !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
}

.docs-section h2 {
  font-family: var(--font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.016em !important;
  color: #1d1d1f !important;
  margin: 0 0 6px !important;
}

.docs-section p {
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: #515154 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.docs-callout {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 18px !important;
  background: #f5f5f7 !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
}

.docs-callout strong {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  margin-bottom: 4px !important;
}

.docs-callout p {
  font-size: 0.9375rem !important;
  color: #515154 !important;
  max-width: 100% !important;
}

/* ============================================================================
   10. Full-Width Edge-to-Edge Site Footer (.odg-footer) Across All Pages
   ========================================================================== */
.odg-footer {
  background: #111113 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 36px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* When rendered inside .home-main, bleed edge-to-edge across the container padding
   so the footer is 100% full width with zero left, right, or bottom white gutters */
.home-main > .odg-footer,
.customer-home-main > .odg-footer {
  width: calc(100% + 32px) !important;
  max-width: none !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

@media (min-width: 801px) {
  .home-main > .odg-footer,
  .customer-home-main > .odg-footer {
    width: calc(100% + 48px) !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    margin-bottom: -48px !important;
  }
}

.odg-footer__inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 36px clamp(16px, 3vw, 32px) 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  box-sizing: border-box !important;
}

.odg-footer__top {
  display: grid !important;
  grid-template-columns: 1.2fr 2fr !important;
  gap: 32px !important;
  align-items: start !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  .odg-footer__top {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
}

.odg-footer__brand-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.odg-footer__brand {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.odg-footer__brand img {
  width: 72px !important;
  height: auto !important;
  display: block !important;
}

.odg-footer__tagline {
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 0 !important;
  max-width: 38ch !important;
}

.odg-footer__chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

.odg-footer__chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 0 !important;
  transition: background-color 0.16s ease !important;
}

.odg-footer__chip:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.odg-footer__chip svg {
  width: 16px !important;
  height: 16px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  flex-shrink: 0 !important;
}

.odg-footer__cols {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  .odg-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 20px !important;
  }
}

.odg-footer__col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.odg-footer__col h4 {
  font-family: var(--font-sans) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #ffffff !important;
  margin: 0 0 4px !important;
}

.odg-footer__col a {
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  padding: 2px 0 !important;
}

.odg-footer__col a:hover {
  color: #ffffff !important;
}

.odg-footer__bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.odg-footer__copy {
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.56) !important;
  margin: 0 !important;
}

.odg-footer__socials {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.odg-footer__social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

.odg-footer__social-link:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* ============================================================================
   11. 100% Full-Width DOM Containers Everywhere & Floating Circular Cart Button
   ========================================================================== */

/* Keep strong tags inside buttons & CTAs white/inherited instead of dark ink */
.button strong,
.btn strong,
.pay-bar strong,
.pay-bar .button strong,
.ue-basket-card__cta strong,
.ue-dish-modal__cta strong,
.ue-drawer-cta strong,
.ue-cart-btn strong {
  color: inherit !important;
}

/* Eliminate all 90%-width container shrinkage and max-width gutters across every route */
.customer-flow-shell,
.customer-flow-shell .home-main,
.customer-flow-shell .home-main.ue-store-main,
.customer-flow-shell .home-main.ue-checkout-main,
.customer-flow-shell .home-main.ue-track-main,
body.app-body .app-main,
.app-main,
.app-wide,
body.app-body .setup-main,
body.app-body .support-main,
.support-main,
body.app-body .app-main:has(.form-narrow),
.ue-setup-shell,
.form-narrow,
.settings-page,
.vendor-orders-main,
.vendor-menu-main,
.vendor-hours-main,
.rider-home-main,
.rider-active-main,
.rider-earnings-main,
.rider-job-main,
.home-main > .view,
.home-main > .view > *,
#view-for-you,
#view-food-ai,
#view-orders,
#view-wallet,
#view-alerts,
#view-settings {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}

.customer-flow-shell .home-main,
.customer-flow-shell .home-main.ue-store-main,
.customer-flow-shell .home-main.ue-checkout-main,
.customer-flow-shell .home-main.ue-track-main,
body.app-body .app-main,
body.app-body .support-main {
  padding: 16px clamp(16px, 2.5vw, 28px) 32px !important;
}

@media (max-width: 800px) {
  body.home-body .home-main,
  body.app-body .home-main,
  body.home-body .customer-home-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px 0 !important;
    box-sizing: border-box !important;
  }
}

/* Top navigation bar (.app-top) — clean, solid white, never oversized or bleeding through */
.app-top,
body.app-body .app-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 54px !important;
  padding: 8px 16px !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.app-top h1,
body.app-body .app-top h1,
.customer-flow-top h1 {
  font-family: var(--font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.016em !important;
  line-height: 1.25 !important;
  color: #1d1d1f !important;
  margin: 0 auto 0 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Storefront (/app/user/vendor) header, toolbar & menu cards — normal readable scale + fitted badge */
.ue-store-cover {
  width: 100% !important;
  height: clamp(160px, 22vw, 220px) !important;
  border-radius: 16px !important;
  margin-bottom: 14px !important;
  outline: 0 !important;
  border: 0 !important;
}

.ue-store-info {
  gap: 14px !important;
  padding-bottom: 12px !important;
  border: 0 !important;
}

.ue-store-info__main .set-name,
#v-name {
  font-size: clamp(1.45rem, 2.5vw, 1.85rem) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.ue-store-meta {
  font-size: 0.875rem !important;
  gap: 6px !important;
  margin: 4px 0 0 !important;
}

.ue-store-address {
  font-size: 0.84375rem !important;
  gap: 6px !important;
  margin: 2px 0 0 !important;
}

.ue-store-metrics {
  padding: 12px 16px !important;
  border-radius: 14px !important;
  gap: 16px !important;
  background: #f5f5f7 !important;
}

.ue-store-metric strong {
  font-size: 0.9375rem !important;
}

.ue-store-metric span {
  font-size: 0.78125rem !important;
}

.ue-store-toolbar {
  top: 54px !important;
  padding: 8px 0 !important;
  margin-bottom: 16px !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.ue-store-tab {
  padding: 8px 14px !important;
  font-size: 0.84375rem !important;
  border-radius: 999px !important;
}

.ue-store-search {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  gap: 8px !important;
}

.ue-store-search input {
  font-size: 0.875rem !important;
  height: 40px !important;
}

.ue-menu-section {
  margin-bottom: 24px !important;
  scroll-margin-top: 140px !important;
}

.ue-menu-section__head {
  margin-bottom: 12px !important;
}

.ue-menu-section__head h2 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.ue-menu-grid {
  gap: 12px !important;
}

#v-menu .ue-menu-card,
.ue-menu-card {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: #f5f5f7 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#v-menu .ue-menu-card > .ue-menu-card__body,
#v-menu .menu-item > div.ue-menu-card__body,
.ue-menu-card__body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#v-menu .ue-menu-card__badge,
.ue-menu-card__badge {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  justify-self: start !important;
  width: fit-content !important;
  max-width: max-content !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 0 0 2px !important;
}

#v-menu .ue-menu-card__title,
.ue-menu-card__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.012em !important;
  color: #1d1d1f !important;
  margin: 0 !important;
}

.ue-menu-card__price-row {
  gap: 8px !important;
  margin-top: 2px !important;
}

.ue-menu-card__price {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
}

.ue-menu-card__approval {
  font-size: 0.8125rem !important;
}

.ue-menu-card__desc {
  font-size: 0.84375rem !important;
  line-height: 1.42 !important;
  color: #6e6e73 !important;
  margin: 2px 0 0 !important;
  -webkit-line-clamp: 2 !important;
}

#v-menu .ue-menu-card > .ue-menu-card__media,
.ue-menu-card__media {
  position: relative !important;
  width: 108px !important;
  height: 108px !important;
  border-radius: 14px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.ue-menu-card__add {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  bottom: 8px !important;
  right: 8px !important;
}

/* Floating Circular Cart Button — fixed at bottom-right, 10% offset from bottom */
.pay-bar,
.pay-bar.floating-cart,
body.home-body .pay-bar,
body.app-body .pay-bar {
  position: fixed !important;
  bottom: 10% !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  z-index: 100 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  display: block !important;
}

.pay-bar .button,
.pay-bar .floating-cart__btn,
body.home-body .pay-bar .button,
body.app-body .pay-bar .button {
  pointer-events: auto !important;
  position: relative !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #e02927 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, background-color 0.18s ease !important;
}

/* Global zero-shadow enforcement across all elements */
*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

.pay-bar .button:hover,
.pay-bar .floating-cart__btn:hover {
  background: #c81e1c !important;
  transform: scale(1.04) !important;
}

.pay-bar .button:active,
.pay-bar .floating-cart__btn:active {
  transform: scale(0.96) !important;
}

.pay-bar .button svg,
.pay-bar .floating-cart__btn svg,
.pay-bar .button [data-lucide] {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.2 !important;
  color: #ffffff !important;
  margin: 0 !important;
  display: block !important;
}

.floating-cart__badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #1d1d1f !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  font-family: var(--font-sans) !important;
  font-size: 0.78125rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}