/* ═══════════════════════════════════════════════════════════
   Bangkok Kitchen v2 — Premium
   Fonts: Playfair Display (display) · Plus Jakarta Sans (body)
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────── */
:root {
  /* Brand — Bangkok Forest Green (logo match) */
  --o:       #0B4D3C;
  --o-mid:   #166548;
  --o-light: #e6f4ed;
  --o-glow:  rgba(11,77,60,.15);
  --o-shad:  rgba(11,77,60,.32);

  /* Neutral scale — light mode */
  --ink:     #0D0D0D;
  --ink-90:  #1C1C1C;
  --ink-70:  #4A4A4A;
  --ink-50:  #717171;
  --ink-30:  #ABABAB;
  --ink-15:  #DEDEDE;
  --ink-07:  #F3F3F1;
  --white:   #FFFFFF;

  /* Semantic */
  --bg:       var(--white);
  --bg-tint:  #FAFAF8;
  --surface:  var(--white);
  --surface-2:#F8F7F5;
  --border:   #EBEBEB;
  --border-2: #D9D9D9;
  --text:     var(--ink);
  --text-2:   var(--ink-70);
  --text-3:   var(--ink-50);
  --text-ph:  var(--ink-30);

  /* Inputs — dedicated tokens so dropdowns follow theme */
  --input-bg:      var(--white);
  --input-border:  var(--border);
  --input-text:    var(--text);
  --input-ph:      var(--ink-30);
  --input-focus:   var(--o);
  --select-arrow:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23717171'/%3E%3C/svg%3E");

  /* Status */
  --success:  #0D7A3A;
  --danger:   #C41A0E;

  /* Typography */
  --font-d: 'Playfair Display', Georgia, serif;
  --font-b: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Layout */
  --nav-h:  64px;
  --max-w:  1200px;
  --pad:    1.5rem;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Motion */
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --t:       .2s var(--ease);
  --t-slow:  .45s var(--ease);

  /* Shadows */
  --sh-xs:  0 1px 4px rgba(0,0,0,.05);
  --sh-sm:  0 2px 10px rgba(0,0,0,.07);
  --sh:     0 6px 24px rgba(0,0,0,.08);
  --sh-lg:  0 16px 52px rgba(0,0,0,.11);
  --sh-xl:  0 28px 80px rgba(0,0,0,.14);
}

/* ── Dark mode — single authoritative override ──────────── */
[data-theme="dark"] {
  /* Surfaces — OLED-optimised */
  --bg:       #0A0A0A;
  --bg-tint:  #111111;
  --surface:  #111111;
  --surface-2:#1A1A1A;
  --border:   #2C2C2C;
  --border-2: #383838;
  --text:     #F0F0F0;
  --text-2:   #B8B8B8;
  --text-3:   #787878;
  --text-ph:  #555555;
  --o-light:  #0a2419;
  --ink-07:   #1A1A1A;

  /* Inputs */
  --input-bg:     #181818;
  --input-border: #2C2C2C;
  --input-text:   #F0F0F0;
  --input-ph:     #555555;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23787878'/%3E%3C/svg%3E");

  /* Shadows — heavier in dark */
  --sh:    0 6px 24px rgba(0,0,0,.5);
  --sh-lg: 0 16px 52px rgba(0,0,0,.62);
  --sh-xl: 0 28px 80px rgba(0,0,0,.72);
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  overflow-x:hidden;          /* prevent any element from causing horizontal scroll */
  max-width:100vw;
}
body {
  font-family:var(--font-b);
  background:var(--bg); color:var(--text);
  line-height:1.6;
  overflow-x:hidden; max-width:100vw;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--t-slow),color var(--t-slow);
  position:relative;           /* contain absolute children */
}
a,button { font-family:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button { border:none; background:none; }
img { max-width:100%; height:auto; display:block; }
input,textarea,select { font-family:inherit; }

/* ── Layout ─────────────────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad); }
.section   { padding:5rem 0; }
.section--tinted { background:var(--bg-tint); }
.page { display:none; padding-top:var(--nav-h); min-height:calc(100vh - var(--nav-h)); }
.page.active { display:block; animation:fadeUp .28s var(--ease); }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ── NAV ────────────────────────────────────────────────── */
.nav {
  position:fixed; inset:0 0 auto; height:var(--nav-h); z-index:900;
  /* Backdrop always active — even transparent feels like glass */
  background: transparent;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid transparent;
  /* Smooth transition for all nav states */
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* ── Nav: frosted glass state (default for most pages + scrolled) ── */
.nav--glass {
  background: rgba(255,255,255,.88);
  border-bottom-color: rgba(0,0,0,.07);
  box-shadow: 0 1px 24px rgba(0,0,0,.07);
}
[data-theme="dark"] .nav--glass {
  background: rgba(10,10,8,.88);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow: 0 1px 24px rgba(0,0,0,.28);
}

/* ── Nav: transparent state (at top of dark-hero pages: home, profile) ── */
.nav--transparent {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
/* All items go white when transparent over dark bg */
.nav--transparent .nav__logo-text { color: #fff; }
.nav--transparent .nav__link { color: rgba(255,255,255,.78); }
.nav--transparent .nav__link:hover { color: #fff; background: rgba(255,255,255,.11); }
.nav--transparent .nav__link.active { color: var(--o); background: rgba(11,77,60,.18); }
.nav--transparent .nav__icon-btn { color: rgba(255,255,255,.85); }
.nav--transparent .nav__icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Cart btn: pill with subtle glass look */
.nav--transparent .nav__cart-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}
.nav--transparent .nav__cart-btn:hover { background: rgba(255,255,255,.25); transform: scale(1.04); }
.nav--transparent .nav__cart-btn span { background: rgba(255,255,255,.18); }
/* Auth btn (orange) — already visible on dark, keep as-is */
/* Burger bars: white */
.nav--transparent .nav__burger span { background: #fff; }
.nav--transparent .nav__burger:hover { background: rgba(255,255,255,.12); }

/* Legacy scrolled class — keep for compat, glass state handles it now */
.nav.scrolled.nav--glass { box-shadow: 0 2px 28px rgba(0,0,0,.09); }

.nav__inner { height:100%; display:flex; align-items:center; gap:1rem; }
.nav__logo { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.nav__logo-mark {
  width:36px; height:36px; background:var(--o); color:#fff;
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-size:.82rem; font-weight:700;
  flex-shrink:0; box-shadow:0 3px 12px var(--o-shad);
  transition:transform var(--t);
}
.nav__logo:hover .nav__logo-mark { transform:scale(1.06); }
.nav__logo-mark--sm { width:28px; height:28px; font-size:.72rem; border-radius:8px; }
.nav__logo-text { font-family:var(--font-d); font-size:.82rem; font-weight:600; line-height:1.2; color:var(--text); transition: color .35s ease; }
.nav__links { display:flex; align-items:center; gap:.1rem; margin-left:auto; }
.nav__link { padding:.46rem .88rem; border-radius:var(--r-sm); font-size:.87rem; font-weight:500; color:var(--text-2); transition:color .35s ease,background var(--t); cursor:pointer; user-select:none; }
.nav__link:hover { color:var(--text); background:var(--ink-07); }
.nav__link.active { color:var(--o); background:var(--o-light); font-weight:600; }
.nav__right { display:flex; align-items:center; gap:.3rem; margin-left:auto; }
.nav__icon-btn { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.88rem; color:var(--text-2); position:relative; transition:background var(--t),color .35s ease; }
.nav__icon-btn:hover { background:var(--ink-07); color:var(--text); }
.nav__badge { position:absolute; top:3px; right:3px; background:var(--o); color:#fff; font-size:.58rem; font-weight:800; padding:.1rem .3rem; border-radius:100px; min-width:15px; text-align:center; line-height:1.4; }
.nav__cart-btn { display:flex; align-items:center; gap:.42rem; padding:.46rem .9rem; background:var(--ink); color:#fff; border-radius:100px; font-size:.87rem; font-weight:600; border:1px solid transparent; transition:background .35s ease,transform var(--t),border-color .35s ease; }
.nav__cart-btn:hover { background:var(--ink-90); transform:scale(1.04); }
.nav__cart-btn.bounce { animation:cartBounce .5s var(--spring); }
@keyframes cartBounce { 0%,100%{transform:scale(1)} 40%{transform:scale(1.18)} 70%{transform:scale(.95)} }
[data-theme="dark"] .nav__cart-btn { background:var(--o); box-shadow:0 3px 12px var(--o-shad); }
.nav__cart-btn span { background:rgba(255,255,255,.2); color:#fff; font-size:.64rem; font-weight:800; padding:.08rem .36rem; border-radius:100px; min-width:18px; text-align:center; line-height:1.55; }
.nav__auth-btn { padding:.48rem 1.1rem; border-radius:10px; background:var(--o); color:#fff; font-size:.85rem; font-weight:600; box-shadow:0 3px 14px var(--o-shad); transition:background var(--t),transform var(--t),box-shadow var(--t); white-space:nowrap; }
.nav__auth-btn:hover { background:#0B4D3C; transform:translateY(-1px); box-shadow:0 6px 20px var(--o-shad); }
.nav__burger { width:36px; height:36px; border-radius:var(--r-sm); display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; transition:background var(--t); }
.nav__burger:hover { background:var(--ink-07); }
.nav__burger span { display:block; width:18px; height:1.5px; background:var(--text); border-radius:2px; transition:transform var(--t),opacity var(--t),background .35s ease; }

/* ── HERO ───────────────────────────────────────────────── */
#page-home { padding-top:0; }
.hero { min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden; background:#051a10; padding-top:var(--nav-h); }
.hero__deco { position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 55% 65% at 78% 48%,rgba(11,77,60,.065) 0%,transparent 65%), radial-gradient(ellipse 35% 45% at 85% 12%,rgba(11,77,60,.04) 0%,transparent 60%); }
/* hero__deco::after dot pattern removed — hero has photo background, dots invisible */
.hero__inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding:5rem var(--pad); max-width:var(--max-w); margin:0 auto; width:100%; }
.hero__eyebrow { display:inline-flex; align-items:center; gap:.55rem; font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--o); margin-bottom:1.4rem; }
.hero__eyebrow::before { content:''; display:block; width:22px; height:2px; background:var(--o); border-radius:2px; }
.hero__title { font-family:var(--font-d); font-size:clamp(2.8rem,5.2vw,4.6rem); font-weight:700; line-height:1.18; letter-spacing:-.02em; color:var(--text); margin-bottom:1.4rem; padding-bottom:.15em; }
/* "Bangkok" — Shiny premium gold with sweeping shimmer */
.hero__title em {
  position: relative;
  display: inline-block;
  font-style: italic;
  font-weight: 700;
  line-height: 1.25;     /* extra room for italic descender (g, k tails) */
  padding-bottom: .1em;
  overflow: visible;
  /* Horizontal gold gradient with bright shine bands */
  background: linear-gradient(
    100deg,
    #B8860B 0%,
    #D4A437 18%,
    #F7C948 30%,
    #FFE9A3 42%,    /* bright highlight band */
    #FFFBEA 50%,    /* peak shine */
    #FFE9A3 58%,
    #F7C948 70%,
    #D4A437 82%,
    #B8860B 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Glow + depth */
  filter:
    drop-shadow(0 1px 0 rgba(255,233,163,.5))
    drop-shadow(0 2px 6px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(247,201,72,.45));
  padding: 0 .08em;
  /* Sweeping shine animation */
  animation: goldSweep 3.5s ease-in-out infinite;
  /* Subtle hover/idle scale breathing */
  transition: transform .4s var(--spring);
}
.hero__title em::before {
  /* Sparkle dot — top-right */
  content: '✦';
  position: absolute;
  top: -.15em; right: -.35em;
  font-size: .35em;
  color: #FFE9A3;
  text-shadow: 0 0 8px rgba(255,233,163,.9), 0 0 16px rgba(247,201,72,.6);
  animation: sparkleSpin 2.8s ease-in-out infinite;
  -webkit-text-fill-color: #FFE9A3; /* override the transparent text-fill */
  pointer-events: none;
}
/* Left sparkle removed — only right-side ::before sparkle remains */
@keyframes goldSweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -50% 0; }
}
@keyframes sparkleSpin {
  0%, 100% { transform: scale(0) rotate(0deg);    opacity: 0; }
  20%       { transform: scale(1) rotate(90deg);  opacity: 1; }
  50%       { transform: scale(1.4) rotate(180deg); opacity: .9; }
  80%       { transform: scale(1) rotate(270deg); opacity: 1; }
}
/* Hover: gentle breathing */
.hero__content:hover .hero__title em { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .hero__title em,
  .hero__title em::before { animation: none !important; }
  .hero__title em::before { display: none; }
}
.hero__sub { font-size:1rem; color:var(--text-2); line-height:1.72; max-width:400px; margin-bottom:2.4rem; font-weight:400; }
.hero__actions { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-bottom:3rem; }
.hero__stats { display:flex; align-items:center; gap:1.5rem; }
.hero__stat strong { display:block; font-size:1.25rem; font-weight:700; color:#fff; line-height:1; }
.hero__stat span { font-size:.7rem; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem; display:block; }
.hero__stat-div { width:1px; height:30px; background:rgba(255,255,255,.2); }
.hero__visual { display:flex; align-items:center; justify-content:center; position:relative; z-index:2; }
.hero__ring { width:clamp(260px,36vw,450px); height:clamp(260px,36vw,450px); border-radius:50%; background:conic-gradient(from 0deg,var(--o-light),#ffe8d6,var(--o-light)); display:flex; align-items:center; justify-content:center; position:relative; animation:floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.hero__ring::before { content:''; position:absolute; inset:-14px; border-radius:50%; border:1.5px dashed rgba(11,77,60,.18); animation:spin 35s linear infinite; }
.hero__ring::after  { content:''; position:absolute; inset:-28px; border-radius:50%; border:1px  dashed rgba(11,77,60,.08); animation:spin 50s linear infinite reverse; }
@keyframes spin { to{transform:rotate(360deg)} }
.hero__disc { width:72%; height:72%; border-radius:50%; background:var(--o); display:flex; align-items:center; justify-content:center; box-shadow:0 24px 70px var(--o-shad),0 0 0 12px rgba(11,77,60,.08); }
.hero__emoji { font-size:clamp(3.5rem,7vw,6rem); line-height:1; filter:drop-shadow(0 6px 16px rgba(0,0,0,.2)); }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.7rem 1.65rem; border-radius:12px; background:var(--o); color:#fff; font-weight:600; font-size:.91rem; box-shadow:0 4px 18px var(--o-shad); transition:background var(--t),transform var(--t),box-shadow var(--t); white-space:nowrap; }
.btn-primary:hover { background:#0B4D3C; transform:translateY(-2px); box-shadow:0 8px 30px var(--o-shad); }
.btn-primary:active { transform:none; }
.btn-primary.btn-full { width:100%; }
.btn-primary.btn-sm { padding:.44rem 1.05rem; font-size:.82rem; border-radius:8px; }
.btn-primary.btn-lg { padding:.82rem 2rem; font-size:.96rem; border-radius:14px; }
.btn-primary:disabled { opacity:.55; pointer-events:none; }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.68rem 1.55rem; border-radius:12px; border:1.5px solid var(--o); color:var(--o); font-weight:600; font-size:.91rem; transition:background var(--t),transform var(--t); }
.btn-outline:hover { background:var(--o-light); transform:translateY(-1px); }
.btn-outline.btn-sm { padding:.42rem .95rem; font-size:.81rem; border-radius:8px; }
.btn-outline-dark { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.7rem 1.65rem; border-radius:12px; border:1.5px solid var(--border-2); color:var(--text-2); font-weight:600; font-size:.91rem; transition:border-color var(--t),color var(--t),background var(--t),transform var(--t); }
.btn-outline-dark:hover { border-color:var(--text); color:var(--text); background:var(--ink-07); transform:translateY(-1px); }
.btn-outline-dark.btn-lg { padding:.82rem 2rem; font-size:.96rem; border-radius:14px; }
.btn-ghost-dark { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.68rem 1.5rem; border-radius:100px; color:var(--text-2); font-weight:500; font-size:.9rem; transition:color var(--t),background var(--t); }
.btn-ghost-dark:hover { color:var(--text); background:var(--ink-07); }
.btn-back { display:inline-flex; align-items:center; gap:.5rem; color:var(--text-2); font-size:.87rem; font-weight:500; padding:.4rem 0; margin-bottom:1.75rem; transition:color var(--t); }
.btn-back:hover { color:var(--text); }
.btn-link { background:none; border:none; color:var(--o); font-size:.83rem; font-weight:600; cursor:pointer; transition:opacity var(--t); }
.btn-link:hover { opacity:.7; }
.icon-btn { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-2); font-size:.87rem; transition:background var(--t),color var(--t); }
.icon-btn:hover { background:var(--ink-07); color:var(--text); }
.free-tag { color:var(--success); font-weight:700; font-size:.85rem; }

/* ── SEARCH ─────────────────────────────────────────────── */
.search-wrap { position:relative; z-index:10; margin-top:-1.75rem; }
.search-box { position:relative; max-width:600px; margin:0 auto; }
.search-box--sm { max-width:none; }
.search-box > i { position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:.87rem; pointer-events:none; }
.search-box__input { width:100%; padding:.88rem 1rem .88rem 2.85rem; border-radius:100px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-size:.92rem; box-shadow:var(--sh); transition:border-color var(--t),box-shadow var(--t),background var(--t-slow); }
.search-box__input:focus { outline:none; border-color:var(--o); box-shadow:0 0 0 4px var(--o-glow),var(--sh); }
.search-box__input::placeholder { color:var(--text-ph); }
.search-results { position:absolute; top:calc(100% + .5rem); left:0; right:0; background:var(--surface); border-radius:var(--r); border:1px solid var(--border); box-shadow:var(--sh-lg); z-index:200; overflow:hidden; animation:dropIn .18s var(--ease); }
.search-results.hidden { display:none; }
@keyframes dropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.search-result { display:flex; align-items:center; gap:.9rem; padding:.75rem 1rem; cursor:pointer; border-bottom:1px solid var(--border); transition:background var(--t); }
.search-result:last-child { border:none; }
.search-result:hover { background:var(--surface-2); }
.search-result img { width:44px; height:44px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; }
.search-result-name { font-weight:600; font-size:.87rem; margin-bottom:.15rem; }
.search-result-price { color:var(--o); font-weight:700; font-size:.82rem; }

/* ── SECTION HEADER ─────────────────────────────────────── */
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
.section-title { font-family:var(--font-d); font-size:clamp(1.5rem,3vw,2rem); font-weight:700; letter-spacing:-.015em; line-height:1.2; }
.section-link { color:var(--o); font-weight:600; font-size:.85rem; white-space:nowrap; cursor:pointer; transition:opacity var(--t); }
.section-link:hover { opacity:.7; }
.tag-hot { font-size:.85rem; }

/* ── CAT SCROLL ─────────────────────────────────────────── */
.cat-scroll { display:flex; gap:.85rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cat-scroll::-webkit-scrollbar { display:none; }
.cat-chip { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.9rem 1.3rem; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); cursor:pointer; white-space:nowrap; flex-shrink:0; min-width:90px; transition:border-color var(--t),background var(--t),transform var(--t),box-shadow var(--t); }
.cat-chip:hover,.cat-chip.active { border-color:var(--o); background:var(--o-light); transform:translateY(-3px); box-shadow:var(--sh); }
.cat-chip__emoji { font-size:1.8rem; line-height:1; }
.cat-chip__name  { font-size:.76rem; font-weight:600; letter-spacing:.01em; color:var(--text); }

/* ── CAT TABS ───────────────────────────────────────────── */
.cat-tabs { display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.75rem; margin-bottom:2rem; scrollbar-width:none; }
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab { padding:.5rem 1.1rem; border-radius:100px; border:1.5px solid var(--border); background:var(--surface); color:var(--text-2); font-size:.83rem; font-weight:600; white-space:nowrap; flex-shrink:0; transition:all var(--t); cursor:pointer; }
.cat-tab:hover { border-color:var(--o); color:var(--o); background:var(--o-light); }
.cat-tab.active { background:var(--o); border-color:var(--o); color:#fff; box-shadow:0 4px 16px var(--o-shad); }

/* ── GRID ───────────────────────────────────────────────── */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:1rem; }
.grid--sm { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:.75rem; }

/* ── ITEM CARD ──────────────────────────────────────────── */
.item-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:transform var(--t),box-shadow var(--t),border-color var(--t); }
.item-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent; }
.item-card__img-wrap { position:relative; height:148px; overflow:hidden; background:var(--surface-2); flex-shrink:0; }
.item-card__img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.item-card:hover .item-card__img { transform:scale(1.08); }
.item-card__badge { position:absolute; top:.75rem; left:.75rem; background:var(--o); color:#fff; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .58rem; border-radius:100px; }
.item-card__badge--special { background:var(--ink); }
.item-card__fav { position:absolute; top:.75rem; right:.75rem; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.92); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:var(--text-2); font-size:.83rem; transition:color var(--t),background var(--t),transform var(--t); }
.item-card__fav:hover,.item-card__fav.active { color:var(--danger); background:#fff; transform:scale(1.12); }
.item-card__body { padding:.75rem; flex:1; display:flex; flex-direction:column; }
.item-card__cat  { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--o); margin-bottom:.2rem; }
.item-card__name { font-weight:700; font-size:.95rem; margin-bottom:.2rem; line-height:1.4; color:var(--text); }
.item-card__desc { font-size:.74rem; color:var(--text-2); flex:1; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4; margin-bottom:.6rem; }
.item-card__foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.item-card__price { font-size:.9rem; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.item-card__add { width:36px; height:36px; border-radius:50%; background:var(--o); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; box-shadow:0 2px 8px var(--o-shad); transition:background var(--t),transform var(--spring); }
.item-card__add:hover,.item-card__add.added { background:#065f46; transform:scale(1.18); }
.item-card.unavailable { opacity:.52; pointer-events:none; filter:grayscale(.3); }
.hscroll { display:flex; gap:1.1rem; overflow-x:auto; padding-bottom:.75rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.hscroll::-webkit-scrollbar { height:3px; }
.hscroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.hscroll .item-card { min-width:218px; flex-shrink:0; scroll-snap-align:start; }

/* ── FORM ELEMENTS (theme-aware) ────────────────────────── */
.input,
.textarea,
.select {
  width:100%;
  padding:.75rem 1rem;
  border-radius:var(--r-sm);
  border:1.5px solid var(--input-border);
  background:var(--input-bg);
  color:var(--input-text);
  font-size:.91rem;
  font-family:var(--font-b);
  transition:border-color var(--t),box-shadow var(--t),background var(--t-slow),color var(--t-slow);
  -webkit-appearance:none;
  appearance:none;
}
.input:focus,.textarea:focus,.select:focus {
  outline:none;
  border-color:var(--input-focus);
  box-shadow:0 0 0 4px var(--o-glow);
}
.input::placeholder,.textarea::placeholder { color:var(--input-ph); }
.textarea { resize:vertical; min-height:80px; }

/* Select dropdown — uses CSS var for arrow so dark mode works */
.select {
  background-image:var(--select-arrow);
  background-repeat:no-repeat;
  background-position:right .9rem center;
  padding-right:2.4rem;
  cursor:pointer;
}
/* Native <option> elements styling — limited by browser but background/color covered */
.select option {
  background:var(--input-bg);
  color:var(--input-text);
}

.label { display:block; font-size:.79rem; font-weight:600; color:var(--text-2); margin-bottom:.4rem; letter-spacing:.02em; }
.form-group { margin-bottom:1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.75rem; margin-bottom:1.25rem; }
.form-card__title { font-family:var(--font-d); font-size:1.08rem; font-weight:700; letter-spacing:-.01em; margin-bottom:1.2rem; padding-bottom:.7rem; border-bottom:1px solid var(--border); color:var(--text); }

/* ── LOCATION CARD ──────────────────────────────────────── */
.location-card {
  background:var(--surface-2);
  border:1.5px solid var(--border);
  border-radius:var(--r);
  padding:1rem 1.1rem;
  margin-bottom:1rem;
  transition:border-color var(--t),background var(--t-slow);
}
.location-card.located { border-color:var(--success); background:rgba(13,122,58,.06); }
.location-card__head { display:flex; align-items:center; gap:.85rem; }
.location-card__icon { width:38px; height:38px; border-radius:50%; background:var(--o-light); color:var(--o); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
.location-card__title { font-weight:700; font-size:.9rem; margin-bottom:.1rem; }
.location-card__sub { font-size:.78rem; color:var(--text-2); }
.location-card__head .btn-primary { margin-left:auto; flex-shrink:0; }
.location-card__result { display:flex; align-items:flex-start; gap:.6rem; margin-top:.8rem; padding-top:.75rem; border-top:1px solid var(--border); font-size:.82rem; color:var(--text-2); line-height:1.5; }
.location-card__result i { margin-top:.1rem; flex-shrink:0; }
.location-card__result.hidden { display:none; }

/* ── CART DRAWER ────────────────────────────────────────── */
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:1000; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.cart-drawer { position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw); background:var(--surface); z-index:1001; box-shadow:var(--sh-xl); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .38s var(--ease); }
.cart-drawer.open { transform:translateX(0); }
.cart-drawer__head { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.cart-drawer__head h2 { font-family:var(--font-d); font-size:1.22rem; font-weight:700; letter-spacing:-.01em; }
.cart-drawer__body { flex:1; overflow-y:auto; padding:1rem 1.5rem; }
.cart-drawer__foot { padding:1.2rem 1.5rem; border-top:1px solid var(--border); flex-shrink:0; }
.cart-item { display:flex; gap:.9rem; padding:.85rem 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.cart-item:last-child { border:none; }
.cart-item__img { width:58px; height:58px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; background:var(--surface-2); }
.cart-item__info { flex:1; min-width:0; }
.cart-item__name { font-weight:600; font-size:.88rem; line-height:1.3; margin-bottom:.2rem; }
.cart-item__price { color:var(--o); font-weight:700; font-size:.88rem; }
.cart-item__qty { display:flex; align-items:center; gap:.45rem; margin-top:.42rem; }
.qty-btn { width:36px; height:36px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.78rem; color:var(--text); flex-shrink:0; transition:background var(--t),border-color var(--t),transform var(--t); }
.qty-btn:hover { background:var(--o-light); border-color:var(--o); color:var(--o); transform:scale(1.1); }
.qty-val { font-weight:700; min-width:20px; text-align:center; font-size:.92rem; }
.cart-item__del { color:var(--text-3); font-size:.82rem; flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-xs); cursor:pointer; transition:color var(--t),background var(--t); }
.cart-item__del:hover { color:var(--danger); background:rgba(196,26,14,.1); }
.coupon-row { display:flex; gap:.5rem; margin-bottom:1rem; }
.coupon-row .input { border-radius:100px; }
.cart-coupon-hint { font-size:.78rem; color:var(--text-3); margin-bottom:.85rem; display:flex; align-items:center; gap:.4rem; }
.cart-coupon-hint i { color:var(--o); font-size:.75rem; }
.cart-summary { margin-bottom:1rem; }
.sum-row { display:flex; justify-content:space-between; font-size:.86rem; padding:.28rem 0; color:var(--text-2); }
.sum-row.total { font-weight:700; font-size:.96rem; color:var(--text); border-top:1px solid var(--border); margin-top:.5rem; padding-top:.7rem; }
.sum-row.discount { color:var(--success); font-weight:600; }

/* ── MODALS ─────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1100; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal { position:fixed; top:50%; left:50%; z-index:1101; transform:translate(-50%,-50%) scale(.93); opacity:0; background:var(--surface); border-radius:var(--r-xl); padding:2.25rem; width:min(500px,calc(100vw - 1.5rem)); max-height:90svh; overflow-y:auto; box-shadow:var(--sh-xl); transition:transform .28s var(--spring),opacity .22s var(--ease); }
.modal.show { transform:translate(-50%,-50%) scale(1); opacity:1; }
.modal__close { position:absolute; top:1rem; right:1rem; width:32px; height:32px; border-radius:50%; background:var(--surface-2); color:var(--text-2); display:flex; align-items:center; justify-content:center; font-size:.87rem; transition:background var(--t),color var(--t); }
.modal__close:hover { background:var(--border); color:var(--text); }
.modal__title { font-family:var(--font-d); font-size:1.45rem; font-weight:700; margin-bottom:1.5rem; letter-spacing:-.01em; }
.modal--item { width:min(700px,calc(100vw - 1.5rem)); padding:0; overflow:hidden; }
.modal--success { text-align:center; }
.auth-tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:1.75rem; }
.auth-tab { flex:1; padding:.68rem; text-align:center; font-size:.87rem; font-weight:600; color:var(--text-2); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-2px; transition:color var(--t),border-color var(--t); }
.auth-tab.active { color:var(--o); border-color:var(--o); }
.auth-err { background:rgba(196,26,14,.1); border-radius:var(--r-sm); padding:.72rem 1rem; color:var(--danger); font-size:.85rem; margin-bottom:1rem; border-left:3px solid var(--danger); display:none; }
.item-modal__img-wrap { position:relative; }
.item-modal__img { width:100%; height:285px; object-fit:cover; display:block; }
.item-modal__unavail { position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.9rem; letter-spacing:.05em; }
.item-modal__body { padding:1.75rem; }
.item-modal__cat  { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--o); margin-bottom:.6rem; }
.item-modal__name { font-family:var(--font-d); font-size:1.6rem; font-weight:700; margin-bottom:.75rem; letter-spacing:-.01em; }
.item-modal__desc { color:var(--text-2); margin-bottom:1.4rem; line-height:1.72; font-size:.92rem; }
/* item-modal__foot removed — replaced by .sheet-action-bar */
.success-icon { width:68px; height:68px; border-radius:50%; background:rgba(13,122,58,.12); color:var(--success); font-size:1.85rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; }
.modal--success h2 { font-family:var(--font-d); font-size:1.8rem; font-weight:700; margin-bottom:.5rem; }
.modal--success p { color:var(--text-2); margin-bottom:1.9rem; line-height:1.65; }
.modal--success button { margin:.35rem; }

/* ── PWA INSTALL BANNER ─────────────────────────────────── */
.pwa-banner {
  position:fixed; bottom:1.25rem; left:50%; transform:translateX(-50%) translateY(120px);
  width:min(420px,calc(100vw - 2rem));
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:1rem 1.15rem;
  box-shadow:var(--sh-xl); z-index:800;
  display:flex; align-items:center; gap:.9rem;
  transition:transform .4s var(--spring),opacity .3s var(--ease);
  opacity:0;
}
.pwa-banner.show { transform:translateX(-50%) translateY(0); opacity:1; }
.pwa-banner__icon { width:48px; height:48px; border-radius:12px; background:var(--o); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; box-shadow:0 4px 12px var(--o-shad); }
.pwa-banner__text { flex:1; min-width:0; }
.pwa-banner__title { font-weight:700; font-size:.88rem; margin-bottom:.1rem; }
.pwa-banner__sub { font-size:.76rem; color:var(--text-2); }
.pwa-banner__actions { display:flex; gap:.45rem; flex-shrink:0; }
.pwa-banner__dismiss { width:28px; height:28px; border-radius:50%; background:var(--surface-2); color:var(--text-3); display:flex; align-items:center; justify-content:center; font-size:.75rem; transition:background var(--t),color var(--t); }
.pwa-banner__dismiss:hover { background:var(--border); color:var(--text); }

/* iOS specific PWA hint */
.ios-hint { display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--text-2); margin-top:.5rem; }
.ios-hint i { color:var(--o); }

/* ── PAGE HEADERS ───────────────────────────────────────── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1.75rem 0 1.5rem; }
.page-title { font-family:var(--font-d); font-size:clamp(1.9rem,4vw,2.6rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.menu-controls { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }

/* ── ORDER CARDS ────────────────────────────────────────── */
#page-orders .container { padding-top:1.5rem; padding-bottom:3rem; }
.order-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .75rem 1rem;
  margin-bottom: .45rem;
  cursor: pointer;
  display: flex; align-items: center; gap: .85rem;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.order-card:hover { background: var(--surface-2); border-color: var(--border-2); box-shadow: var(--sh-xs); }
.order-card__icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--o-light); color: var(--o);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; flex-shrink: 0;
}
.order-card__body { flex: 1; min-width: 0; }
.order-card__head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.18rem; }
.order-card__code { font-weight:700; font-size:.84rem; }
.order-card__items { font-size:.75rem; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; margin-bottom:.18rem; }
.order-card__foot { display:flex; align-items:center; gap:.6rem; }
.order-card__date { font-size:.7rem; color:var(--text-3); }
.order-card__total { font-weight:700; font-size:.82rem; color:var(--o); margin-left:auto; }
#page-order-detail .container { padding-top:1.5rem; padding-bottom:3rem; }
.order-detail-grid { display:grid; grid-template-columns:1fr 340px; gap:1.75rem; align-items:start; }

/* ── STATUS BADGES ──────────────────────────────────────── */
.status { display:inline-block; padding:.22rem .68rem; border-radius:100px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.status-pending          { background:#fef3c7; color:#92400e; }
.status-confirmed        { background:#dbeafe; color:#1e40af; }
.status-preparing        { background:#ffedd5; color:#9a3412; }
.status-ready            { background:#d1fae5; color:#065f46; }
.status-out_for_delivery { background:#ede9fe; color:#5b21b6; }
.status-delivered        { background:#dcfce7; color:#14532d; }
.status-cancelled        { background:#fee2e2; color:#991b1b; }

/* ── TIMELINE ───────────────────────────────────────────── */
.timeline { margin:1.4rem 0; }
.tl-step { display:flex; gap:1rem; align-items:flex-start; padding-bottom:1.4rem; position:relative; }
.tl-step:last-child { padding-bottom:0; }
.tl-step::before { content:''; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--border); transition:background .4s ease; }
.tl-step.tl-done::before  { background:var(--success); }
.tl-step.tl-active::before { background:linear-gradient(to bottom,var(--o),var(--border)); }
.tl-step:last-child::before { display:none; }
.tl-dot { width:32px; height:32px; border-radius:50%; flex-shrink:0; background:var(--surface-2); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--text-2); z-index:1; transition:background .35s ease,border-color .35s ease,box-shadow .35s ease; }
.tl-dot.done   { background:var(--success); border-color:var(--success); color:#fff; }
.tl-dot.active { background:var(--o); border-color:var(--o); color:#fff; box-shadow:0 0 0 5px var(--o-glow); animation:tl-pulse 2s ease infinite; }
@keyframes tl-pulse { 0%,100%{box-shadow:0 0 0 5px var(--o-glow)} 50%{box-shadow:0 0 0 9px rgba(11,77,60,.06)} }
.tl-info h4 { font-weight:600; font-size:.9rem; margin-bottom:.12rem; }
.tl-info p  { font-size:.78rem; color:var(--text-2); }
.tl-done-label    { color:var(--success) !important; font-weight:600 !important; }
.tl-current-label { color:var(--o)       !important; font-weight:600 !important; }

@media (max-width:780px) {
  .order-detail-grid { grid-template-columns:1fr; }
}

/* ── CHECKOUT ───────────────────────────────────────────── */
.checkout-layout { display:grid; grid-template-columns:1fr 380px; gap:2rem; align-items:start; padding-bottom:4rem; }
.order-summary-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.75rem; position:sticky; top:calc(var(--nav-h)+1rem); }
/* On mobile: single column, summary first (above form), hide in-form submit (float bar handles it) */
@media (max-width:768px) {
  .checkout-layout { grid-template-columns:1fr; padding-bottom:6rem; }
  .checkout-summary-col { order:-1; }   /* summary card above the form */
  #place-btn { display:none; }          /* float bar is the CTA on mobile */
  .checkout-float-bar { display:flex; } /* always show float bar on mobile checkout */
}
/* Hide checkout float bar on desktop — sidebar summary is enough */
@media (min-width:769px) {
  .checkout-float-bar { display:none !important; }
}
.gps-row { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem; }
.gps-status { font-size:.8rem; color:var(--text-2); }
.gps-status.ok { color:var(--success); font-weight:600; }
.coupon-msg { font-size:.82rem; margin-top:.3rem; }
.coupon-msg.ok  { color:var(--success); font-weight:600; }
.coupon-msg.err { color:var(--danger); }
.co-totals { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }

/* ── PROFILE ────────────────────────────────────────────── */
#page-profile { padding-top: 0; }

/* Hero header */
.profile-hero {
  position: relative;
  background: var(--ink);
  padding-top: var(--nav-h);
}
.profile-hero__cover {
  position: absolute; inset: 0;
  /* Top is near-black so transparent nav blends seamlessly.
     Green gradient kicks in lower — below where the nav sits. */
  background: linear-gradient(
    180deg,
    #020a06 0%,
    #052418 22%,
    #0a3d2c 58%,
    var(--o) 78%,
    #1a7a5e 100%
  );
  opacity: .94;
}
[data-theme="dark"] .profile-hero__cover {
  background: linear-gradient(
    180deg,
    #000000 0%,
    #051a10 22%,
    #0a3d2c 58%,
    var(--o) 78%,
    #166548 100%
  );
  opacity: .9;
}
.profile-hero__body {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto;
  padding: 2.5rem var(--pad) 2rem;
  text-align: center;
}
.profile-hero__avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 3px solid rgba(255,255,255,.4);
  color: #fff; font-family: var(--font-d); font-size: 1.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
}
.profile-hero__name  { font-family: var(--font-d); font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: .3rem; }
.profile-hero__email { font-size: .83rem; color: rgba(255,255,255,.65); margin-bottom: 1.5rem; }
.profile-hero__stats {
  display: inline-flex; align-items: center; gap: 1.25rem;
  background: rgba(0,0,0,.25); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px; padding: .6rem 1.5rem;
}
.profile-hero__stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.profile-hero__stat span { font-size: 1.05rem; font-weight: 800; color: #fff; line-height: 1; }
.profile-hero__stat small { font-size: .62rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; }
.profile-hero__stat-div { width: 1px; height: 28px; background: rgba(255,255,255,.18); }

/* Profile body */
.profile-body {
  padding-top: 1.75rem;
  padding-bottom: 4rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}

/* Profile sections */
.pf-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pf-section__head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
}
.pf-section__icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--o-light); color: var(--o);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; flex-shrink: 0;
}
[data-theme="dark"] .pf-section__icon { background: rgba(11,77,60,.15); }
.pf-section__title { font-weight: 700; font-size: .95rem; }
#addr-list { padding: 0 1.4rem; }
#favs-grid { padding: 1.1rem 1.4rem; }

/* Address items */
.addr-item { display:flex; align-items:flex-start; gap:.85rem; padding:.85rem 0; border-bottom:1px solid var(--border); }
.addr-item:last-child { border:none; padding-bottom:.2rem; }
.addr-item__icon { color:var(--o); margin-top:.1rem; flex-shrink:0; }
.addr-item__label { font-weight:700; font-size:.83rem; margin-bottom:.15rem; }
.addr-item__text  { font-size:.81rem; color:var(--text-2); line-height:1.45; }

/* Account actions list */
.pf-actions-list { display: flex; flex-direction: column; }
.pf-action-item {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.4rem;
  background: none; border: none; width: 100%; text-align: left;
  color: var(--text); font-size: .9rem; font-weight: 500;
  cursor: pointer; text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
  -webkit-tap-highlight-color: transparent;
}
.pf-action-item:last-child { border-bottom: none; }
.pf-action-item:hover, .pf-action-item:active { background: var(--surface-2); }
.pf-action-item__icon {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; flex-shrink: 0;
  transition: background var(--t), color var(--t);
}
.pf-action-item:hover .pf-action-item__icon { background: var(--o-light); color: var(--o); }
.pf-action-item__label { flex: 1; }
.pf-action-item__arrow { color: var(--text-3); font-size: .72rem; }
/* Danger row (Sign Out) */
.pf-action-item--danger { color: #e53935; }
.pf-action-item--danger .pf-action-item__icon { background: rgba(229,57,53,.1); color: #e53935; }
.pf-action-item--danger:hover { background: rgba(229,57,53,.05); }
.pf-action-item--danger:hover .pf-action-item__icon { background: rgba(229,57,53,.15); }

/* Mobile responsive */
@media (max-width: 768px) {
  .profile-hero__stats { gap: .9rem; padding: .5rem 1.1rem; }
  .profile-hero__stat span { font-size: .95rem; }
}

/* ── NOTIFICATIONS ──────────────────────────────────────── */
.notif-panel { position:fixed; top:calc(var(--nav-h)+.5rem); right:1rem; width:min(360px,calc(100vw - 2rem)); max-height:70svh; background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--sh-lg); z-index:980; display:flex; flex-direction:column; overflow:hidden; animation:dropIn .2s var(--ease); }
.notif-panel__head { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; border-bottom:1px solid var(--border); font-weight:700; font-size:.9rem; flex-shrink:0; }
.notif-panel__body { flex:1; overflow-y:auto; }
.notif-item { display:flex; gap:.8rem; padding:.85rem 1.2rem; cursor:pointer; transition:background var(--t); border-bottom:1px solid var(--border); }
.notif-item:hover { background:var(--surface-2); }
.notif-item.unread { background:var(--o-light); }
.notif-icon { width:34px; height:34px; border-radius:50%; background:var(--o-light); color:var(--o); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.82rem; }
.notif-item__title { font-weight:600; font-size:.84rem; margin-bottom:.1rem; }
.notif-item__msg   { font-size:.78rem; color:var(--text-2); line-height:1.4; }
.notif-item__time  { font-size:.7rem; color:var(--text-3); margin-top:.2rem; }

/* ── TOASTS ─────────────────────────────────────────────── */
#toasts { position:fixed; bottom:1.5rem; right:1.5rem; z-index:2000; display:flex; flex-direction:column; gap:.45rem; pointer-events:none; }
.toast { display:flex; align-items:center; gap:.75rem; padding:.82rem 1.15rem; border-radius:var(--r); background:var(--ink-90); color:#fff; box-shadow:var(--sh-lg); min-width:255px; max-width:360px; pointer-events:auto; font-size:.85rem; font-weight:500; animation:toastIn .3s var(--ease); }
.toast-success { background:#14532d; }
.toast-error   { background:#7f1d1d; }
.toast-info    { background:#1e3a5f; }
@keyframes toastIn  { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:none} }
@keyframes toastOut { to{opacity:0;transform:translateX(110%)} }
.toast.out { animation:toastOut .3s var(--ease) forwards; }

/* ── SKELETON ───────────────────────────────────────────── */
.skel { background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%); background-size:200%; animation:skel 1.45s infinite; border-radius:var(--r-sm); }
@keyframes skel { to{background-position:-200% 0} }
.skel-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.skel-img  { height:190px; border-radius:0; }
.skel-line { height:13px; margin:1rem; }
.skel-line.short { width:55%; height:11px; }

/* ── PAGINATION ─────────────────────────────────────────── */
.pagination { display:flex; justify-content:center; gap:.42rem; margin-top:2.5rem; flex-wrap:wrap; }
.page-btn { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--border); font-size:.83rem; font-weight:600; color:var(--text-2); transition:all var(--t); cursor:pointer; }
.page-btn.active,.page-btn:hover { background:var(--o); border-color:var(--o); color:#fff; box-shadow:0 4px 14px var(--o-shad); }

/* ── EMPTY STATE ────────────────────────────────────────── */
.empty-state { text-align:center; padding:3.5rem 1rem; }
.empty-state__icon { width:64px; height:64px; border-radius:50%; background:var(--surface-2); color:var(--ink-30); font-size:1.4rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; }
.empty-state__title { font-weight:700; font-size:.97rem; margin-bottom:.35rem; }
.empty-state__sub { color:var(--text-2); font-size:.85rem; margin-bottom:1.4rem; line-height:1.55; }

/* ── FOOTER ─────────────────────────────────────────────── */
.footer {
  background: #0D0D0D;
  color: rgba(255,255,255,.55);
  margin-top: 5rem;
  position: relative;
}

/* Orange accent line at top */
.footer__accent {
  height: 3px;
  background: linear-gradient(90deg, var(--o) 0%, #1a7a5e 60%, transparent 100%);
}

/* 3-column body grid */
.footer__body {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 3rem;
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.footer__col { display: flex; flex-direction: column; }

/* Brand column */
.footer__logo { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; }
.footer__logo-text { font-family:var(--font-d); font-size:1.15rem; font-weight:700; color:#fff; }
.footer__logo-sub { font-size:.68rem; color: var(--o); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-top:.12rem; }
.footer__desc { font-size:.83rem; line-height:1.7; color:rgba(255,255,255,.38); max-width:270px; margin-bottom:1.4rem; }

/* Social icons */
.footer__social { display:flex; gap:.6rem; margin-bottom:1.5rem; }
.footer__social-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.55);
  font-size: .85rem;
  transition: background var(--t), color var(--t), transform var(--t), border-color var(--t);
  text-decoration: none;
  cursor: pointer;
}
.footer__social-btn:hover {
  background: var(--o);
  color: #fff;
  border-color: var(--o);
  transform: translateY(-2px);
}

/* PWA app hint */
.footer__app-hint {
  display: inline-flex; align-items: center; gap:.5rem;
  font-size: .75rem; color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: .3rem .75rem;
  width: fit-content;
}
.footer__app-hint i { color: var(--o); font-size: .7rem; }

/* Section headings */
.footer__head {
  font-size: .68rem; font-weight:700; text-transform:uppercase;
  letter-spacing: .12em; color: var(--o);
  margin-bottom: 1.1rem; display:block;
}

/* Quick links list */
.footer__list { display:flex; flex-direction:column; gap:.1rem; list-style:none; padding:0; margin:0; }
.footer__list-link {
  display: flex; align-items: center; gap: .6rem;
  font-size: .83rem; color: rgba(255,255,255,.45);
  padding: .42rem 0;
  transition: color var(--t), gap var(--t);
  cursor: pointer; text-decoration: none;
  border: none; background: none;
}
.footer__list-link i { font-size: .7rem; width:14px; text-align:center; opacity:.5; }
.footer__list-link:hover { color: rgba(255,255,255,.9); gap: .85rem; }
.footer__list-link:hover i { opacity: 1; }

/* Contact list */
.footer__contact-list { display:flex; flex-direction:column; gap:.85rem; }
.footer__contact-item {
  display: flex; align-items: flex-start; gap: .75rem;
  text-decoration: none;
}
.footer__contact-item--link:hover .footer__contact-val { color: var(--o); }
.footer__contact-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.06);
  display: flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.45); font-size: .75rem;
  flex-shrink: 0; margin-top:.05rem;
  transition: background var(--t), color var(--t);
}
.footer__contact-icon--orange {
  background: rgba(11,77,60,.15);
  color: var(--o);
}
.footer__contact-item--link:hover .footer__contact-icon { background: rgba(11,77,60,.2); color: var(--o); }
.footer__contact-label { font-size: .65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.28); margin-bottom:.18rem; }
.footer__contact-val { font-size: .82rem; color: rgba(255,255,255,.6); line-height:1.4; }

/* Bottom bar */
.footer__bottom {
  padding: 1.25rem 0;
  text-align: center;
}
.footer__copy { font-size: .76rem; color: rgba(255,255,255,.26); }

.footer__legal-links { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.footer__legal-link { font-size:.74rem; color:rgba(255,255,255,.28); transition:color var(--t); text-decoration:none; }
.footer__legal-link:hover { color:rgba(255,255,255,.7); }
.footer__legal-sep { color:rgba(255,255,255,.15); font-size:.74rem; }

/* ── NAV DRAWER ─────────────────────────────────────────── */
.nav-drawer-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.52);
  z-index:1000; backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s ease;
}
.nav-drawer-overlay:not(.hidden) { opacity:1; }

.nav-drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:min(300px, 88vw);
  background:var(--surface);
  z-index:1001;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 40px rgba(0,0,0,.18);
  overflow:hidden;
}
.nav-drawer:not(.hidden) { transform:translateX(0); }

.nav-drawer__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.nav-drawer__logo { display:flex; align-items:center; gap:.6rem; }
.nav-drawer__brand { font-family:var(--font-d); font-size:.92rem; font-weight:700; color:var(--text); }

.nav-drawer__user {
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.nav-drawer__user-row { display:flex; align-items:center; gap:.75rem; }
.nav-drawer__avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--o); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.82rem; flex-shrink:0;
}
.nav-drawer__user-name { font-weight:600; font-size:.88rem; color:var(--text); }
.nav-drawer__user-email { font-size:.75rem; color:var(--text-3); }

.nav-drawer__nav,
.nav-drawer__account,
.nav-drawer__legal {
  padding:.6rem .6rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.nav-drawer__section-label {
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-3);
  padding:.3rem .5rem .5rem; display:block;
}

.nav-drawer__link {
  display:flex; align-items:center; gap:.75rem;
  padding:.68rem .85rem; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:500; color:var(--text-2);
  cursor:pointer; transition:background var(--t),color var(--t);
  user-select:none; text-decoration:none;
}
.nav-drawer__link i { width:16px; text-align:center; font-size:.88rem; color:var(--text-3); transition:color var(--t); flex-shrink:0; }
.nav-drawer__link:hover { background:var(--ink-07); color:var(--text); }
.nav-drawer__link:hover i { color:var(--o); }
.nav-drawer__link.active { background:var(--o-light); color:var(--o); font-weight:600; }
.nav-drawer__link.active i { color:var(--o); }
.nav-drawer__link--signin { color:var(--o); font-weight:600; }
.nav-drawer__link--signin i { color:var(--o); }
.nav-drawer__link--danger { color:var(--danger); }
.nav-drawer__link--danger i { color:var(--danger); }
.nav-drawer__link--danger:hover { background:#fee2e2; color:var(--danger); }

.nav-drawer__foot {
  margin-top:auto; padding:.9rem 1.1rem;
  font-size:.72rem; color:var(--text-3);
  border-top:1px solid var(--border); flex-shrink:0;
}

/* Burger active state */
.nav__burger.is-open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav__burger.is-open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── UTILITIES ──────────────────────────────────────────── */
.hidden { display:none !important; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Platform specific
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet 960px ──────────────────────────────────────── */
@media (max-width:960px) {
  .checkout-layout    { grid-template-columns:1fr; }
  .order-summary-card { position:static; }
  .profile-layout     { grid-template-columns:1fr; }
  .order-detail-grid  { grid-template-columns:1fr; }
  .footer__body       { grid-template-columns:1fr 1fr; gap:2rem; }
}

/* ── Mobile 768px ──────────────────────────────────────── */
@media (max-width:768px) {
  :root { --nav-h:56px; --pad:1rem; }

  /* Nav — mobile: logo + cart + notification bell */
  .nav__links    { display:none !important; }
  .nav__auth-btn { display:none !important; }
  .nav__burger   { display:none !important; }
  .nav__logo-text { display:block !important; font-size:.8rem; }
  /* Cart button in header on mobile — icon style, no text pill */
  .nav__cart-btn {
    display:flex !important;
    background: transparent !important;
    color: var(--text-2) !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 38px; height: 38px;
    border-radius: 50% !important;
    box-shadow: none !important;
    justify-content: center;
    position: relative;
  }
  .nav__cart-btn span {
    /* badge-style count */
    position: absolute; top: 0px; right: 0px;
    background: #ef4444; color: #fff;
    font-size: .52rem; font-weight: 800;
    min-width: 16px; height: 16px;
    padding: 0 .22rem; border-radius: 100px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; border: 1.5px solid var(--surface);
  }
  /* Hide count text "0" when zero — managed by JS */
  .nav__cart-btn i { font-size: 1.05rem; }
  /* Transparent nav — white icon */
  .nav--transparent .nav__cart-btn {
    background: transparent !important;
    color: rgba(255,255,255,.9) !important;
    border: none !important;
  }
  .nav--transparent .nav__cart-btn span { border-color: transparent; }

  /* When guest (logged out), show a compact Sign In button */
  body.guest .nav__auth-btn {
    display: inline-flex !important;
    padding: .36rem .85rem;
    font-size: .8rem;
  }

  /* Hero */
  .hero__inner { grid-template-columns:1fr; gap:2rem; padding:3.5rem var(--pad) 3rem; }
  .hero__visual { order:-1; }
  .hero__ring { width:200px; height:200px; }
  .hero__title { font-size:2.55rem; }
  .hero__sub { max-width:none; }
  .hero__actions { flex-direction:column; align-items:stretch; }
  .hero__actions .btn-primary,.hero__actions .btn-outline-dark { justify-content:center; }
  .hero__stats { gap:1rem; }

  /* Grid and forms */
  .grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:.85rem; }
  .form-row { grid-template-columns:1fr; }
  .section { padding:3rem 0; }
  .section-head { margin-bottom:1.35rem; }
  .page-header { flex-direction:column; gap:.7rem; }
  .menu-controls { width:100%; }
  .menu-controls .search-box,.menu-controls .select { width:100%; }
  .checkout-layout { padding-bottom:2.5rem; }

  /* Footer */
  .footer__body { grid-template-columns:1fr; gap:2rem; padding:2.5rem 0 1.75rem; }
  .footer__desc { max-width:100%; }
  .footer__bottom { padding:1rem 0; }

  /* Toasts: full width */
  #toasts { bottom:1rem; right:1rem; left:1rem; }
  .toast  { min-width:auto; max-width:100%; }

  /* Cart drawer */
  .cart-drawer__body,.cart-drawer__foot,.cart-drawer__head { padding-left:1rem; padding-right:1rem; }

  /* PWA banner */
  .pwa-banner { bottom:.75rem; width:calc(100vw - 1.5rem); }
}

/* ── iOS Safari — safe areas ────────────────────────────── */
@supports (padding-bottom:env(safe-area-inset-bottom)) {
  .nav { padding-top:env(safe-area-inset-top,0); }
  :root { --nav-h: calc(64px + env(safe-area-inset-top, 0px)); }
  @media (max-width:768px) {
    :root { --nav-h: calc(56px + env(safe-area-inset-top, 0px)); }
  }
  /* Standalone PWA — bottom bar padding */
  @media (display-mode:standalone) {
    .footer { padding-bottom:env(safe-area-inset-bottom,0); }
    #toasts { bottom:calc(1rem + env(safe-area-inset-bottom,0)); }
    .pwa-banner { bottom:calc(.75rem + env(safe-area-inset-bottom,0)); }
    .cart-drawer { padding-bottom:env(safe-area-inset-bottom,0); }
  }
}

/* ── Android Chrome address bar ─────────────────────────── */
@media (max-width:768px) {
  .hero { min-height:100dvh; }
  .page { min-height:100dvh; }
}

/* ── Small 380px ────────────────────────────────────────── */
@media (max-width:380px) {
  .grid { grid-template-columns:1fr 1fr; }
  .hero__title { font-size:2.1rem; }
  .hero__ring { width:175px; height:175px; }
}

/* ── Desktop: burger opens drawer for extra links ── */
@media (min-width:769px) {
  .nav__burger   { display:flex !important; }   /* show burger on desktop for drawer */
  .nav__links    { display:flex !important; }
  .nav__auth-btn { display:inline-flex !important; }
  .nav__cart-btn { display:flex !important; }
}

/* ── Wide screen (1400px+) ──────────────────────────────── */
@media (min-width:1400px) {
  :root { --max-w:1320px; }
  .hero__title { font-size:5rem; }
}

/* ── BOTTOM NAV (4 tabs, cart in header) ─────────────────── */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 850;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: .3rem 0 calc(.3rem + env(safe-area-inset-bottom, 0px));
  align-items: stretch; justify-content: space-around;
  box-shadow: 0 -2px 16px rgba(0,0,0,.06);
}
[data-theme="dark"] .bottom-nav {
  background: rgba(17,17,17,.97);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top-color: rgba(255,255,255,.08);
}

.bottom-nav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .18rem; flex: 1; padding: .35rem 0;
  color: var(--text-3); font-size: .65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  cursor: pointer; transition: color var(--t);
  position: relative; user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}
.bottom-nav__item i { font-size: 1.15rem; line-height: 1; transition: transform var(--spring); }
.bottom-nav__item.active { color: var(--o); }
.bottom-nav__item.active i { transform: translateY(-1px) scale(1.08); }
.bottom-nav__item.active::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 2.5px; border-radius: 0 0 3px 3px;
  background: var(--o);
}
.bottom-nav__item:active { opacity: .6; }

/* Show on mobile */
@media (max-width: 768px) {
  .bottom-nav { display: flex; }
  .page { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  /* Footer only shows on home page — needs bottom nav padding */
  #main-footer { margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ── RIPPLE EFFECT ───────────────────────────────────────── */
.ripple-wave {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.32);
  transform: scale(0); animation: rippleAnim .55s linear forwards;
  pointer-events: none; z-index: 10;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ── STAGGERED CARD ENTRANCE ─────────────────────────────── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* Stagger animation only when explicitly enabled via .grid--animated */
.grid--animated .item-card { animation: cardIn .38s var(--ease) both; }
.grid--animated .item-card:nth-child(1)  { animation-delay:   0ms }
.grid--animated .item-card:nth-child(2)  { animation-delay:  55ms }
.grid--animated .item-card:nth-child(3)  { animation-delay: 110ms }
.grid--animated .item-card:nth-child(4)  { animation-delay: 165ms }
.grid--animated .item-card:nth-child(5)  { animation-delay: 220ms }
.grid--animated .item-card:nth-child(6)  { animation-delay: 275ms }
.grid--animated .item-card:nth-child(7)  { animation-delay: 330ms }
.grid--animated .item-card:nth-child(8)  { animation-delay: 385ms }
.grid--animated .item-card:nth-child(n+9){ animation-delay: 440ms }
/* Default grid: NO animation — prevents stuck "opacity:0" state */
.grid .item-card { opacity: 1; transform: none; }

/* ── STICKY CATEGORY TABS ────────────────────────────────── */
.cat-tabs-sticky-wrap {
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
  background: var(--bg);
  padding: .6rem var(--pad);
  /* Removed negative margin — was causing horizontal overflow */
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: box-shadow var(--t);
}
.cat-tabs-sticky-wrap.stuck { box-shadow: var(--sh); }
.cat-tabs-sticky-wrap .cat-tabs { margin-bottom: 0; padding-bottom: .3rem; }

/* ── GRADIENT CTAs ───────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--o) 0%, #166548 100%);
  box-shadow: 0 4px 18px var(--o-shad), inset 0 1px 0 rgba(255,255,255,.15);
  border-radius: 12px;
}
.btn-primary.btn-sm  { border-radius: 8px; }
.btn-primary.btn-lg  { border-radius: 14px; }
.btn-primary:hover {
  background: linear-gradient(135deg, #0B4D3C 0%, #166548 100%);
  box-shadow: 0 8px 30px var(--o-shad), inset 0 1px 0 rgba(255,255,255,.15);
}

/* ── GLASSMORPHISM CARDS (dark mode) ─────────────────────── */
[data-theme="dark"] .item-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
}
[data-theme="dark"] .item-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(11,77,60,.25);
}
[data-theme="dark"] .form-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}

/* ── ENHANCED PAGE TRANSITIONS ───────────────────────────── */
.page.active { animation: pageIn .32s var(--ease); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.page.slide-left  { animation: slideLeft  .3s var(--ease); }
.page.slide-right { animation: slideRight .3s var(--ease); }
@keyframes slideLeft  { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:none} }
@keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:none} }

/* ── PULL-TO-REFRESH ─────────────────────────────────────── */
.ptr-indicator {
  position: fixed; top: calc(var(--nav-h) + 8px); left: 50%;
  transform: translateX(-50%) translateY(-80px);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--sh);
  display: flex; align-items: center; justify-content: center;
  color: var(--o); font-size: .9rem; z-index: 800;
  transition: transform .2s var(--ease), opacity .2s;
  opacity: 0; pointer-events: none;
}
.ptr-indicator.visible { opacity: 1; }
.ptr-indicator.ready i { animation: ptrSpin .5s linear infinite; }
.ptr-indicator.refreshing i { animation: ptrSpin .7s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ── QUANTITY STEPPER ANIMATION ──────────────────────────── */
.qty-val { transition: transform .15s var(--spring), opacity .15s; display: inline-block; }
.qty-val.flip-up   { animation: qtyFlipUp   .2s var(--spring); }
.qty-val.flip-down { animation: qtyFlipDown .2s var(--spring); }
@keyframes qtyFlipUp   { 0%{transform:translateY(8px);opacity:0} 100%{transform:none;opacity:1} }
@keyframes qtyFlipDown { 0%{transform:translateY(-8px);opacity:0} 100%{transform:none;opacity:1} }

/* ── IMPROVED EMPTY STATES ───────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; }
.empty-state__illustration {
  width: 96px; height: 96px; margin: 0 auto 1.25rem;
  background: var(--o-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; line-height: 1;
  animation: floatY 4s ease-in-out infinite;
}
[data-theme="dark"] .empty-state__illustration { background: rgba(11,77,60,.12); }
.empty-state__icon { width:64px; height:64px; border-radius:50%; background:var(--surface-2); color:var(--ink-30); font-size:1.4rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; }

/* ── SKELETON LOADERS (enhanced) ─────────────────────────── */
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skel-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.skel-img  { height:190px; border-radius:0; }
.skel-line { height:14px; margin:.9rem 1rem .5rem; }
.skel-line.short { width:55%; height:11px; margin-top:0; margin-bottom:1rem; }
.skel-circle { border-radius:50%; }
.skel-text { height:12px; margin:.4rem 0; }
.skel-title { height:20px; margin:.4rem 0 .8rem; width:60%; }

/* order-card premium overrides removed — compact style handles it above */

/* ── CONFETTI CANVAS ─────────────────────────────────────── */
#confetti-canvas {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
}

/* ── SPLASH SCREEN ──────────────────────────────────────── */
.splash {
  position: fixed; inset: 0; z-index: 9998;
  background: #0D0D0D;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, transform .5s ease;
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash.gone { display: none; }
.splash__inner { text-align: center; }
.splash__logo-mark {
  width: 72px; height: 72px; border-radius: 20px;
  background: linear-gradient(135deg, var(--o), #1a7a5e);
  color: #fff; font-family: var(--font-d); font-size: 1.5rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 16px 40px rgba(11,77,60,.45);
  animation: splashPop .6s var(--spring) .1s both;
}
@keyframes splashPop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.splash__brand {
  font-family: var(--font-d); font-size: 1.5rem; font-weight: 700;
  color: #fff; margin-bottom: .3rem;
  animation: splashFade .5s ease .4s both;
}
.splash__sub {
  font-size: .8rem; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .1em;
  animation: splashFade .5s ease .5s both;
}
@keyframes splashFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.splash__loader {
  display: flex; gap: .35rem; justify-content: center; margin-top: 2rem;
  animation: splashFade .5s ease .7s both;
}
.splash__loader span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--o);
  animation: loaderDot 1.2s ease-in-out infinite;
}
.splash__loader span:nth-child(2) { animation-delay: .2s; }
.splash__loader span:nth-child(3) { animation-delay: .4s; }
@keyframes loaderDot {
  0%,80%,100% { transform: scale(.6); opacity: .4; }
  40%         { transform: scale(1.1); opacity: 1; }
}

/* ── HERO BACKGROUND ─────────────────────────────────────── */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    url('https://images.unsplash.com/photo-1569050467447-ce54b3bbc37d?w=1400&q=80') center/cover no-repeat;
}
.hero__bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13,13,13,.82) 0%,
    rgba(13,13,13,.55) 50%,
    rgba(11,77,60,.12) 100%
  );
}
.hero { position: relative; }
.hero__inner { position: relative; z-index: 2; }
.hero__title { color: #fff; }
/* "Bangkok" Thailand flag gradient — handled in main .hero__title em rule above */
.hero__sub { color: rgba(255,255,255,.7); }
.hero__eyebrow { color: var(--o); }
.hero__stat strong { color: #fff; }
.hero__stat span   { color: rgba(255,255,255,.5); }
.hero__stat-div    { background: rgba(255,255,255,.15); }
[data-theme="dark"] .hero__bg-overlay {
  background: linear-gradient(135deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.65) 60%, rgba(11,77,60,.1) 100%);
}

/* ═══════════════════════════════════════════════════════════
   ZOMATO-STYLE MENU LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* ── Photo Gallery Strip ─────────────────────────────────── */
.zmt-gallery-wrap {
  padding: 1.25rem 0 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.zmt-gallery {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.zmt-gallery::-webkit-scrollbar { display: none; }
.zmt-gallery__item {
  flex-shrink: 0;
  width: 110px;
  cursor: pointer;
  text-align: center;
}
.zmt-gallery__item img {
  width: 100px; height: 100px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color var(--t), transform var(--t);
  display: block; margin: 0 auto .45rem;
}
.zmt-gallery__item:hover img { border-color: var(--o); transform: scale(1.04); }
.zmt-gallery__label {
  font-size: .68rem; font-weight: 600; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Top Search+Filter Bar ───────────────────────────────── */
.zmt-topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: .85rem 0 0;
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.zmt-topbar__inner {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .7rem;
}
.zmt-search { flex: 1; }
.zmt-sort   { width: auto; min-width: 120px; max-width: 140px; }

/* Quick filter chips */
.zmt-chips {
  display: flex; gap: .5rem; overflow-x: auto;
  padding-bottom: .75rem; scrollbar-width: none;
}
.zmt-chips::-webkit-scrollbar { display: none; }
.zmt-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .36rem .9rem; border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-size: .8rem; font-weight: 600;
  white-space: nowrap; flex-shrink: 0; cursor: pointer;
  transition: all var(--t);
}
.zmt-chip:hover { border-color: var(--o); color: var(--o); }
.zmt-chip.active {
  background: var(--o); border-color: var(--o); color: #fff;
  box-shadow: 0 3px 12px var(--o-shad);
}
.zmt-chip.active .veg-dot::after { background: #fff; }
.zmt-chip.active .veg-dot { border-color: rgba(255,255,255,.6); }

/* ── Main Zomato Layout ──────────────────────────────────── */
.zmt-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: start;
  padding-top: 0;
  min-height: 60vh;
}

/* ── Left Category Sidebar ───────────────────────────────── */
.zmt-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 110px); /* below topbar */
  max-height: calc(100vh - var(--nav-h) - 120px);
  overflow-y: auto;
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.zmt-sidebar::-webkit-scrollbar { width: 3px; }
.zmt-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.zmt-sidebar__inner { padding: .5rem 0; }
.zmt-cat-nav__item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  padding: .78rem 1.1rem;
  border: none; background: none;
  font-size: .84rem; font-weight: 500; color: var(--text-2);
  cursor: pointer; transition: all var(--t);
  border-left: 3px solid transparent;
  line-height: 1.35;
}
.zmt-cat-nav__item:hover { background: var(--surface-2); color: var(--text); }
.zmt-cat-nav__item.active {
  background: var(--o-light);
  color: var(--o);
  font-weight: 700;
  border-left-color: var(--o);
}
.zmt-cat-nav__count {
  font-size: .7rem; font-weight: 600;
  color: var(--text-3); margin-left: .5rem; flex-shrink: 0;
}
.zmt-cat-nav__item.active .zmt-cat-nav__count { color: var(--o); opacity: .75; }

/* ── Right Content ───────────────────────────────────────── */
.zmt-content { min-width: 0; }

/* ── Category Section ────────────────────────────────────── */
.zmt-section { margin-bottom: .5rem; }
.zmt-section__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem .55rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: calc(var(--nav-h) + 100px);
  background: var(--bg);
  z-index: 5;
}
.zmt-section__title {
  font-size: .95rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--text);
}
.zmt-section__count {
  font-size: .7rem; color: var(--text-3); font-weight: 500;
}
.zmt-item-list { padding: 0 1.25rem; }

/* ── Zomato Item Row ─────────────────────────────────────── */
.zmt-item {
  display: flex; align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t);
}
.zmt-item:last-child { border-bottom: none; }
.zmt-item:hover { background: var(--surface-2); margin: 0 -.75rem; padding-left: .75rem; padding-right: .75rem; }
.zmt-item.unavailable { opacity: .5; pointer-events: none; }

/* Left side */
.zmt-item__left {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .2rem;
}
.zmt-item__meta {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .08rem;
}
.zmt-item__name {
  font-weight: 700; font-size: .96rem;
  color: var(--text); line-height: 1.42;
}
.zmt-item__price {
  font-size: .92rem; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.zmt-item__desc {
  font-size: .78rem; color: var(--text-3);
  line-height: 1.5; margin-top: .05rem;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.zmt-item__fav {
  color: var(--text-3); font-size: .8rem;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--t), background var(--t);
  margin-top: .25rem; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.zmt-item__fav:hover, .zmt-item__fav.active { color: #e53935; background: rgba(229,57,53,.08); }

/* Badges */
.zmt-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  padding: .12rem .45rem; border-radius: 3px;
  width: fit-content; margin-bottom: .1rem;
}
.zmt-badge--best   { background: var(--o-light); color: var(--o); border: 1px solid rgba(11,77,60,.2); }
.zmt-badge--special{ background: #fff7ed; color: #c2410c; border: 1px solid rgba(194,65,12,.15); }

/* Right side: image + add button */
.zmt-item__right { flex-shrink: 0; }
.zmt-item__img-wrap { position: relative; width: 108px; height: 108px; }
.zmt-item__img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px; display: block;
}
.zmt-item__add-btn {
  position: absolute; bottom: -14px; right: 0;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--o);
  border: 1.5px solid var(--o);
  font-size: .8rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(11,77,60,.22);
  cursor: pointer;
  transition: background var(--spring), color var(--t), transform var(--spring), box-shadow var(--t);
  -webkit-tap-highlight-color: transparent;
}
.zmt-item__add-btn:active, .zmt-item__add-btn.adding {
  background: var(--o); color: #fff;
  transform: scale(.88);
  box-shadow: 0 1px 4px rgba(11,77,60,.2);
}
.zmt-item__add-btn:hover {
  background: var(--o-light);
}
.zmt-item__unavail {
  position: absolute; bottom: -11px; right: 0;
  font-size: .6rem; font-weight: 600; color: var(--text-3);
  background: var(--surface-2); border-radius: 4px;
  padding: .18rem .4rem; white-space: nowrap;
  border: 1px solid var(--border);
}

/* Skeleton */
.zmt-item--skel { cursor: default; pointer-events: none; align-items: center; }
.zmt-item--skel:hover { background: none; margin: 0; padding-left: 0; padding-right: 0; }

/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
  .zmt-layout { grid-template-columns: 1fr; }
  .zmt-sidebar { display: none; }
  .zmt-item-list { padding: 0; }
  .zmt-section__head { padding: .85rem var(--pad) .5rem; top: calc(var(--nav-h) + 88px); }
  .zmt-item__img-wrap { width: 90px; height: 90px; }
  .zmt-item { gap: .85rem; padding: .9rem 0; }
  .zmt-item:hover { margin: 0; padding-left: 0; padding-right: 0; }
  .zmt-item__add-btn { bottom: -10px; }
  .zmt-topbar { top: var(--nav-h); }
  .zmt-gallery__item { width: 76px; }
  .zmt-gallery__item img { width: 68px; height: 68px; border-radius: 10px; }
  .zmt-sort { min-width: 80px; max-width: 100px; font-size: .75rem; }
}

@media (min-width: 769px) {
  .zmt-content { padding-bottom: 3rem; }
}

/* ── VEG / NON-VEG INDICATOR ────────────────────────────── */
/* FSSAI-standard square with inner filled circle */
.veg-dot {
  position: absolute; bottom: .6rem; left: .6rem;
  width: 16px; height: 16px;
  border-radius: 3px;
  border: 1.5px solid;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.veg-dot::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  display: block;
}
.veg-dot--veg    { border-color: #16a34a; }
.veg-dot--veg::after    { background: #16a34a; }
.veg-dot--nonveg { border-color: #dc2626; }
.veg-dot--nonveg::after { background: #dc2626; }

/* In bottom sheet modal — inline (not absolute) */
.item-modal__body .veg-dot {
  position: static;
  flex-shrink: 0;
  box-shadow: none;
}

/* ── OVERLAY-STYLE ITEM CARDS ────────────────────────────── */
.item-card--overlay {
  border: none;
  min-height: 240px;
  position: relative;
}
.item-card--overlay .item-card__img-wrap {
  position: absolute; inset: 0;
  height: 100%; border-radius: var(--r-lg);
}
.item-card--overlay .item-card__img { border-radius: var(--r-lg); }
.item-card--overlay .item-card__img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 50%, transparent 75%);
  border-radius: var(--r-lg);
}
.item-card--overlay .item-card__body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 1.1rem;
  z-index: 2;
}
.item-card--overlay .item-card__cat  { color: rgba(255,255,255,.6); }
.item-card--overlay .item-card__name { color: #fff; font-size: 1rem; }
.item-card--overlay .item-card__desc { display: none; }
.item-card--overlay .item-card__price { color: #fff; }
.item-card--overlay .item-card__badge { z-index: 3; }
.item-card--overlay .item-card__fav   { z-index: 3; }
.item-card--overlay .item-card__add {
  z-index: 3;
  background: linear-gradient(135deg, var(--o), #1a7a5e);
  box-shadow: 0 4px 14px rgba(11,77,60,.5);
}
.item-card--overlay:hover { transform: translateY(-6px) scale(1.01); }

/* ── iOS BOTTOM SHEET ────────────────────────────────────── */
.sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1100;
  opacity: 0; transition: opacity .3s ease;
}
.sheet-overlay:not(.hidden) { opacity: 1; }
.bottom-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 1101;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  max-height: 92svh;
  /* Use scroll only on Y — prevents horizontal layout shift */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  /* scrollbar-gutter keeps layout stable when scrollbar appears */
  scrollbar-gutter: stable both-edges;
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.32,0,.67,0);
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  will-change: transform;
  /* Lock width so swipe-Y gesture never causes X shift */
  width: 100%;
  box-sizing: border-box;
}
.bottom-sheet:not(.hidden) { transform: translateY(0); transition: transform .38s cubic-bezier(.34,1.4,.64,1); }
.bottom-sheet__handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border-2); margin: .85rem auto .5rem;
  flex-shrink: 0;
}
/* ── ITEM BOTTOM SHEET — Full Redesign (Swiggy/Zomato style) ── */

/* Sheet structure: handle → scrollable content → sticky action bar */
.bottom-sheet {
  display: flex;
  flex-direction: column;
  /* Remove bottom padding here — action bar handles it */
  padding-bottom: 0 !important;
}

/* Scrollable content area */
.sheet-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Image ── */
.item-modal__img-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-radius: 0;
  flex-shrink: 0;
  cursor: zoom-in;
}
.item-modal__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.item-modal__img-wrap:hover .item-modal__img { transform: scale(1.03); }
.item-modal__unavail {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.52); color: #fff;
  font-weight: 700; font-size: .92rem; letter-spacing: .04em;
}

/* ── Body ── */
.item-modal__body {
  padding: 1.1rem 1.25rem 1rem;
}

/* Top row: category + veg dot + share */
.item-modal__toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .65rem;
}
.item-modal__meta {
  display: flex; align-items: center; gap: .45rem;
}
.item-modal__cat {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--o);
}

/* Name */
.item-modal__name {
  font-family: var(--font-d);
  font-size: 1.35rem; font-weight: 700;
  line-height: 1.22; color: var(--text);
  margin-bottom: .55rem;
  letter-spacing: -.01em;
}

/* Description */
.item-modal__desc {
  font-size: .85rem; color: var(--text-2);
  line-height: 1.65; margin-bottom: .85rem;
}

/* Divider */
.item-modal__divider {
  height: 1px; background: var(--border);
  margin: .85rem -1.25rem;
}

/* Notes input */
.item-modal__notes-label {
  font-size: .72rem; font-weight: 700;
  color: var(--text-2); margin-bottom: .4rem;
  display: flex; align-items: center; gap: .35rem;
}
.item-modal__notes-label span { font-weight: 400; color: var(--text-3); }

/* ── Sticky Action Bar (price + qty + add) ── */
.sheet-action-bar {
  position: sticky;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: .85rem 1.25rem;
  padding-bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-shrink: 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.06);
}
[data-theme="dark"] .sheet-action-bar { box-shadow: 0 -4px 24px rgba(0,0,0,.25); }

/* Price side */
.sheet-action-bar__price-wrap {}
.sheet-action-bar__price {
  font-size: 1.3rem; font-weight: 800;
  color: var(--text); font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sheet-action-bar__per-item {
  font-size: .68rem; color: var(--text-3); margin-top: .15rem;
}

/* Right side: qty stepper + add button */
.sheet-action-bar__right {
  display: flex; align-items: center; gap: .6rem;
  flex-shrink: 0;
}

/* Quantity stepper — bordered pill */
.sheet-qty {
  display: flex; align-items: center;
  border: 1.5px solid var(--o);
  border-radius: 100px;
  overflow: hidden;
  height: 38px;
  background: var(--o-light);
}
.sheet-qty__btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--o); font-size: .85rem; font-weight: 700;
  background: none; border: none; cursor: pointer;
  transition: background var(--t);
  -webkit-tap-highlight-color: transparent;
}
.sheet-qty__btn:active { background: rgba(11,77,60,.15); }
.sheet-qty__val {
  font-size: .95rem; font-weight: 800;
  color: var(--o); min-width: 28px;
  text-align: center; line-height: 1;
  user-select: none;
}

/* Add to cart button */
.sheet-add-btn {
  height: 42px;
  padding: 0 1.25rem;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--o), #1a7a5e);
  color: #fff; font-weight: 700; font-size: .88rem;
  display: flex; align-items: center; gap: .4rem;
  border: none; cursor: pointer;
  box-shadow: 0 4px 16px var(--o-shad);
  transition: transform var(--spring), box-shadow var(--t), opacity var(--t);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.sheet-add-btn:active { transform: scale(.95); box-shadow: 0 2px 8px var(--o-shad); }
.sheet-add-btn:disabled { opacity: .45; pointer-events: none; }
.sheet-add-btn__total { font-size: .78rem; opacity: .85; }

/* ── SWIPE-TO-DELETE CART ITEMS ──────────────────────────── */
.cart-item {
  position: relative; overflow: hidden;
  border-radius: var(--r-sm);
  transition: transform .25s ease;
  touch-action: pan-y;
}
.cart-item__swipe-bg {
  position: absolute; inset: 0; right: auto;
  width: 80px;
  background: #e53935;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem;
  border-radius: var(--r-sm);
  transform: translateX(-100%);
  transition: transform .25s ease;
  pointer-events: none;
}
.cart-item.swiping .cart-item__swipe-bg { transform: translateX(0); }

/* ── LOYALTY STAMP CARD ──────────────────────────────────── */
.loyalty-card {
  background: linear-gradient(135deg, #051a10, #0a2419);
  border: 1px solid rgba(11,77,60,.25);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.loyalty-card::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(11,77,60,.2), transparent 70%);
  pointer-events: none;
}
[data-theme="dark"] .loyalty-card { background: linear-gradient(135deg, #051a10, #032d1a); }
.loyalty-card__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1rem; }
.loyalty-card__title { font-weight: 700; font-size: 1rem; margin-bottom: .2rem; }
.loyalty-card__sub { font-size: .75rem; color: rgba(255,255,255,.5); }
.loyalty-card__count { font-family: var(--font-d); font-size: 1.3rem; font-weight: 700; color: var(--o); }
.loyalty-stamps { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1rem; }
.loyalty-stamp {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(11,77,60,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: transform .25s var(--spring), background .25s;
}
.loyalty-stamp.earned {
  background: var(--o);
  border-color: var(--o);
  box-shadow: 0 3px 10px rgba(11,77,60,.45);
  animation: stampPop .4s var(--spring);
}
@keyframes stampPop { from{transform:scale(0)} to{transform:scale(1)} }
.loyalty-stamp.earned::after { content: '⭐'; font-size: .7rem; }
.loyalty-card__hint { font-size: .75rem; color: rgba(255,255,255,.4); }
.loyalty-card__reward { font-size: .8rem; color: var(--o); font-weight: 600; margin-top: .35rem; }

/* ── CHECKOUT FLOATING BAR ──────────────────────────────── */
.checkout-float-bar {
  position: fixed; bottom: 0;
  left: 0; right: 0;
  z-index: 860; /* above bottom-nav (850) */
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: .55rem 1.25rem calc(.55rem + env(safe-area-inset-bottom,0px));
  display: none;
  align-items: center; justify-content: space-between; gap: 1rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.checkout-float-bar.visible { display: flex; }
/* On mobile: sit flush on top of bottom nav */
@media (max-width:768px) {
  .checkout-float-bar {
    bottom: 56px;
    padding: .5rem 1.1rem;
  }
}
.checkout-float-bar__info { display: flex; flex-direction: column; gap: .05rem; }
.checkout-float-bar__items { font-size: .7rem; color: var(--text-2); font-weight: 600; }
.checkout-float-bar__total { font-size: .98rem; font-weight: 800; color: var(--o); font-variant-numeric: tabular-nums; }

/* AUTH MODAL ADDITIONS ───────────────────────────────── */
.auth-err.hidden { display:none !important; }
.label-opt { color:var(--text-3); font-weight:400; font-size:.82em; }
.input-pw-wrap { position:relative; }
.input-pw-wrap .input { padding-right:2.75rem; }
.pw-toggle {
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  color:var(--text-3); font-size:.88rem; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:color var(--t), background var(--t);
}
.pw-toggle:hover { color:var(--text); background:var(--surface-2); }

/* ── CHECKOUT PAGE — Full-focus mode ────────────────────── */

/* Hide main nav + bottom tab bar on checkout */
#page-checkout.active ~ * .bottom-nav,
body.page-checkout .bottom-nav { display: none !important; }
body.page-checkout .nav         { display: none !important; }
body.page-checkout #main-footer { display: none !important; }

/* Checkout page starts from top (no nav offset) */
#page-checkout { padding-top: 0 !important; }

/* Float bar: bottom 0 on checkout (no tab bar) */
body.page-checkout .checkout-float-bar { bottom: 0 !important; padding-bottom: calc(.5rem + env(safe-area-inset-bottom,0px)) !important; }

/* Minimal checkout header */
.checkout-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .85rem 1rem;
  padding-top: calc(.85rem + env(safe-area-inset-top, 0px));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
[data-theme="dark"] .checkout-header { background: rgba(17,17,17,.95); }
.checkout-header__back {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); font-size: .9rem; flex-shrink: 0;
  transition: background var(--t), transform var(--t);
  -webkit-tap-highlight-color: transparent;
}
.checkout-header__back:active { background: var(--border); transform: scale(.92); }
.checkout-header__title { flex: 1; text-align: center; }
.checkout-header__label { display: block; font-weight: 700; font-size: .95rem; color: var(--text); }
.checkout-header__sub   { display: block; font-size: .72rem; color: var(--text-3); margin-top: .05rem; }

/* Checkout page bottom padding for float bar */
body.page-checkout #page-checkout .container:last-child { padding-bottom: 5rem; }

/* ── GPS DISTANCE INFO ──────────────────────────────────── */
.gps-dist-info {
  margin-top:.6rem;
  font-size:.8rem;
  font-weight:600;
  color:var(--success);
  display:flex;
  align-items:center;
  gap:.4rem;
}
.gps-dist-info.hidden { display:none !important; }

/* ═══════════════════════════════════════════════════════════
   INTELLIGENT FEATURES
   ═══════════════════════════════════════════════════════════ */

/* ── Cards below hero — proper spacing ──────────────────── */
.greeting-card-wrap,
.active-order-banner-wrap,
.reorder-card-wrap {
  padding-top: 1.25rem;
  padding-bottom: 0;
}
.greeting-card-wrap + .active-order-banner-wrap { padding-top: .75rem; }
.active-order-banner-wrap + .reorder-card-wrap  { padding-top: .75rem; }
.greeting-card-wrap + .reorder-card-wrap        { padding-top: .75rem; }

/* ── Greeting Card — Premium glass + gold accent ─────────── */
.greeting-card {
  position: relative;
  border-radius: 22px;
  padding: 1.35rem 1.5rem;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  background:
    linear-gradient(135deg, #052418 0%, var(--o) 55%, #1a7a5e 100%);
  box-shadow:
    0 12px 32px rgba(11,77,60,.32),
    inset 0 1px 0 rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.08);
}
/* Subtle radial highlight (top-left) — premium sheen */
.greeting-card::before {
  content: ''; position: absolute;
  top: -40%; left: -20%;
  width: 140%; height: 180%;
  background: radial-gradient(ellipse at top left, rgba(255,233,163,.18), transparent 55%);
  pointer-events: none; z-index: -1;
}
/* Decorative gold orb (bottom-right) */
.greeting-card::after {
  content: ''; position: absolute;
  bottom: -50px; right: -50px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,201,72,.22), transparent 65%);
  pointer-events: none; z-index: -1;
}

.greeting-card__text { flex: 1; min-width: 0; z-index: 1; }
.greeting-card__time {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFE9A3;
  margin-bottom: .45rem;
  padding: .25rem .65rem;
  background: rgba(255,233,163,.14);
  border: 1px solid rgba(255,233,163,.25);
  border-radius: 100px;
  backdrop-filter: blur(8px);
}
.greeting-card__time::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #FFE9A3;
  box-shadow: 0 0 8px rgba(255,233,163,.8);
  animation: liveGlow 1.8s ease-in-out infinite;
}
.greeting-card__title {
  font-family: var(--font-d);
  font-size: 1.35rem; font-weight: 700;
  line-height: 1.25; color: #fff;
  margin-bottom: .3rem;
  letter-spacing: -.01em;
}
.greeting-card__sub {
  font-size: .82rem;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
}
.greeting-card__emoji {
  font-size: 3rem; line-height: 1;
  flex-shrink: 0; z-index: 1;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
  animation: greetEmojiFloat 4s ease-in-out infinite;
}
@keyframes greetEmojiFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-6px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .greeting-card__emoji,
  .greeting-card__time::before { animation: none; }
}
@media (max-width: 480px) {
  .greeting-card { padding: 1.15rem 1.2rem; border-radius: 18px; }
  .greeting-card__title { font-size: 1.15rem; }
  .greeting-card__emoji { font-size: 2.4rem; }
}

/* ── Quick Reorder Card ──────────────────────────────────── */
.reorder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: box-shadow var(--t), border-color var(--t), background var(--t);
  position: relative; overflow: hidden;
}
.reorder-card:active { background: var(--surface-2); }
.reorder-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--o);
}
.reorder-card__icon {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--o-light); color: var(--o);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.reorder-card__body { flex: 1; min-width: 0; }
.reorder-card__label { font-size: .68rem; font-weight: 700; color: var(--o); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .18rem; }
.reorder-card__items { font-size: .84rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .12rem; }
.reorder-card__meta  { font-size: .74rem; color: var(--text-3); }
.reorder-card__btn   { flex-shrink: 0; }

/* ── Active Order Banner (home) ──────────────────────────── */
.active-order-banner {
  background: var(--surface);
  border: 1.5px solid var(--o);
  border-radius: var(--r-lg);
  padding: .85rem 1.1rem;
  display: flex; align-items: center; gap: .85rem;
  cursor: pointer;
  animation: pulse-border 2.5s ease-in-out infinite;
}
@keyframes pulse-border {
  0%,100% { border-color: var(--o); box-shadow: 0 0 0 0 var(--o-glow); }
  50%      { border-color: var(--o-mid); box-shadow: 0 0 0 5px transparent; }
}
.active-order-banner__icon { width: 38px; height: 38px; border-radius: 50%; background: var(--o); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; animation: spin 3s linear infinite; }
.active-order-banner__body { flex: 1; min-width: 0; }
.active-order-banner__title { font-weight: 700; font-size: .9rem; color: var(--text); }
.active-order-banner__sub   { font-size: .77rem; color: var(--o); font-weight: 600; }
.active-order-banner__arrow { color: var(--text-3); font-size: .75rem; }

/* ── Order Mini ETA Progress (order list) ────────────────── */
.order-eta-bar { margin-top: .5rem; }
.order-eta-bar__track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: .2rem; }
.order-eta-bar__fill  { height: 100%; background: var(--o); border-radius: 2px; transition: width .6s ease; }
.order-eta-bar__label { font-size: .68rem; color: var(--o); font-weight: 600; }

/* ── Popularity Badge ────────────────────────────────────── */
.pop-badge {
  display: inline-flex; align-items: center; gap: .22rem;
  font-size: .65rem; font-weight: 700; color: #c2410c;
  background: #fff7ed; border: 1px solid rgba(194,65,12,.15);
  border-radius: 4px; padding: .1rem .42rem; margin-top: .18rem;
  width: fit-content;
}

/* ── Category Delivery Time Badge ────────────────────────── */
.zmt-section__time {
  font-size: .7rem; color: var(--text-3); font-weight: 500;
  display: flex; align-items: center; gap: .25rem;
}
.zmt-section__time i { color: var(--o); font-size: .65rem; }

/* ── Full-Screen Image Viewer ────────────────────────────── */
.img-viewer-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.92); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease;
  cursor: zoom-out;
}
.img-viewer-overlay.open { opacity: 1; }
.img-viewer-overlay img {
  max-width: 94vw; max-height: 88vh;
  border-radius: var(--r); object-fit: contain;
  transform: scale(.85); transition: transform .3s cubic-bezier(.34,1.4,.64,1);
  pointer-events: none;
}
.img-viewer-overlay.open img { transform: scale(1); }
.img-viewer-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; cursor: pointer;
  transition: background var(--t);
}
.img-viewer-close:hover { background: rgba(255,255,255,.3); }

/* ── Pairs Well With ─────────────────────────────────────── */
.pairs-section { padding: .75rem 1.25rem 1.5rem; border-top: 1px solid var(--border); margin-top: .5rem; }
.pairs-section__title { font-size: .72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }
.pairs-scroll { display: flex; gap: .65rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.pairs-scroll::-webkit-scrollbar { display: none; }
.pairs-item { flex-shrink: 0; width: 100px; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.pairs-item img { width: 90px; height: 70px; object-fit: cover; border-radius: var(--r-sm); display: block; margin: 0 auto .35rem; }
.pairs-item__name  { font-size: .7rem; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pairs-item__price { font-size: .68rem; color: var(--o); font-weight: 700; }

/* ── Share Button ────────────────────────────────────────── */
.item-share-btn {
  display: flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; color: var(--text-2);
  padding: .35rem .7rem; border-radius: 100px;
  border: 1px solid var(--border); background: var(--surface-2);
  cursor: pointer; transition: border-color var(--t), color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.item-share-btn:hover { border-color: var(--o); color: var(--o); }

/* ── Animated Empty Cart ─────────────────────────────────── */
.cart-empty-anim {
  text-align: center; padding: 2.5rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.cart-empty-bowl {
  font-size: 3rem; line-height: 1;
  animation: bowlFloat 2.8s ease-in-out infinite;
  display: block;
}
@keyframes bowlFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}
.cart-empty-steam {
  font-size: .75rem; color: var(--text-3); margin-top: -.25rem;
  opacity: 0; animation: steamRise 2.8s ease-in-out infinite;
}
@keyframes steamRise {
  0%,100% { opacity: 0; transform: translateY(4px); }
  40%,60% { opacity: .6; transform: translateY(-2px); }
}
.cart-empty-title { font-weight: 700; font-size: .95rem; color: var(--text); }
.cart-empty-sub   { font-size: .82rem; color: var(--text-2); line-height: 1.5; }

/* ── GPS Map Preview ─────────────────────────────────────── */
.gps-map-preview {
  margin-top: .75rem; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border);
  height: 140px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.gps-map-preview iframe {
  width: 100%; height: 100%; border: none; display: block;
}
.gps-map-preview__placeholder {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--text-3); font-size: .8rem;
}
.gps-map-preview__placeholder i { font-size: 1.5rem; color: var(--o); }

/* ── Loyalty Progress Bar ────────────────────────────────── */
.loyalty-progress { margin: .75rem 0 .5rem; }
.loyalty-progress__bar { height: 8px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; margin-bottom: .45rem; }
.loyalty-progress__fill { height: 100%; background: linear-gradient(90deg, #1a7a5e, #fff); border-radius: 4px; transition: width .8s cubic-bezier(.34,1.4,.64,1); }
.loyalty-progress__labels { display: flex; justify-content: space-between; font-size: .68rem; color: rgba(255,255,255,.55); }

/* ═══════════════════════════════════════════════════════════
   NATIVE APP FEEL — iOS / Android
   Press states · Spring physics · Micro-interactions
   ═══════════════════════════════════════════════════════════ */

/* ── Global tap highlight off (we use custom active states) ── */
* { -webkit-tap-highlight-color: transparent; }

/* ── Native press state — all interactive elements scale down on touch ── */
.zmt-item:active         { background: var(--surface-2); }
.order-card:active       { background: var(--surface-2); transform: scale(.99); }
.item-card:active        { transform: scale(.97) !important; box-shadow: var(--sh-xs) !important; }
.btn-primary:active      { transform: scale(.96) !important; }
.btn-outline:active      { transform: scale(.96) !important; }
.cat-chip:active         { transform: scale(.93) translateY(0) !important; }
.cat-tab:active          { opacity: .75; }
.bottom-nav__item:active { transform: scale(.85); }
.nav-drawer__link:active { background: var(--ink-07); }
.pf-action-item:active   { background: var(--surface-2) !important; }
.notif-item:active       { background: var(--surface-2); }

/* ── Item card — no translate on hover (feels more native) ── */
.item-card:hover {
  transform: none;
  box-shadow: var(--sh);
  border-color: var(--border-2);
}

/* ── Page transitions — directional slide ── */
.page.active {
  animation: nativePageIn .28s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes nativePageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Cart drawer — native slide ── */
.cart-drawer {
  transition: transform .34s cubic-bezier(.32,.72,0,1);
}

/* ── Bottom sheet spring ── */
.bottom-sheet:not(.hidden) {
  transition: transform .42s cubic-bezier(.32,.72,0,1) !important;
}

/* ── Bottom nav — spring active indicator ── */
.bottom-nav__item.active i {
  animation: tabIconPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tabIconPop {
  0%   { transform: scale(1); }
  50%  { transform: translateY(-4px) scale(1.18); }
  100% { transform: translateY(-2px) scale(1.1); }
}

/* ── Skeleton shimmer — faster, more native ── */
.skel {
  animation: shimmer 1.1s ease-in-out infinite;
}

/* ── List separator lines ── */
.zmt-item { border-bottom-color: var(--border); }
[data-theme="dark"] .zmt-item { border-bottom-color: rgba(255,255,255,.06); }

/* ── Native input focus ring ── */
.input:focus, .textarea:focus, .select:focus {
  box-shadow: 0 0 0 3px rgba(11,77,60,.18);
  border-color: var(--o);
  outline: none;
}

/* ── Toast — bottom-centered on mobile (native style) ── */
@media (max-width: 768px) {
  #toasts {
    bottom: calc(72px + env(safe-area-inset-bottom,0px) + .5rem);
    left: 1rem; right: 1rem;
    align-items: center;
  }
  .toast {
    border-radius: var(--r-lg);
    min-width: auto;
    max-width: 100%;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
  }
}

/* ── Smooth overscroll ── */
.cart-drawer__body,
.bottom-sheet,
.notif-panel__body {
  overscroll-behavior-y: contain;
}

/* ── Native segment control style for veg chips ── */
.zmt-chips {
  background: var(--surface-2);
  border-radius: 100px;
  padding: .2rem;
  gap: .15rem;
  width: fit-content;
  border: 1px solid var(--border);
}
.zmt-chip {
  border: none;
  background: transparent;
  border-radius: 100px;
  padding: .32rem .85rem;
  font-size: .79rem;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.zmt-chip:hover { background: var(--border); color: var(--text); }
.zmt-chip.active {
  background: var(--surface);
  color: var(--o);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  font-weight: 700;
}

/* ── Hero CTA button ── */
.btn-primary.btn-lg {
  height: 50px;
  font-size: .95rem;
  letter-spacing: .01em;
  border-radius: 14px;
}

/* ── Category chips on home — native pill style ── */
.cat-chip {
  border-radius: var(--r);
  min-width: 76px;
  padding: .75rem 1rem;
}

/* ── Section headers — iOS settings style ── */
.zmt-section__head {
  background: var(--bg-tint);
  border-bottom: 1px solid var(--border);
}

/* ── Sidebar nav — iOS table section style ── */
.zmt-cat-nav__item {
  border-bottom: 1px solid var(--border);
}
.zmt-cat-nav__item:last-child { border-bottom: none; }

/* ── Pull to refresh indicator ── */
.ptr-indicator {
  box-shadow: var(--sh);
  border: 1px solid var(--border);
}

/* ── iOS-like card pressed state ── */
.form-card, .order-summary-card, .pf-section {
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}

/* ── Swipe-to-delete: left reveal on cart items ── */
.cart-item__swipe-bg {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

/* ── Orders closed banner ───────────────────────────────── */
/* Shift content down by banner height (~42px) without touching hero */
body.orders-closed .page:not(#page-home) { padding-top: calc(var(--nav-h) + 42px); }
/* Home hero already has its own padding-top + the banner is fixed so it overlays hero */
/* On mobile, also shift bottom-nav-padded pages */
@media (max-width:768px) {
  body.orders-closed .page:not(#page-home) {
    padding-top: calc(var(--nav-h) + 42px);
  }
}

/* ── LOADING STATE ──────────────────────────────────────── */
.loading-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  padding:4rem 1rem;
  color:var(--text-3);
  font-size:.88rem;
}

/* ── ORDER DETAIL ───────────────────────────────────────── */
.order-detail-head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.25rem; flex-wrap:wrap; gap:.5rem;
}
.order-detail-code { font-family:var(--font-d); font-size:1.3rem; font-weight:600; letter-spacing:-.02em; }
.cancelled-notice {
  display:flex; align-items:center; gap:.6rem;
  color:var(--danger); font-weight:600; font-size:.9rem;
  background:rgba(196,26,14,.08); border-radius:var(--r-sm);
  padding:.75rem 1rem;
}
.delivery-eta {
  margin-top:.9rem; font-size:.82rem; color:var(--text-2);
  display:flex; align-items:center; gap:.4rem;
}

/* ── ITEM CARD UNAVAILABLE ──────────────────────────────── */
.item-card__unavail {
  font-size:.75rem; color:var(--text-3); font-weight:500;
  padding:.28rem .6rem; border-radius:var(--r-xs);
  background:var(--surface-2);
}

/* ── ERROR MESSAGE ──────────────────────────────────────── */
.error-msg {
  color:var(--danger); padding:1.5rem; text-align:center; font-size:.9rem;
}

/* ════════════════════════════════════════════════════════
   MOBILE / ANDROID / iOS — DEVICE-SPECIFIC RESPONSIVE
   ════════════════════════════════════════════════════════ */

/* ── Safe-area insets (iPhone notch / Dynamic Island / Android camera cutout) ── */
:root {
  --sat: env(safe-area-inset-top,    0px);
  --sar: env(safe-area-inset-right,  0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
}

/* Nav: extend into status-bar area */
#nav {
  padding-top: calc(var(--sat) + .6rem);
}

/* Bottom-fixed elements: account for home-indicator bar */
#cart-foot,
.checkout-submit-bar {
  padding-bottom: calc(var(--sab) + 1rem);
}

/* Prevent horizontal overflow on small screens */
html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── Touch targets: minimum 44×44 px (Apple HIG / Material) ── */
button,
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-ghost-dark,
.qty-btn,
.item-card__add,
.item-card__fav,
.nav__link,
.cat-chip,
.cat-tab,
.page-btn,
[data-page],
.order-card,
.addr-item,
.notif-item {
  min-height: 44px;
  min-width: 44px;
}

/* ── Prevent iOS double-tap zoom while keeping pinch-zoom ── */
button, a, [role="button"] {
  touch-action: manipulation;
}

/* ── Input zoom fix: font-size ≥ 16px prevents iOS auto-zoom ── */
input, select, textarea {
  font-size: max(16px, 1em) !important;
}

/* ── Tap highlight: use brand colour instead of grey box ── */
a, button, [role="button"] {
  -webkit-tap-highlight-color: rgba(11,77,60,.1);
}

/* ── Momentum scrolling for all scroll containers ── */
.sidebar__nav,
#cat-scroll,
#cat-tabs,
.cart-body,
.notif-list,
#orders-list,
#menu-grid {
  -webkit-overflow-scrolling: touch;
}

/* ── Cart drawer: extend below home indicator ── */
#cart-drawer {
  padding-bottom: calc(var(--sab) + 1rem);
}

/* ── Success / auth modals: avoid notch overlap on landscape ── */
.modal {
  padding-left:  max(1.25rem, var(--sal));
  padding-right: max(1.25rem, var(--sar));
}

/* ── Checkout page: more breathing room on small screens ── */
@media (max-width: 480px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .form-card {
    padding: 1rem;
  }
  .item-card {
    border-radius: 12px;
  }
  .item-card__img {
    height: 150px;
  }
}

/* ── Tablet / large-phone landscape ── */
@media (min-width: 481px) and (max-width: 900px) {
  .item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Small phone portrait ── */
@media (max-width: 360px) {
  html { font-size: 14px; }
  .hero__title { font-size: 1.75rem; }
  .nav__logo-text { font-size: .8rem; }
}

/* Dark mode tokens consolidated into single block above */

/* ═══════════════════════════════════════════════════════════
   PREMIUM POLISH — All audit fixes
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Status badges — dark mode aware (opacity-based) ── */
.status-pending          { background: rgba(251,191,36,.15);  color: #f59e0b; }
.status-confirmed        { background: rgba(59,130,246,.15);  color: #60a5fa; }
.status-preparing        { background: rgba(249,115,22,.15);  color: #fb923c; }
.status-ready            { background: rgba(16,185,129,.15);  color: #1a7a5e; }
.status-out_for_delivery { background: rgba(139,92,246,.15);  color: #a78bfa; }
.status-delivered        { background: rgba(34,197,94,.15);   color: #4ade80; }
.status-cancelled        { background: rgba(239,68,68,.15);   color: #f87171; }
/* Keep readable in light mode */
@media (prefers-color-scheme: light) {
  .status-pending          { background:#fef3c7; color:#92400e; }
  .status-confirmed        { background:#dbeafe; color:#1e40af; }
  .status-preparing        { background:#ffedd5; color:#9a3412; }
  .status-ready            { background:#d1fae5; color:#065f46; }
  .status-out_for_delivery { background:#ede9fe; color:#5b21b6; }
  .status-delivered        { background:#dcfce7; color:#14532d; }
  .status-cancelled        { background:#fee2e2; color:#991b1b; }
}
[data-theme="dark"] .status-pending          { background: rgba(251,191,36,.12);  color: #fbbf24; }
[data-theme="dark"] .status-confirmed        { background: rgba(96,165,250,.12);  color: #60a5fa; }
[data-theme="dark"] .status-preparing        { background: rgba(251,146,60,.12);  color: #fb923c; }
[data-theme="dark"] .status-ready            { background: rgba(52,211,153,.12);  color: #1a7a5e; }
[data-theme="dark"] .status-out_for_delivery { background: rgba(167,139,250,.12); color: #a78bfa; }
[data-theme="dark"] .status-delivered        { background: rgba(74,222,128,.12);  color: #4ade80; }
[data-theme="dark"] .status-cancelled        { background: rgba(248,113,113,.12); color: #f87171; }

/* ── 2. Cart drawer — frosted glass ── */
.cart-drawer {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
[data-theme="dark"] .cart-drawer {
  background: rgba(17,17,17,.94);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

/* ── 3. Hero ring — remove for photo bg, replace with subtle glow ── */
.hero__ring {
  background: none;
  border: none;
  animation: floatY 7s ease-in-out infinite;
  will-change: transform;
}
.hero__ring::before,
.hero__ring::after { display: none; }  /* remove spinning rings on photo bg */
.hero__disc { box-shadow: 0 0 0 20px rgba(11,77,60,.08), 0 24px 70px var(--o-shad); }

/* ── 4. Active order banner — pulse dot, not spin ── */
.active-order-banner__icon {
  animation: none !important;
}
/* Pulse dot instead of spin */
.active-order-banner__icon::after {
  content: '';
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  animation: liveGlow 1.8s ease-in-out infinite;
}
.active-order-banner__icon { position: relative; }
@keyframes liveGlow {
  0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(74,222,128,.4); }
  50%      { opacity: .8; transform: scale(1.2); box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}

/* ── 5. pulse-border — compositor-safe (opacity only) ── */
@keyframes pulse-border {
  0%,100% { opacity: 1; }
  50%      { opacity: .72; }
}

/* ── 6. Hero ring pause when off-screen (managed by JS IntersectionObserver) ── */
.hero__ring.paused,
.hero__ring.paused * { animation-play-state: paused !important; }

/* ── 7. btn-primary dark mode hover — lighten instead of darken ── */
[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, #0B4D3C 0%, #1a7a5e 100%);
  filter: brightness(1.08);
}

/* ── 8. Unify section title — consistent across home + menu ── */
.section-title,
.zmt-section__title {
  font-family: var(--font-b);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
/* Keep Playfair only for hero */
.hero__title { font-family: var(--font-d); }

/* ── 9. Mobile hero — headline before ring ── */
@media (max-width: 768px) {
  .hero__visual { order: 1; }   /* ring goes AFTER text on mobile */
  .hero__content { order: 0; }
}

/* ── 10. Mobile checkout — form before summary ── */
@media (max-width: 768px) {
  .checkout-summary-col { order: 1; }   /* summary AFTER form */
  .checkout-form-col    { order: 0; }
}

/* ── 11. Dead token cleanup — remove --o-mid usage (same as --o) ── */
/* (token kept for compat but documented as deprecated) */

/* ── 12. Inline form validation styles ── */
.input.input--error,
.textarea.input--error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.input.input--ok,
.textarea.input--ok     { border-color: var(--o) !important; }
.field-error {
  font-size: .75rem; color: #ef4444; font-weight: 600;
  margin-top: .25rem; display: flex; align-items: center; gap: .3rem;
}
.field-error i { font-size: .7rem; }

/* ── 13. Font Awesome preload hint via CSS willingness ── */
/* FA icons get font-display:block via cdnjs; nothing to override */

/* cardIn rule consolidated above — single source */

/* ── 15. prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__ring,
  .active-order-banner__icon::after,
  .splash__loader span,
  .tl-dot.active,
  .loyalty-progress__fill { animation: none !important; transition: none !important; }
}

/* ── 16. Mobile img-wrap aspect ratio — prevent layout shift ── */
.item-card__img-wrap { aspect-ratio: 16/9; height: auto; }
@media (min-width: 769px) { .item-card__img-wrap { height: 148px; aspect-ratio: unset; } }

/* ── 17. order-detail — sticky back button ── */
#page-order-detail .btn-back {
  position: sticky; top: calc(var(--nav-h) + .5rem);
  z-index: 10; display: inline-flex;
  background: var(--surface);
  border-radius: 100px; padding: .35rem .85rem;
  box-shadow: var(--sh-sm); border: 1px solid var(--border);
}

/* ── 18. Will-change on composited animations ── */
.hero__ring   { will-change: transform; }
.ptr-indicator{ will-change: transform, opacity; }
.bottom-sheet { will-change: transform; }
.cart-drawer  { will-change: transform; }

/* ── 19. Success icon — consistent with FA ── */
.success-icon { color: var(--o); }

/* ── 20. Touch targets — global safety net (direct size, not just min) ── */
.qty-btn          { min-width: 36px; min-height: 36px; }
.item-card__add   { min-width: 36px; min-height: 36px; }
.zmt-item__add-btn{ min-width: 36px; min-height: 36px; }
.cart-item__del   { min-width: 36px; min-height: 36px; }
.sheet-qty__btn   { min-width: 36px; min-height: 36px; }

/* ── 21. Section title consistency — remove font-d from section-head ── */
.section-head .section-title { font-family: var(--font-b); font-size: 1.05rem; }

/* ── 22. Search bar — soften negative margin on mobile ── */
@media (max-width: 768px) {
  .search-wrap { margin-top: -1rem; }  /* was -1.75rem, too aggressive */
}