/* ═══════════════════════════════════════════════════════════════════
   SNACKAPP — LIGHT/CREAM-BLUE — Design Port Phase 1
   Tokens: paper base + cream-blue wash, ink scale, orange + ink accents,
   pink tweak swatch. Poppins (display) / Inter (body) / JetBrains Mono.
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Primary */
  --brand:#FF6B35;--brand-d:#E85A24;--brand-l:rgba(255,107,53,.10);
  --brand-g:linear-gradient(135deg,#FF6B35 0%,#FF8555 100%);
  /* Accent — ink/black for "App" wordmark and dark hero panels */
  --accent:#0A0A0A;--accent-g:linear-gradient(135deg,#0A0A0A 0%,#2A2A2A 100%);
  /* Pink tweak swatch (promo ribbons, badges) */
  --pink:#FF6B9D;--pink-l:rgba(255,107,157,.10);
  --pink-g:linear-gradient(135deg,#FF6B9D 0%,#FF8FB8 100%);
  /* Status */
  --green:#22C55E;--green-g:linear-gradient(135deg,#22C55E 0%,#10B981 100%);
  --green-l:rgba(34,197,94,.10);
  --red:#EF4444;--red-l:rgba(239,68,68,.10);
  --yellow:#FBBF24;

  /* Paper + cream-blue surfaces */
  --paper:#F7F6F2;
  --cream:rgba(180,210,240,.35);
  --bg:#F7F6F2;--bg2:#F0EEE8;--bg3:#E9E6DE;
  --srf:#FFFFFF;--srf2:#F7F6F2;--srf3:#EBE9E3;
  --card:#FFFFFF;

  /* Ink scale */
  --txt:#0A0A0A;--txt2:#3A3A3A;--txt3:#6B6B6B;--txt4:#9A9A9A;
  --inv:#FFFFFF;
  --brd:rgba(10,10,10,.08);--brd2:rgba(10,10,10,.04);
  --div:rgba(10,10,10,.06);
  --glass:rgba(255,255,255,.7);

  /* Fonts — display/body/mono */
  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-display:'Poppins','Inter',-apple-system,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --f10:10px;--f11:11px;--f12:12px;--f13:13px;--f14:14px;--f15:15px;
  --f16:16px;--f18:18px;--f20:20px;--f22:22px;--f24:24px;--f28:28px;--f32:32px;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;
  --r4:4px;--r8:8px;--r10:10px;--r12:12px;--r14:14px;--r16:16px;--r20:20px;--r24:24px;--r32:32px;--rF:9999px;

  /* Soft shadows for light theme */
  --sh1:0 2px 8px rgba(10,10,10,.06);--sh2:0 4px 16px rgba(10,10,10,.08);--sh3:0 8px 32px rgba(10,10,10,.12);
  --shB:0 -2px 16px rgba(10,10,10,.08);
  --glow-brand:0 4px 20px rgba(255,107,53,.22);
  --glow-green:0 4px 20px rgba(34,197,94,.20);
  --glow-accent:0 4px 20px rgba(10,10,10,.18);

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --tab-h:64px;
}

html,body{font-family:var(--ff);background:var(--paper);color:var(--txt);height:100%;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;line-height:1.5}
body{position:fixed;width:100%;background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%)}
#app{height:100%;display:flex;flex-direction:column;overflow:hidden;background:transparent;position:relative;margin:0 auto}
img{display:block;max-width:100%}
button{font-family:var(--ff);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a,.pc,.show-card,.hcard,.lo,.oh-card,.cl-item,.tab,.cat,.side-lk,.pf-act,.c-item,.c-qb,.fab,.hdr-btn,.auth-tab,.m-btn{touch-action:manipulation}
input,textarea{font-family:var(--ff)}
.emoji-fallback{font-size:48px}

/* ═══════════ SPLASH — SnackApp wordmark, no tile ═══════════ */
.splash{position:fixed;inset:0;z-index:9999;background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%);display:flex;align-items:center;justify-content:center;transition:opacity .5s,visibility .5s}
.splash.fade-out{opacity:0;visibility:hidden;pointer-events:none}
.splash-content{text-align:center;padding:0 var(--s6)}
.splash-icon{display:block;width:168px;height:168px;margin:0 auto var(--s4);object-fit:contain;border-radius:36px;filter:drop-shadow(0 18px 36px rgba(120,60,0,.22))}
/* Wordmark: "Snack" ink + "App" orange, no tile */
.wordmark{font-family:var(--ff-display);font-weight:700;letter-spacing:-.8px;line-height:1}
.wordmark .w-snack{color:var(--txt)}
.wordmark .w-app{color:var(--brand)}
.splash-wordmark{font-size:34px;font-weight:700;letter-spacing:-.5px;margin-bottom:var(--s2)}
.splash-subtitle{font-family:var(--ff);font-size:var(--f12);color:var(--txt3);margin-top:var(--s1);font-weight:500;letter-spacing:.1px}
.splash-dots{display:flex;gap:6px;justify-content:center;margin-top:var(--s7)}
.dot{width:6px;height:6px;border-radius:var(--rF);background:var(--brd);animation:dp 1.2s ease infinite}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes dp{0%,100%{transform:scale(1);background:var(--brd)}50%{transform:scale(1.5);background:var(--brand)}}

/* Display font for headings + feature titles */
.hero-title,.sec-t,.auth-title,.det-name,.hdr-title,.cfm-t,.empty-state h3,.splash-title{font-family:var(--ff-display);letter-spacing:-.6px}

/* ═══════════ HEADER — transparent floating bar ═══════════ */
.hdr{background:transparent;padding:calc(var(--safe-t) + 10px) var(--s4) 10px;display:flex;align-items:center;gap:var(--s3);z-index:100;position:absolute;top:0;left:0;right:0;pointer-events:none}
.hdr>*{pointer-events:auto}
.hdr-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.82);border:1px solid rgba(10,10,10,.08);color:var(--txt);font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;backdrop-filter:blur(10px);box-shadow:0 4px 12px rgba(10,10,10,.05)}
.hdr-btn:active{transform:scale(.92);background:#fff}
.hdr-title{flex:1;font-size:var(--f20);font-weight:800;letter-spacing:-.3px}
.hdr-chat-brand{display:flex;align-items:center;min-width:0}
.hdr-chat-brand .wordmark{font-size:28px;letter-spacing:-1px}
.hdr-chat-thread{display:flex;align-items:center;min-width:0}
.hdr-chat-wordmark{font-size:30px;letter-spacing:-1px;line-height:1}
.hdr-chat-live{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;margin-left:auto;flex-shrink:0;
  border:none;background:transparent;padding:0;cursor:pointer;
}
.hdr-chat-live-ring{
  position:absolute;border-radius:50%;pointer-events:none;
  border:1px solid rgba(34,197,94,.34);
  background:radial-gradient(circle,rgba(34,197,94,.14) 0%,rgba(34,197,94,0) 72%);
}
.hdr-chat-live-ring-a{width:54px;height:54px;animation:chatLivePulse 2.1s ease-in-out infinite}
.hdr-chat-live-ring-b{width:66px;height:66px;border-color:rgba(34,197,94,.22);animation:chatLivePulse 2.1s ease-in-out infinite .35s}
.hdr-chat-live-core{
  position:relative;z-index:2;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(135deg,#F2FFF7 0%,#DDF8E8 100%);
  border:1.5px solid rgba(34,197,94,.36);
  box-shadow:0 8px 22px rgba(34,197,94,.16);
}
.hdr-chat-live-core img{width:100%;height:100%;object-fit:cover;display:block}
.hdr-chat-live-ini{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#15803D;font-family:var(--ff-display);font-size:15px;font-weight:800;
  background:linear-gradient(135deg,#F2FFF7 0%,#DDF8E8 100%);
}
@keyframes chatLivePulse{
  0%,100%{transform:scale(.92);opacity:.7}
  50%{transform:scale(1.06);opacity:1}
}
.hdr-cart{position:relative}
.hdr-badge{position:absolute;top:-5px;right:-5px;background:var(--brand);color:var(--inv);font-size:var(--f10);font-weight:800;min-width:20px;height:20px;border-radius:var(--rF);display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--bg);box-shadow:var(--glow-brand)}
/* Profile avatar — top-right of browse header */
.hdr-av{width:40px;height:40px;border-radius:var(--rF);background:var(--srf2);border:1px solid var(--brd);padding:0;overflow:hidden;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s;margin-left:auto}
.hdr-av img{width:100%;height:100%;object-fit:cover;display:block}
.hdr-av-ini{font-family:var(--ff-display);font-weight:800;font-size:15px;color:var(--txt);background:var(--brand-l);width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hdr-av:active{transform:scale(.92)}
.hdr-av:hover{box-shadow:var(--glow-brand)}
.hdr-chat-prof{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;margin-left:auto;flex-shrink:0;
  border:none;background:transparent;padding:0;cursor:pointer;
}
.hdr-chat-prof-core{
  position:relative;z-index:2;width:40px;height:40px;border-radius:50%;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#F7FBFF 0%,#E4F1FF 100%);
  border:1.5px solid rgba(98,171,255,.45);
  box-shadow:0 8px 24px rgba(81,159,255,.18);
}
.hdr-chat-prof-core img{width:100%;height:100%;object-fit:cover;display:block}
.hdr-chat-prof-ini{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:15px;font-weight:800;color:#0F3D68;
  background:linear-gradient(135deg,#EAF4FF 0%,#CFE6FF 100%);
}
.hdr-chat-orbit{
  position:absolute;border-radius:50%;border:1px solid rgba(102,176,255,.45);
  background:radial-gradient(circle,rgba(120,190,255,.18) 0%,rgba(120,190,255,0) 72%);
  pointer-events:none;
}
.hdr-chat-orbit-a{
  width:54px;height:54px;z-index:1;
  animation:chatOrbitPulse 2.4s ease-in-out infinite;
}
.hdr-chat-orbit-b{
  width:66px;height:66px;z-index:0;
  border-color:rgba(112,195,255,.34);
  animation:chatOrbitSpin 8s linear infinite;
}
@keyframes chatOrbitPulse{
  0%,100%{transform:scale(.92);opacity:.7}
  50%{transform:scale(1.06);opacity:1}
}
@keyframes chatOrbitSpin{
  from{transform:rotate(0deg) scale(1)}
  to{transform:rotate(360deg) scale(1)}
}

/* ═══════════ TAB BAR — floating pill with blue outline ═══════════ */
.tabs{display:flex;align-items:center;background:rgba(255,255,255,.42);padding:4px var(--s3);z-index:100;position:absolute;bottom:calc(var(--safe-b) + var(--s3));left:var(--s4);right:var(--s4);border:1.5px solid var(--brand);border-radius:999px;backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);box-shadow:0 0 14px rgba(255,107,53,.55),0 0 28px rgba(255,107,53,.32),0 0 8px rgba(255,107,53,.55) inset;animation:pillGlowO 3s ease-in-out infinite alternate}
@keyframes pillGlowO{
  0%{box-shadow:0 0 10px rgba(255,107,53,.40),0 0 22px rgba(255,107,53,.22),0 0 6px rgba(255,107,53,.45) inset}
  100%{box-shadow:0 0 18px rgba(255,107,53,.70),0 0 34px rgba(255,107,53,.42),0 0 10px rgba(255,107,53,.70) inset}
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 3px;border:none;background:none;position:relative;transition:all .2s;color:var(--txt3)}
.tab-i{width:40px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:11px;transition:all .25s}
.tab-i svg{width:18px;height:18px;display:block}
.tab-l{font-size:10px;font-weight:600;color:var(--txt3);transition:color .2s;letter-spacing:.1px;white-space:nowrap}
.tab.on{color:var(--brand)}
.tab.on .tab-i{background:var(--brand-l)}
.tab.on .tab-i svg{stroke-width:2.1}
.tab.on .tab-l{color:var(--brand);font-weight:700}
.tab-b{position:absolute;top:4px;right:calc(50% - 22px);background:var(--brand);color:var(--inv);font-size:9px;font-weight:800;min-width:16px;height:16px;border-radius:var(--rF);display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg)}

/* ═══════════ SCREEN ═══════════ */
.scr{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding-top:calc(var(--safe-t) + 52px);padding-bottom:calc(var(--safe-b) + 78px)}
.scr::-webkit-scrollbar{width:3px}
.scr::-webkit-scrollbar-thumb{background:var(--srf3);border-radius:4px}
.scr-browse{padding-top:0}
.scr-chat{display:flex;flex-direction:column;padding-bottom:0;background:var(--paper)}

/* ═══════════ AUTH — Light / cream-blue ═══════════ */
.auth{min-height:100%;display:flex;flex-direction:column;background:transparent}
.auth-hero{position:relative;padding:calc(var(--safe-t) + 56px) var(--s6) 40px;text-align:center;overflow:hidden}
.auth-hero-bg{position:absolute;inset:0;background:transparent}
.auth-hero-content{position:relative;z-index:1}
.auth-wordmark{font-size:44px;margin-bottom:var(--s3)}
.auth-subtitle{font-size:var(--f15);color:var(--txt2);margin-top:var(--s1);font-weight:500;line-height:1.5;max-width:360px;margin-left:auto;margin-right:auto}
.auth-form{flex:1;padding:var(--s6) var(--s5) calc(var(--s8) + var(--safe-b));background:var(--srf);border:1px solid var(--brd);border-radius:var(--r24) var(--r24) 0 0;position:relative;z-index:2;margin-top:var(--s4);box-shadow:var(--sh1)}
.auth-tabs{display:flex;background:var(--bg2);border-radius:var(--r14);padding:4px;margin-bottom:var(--s6)}
.auth-tab{flex:1;padding:var(--s3);border:none;background:none;font-size:var(--f14);font-weight:600;color:var(--txt3);border-radius:var(--r12);transition:all .25s;font-family:var(--ff)}
.auth-tab.on{background:var(--brand-g);color:var(--inv);box-shadow:var(--glow-brand)}
.auth-forgot{text-align:right;margin:-4px 0 14px 0}
.auth-forgot a{color:var(--brand);font-size:var(--f13);text-decoration:none;font-weight:600}
.auth-forgot a:hover{text-decoration:underline}
.auth-back{text-align:center;margin-top:var(--s4)}
.auth-back a{color:var(--txt3);font-size:var(--f13);text-decoration:none;font-weight:500}
.auth-back a:hover{color:var(--txt);text-decoration:underline}
.auth-note{color:var(--txt3);font-size:var(--f14);margin-bottom:var(--s5);line-height:1.55}
.auth-err{background:var(--red-l);border:1px solid rgba(239,68,68,.25);color:#b91c1c;padding:var(--s3) var(--s4);border-radius:var(--r10);margin-bottom:var(--s4);font-size:var(--f13);font-weight:500}
.auth-msg{text-align:center;padding:var(--s4) 0}
.auth-msg-ic{font-size:48px;margin-bottom:var(--s4)}
.auth-msg h3{font-family:var(--ff-display);font-size:var(--f20);font-weight:800;color:var(--txt);margin-bottom:var(--s3)}
.auth-msg p{color:var(--txt3);font-size:var(--f14);line-height:1.6;margin-bottom:var(--s5)}

/* Password show/hide eye */
.pw-wrap{position:relative}
.pw-wrap .pw-inp{padding-right:44px !important}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--txt3);padding:6px 10px;cursor:pointer;font-size:18px;line-height:1;border-radius:6px;transition:color .15s,background .15s}
.pw-eye:hover{color:var(--txt);background:var(--bg2)}

.auth-av{width:90px;height:90px;border-radius:var(--rF);margin:0 auto var(--s5);background:var(--bg);border:2px dashed var(--brd);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:all .2s}
.auth-av:active{transform:scale(.95)}
.auth-av img{width:100%;height:100%;object-fit:cover}
.auth-av-ph{text-align:center;color:var(--txt3);font-size:var(--f12)}
.auth-av-ph span{font-size:28px;display:block;margin-bottom:4px}

.fg{margin-bottom:var(--s4)}
.fl{display:block;font-size:var(--f12);font-weight:600;color:var(--txt2);margin-bottom:6px}
.fi{width:100%;padding:14px var(--s4);border:1.5px solid var(--brd);border-radius:var(--r14);font-size:var(--f15);color:var(--txt);background:var(--bg);outline:none;transition:all .2s}
.fi:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,107,74,.1)}
.fi::placeholder{color:var(--txt4)}

.btn-p{width:100%;padding:16px;border-radius:var(--r14);background:var(--brand-g);color:var(--inv);font-size:var(--f15);font-weight:700;border:none;transition:all .2s;box-shadow:var(--glow-brand);letter-spacing:.3px}
.btn-p:active{transform:scale(.97);filter:brightness(.85)}
.btn-p:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-p.grn{background:var(--green-g);box-shadow:var(--glow-green)}
.btn-o{width:100%;padding:15px;border-radius:var(--r14);background:var(--glass);color:var(--txt);font-size:var(--f15);font-weight:600;border:1px solid var(--brd);transition:all .2s}
.btn-o:active{background:var(--srf2);transform:scale(.97)}

/* ═══════════ HERO BANNER ═══════════ */
.hero{position:relative;padding:var(--s5) var(--s4) var(--s6);overflow:hidden}
.hero-bg{position:absolute;inset:0;background:var(--brand-g);opacity:.06;border-radius:0 0 var(--r32) var(--r32)}
.hero-content{position:relative;z-index:1}
.hero-greeting{font-size:var(--f14);color:var(--txt2);font-weight:500;margin-bottom:var(--s2)}
.hero-title{font-size:var(--f28);font-weight:800;line-height:1.15;letter-spacing:-.5px;margin-bottom:var(--s2)}
.hero-title span{background:var(--brand-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:var(--f13);color:var(--txt3);margin-bottom:var(--s4)}
.hero-search{display:flex;align-items:center;gap:var(--s3);background:var(--srf);border:1px solid var(--brd);border-radius:var(--r14);padding:0 var(--s4);transition:all .2s}
.hero-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,107,53,.10)}
.hero-search-ic{font-size:16px;color:var(--txt3);flex-shrink:0}
.hero-search input{flex:1;border:none;outline:none;background:none;font-size:var(--f14);color:var(--txt);padding:14px 0}
.hero-search input::placeholder{color:var(--txt4)}
.hero-search-clear{
  border:none;background:transparent;flex-shrink:0;cursor:pointer;font-family:inherit;
  transition:opacity .15s,transform .15s,background .15s,color .15s;
}
.hero-search-clear{
  opacity:0;pointer-events:none;transform:translateX(4px);
  padding:6px 10px;border-radius:999px;font-size:var(--f12);font-weight:700;color:var(--txt3);
}
.hero-search input:not(:placeholder-shown) ~ .hero-search-clear{
  opacity:1;pointer-events:auto;transform:none;
}
.hero-search-clear:hover{background:rgba(10,10,10,.05);color:var(--txt)}

/* Mobile greeting + search (shown only on mobile) */
.m-greet{padding:calc(var(--safe-t) + 8px) var(--s4) var(--s3);display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.m-greet-t{font-family:var(--ff-display);font-size:44px;font-weight:600;line-height:1.02;letter-spacing:-1px;color:var(--txt);flex:1;min-width:0}
.m-greet-t span{color:var(--txt);font-weight:600}
.m-search-wrap{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;height:44px}
.m-search-wrap.open{flex:1;max-width:none}
.m-search-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--brd);background:var(--srf);color:var(--txt);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s}
.m-search-btn svg{width:20px;height:20px}
.m-search-btn:hover{background:var(--bg2);border-color:var(--txt3)}
.m-search-wrap.open .m-search-btn{background:var(--brand);border-color:var(--brand);color:#fff}
.m-search-inp{flex:1;min-width:0;height:44px;border:1px solid var(--brd);background:var(--bg2);border-radius:999px;padding:0 var(--s4);font-size:var(--f13);color:var(--txt);font-family:inherit;outline:none;margin-right:var(--s2)}
.m-search-inp:focus{border-color:var(--brand);background:var(--srf);box-shadow:0 0 0 3px rgba(255,107,53,.10)}
.m-search-inp::placeholder{color:var(--txt4)}

/* When search is open on mobile, collapse the greeting title so the input has full width */
body.searching .m-greet-t{display:none}
body.searching .m-greet{padding-bottom:var(--s3)}

/* Desktop-only marker: hidden on mobile, shown \u22651024px */
.d-only{display:none}

/* Warm orange hero panel (Home) \u2014 DESKTOP ONLY */
.hero.hero-dark{
  background:
    radial-gradient(circle at top right,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 28%),
    linear-gradient(135deg,#FF7A46 0%,#FF905E 42%,#FFB47C 100%);
  color:#fff;border-radius:var(--r24);margin:var(--s4) var(--s5);padding:var(--s6) var(--s6);
  box-shadow:0 20px 40px rgba(255,107,53,.22);position:relative;overflow:hidden
}
.hero.hero-dark::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 42%,rgba(131,50,18,.08) 100%)
}
.hero-dark .hero-bg{display:none}
.hero-top-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--s4);gap:var(--s4)}
.hero-top-row.solo{justify-content:flex-end}
.hero-dark .hero-title{color:#fff;font-family:var(--ff-display);font-size:32px;line-height:1.15;letter-spacing:-.6px;margin-bottom:var(--s3)}
.hero-dark .hero-title span{background:linear-gradient(135deg,#FFF8F1 0%,#FFE1C6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-dark .hero-desc{color:rgba(255,247,240,.92);font-size:var(--f14);line-height:1.55;margin-bottom:var(--s5);max-width:560px}
.hero-loc-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--rF);
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);color:#FFF7EF;
  font-size:var(--f11);font-weight:600;letter-spacing:.3px;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)
}
.hero-badge-big{
  background:rgba(91,33,13,.18);border:1px solid rgba(255,255,255,.22);border-radius:var(--r16);
  padding:var(--s3) var(--s4);text-align:center;min-width:100px;flex-shrink:0;
  box-shadow:0 10px 26px rgba(131,50,18,.18)
}
.hbb-num{font-family:var(--ff-display);font-size:28px;font-weight:800;color:#FFF3E8;line-height:1;letter-spacing:-.5px}
.hbb-num span{font-size:var(--f13);font-weight:600;color:rgba(255,244,238,.84);margin-left:3px}
.hbb-label{font-size:9px;font-weight:700;color:rgba(255,241,232,.76);text-transform:uppercase;letter-spacing:.8px;margin-top:4px}
.hero-dark .hero-search{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);backdrop-filter:blur(10px)}
.hero-dark .hero-search:focus-within{border-color:rgba(255,255,255,.48);background:rgba(255,255,255,.24);box-shadow:0 0 0 3px rgba(255,244,235,.18)}
.hero-dark .hero-search-ic{color:rgba(255,248,243,.82)}
.hero-dark .hero-search input{color:#fff}
.hero-dark .hero-search input::placeholder{color:rgba(255,247,242,.74)}

/* ═══════════ SEARCH MODE ═══════════ */
/* When the user is searching, collapse the hero, hide categories, tab bar
   and FAB so the visible area is: search bar + filtered results + keyboard. */
body.searching .hero-greeting,
body.searching .hero-title,
body.searching .hero-desc,
body.searching .hero-top-row,
body.searching .hero-sub,
body.searching .hero-bg,
body.searching .cats-wrap,
body.searching .tabs,
body.searching .fab,
body.searching .promo-top-banner,
body.searching .promo-carousel-wrap,
body.searching .friday-drop,
body.searching .showcase,
body.searching .sec-hdr{display:none!important}
body.searching .hero{padding:var(--s3) var(--s4)}
body.searching .pgrid{padding-bottom:var(--s4)}
body.loc-searching .tabs,
body.loc-searching .cart-bar{display:none!important}

/* ═══════════ CATEGORIES — simple pills with counts ═══════════ */
.cats-wrap{padding:0}
.cats-pills{display:flex;gap:6px;overflow-x:auto;padding:var(--s2) var(--s4);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cats-pills::-webkit-scrollbar{display:none}
.cat-pill{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:6px 11px;border-radius:var(--rF);background:var(--srf);border:1px solid var(--brd);font-family:inherit;transition:background .15s,color .15s,border-color .15s;cursor:pointer}
.cat-pill:active{transform:scale(.96)}
.cat-pill-l{font-size:var(--f13);font-weight:600;color:var(--txt);white-space:nowrap}
.cat-pill-n{font-size:var(--f13);font-weight:700;color:var(--txt3);line-height:1;padding:0;background:none;border:none;min-width:0}
.cat-pill.on{background:var(--accent);border-color:var(--accent)}
.cat-pill.on .cat-pill-l{color:#fff}
.cat-pill.on .cat-pill-n{color:rgba(255,255,255,.85)}

/* ═══════════ FRIDAY DROP ═══════════ */
.friday-drop{margin:0 var(--s4) var(--s4);background:var(--accent);color:#fff;border-radius:var(--r20);padding:var(--s5) var(--s4);position:relative;overflow:hidden;box-shadow:var(--sh2)}
.friday-drop::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,107,53,.18) 0%,rgba(255,107,157,.14) 100%);pointer-events:none}
.fd-top{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);position:relative;z-index:1}
.fd-ic{width:42px;height:42px;border-radius:var(--r12);background:var(--brand-g);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--glow-brand);flex-shrink:0}
.fd-info{flex:1;min-width:0}
.fd-title{font-family:var(--ff-display);font-size:var(--f18);font-weight:800;color:#fff;letter-spacing:-.3px}
.fd-sub{font-size:var(--f12);color:rgba(255,255,255,.7);margin-top:2px}
.fd-rail{display:flex;gap:var(--s3);overflow-x:auto;padding-bottom:var(--s2);position:relative;z-index:1;scrollbar-width:none}
.fd-rail::-webkit-scrollbar{display:none}
.friday-drop .hcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.friday-drop .hcard-name{color:#fff}
.friday-drop .hcard-price{color:#FFB592}


/* ═══════════ SECTION HEADER ═══════════ */
.sec-hdr{display:flex;align-items:baseline;justify-content:space-between;padding:var(--s3) var(--s4) var(--s2)}
.sec-t{font-size:var(--f15);font-weight:800;letter-spacing:-.2px;color:var(--txt2)}
.sec-c{font-size:var(--f12);color:var(--txt3);font-weight:500}
.sec-see{color:var(--brand);cursor:pointer;font-weight:600}
.sec-see:active{opacity:.7}

/* ═══════════ FEATURED SHOWCASE — Horizontal large cards ═══════════ */
.showcase{display:flex;gap:var(--s4);overflow-x:auto;padding:0 var(--s4) var(--s4);scrollbar-width:none;scroll-snap-type:x mandatory}
.showcase::-webkit-scrollbar{display:none}

.show-card{
  flex-shrink:0;width:300px;min-height:180px;
  border-radius:var(--r24);padding:var(--s5);
  display:flex;align-items:center;gap:var(--s3);
  cursor:pointer;transition:transform .2s;
  position:relative;overflow:hidden;
  scroll-snap-align:start;
}
.show-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.05) 100%);
}
.show-card:active{transform:scale(.97)}

.show-info{position:relative;z-index:1;flex:1;min-width:0}
.show-brand{font-size:var(--f11);font-weight:600;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--s1)}
.show-name{font-size:var(--f18);font-weight:800;color:#fff;line-height:1.2;margin-bottom:var(--s2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.show-price{font-size:var(--f16);font-weight:800;color:#fff;margin-bottom:var(--s3)}
.show-btn{padding:8px 18px;border-radius:var(--rF);background:rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.25);font-size:var(--f12);font-weight:700;transition:all .2s;font-family:var(--ff)}
.show-btn:active{background:rgba(255,255,255,.35);transform:scale(.95)}

.show-img{position:relative;z-index:1;width:120px;height:120px;flex-shrink:0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 8px 20px rgba(0,0,0,.3))}
.show-img img{width:100%;height:100%;object-fit:contain}
.show-img .emoji-fallback{font-size:60px}

/* ═══════════ HORIZONTAL SCROLL CARDS ═══════════ */
.hscroll{display:flex;gap:var(--s3);overflow-x:auto;padding:0 var(--s4) var(--s2);scrollbar-width:none;scroll-snap-type:x proximity}
.hscroll::-webkit-scrollbar{display:none}

.hcard{
  flex-shrink:0;width:150px;
  border-radius:var(--r20);overflow:hidden;
  background:var(--card);border:1px solid var(--brd);
  cursor:pointer;transition:transform .2s;
  scroll-snap-align:start;
}
.hcard:active{transform:scale(.96)}

.hcard-img{
  width:100%;height:130px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.hcard-img-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--s3)}
.hcard-img-inner img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.hcard-img .emoji-fallback{font-size:50px}
.hcard-img .pc-badge{position:absolute;top:var(--s2);left:var(--s2)}

.hcard-info{padding:var(--s3)}
.hcard-name{font-size:var(--f12);font-weight:600;color:var(--txt);line-height:1.3;height:32px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hcard-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s2)}
.hcard-price{font-size:var(--f14);font-weight:800;color:var(--brand)}
.hcard-add{width:30px;height:30px;border-radius:var(--r10);background:var(--brand-g);color:var(--inv);border:none;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .15s;box-shadow:var(--glow-brand)}
.hcard-add:active{transform:scale(.85)}
.hcard-add:disabled{background:var(--srf3);box-shadow:none;color:var(--txt4)}

/* ═══════════ PRODUCT GRID (Search/Category) ═══════════ */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);padding:0 var(--s4) var(--s8)}

.pc{background:linear-gradient(180deg,#FFFFFF 0%,#F1ECDF 100%);border-radius:var(--r16);overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .2s;border:none;box-shadow:0 1px 2px rgba(10,10,10,.04);display:flex;flex-direction:column}
.pc:active{transform:scale(.98)}

/* Image tile — no background of its own; the card's white\u2192cream gradient
   spans continuously beneath. mix-blend-mode:darken drops any white rectangle
   baked into product photos so every snack floats on the shared backdrop. */
.pc-img-wrap{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:transparent;isolation:auto}
.pc-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--s3);mix-blend-mode:darken}
.pc-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .4s}
.pc:active .pc-img img{transform:scale(1.04)}
.pc-img .emoji-fallback{font-size:44px;mix-blend-mode:normal}

.pc-badge{position:absolute;top:var(--s2);left:var(--s2);font-size:var(--f10);font-weight:700;padding:3px 8px;border-radius:var(--rF);backdrop-filter:blur(12px);z-index:2}
.b-low{background:rgba(251,191,36,.18);color:#92400E}
.b-out{background:rgba(239,68,68,.14);color:#B91C1C}

.pc-body{padding:var(--s2) var(--s3) var(--s3)}
.pc-brand{font-size:9px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.pc-name{font-family:var(--ff-display);font-size:var(--f13);font-weight:700;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.22;letter-spacing:-.2px}
.pc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s2);gap:var(--s2)}
.pc-price{font-family:var(--ff-mono);font-size:var(--f13);font-weight:700;color:var(--txt)}
.pc-add{display:inline-flex;align-items:center;gap:3px;padding:5px 10px;border-radius:var(--rF);background:var(--accent);color:#fff;border:none;font-size:var(--f11);font-weight:700;font-family:inherit;transition:transform .12s,background .15s;cursor:pointer;white-space:nowrap}
.pc-add span{font-size:13px;line-height:1;margin-top:-1px}
.pc-add:active{transform:scale(.94)}
.pc-add:hover{background:#1a1a1a}
.pc-add:disabled{background:var(--srf3);color:var(--txt4);cursor:not-allowed}

/* ═══════════ PRODUCT DETAIL — IMMERSIVE ═══════════ */
.det{padding-bottom:calc(90px + var(--safe-b))}

/* Large SnackTile canvas \u2014 matches product card aesthetic at hero scale */
.det-canvas{margin:var(--s3) var(--s4) var(--s2);border-radius:var(--r20);background:linear-gradient(180deg,#FFFFFF 0%,#F1ECDF 100%);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(10,10,10,.05)}
.det-canvas-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--s7);mix-blend-mode:darken}
.det-canvas-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .4s}
.det-canvas-img .emoji-fallback{font-size:128px;mix-blend-mode:normal}
.det-canvas .pc-badge{position:absolute;top:var(--s3);left:var(--s3)}

.det-body{padding:var(--s3) var(--s4) var(--s5);background:transparent}
.det-brand{font-size:11px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:var(--s1)}
.det-name{font-family:var(--ff-display);font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.15;margin-bottom:var(--s3)}
.det-meta{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.det-price{font-family:var(--ff-mono);font-size:22px;font-weight:700;color:var(--txt);letter-spacing:-.3px}
.det-stock{font-size:10px;font-weight:700;padding:4px 9px;border-radius:var(--rF);letter-spacing:.3px;text-transform:uppercase}
.det-stock.in{background:rgba(34,197,94,.14);color:#15803D}
.det-desc{font-size:14px;color:var(--txt2);line-height:1.6}
.in-s{background:var(--green-l);color:var(--green)}
.no-s{background:var(--red-l);color:var(--red)}

.nutr{background:rgba(255,255,255,.6);border-radius:var(--r16);padding:var(--s4);margin-top:var(--s4);border:1px solid var(--brd)}
.nutr-t{font-family:var(--ff-display);font-size:13px;font-weight:800;margin-bottom:var(--s3);text-transform:uppercase;letter-spacing:.8px;color:var(--txt2)}
.nutr-g{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.nutr-i{text-align:center;background:linear-gradient(180deg,#FFFFFF 0%,#F5F2EA 100%);border-radius:var(--r12);padding:var(--s3) var(--s1)}
.nutr-v{font-family:var(--ff-mono);font-size:16px;font-weight:700;color:var(--txt)}
.nutr-l{font-size:10px;color:var(--txt3);margin-top:2px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}

/* Qty stepper \u2014 lives inside the floating bottom bar */
.qty-r{display:flex;align-items:center;gap:2px;background:var(--bg2);border-radius:999px;padding:3px;flex-shrink:0}
.qty-b{width:30px;height:30px;border-radius:50%;border:none;background:transparent;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--txt);transition:background .15s,transform .1s;cursor:pointer}
.qty-b:active{background:rgba(10,10,10,.08);transform:scale(.9)}
.qty-v{font-family:var(--ff-mono);font-size:14px;font-weight:700;min-width:22px;text-align:center;color:var(--txt)}

/* Floating bottom bar \u2014 glass pill matching the footer nav aesthetic */
.det-bar{position:fixed;bottom:calc(var(--safe-b) + var(--s3));left:var(--s4);right:var(--s4);background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1.5px solid var(--brand);border-radius:999px;padding:5px 5px 5px 8px;display:flex;gap:var(--s2);align-items:center;z-index:50;box-shadow:0 0 14px rgba(255,107,53,.50),0 0 28px rgba(255,107,53,.28),0 0 8px rgba(255,107,53,.45) inset}

.btn-add-bag{flex:1;padding:9px 16px;border-radius:999px;background:var(--accent);color:#fff;border:none;font-size:var(--f13);font-weight:700;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap;transition:transform .1s,background .15s}
.btn-add-bag:active{transform:scale(.98)}
.btn-add-bag:hover{background:#1a1a1a}
.bag-lbl{letter-spacing:-.2px}
.bag-dot{opacity:.5}
.bag-pr{font-family:var(--ff-mono);font-weight:700;opacity:.9}

/* ═══════════ CART ═══════════ */
.empty-state{text-align:center;padding:var(--s16) var(--s6)}
.empty-icon{font-size:60px;margin-bottom:var(--s4)}
.empty-state h3{font-size:var(--f20);font-weight:700}
.empty-state p{font-size:var(--f14);color:var(--txt3);margin-top:var(--s2)}
.empty-state .btn-p{width:auto;display:inline-flex;padding:13px 36px;margin-top:var(--s5)}

/* Cart layout wrapper */
.cart-page{padding:0 0 calc(var(--tab-h) + 90px + var(--safe-b))}
.cart-loc{margin:var(--s3) var(--s4) 0}
.cart-hd{font-family:var(--ff-display);font-size:var(--f15);font-weight:800;color:var(--txt2);padding:var(--s2) var(--s4) var(--s1);display:flex;align-items:baseline;gap:var(--s2);text-transform:uppercase;letter-spacing:.6px}
.cart-hd-n{font-family:var(--ff-mono);font-size:12px;font-weight:700;color:var(--txt3);letter-spacing:0;text-transform:none}

/* Cart items list */
.c-list{padding:var(--s1) var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s3)}
.c-item{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);background:linear-gradient(180deg,#FFFFFF 0%,#F1ECDF 100%);border-radius:var(--r16);box-shadow:0 1px 2px rgba(10,10,10,.04)}
.c-thumb-wrap{width:72px;height:72px;flex-shrink:0;border-radius:var(--r14);overflow:hidden;background:transparent;display:flex;align-items:center;justify-content:center;position:relative}
.c-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--s2);mix-blend-mode:darken}
.c-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.c-thumb .emoji-fallback{font-size:32px;mix-blend-mode:normal}
.c-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.c-name{font-family:var(--ff-display);font-size:var(--f14);font-weight:700;color:var(--txt);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
.c-unit-row{font-family:var(--ff-mono);font-size:11px;color:var(--txt3);font-weight:600;letter-spacing:-.2px}
.c-qty{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.6);border-radius:999px;padding:3px;border:1px solid var(--brd);width:fit-content}
.c-qb{width:26px;height:26px;border-radius:50%;border:none;background:transparent;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--txt);cursor:pointer;transition:background .15s,transform .1s}
.c-qb:active{background:rgba(10,10,10,.08);transform:scale(.9)}
.c-qb.c-qb-x{color:var(--red)}
.c-qb.c-qb-x:hover{background:rgba(239,68,68,.1)}
.c-qv{font-family:var(--ff-mono);font-size:13px;font-weight:700;min-width:20px;text-align:center;color:var(--txt)}
.c-total{font-family:var(--ff-mono);font-size:var(--f15);font-weight:700;color:var(--txt);flex-shrink:0;align-self:center;letter-spacing:-.3px}

/* Summary card */
.cart-side{padding:var(--s2) var(--s4) 0}
.c-sum{background:rgba(255,255,255,.7);border:1px solid var(--brd);border-radius:var(--r16);padding:var(--s4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.c-sum-t{font-family:var(--ff-display);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--txt2);margin-bottom:var(--s3)}
.s-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:var(--f13);color:var(--txt2)}
.s-row span:last-child{font-family:var(--ff-mono);font-weight:700;color:var(--txt);letter-spacing:-.2px}
.s-row-n{font-family:var(--ff-mono);font-size:11px;color:var(--txt3);font-weight:600;margin-left:4px}
.s-free{color:#15803D;font-family:var(--ff-mono);font-weight:800}
.s-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:var(--s3);margin-top:var(--s3);border-top:1px solid var(--div);font-family:var(--ff-display);font-size:18px;font-weight:800}
.s-total span:last-child{font-family:var(--ff-mono);font-size:20px;letter-spacing:-.3px}
.c-min-hint{margin-top:var(--s3);padding:var(--s2) var(--s3);background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.3);border-radius:var(--r10);font-size:var(--f12);color:var(--brand);text-align:center;font-weight:600}

/* Mobile floating checkout bar */
.cart-bar{position:fixed;bottom:calc(var(--tab-h) + var(--safe-b) + var(--s4));left:var(--s4);right:var(--s4);display:flex;align-items:center;gap:var(--s3);padding:6px 6px 6px var(--s4);background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1.5px solid var(--brand);border-radius:999px;z-index:50;box-shadow:0 0 14px rgba(255,107,53,.50),0 0 28px rgba(255,107,53,.28),0 0 8px rgba(255,107,53,.45) inset}
.cart-bar-sum{display:flex;flex-direction:column;line-height:1.1;flex-shrink:0}
.cart-bar-lbl{font-size:10px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.cart-bar-v{font-family:var(--ff-mono);font-size:16px;font-weight:800;color:var(--txt);letter-spacing:-.3px}

/* Checkout CTA (reuses bag-lbl/bag-dot/bag-pr classes) */
.btn-checkout{flex:1;padding:10px 18px;border-radius:999px;background:var(--accent);color:#fff;border:none;font-size:var(--f13);font-weight:700;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap;transition:transform .1s,background .15s}
.btn-checkout:active{transform:scale(.98)}
.btn-checkout:hover:not(:disabled){background:#1a1a1a}
.btn-checkout:disabled{opacity:.5;cursor:not-allowed}

/* m-only / d-only visibility helpers */
.m-only{display:flex}
.d-only.btn-checkout{display:none}

/* ═══════════ CHECKOUT ═══════════ */
/* ═══════════════════════════════════════════════════════════════
   CHECKOUT — redesigned with hero, numbered sections, premium
   option tiles, sticky mobile bar, sticky desktop summary rail.
   ═══════════════════════════════════════════════════════════════ */
.co-page{padding:0 var(--s4) calc(88px + var(--safe-b))}

/* Hero total strip */
.co-hero{
  margin:var(--s3) 0 var(--s4);
  padding:var(--s5) var(--s5);
  background:linear-gradient(135deg,#141414 0%,#2a1a10 55%,#3a2316 100%);
  border:1px solid rgba(255,107,53,.28);
  border-radius:var(--r20);
  box-shadow:0 8px 24px rgba(10,10,10,.18),0 0 0 1px rgba(255,107,53,.10) inset;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  position:relative;overflow:hidden;
}
.co-hero::before{
  content:'';position:absolute;inset:-40%;
  background:radial-gradient(circle at 80% 30%,rgba(255,107,53,.22),transparent 55%);
  pointer-events:none;
}
.co-hero-l{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}
.co-hero-lbl{font-size:var(--f11);font-weight:800;color:rgba(255,255,255,.58);text-transform:uppercase;letter-spacing:1.2px}
.co-hero-amt{font-family:var(--ff-display);font-size:34px;font-weight:900;color:#fff;letter-spacing:-.8px;line-height:1;background:linear-gradient(135deg,#fff 0%,#FFE0D0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.co-hero-r{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.co-hero-chip{
  font-size:var(--f11);font-weight:800;color:#fff;
  padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  letter-spacing:.3px;
}
.co-hero-eta{font-size:var(--f11);font-weight:700;color:rgba(255,255,255,.72);letter-spacing:.3px}

/* Main column */
.co-main{display:flex;flex-direction:column;gap:var(--s4)}

/* Sections */
.co-sec{
  background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
  border:1px solid var(--srf3);
  border-radius:var(--r20);
  padding:var(--s5) var(--s4) var(--s4);
  box-shadow:0 2px 8px rgba(10,10,10,.04);
  position:relative;
}
.co-sec-hd{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.co-sec-tog{
  width:100%;background:none;border:none;padding:0;margin:0;
  font-family:var(--ff);text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:var(--s3);
}
.co-sec-tog .co-chev{
  margin-left:auto;font-size:14px;color:var(--txt3);
  transition:transform .2s ease;flex-shrink:0;
}
.co-sec.open .co-sec-tog .co-chev{transform:rotate(180deg);color:var(--brand)}
.co-sec:not(.open) .co-sec-hd{margin-bottom:0}
.co-pv{
  display:flex;align-items:center;gap:var(--s2);flex:1;min-width:0;
  padding:4px 10px;border-radius:999px;
  background:var(--brand-l);border:1px solid rgba(255,107,53,.18);
  margin-left:var(--s2);
}
.co-pv-i{font-size:16px;line-height:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px}
.co-pv-i img{width:100%;height:100%;object-fit:contain;border-radius:4px}
.co-pv-n{
  font-size:var(--f12);font-weight:700;color:var(--brand-d);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.co-sec-body{
  overflow:hidden;
  max-height:2000px;
  transition:max-height .32s ease,opacity .2s ease,margin-top .2s ease;
  margin-top:var(--s4);opacity:1;
}
.co-sec:not(.open) .co-sec-body{max-height:0;opacity:0;margin-top:0;pointer-events:none}
.co-sec-open .co-sec-body{max-height:none} /* for always-open sections like summary */
.co-num{
  width:24px;height:24px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-g);color:#fff;
  font-family:var(--ff-mono);font-size:var(--f11);font-weight:900;
  box-shadow:0 2px 8px rgba(255,107,53,.35);flex-shrink:0;
}
.co-lbl{font-size:var(--f13);font-weight:800;color:var(--txt);letter-spacing:-.1px;text-transform:none}
.co-opt{font-size:var(--f11);font-weight:600;color:var(--txt3);margin-left:4px;letter-spacing:0}

/* Option rows (location / payment) */
.lo{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3);
  background:var(--srf);
  border:1.5px solid var(--srf3);
  border-radius:var(--r14);
  cursor:pointer;margin-bottom:var(--s2);
  transition:border-color .18s,background .18s,box-shadow .18s,transform .1s;
}
.lo:last-child{margin-bottom:0}
.lo:hover{border-color:var(--txt4);background:var(--srf2)}
.lo:active{transform:scale(.995)}
.lo.on{
  border-color:var(--brand);
  background:linear-gradient(180deg,var(--brand-l) 0%,rgba(255,107,53,.06) 100%);
  box-shadow:0 0 0 4px rgba(255,107,53,.08),0 2px 10px rgba(255,107,53,.10);
}
.lo-i{
  font-size:22px;width:42px;height:42px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border-radius:var(--r12);
  transition:background .18s;
}
.lo.on .lo-i{background:#fff}
.lo-inf{flex:1;min-width:0}
.lo-n{font-size:var(--f14);font-weight:700;color:var(--txt);letter-spacing:-.1px;line-height:1.25}
.lo-d{font-size:var(--f11);color:var(--txt3);margin-top:2px;font-weight:500}
.lo-chk{
  width:24px;height:24px;border-radius:var(--rF);
  border:1.5px solid var(--srf3);background:var(--srf);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;color:#fff;flex-shrink:0;
  transition:all .18s;
}
.lo.on .lo-chk{border-color:var(--brand);background:var(--brand);box-shadow:0 0 0 4px rgba(255,107,53,.16)}
.loc-search-bar{
  display:flex;align-items:center;gap:10px;
  min-height:46px;
  padding:0 var(--s3);
  margin-bottom:var(--s3);
  background:rgba(255,255,255,.78);
  border:1.5px solid var(--srf3);
  border-radius:999px;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.loc-search-bar:focus-within{
  border-color:var(--brand);
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,107,53,.08);
}
.loc-search-i{
  flex-shrink:0;
  font-size:15px;
  color:var(--txt3);
  line-height:1;
}
.loc-search-input{
  flex:1;min-width:0;
  border:none;
  background:transparent;
  outline:none;
  padding:0;
  font-family:var(--ff);
  font-size:var(--f14);
  color:var(--txt);
}
.loc-search-input::placeholder{color:var(--txt4)}
.loc-search-clear{
  border:none;
  background:transparent;
  color:var(--brand);
  font-size:var(--f12);
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s;
}
.loc-search-clear.show{
  opacity:1;
  pointer-events:auto;
}
.loc-search-note{
  margin:0 0 10px;
  font-size:var(--f11);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--txt3);
}
.loc-search-results{
  display:flex;
  flex-direction:column;
  gap:var(--s2);
}
.loc-search-results .lo{margin-bottom:0}
.loc-search-hint,
.loc-search-empty{
  padding:var(--s3) var(--s4);
  border-radius:var(--r14);
  background:rgba(255,255,255,.74);
  border:1px dashed rgba(255,107,53,.18);
  font-size:var(--f12);
  line-height:1.5;
  color:var(--txt3);
}
.loc-search-empty strong{color:var(--txt)}

/* Notes textarea */
.co-notes{
  width:100%;padding:var(--s3) var(--s4);
  background:var(--srf);
  border:1.5px solid var(--srf3);
  border-radius:var(--r12);
  font-family:var(--ff);font-size:var(--f14);color:var(--txt);
  outline:none;resize:none;min-height:72px;line-height:1.5;
  transition:border-color .18s,box-shadow .18s;
}
.co-notes::placeholder{color:var(--txt4)}
.co-notes:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,107,53,.10)}

/* Summary card body (used both in mobile inline section and desktop rail) */
.co-sum{display:flex;flex-direction:column;gap:4px}
.co-sum-item{
  display:grid;grid-template-columns:1fr auto auto;gap:var(--s3);align-items:baseline;
  font-size:var(--f13);padding:4px 0;color:var(--txt2);
}
.co-sum-n{font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.co-sum-x{font-family:var(--ff-mono);font-size:var(--f11);color:var(--txt3);font-weight:700}
.co-sum-p{font-family:var(--ff-mono);font-size:var(--f13);font-weight:700;color:var(--txt)}
.co-sum-div{height:1px;background:var(--srf3);margin:var(--s2) 0}

/* Desktop rail (summary + CTA) */
.co-rail{display:none}
.co-rail-card{
  background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
  border:1.5px solid var(--brand);
  border-radius:var(--r20);
  padding:var(--s5);
  box-shadow:0 8px 24px rgba(10,10,10,.08),0 0 0 4px rgba(255,107,53,.06),0 0 16px rgba(255,107,53,.08);
}
.co-rail-t{
  font-family:var(--ff-display);font-size:var(--f18);font-weight:800;
  color:var(--txt);letter-spacing:-.3px;margin-bottom:var(--s4);
  display:flex;align-items:center;gap:var(--s2);
}
.co-rail-t::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)}
.co-rail-cta{width:100%;margin-top:var(--s4)}
.co-min{
  text-align:center;font-size:var(--f12);font-weight:700;color:var(--brand-d);
  padding:var(--s2) var(--s3);margin-top:var(--s3);
  background:var(--brand-l);border-radius:var(--r10);
}
.co-secure{
  margin-top:var(--s3);text-align:center;
  font-size:var(--f11);color:var(--txt3);font-weight:500;letter-spacing:.2px;
}
.co-secure span{color:#15803D}

/* Mobile-only fixed orange pill above the tab bar */
.co-bar{
  position:fixed;z-index:90;
  left:var(--s4);right:var(--s4);
  bottom:calc(var(--safe-b) + var(--s3));
  display:flex;align-items:center;gap:var(--s3);
  padding:6px 6px 6px var(--s5);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1.5px solid var(--brand);
  border-radius:999px;
  box-shadow:0 0 14px rgba(255,107,53,.50),0 0 28px rgba(255,107,53,.28),0 0 8px rgba(255,107,53,.45) inset;
  animation:pillGlowO 3s ease-in-out infinite alternate;
}
.co-min-fx{
  position:fixed;z-index:91;
  left:var(--s4);right:var(--s4);
  bottom:calc(var(--safe-b) + var(--s3) + 56px);
  text-align:center;font-size:var(--f12);font-weight:700;color:var(--brand-d);
  padding:6px var(--s3);
  background:var(--brand-l);border:1px solid rgba(255,107,53,.2);
  border-radius:var(--r10);
}
.co-bar-sum{display:flex;flex-direction:column;line-height:1.1;flex-shrink:0}
.co-bar-lbl{font-size:10px;color:var(--txt3);font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.co-bar-v{font-family:var(--ff-mono);font-size:var(--f16);font-weight:800;color:var(--txt);letter-spacing:-.3px}
.co-bar-btn{
  flex:1;padding:13px var(--s4);
  background:var(--brand-g);color:#fff;border:none;
  border-radius:999px;cursor:pointer;
  font-family:var(--ff-display);font-size:var(--f14);font-weight:800;letter-spacing:.2px;
  box-shadow:0 2px 10px rgba(255,107,53,.35);
  transition:transform .12s,box-shadow .15s;
}
.co-bar-btn:active{transform:scale(.97)}
.co-bar-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}

/* Payment brand logos — use real PNGs, white tile, subtle padding */
.lo-i:has(.pay-img),.dd-opt-i:has(.pay-img){
  background:#fff;
  border:1px solid var(--srf3);
  padding:4px;overflow:hidden;
}
.pay-img{display:block;width:100%;height:100%;object-fit:contain}

/* ═══════════ CONFIRMATION + TRACKING (shared layout) ═══════════ */
.cfm{padding:var(--s5) var(--s4) calc(var(--tab-h) + var(--s8) + var(--safe-b));max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s4)}

/* ── Creamy hero card ── */
.cfm-hero{
  display:flex;align-items:center;gap:var(--s5);
  padding:var(--s6) var(--s6);
  background:linear-gradient(135deg,#FFF2DC 0%,#FFE4C4 60%,#FFD9B0 100%);
  border:1px solid rgba(255,107,53,.22);
  border-radius:var(--r24);
  box-shadow:0 4px 18px rgba(255,107,53,.10);
}
.cfm-hero-ico{
  flex-shrink:0;
  width:48px;height:48px;border-radius:50%;
  background:var(--brand-g);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;line-height:1;
  box-shadow:0 4px 14px rgba(255,107,53,.35);
  animation:cfmPop .55s cubic-bezier(.34,1.56,.64,1) both;
  position:relative;
  isolation:isolate;
  will-change:transform,opacity;
  transform:translateZ(0);
  backface-visibility:hidden;
}
@keyframes cfmPop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.cfm.tk .cfm-hero-ico::after{
  content:'';
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  border:1px solid rgba(255,107,53,.24);
  opacity:.14;
  transform:scale(.96);
  transform-origin:center;
  pointer-events:none;
  z-index:-1;
  animation:tkHeroPulse 2.8s ease-in-out infinite;
}
@keyframes tkHeroPulse{
  0%,100%{opacity:.14;transform:scale(.96)}
  50%{opacity:0;transform:scale(1.16)}
}
.cfm-hero-body{flex:1;min-width:0}
.cfm-hero-ord{font-size:var(--f11);font-weight:800;color:var(--txt3);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:4px}
.cfm-hero-t{font-family:var(--ff-display);font-size:28px;font-weight:800;color:var(--txt);letter-spacing:-.6px;line-height:1.15;margin-bottom:4px}
.cfm-hero-s{font-size:var(--f13);color:var(--txt2);font-weight:500;line-height:1.45}
.cfm-hero-cx{
  background:linear-gradient(135deg,#FEE4E2 0%,#FCCDC7 100%);
  border-color:rgba(220,38,38,.3);box-shadow:0 4px 18px rgba(220,38,38,.10);
}
.cfm-hero-cx .cfm-hero-ico{background:linear-gradient(135deg,#DC2626 0%,#EF4444 100%);box-shadow:0 4px 14px rgba(220,38,38,.35)}

/* ── Grid: 2-col desktop, 1-col mobile ── */
.cfm-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s4);align-items:start}
@media(max-width:820px){.cfm-grid{grid-template-columns:1fr}}

/* ── Inner cards ── */
.cfm-card{
  background:var(--srf);
  border:1px solid var(--srf3);
  border-radius:var(--r20);
  padding:var(--s5) var(--s5) var(--s4);
  box-shadow:0 2px 12px rgba(10,10,10,.04);
}
.cfm-card-t{font-family:var(--ff-display);font-size:var(--f16);font-weight:800;color:var(--txt);letter-spacing:-.2px;margin-bottom:var(--s4)}
.cfm-card-ut{font-size:var(--f11);font-weight:800;color:var(--txt3);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:var(--s4)}

/* ── Timeline (confirmation/tracking style) ── */
.cfm-tl{padding:0}
.cfm-tl .tl-s{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0;position:relative}
.cfm-tl .tl-s::before{content:'';position:absolute;left:13px;top:30px;width:2px;height:calc(100% - 20px);background:var(--srf3)}
.cfm-tl .tl-s.dn::before{background:var(--brand)}
.cfm-tl .tl-s:last-child::before{display:none}
.cfm-tl .tl-dot{
  width:26px;height:26px;border-radius:50%;
  background:var(--srf2);border:2px solid var(--srf3);color:transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;flex-shrink:0;z-index:1;
  transition:all .3s;
}
.cfm-tl .tl-s.dn .tl-dot,.cfm-tl .tl-s.nw .tl-dot{
  background:var(--brand-g);border-color:var(--brand);color:#fff;
  box-shadow:0 2px 8px rgba(255,107,53,.35);
}
.cfm-tl .tl-s.nw .tl-dot{animation:pls 3.1s ease-in-out infinite}
@keyframes pls{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,107,53,.18),0 2px 8px rgba(255,107,53,.24)
  }
  50%{
    transform:scale(1.04);
    box-shadow:0 0 0 6px rgba(255,107,53,0),0 2px 8px rgba(255,107,53,.24)
  }
}
.cfm-tl .tl-inf{flex:1;padding-top:2px;min-width:0}
.cfm-tl .tl-lb{font-size:var(--f14);font-weight:700;color:var(--txt);letter-spacing:-.1px;display:flex;align-items:center;gap:var(--s2)}
.cfm-tl .tl-s.pn .tl-lb{color:var(--txt4);font-weight:600}
.cfm-tl .tl-tm{font-size:var(--f12);color:var(--txt3);margin-top:2px;font-weight:500}
.cfm-tl .tl-s.pn .tl-tm{color:var(--txt4)}
.tl-live{
  display:inline-block;padding:2px 7px;border-radius:999px;
  background:#EF4444;color:#fff;
  font-size:9px;font-weight:900;letter-spacing:.9px;
  animation:pls 3.1s ease-in-out infinite;
}

/* Cancelled message */
.cfm-cx-msg{font-size:var(--f13);color:var(--txt3);padding:var(--s4) 0;line-height:1.5}

/* ── Footer (Back to shop / Order again) ── */
.cfm-foot{
  display:flex;gap:var(--s3);
  margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--srf3);
}
.cfm-foot .btn-o,.cfm-foot .btn-p{flex:1;padding:12px;font-size:var(--f14);box-shadow:none}
.cfm-foot .btn-p{box-shadow:var(--glow-brand)}

/* ── Summary (right card) ── */
.cfm-sum-it{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);
  align-items:center;padding:var(--s3) 0;
  border-bottom:1px dashed var(--srf3);
}
.cfm-sum-it:last-of-type{border-bottom:none}
.cfm-sum-ico{
  width:40px;height:40px;border-radius:var(--r10);
  background:var(--bg2);border:1px solid var(--srf3);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;overflow:hidden;flex-shrink:0;
}
.cfm-sum-ico img{width:100%;height:100%;object-fit:cover}
.cfm-sum-info{min-width:0}
.cfm-sum-name{font-size:var(--f13);font-weight:700;color:var(--txt);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfm-sum-qty{font-family:var(--ff-mono);font-size:var(--f11);color:var(--txt3);margin-top:2px;font-weight:700}
.cfm-sum-p{font-family:var(--ff-mono);font-size:var(--f13);font-weight:800;color:var(--txt)}
.cfm-sum-empty{font-size:var(--f12);color:var(--txt3);padding:var(--s3) 0}

.cfm-sum-rows{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--srf3);display:flex;flex-direction:column;gap:var(--s2)}
.cfm-sum-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--f13);color:var(--txt2);font-weight:500}
.cfm-sum-row span:last-child{font-family:var(--ff-mono);font-weight:700;color:var(--txt)}
.cfm-sum-row.free span:last-child{color:#15803D;font-family:var(--ff);font-weight:700}
.cfm-sum-tot{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1.5px solid var(--srf3);
  display:flex;justify-content:space-between;align-items:baseline;
}
.cfm-sum-tot .lbl{font-family:var(--ff-display);font-size:var(--f16);font-weight:800;color:var(--txt)}
.cfm-sum-tot .val{font-family:var(--ff-mono);font-size:var(--f20);font-weight:900;color:var(--brand);letter-spacing:-.3px}

/* ── Mobile tweaks: hide summary on mobile to match mockup ── */
@media(max-width:640px){
  .cfm{padding:var(--s4) var(--s3) calc(var(--tab-h) + var(--s8) + var(--safe-b))}
  .cfm-hero{padding:var(--s4) var(--s4);gap:var(--s4);border-radius:var(--r20)}
  .cfm-hero-ico{width:40px;height:40px;font-size:18px}
  .cfm-hero-t{font-size:22px}
  .cfm-hero-s{font-size:var(--f12)}
  .cfm-sum{display:none}
  .cfm-card{border-radius:var(--r20)}
}

/* Legacy status pills (order history) */
.st-pill{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:var(--rF);font-size:var(--f11);font-weight:700}
.st-order_placed{background:rgba(249,115,22,.15);color:#C2410C}
.st-order_confirmed{background:rgba(59,130,246,.15);color:#1D4ED8}
.st-delivering{background:rgba(168,85,247,.15);color:#7E22CE}
.st-delivered{background:rgba(34,197,94,.15);color:#15803D}
.st-cancelled{background:rgba(239,68,68,.15);color:#B91C1C}

/* ═══════════ ORDER HISTORY ═══════════ */
.oh-card{background:var(--srf);border-radius:var(--r16);margin:0 var(--s4) var(--s3);padding:var(--s4);border:1px solid var(--brd);cursor:pointer;transition:all .15s}
.oh-card:active{transform:scale(.98)}
.oh-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s2)}
.oh-id{font-size:var(--f13);font-weight:700;color:var(--txt3)}
.oh-items{font-size:var(--f13);color:var(--txt2);margin-bottom:var(--s3);line-height:1.5}
.oh-bot{display:flex;justify-content:space-between;align-items:center}
.oh-total{font-size:var(--f16);font-weight:800;color:var(--brand)}
.oh-date{font-size:var(--f11);color:var(--txt3)}
.oh-card.is-active{
  border-color:rgba(255,107,53,.24);
  background:linear-gradient(180deg,#FFF9F2 0%,#FFF2E7 100%);
  box-shadow:0 14px 28px rgba(255,107,53,.12);
}

/* ═══════════ CHAT ═══════════ */
.scr-orders{padding:0;background:transparent}
.ow-shell{display:flex;flex-direction:column;gap:0}
.ow-side,.ow-main{
  background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,248,240,.90) 100%);
  border:1px solid rgba(255,107,53,.08);border-radius:0;
  box-shadow:none;
}
.ow-side{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ow-side-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid rgba(255,107,53,.08);
}
.ow-side-head-main{display:flex;align-items:center;gap:14px;min-width:0}
.ow-back{
  width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,107,53,.12);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF6ED 100%);
  color:var(--txt);font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 10px 22px rgba(10,10,10,.05);
}
.ow-k{
  font-size:var(--f11);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);
}
.ow-h{
  font-family:var(--ff-display);font-size:var(--f24);font-weight:800;letter-spacing:-.7px;color:var(--txt);line-height:1.02;
}
.ow-count{
  min-width:44px;height:44px;border-radius:16px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FFF4EA 0%,#FFE4D2 100%);
  color:var(--brand);font-family:var(--ff-mono);font-size:var(--f13);font-weight:800;
}
.ow-list{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);overflow:auto}
.ow-side .oh-card{margin:0}
.ow-side-foot{
  margin-top:auto;
  padding:var(--s4);
  border-top:1px solid rgba(255,107,53,.08);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ow-clear{
  width:100%;min-height:46px;border:none;border-radius:999px;
  background:linear-gradient(135deg,#F87171 0%,#EF4444 100%);color:#fff;
  font-size:var(--f13);font-weight:800;box-shadow:0 14px 28px rgba(239,68,68,.18);
}
.ow-main{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ow-thread-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid rgba(255,107,53,.08);
}
.ow-thread-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.ow-thread-k{
  font-size:var(--f11);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);
}
.ow-thread-title{
  font-family:var(--ff-display);font-size:var(--f24);font-weight:800;letter-spacing:-.7px;
  color:var(--txt);line-height:1.08;
}
.ow-thread-head-main{display:flex;align-items:center;gap:16px;min-width:0}
.ow-thread-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.ow-thread-date{font-size:var(--f11);font-family:var(--ff-mono);color:var(--txt3);white-space:nowrap}
.ow-thread-user{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:62px;height:62px;flex-shrink:0;border:none;background:transparent;padding:0;
}
.ow-thread-user-ring{
  position:absolute;border-radius:50%;pointer-events:none;
  border:1px solid rgba(34,197,94,.34);
  background:radial-gradient(circle,rgba(34,197,94,.14) 0%,rgba(34,197,94,0) 72%);
}
.ow-thread-user-ring-a{width:62px;height:62px;animation:chatLivePulse 2.1s ease-in-out infinite}
.ow-thread-user-ring-b{width:76px;height:76px;border-color:rgba(34,197,94,.22);animation:chatLivePulse 2.1s ease-in-out infinite .35s}
.ow-thread-user-core{
  position:relative;z-index:2;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(135deg,#F2FFF7 0%,#DDF8E8 100%);
  border:1.5px solid rgba(34,197,94,.36);
  box-shadow:0 8px 22px rgba(34,197,94,.16);
}
.ow-thread-user-core img{width:100%;height:100%;object-fit:cover;display:block}
.ow-thread-user-ini{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#15803D;font-family:var(--ff-display);font-size:15px;font-weight:800;
  background:linear-gradient(135deg,#F2FFF7 0%,#DDF8E8 100%);
}
.ow-thread-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ow-support-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:42px;
  padding:0 16px;border-radius:999px;background:linear-gradient(135deg,#FF844F 0%,#FF6B35 100%);
  color:#fff;text-decoration:none;font-size:var(--f12);font-weight:800;
}
.ow-support-link.ghost{
  background:#fff;color:var(--txt);border:1px solid rgba(255,107,53,.12);
}
.cl-page{display:flex;flex-direction:column;gap:var(--s4)}
.cl-main,.cl-side{display:flex;flex-direction:column;gap:var(--s3)}
.cl-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  padding:0 var(--s4);
}
.cl-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.cl-k{
  font-size:var(--f11);font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand);opacity:.9;
}
.cl-h{font-size:clamp(28px,5vw,38px);line-height:.98;font-weight:900;letter-spacing:-1.6px}
.cl-s{max-width:640px;font-size:var(--f14);line-height:1.6;color:var(--txt3)}
.cl-metas{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-meta-pill{
  display:flex;flex-direction:column;gap:3px;min-width:92px;padding:12px 14px;
  background:rgba(255,255,255,.76);border:1px solid rgba(255,107,53,.1);border-radius:18px;
  box-shadow:0 10px 22px rgba(10,10,10,.05);
}
.cl-meta-pill.is-live{background:linear-gradient(180deg,rgba(255,250,244,.96) 0%,rgba(255,243,232,.92) 100%);border-color:rgba(255,107,53,.18)}
.cl-meta-n{font-size:var(--f18);font-weight:900;line-height:1;color:var(--txt)}
.cl-meta-l{font-size:var(--f11);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3)}
.cl-list{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) var(--s4) calc(var(--s6) + var(--safe-b))}
.cl-item{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s4);
  cursor:pointer;transition:transform .15s,box-shadow .18s,border-color .18s,background .18s;
  background:linear-gradient(180deg,var(--srf) 0%,var(--srf2) 100%);
  border:1px solid var(--brd);border-radius:var(--r20);
  box-shadow:var(--sh1);
}
.cl-item:active{transform:scale(.985);background:var(--srf)}
.cl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cl-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--s2)}
.cl-name{font-size:var(--f14);font-weight:800;letter-spacing:-.15px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-prev{font-size:var(--f12);color:var(--txt3);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-time{font-size:var(--f11);color:var(--txt3);font-family:var(--ff-mono);flex-shrink:0;white-space:nowrap;text-align:right;line-height:1.2}
.cl-bottom{display:flex;align-items:center;gap:var(--s2)}
.cl-stat{
  display:inline-flex;align-items:center;max-width:100%;
  padding:5px 10px;border-radius:999px;
  font-size:var(--f10);font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  border:1px solid transparent;
}
.cl-stat.st-order_placed{background:rgba(251,191,36,.14);color:#9A6700;border-color:rgba(251,191,36,.28)}
.cl-stat.st_confirmed{background:rgba(59,130,246,.12);color:#1D4ED8;border-color:rgba(59,130,246,.22)}
.cl-stat.st_preparing{background:rgba(249,115,22,.12);color:#C2410C;border-color:rgba(249,115,22,.22)}
.cl-stat.st_ready{background:rgba(34,197,94,.12);color:#15803D;border-color:rgba(34,197,94,.22)}
.cl-stat.st_delivered{background:rgba(16,185,129,.12);color:#047857;border-color:rgba(16,185,129,.22)}
.cl-stat.st_cancelled{background:rgba(239,68,68,.10);color:#B91C1C;border-color:rgba(239,68,68,.2)}
.cl-unr{
  margin-left:auto;background:var(--accent);color:var(--inv);font-size:var(--f10);font-weight:800;
  min-width:22px;height:22px;border-radius:var(--rF);display:inline-flex;align-items:center;justify-content:center;
  padding:0 7px;box-shadow:0 6px 16px rgba(10,10,10,.14)
}
.cl-side-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  margin:0 var(--s4);padding:var(--s5);
  background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,251,245,.92) 100%);
  border:1px solid rgba(255,107,53,.09);border-radius:26px;
  box-shadow:0 16px 34px rgba(10,10,10,.06);
}
.cl-side-card.accent{
  background:
    radial-gradient(circle at top right, rgba(255,107,53,.14), transparent 34%),
    linear-gradient(180deg,rgba(255,250,245,.98) 0%,rgba(255,245,235,.94) 100%);
}
.cl-side-k{
  font-size:var(--f11);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);
}
.cl-side-h{font-size:var(--f22);line-height:1.08;font-weight:900;letter-spacing:-.8px;color:var(--txt)}
.cl-side-s{font-size:var(--f14);line-height:1.6;color:var(--txt3)}
.cl-side-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 18px;border-radius:999px;background:linear-gradient(135deg,#FF844F 0%,#FF6B35 100%);
  color:#fff;text-decoration:none;font-size:var(--f13);font-weight:800;
  box-shadow:0 14px 28px rgba(255,107,53,.18);
}
.cl-side-link.ghost{
  min-height:42px;background:#fff;color:var(--txt);border:1px solid rgba(255,107,53,.12);box-shadow:none;
}

.ch-lay{display:flex;flex-direction:column;flex:1;min-height:0;background:transparent}
.msgs{
  flex:1;min-height:0;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:10px;
  background:transparent;
}
.msg-row{display:flex;flex-direction:column}
.msg-row.me{align-items:flex-end}
.msg-row.th{align-items:flex-start}
.msg-row.sy{align-items:center}
.bbl-wrap{
  position:relative;
  display:block;
  width:max-content;
  max-width:min(82%,520px)
}
.msg-row.me .bbl-wrap{margin-left:auto}
.msg-row.th .bbl-wrap{margin-right:auto}
.msg-row.sy .bbl-wrap{width:auto;max-width:min(86%,560px)}
.bbl{
  position:relative;display:block;width:auto;min-width:56px;max-width:100%;padding:6px 7px 6px 9px;
  border-radius:7.5px;font-size:14px;line-height:1.36;word-wrap:break-word;
  box-shadow:0 1px .5px rgba(11,20,26,.13)
}
.bbl.me{
  background:#d9fdd3;
  color:#111b21;
  border-top-right-radius:0;
  border-bottom-right-radius:7.5px;
}
.bbl.th{
  background:#fff;
  border:none;
  color:#111b21;
  border-top-left-radius:0;
  border-top-right-radius:7.5px;
  border-bottom-right-radius:7.5px;
  border-bottom-left-radius:7.5px;
  box-shadow:0 1px .5px rgba(11,20,26,.13);
}
.bbl.sy{background:rgba(255,255,255,.78);color:#667781;font-size:12px;border-radius:7.5px;padding:5px 12px;border:none;box-shadow:0 1px .5px rgba(11,20,26,.10)}
.bbl-tail{
  position:absolute;top:0;width:8px;height:13px;pointer-events:none;
}
.bbl-tail.me{
  right:-8px;background:#d9fdd3;
  clip-path:polygon(0 0,100% 0,0 100%);
}
.bbl-tail.th{
  left:-8px;background:#fff;
  clip-path:polygon(0 0,100% 0,100% 100%);
}
.bbl-m{white-space:pre-wrap;display:inline}
.bbl img{display:block;max-width:100%;border-radius:6px;margin:0 0 4px;cursor:pointer}
.bbl-t{display:inline-block;font-size:11px;color:#667781;margin:0 0 0 10px;text-align:right;font-family:var(--ff);white-space:nowrap;vertical-align:baseline}
.bbl.me .bbl-t{color:#667781}
.ch-empty{
  margin:auto;
  width:min(100%,430px);
  padding:var(--s6) var(--s4);
  text-align:center;
}
.ch-empty-card{
  position:relative;
  overflow:hidden;
  padding:30px 24px 24px;
  border-radius:30px;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 34%),
    linear-gradient(180deg,#FFFFFF 0%,#FFF8F1 100%);
  border:1px solid rgba(255,107,53,.11);
  box-shadow:0 22px 52px rgba(10,10,10,.07),inset 0 1px 0 rgba(255,255,255,.8);
}
.ch-empty-card::before{
  content:"";
  position:absolute;
  inset:auto -40px -72px auto;
  width:170px;
  height:170px;
  border-radius:50%;
  background:rgba(255,107,53,.10);
}
.ch-empty-card::after{
  content:"";
  position:absolute;
  top:18px;
  right:22px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,107,53,.28);
  box-shadow:-18px 18px 0 rgba(255,107,53,.12),10px 34px 0 rgba(34,197,94,.14);
}
.ch-empty-ic{
  position:relative;
  z-index:1;
  width:58px;
  height:58px;
  margin:0 auto 16px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  background:linear-gradient(135deg,#FFF1E8 0%,#FFFFFF 100%);
  border:1px solid rgba(255,107,53,.14);
  box-shadow:0 14px 30px rgba(255,107,53,.13);
}
.ch-empty-ic svg{width:29px;height:29px}
.ch-empty-k{
  position:relative;
  z-index:1;
  margin-bottom:7px;
  color:var(--brand);
  font-size:var(--f10);
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ch-empty-t{
  position:relative;
  z-index:1;
  font-family:var(--ff-display);
  font-size:clamp(24px,4vw,34px);
  font-weight:900;
  color:var(--txt);
  letter-spacing:-1px;
  line-height:1.02;
}
.ch-empty-s{
  position:relative;
  z-index:1;
  max-width:330px;
  margin:10px auto 0;
  font-size:var(--f13);
  color:var(--txt3);
  line-height:1.65;
}
.ch-empty-tags{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:18px;
}
.ch-empty-tags span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  background:#FFF2E7;
  border:1px solid rgba(255,107,53,.11);
  color:#C2410C;
  font-size:var(--f10);
  font-weight:800;
  white-space:nowrap;
}
.m-bar{
  display:flex;align-items:center;gap:10px;
  padding:8px var(--s3) calc(8px + var(--safe-b));
  background:transparent;border-top:none;margin-top:auto;flex-shrink:0;box-shadow:none
}
.m-compose{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:6px 6px 6px 12px;background:#fff;
  border:1px solid rgba(10,10,10,.08);border-radius:999px;
  box-shadow:0 4px 14px rgba(10,10,10,.04),inset 0 1px 0 rgba(255,255,255,.65)
}
.m-inp{flex:1;padding:8px 0;border:none;border-radius:0;font-size:var(--f14);color:var(--txt);background:transparent;outline:none;box-shadow:none}
.m-inp:focus{border-color:transparent}
.m-btn{width:40px;height:40px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:all .15s}
.m-btn svg{width:18px;height:18px;display:block}
.m-btn:active{transform:scale(.85)}
.m-btn.snd{background:var(--brand-g);color:var(--inv);box-shadow:0 8px 20px rgba(255,107,53,.22)}
.m-btn.att{width:34px;height:34px;background:var(--bg2);color:var(--txt2);border:1px solid rgba(10,10,10,.06);box-shadow:none}

/* ═══════════ PROFILE ═══════════ */
.pf-page{padding-bottom:calc(var(--safe-b) + var(--s4))}
.pf-hero{
  position:relative;text-align:center;padding:var(--s8) var(--s4) var(--s6);
  overflow:hidden;margin:0 var(--s4) var(--s4);border-radius:var(--r24);
  background:
    radial-gradient(circle at top right,rgba(255,107,53,.20) 0%,rgba(255,107,53,0) 34%),
    linear-gradient(135deg,#FFF4E8 0%,#F7F6F2 56%,#FDF0E6 100%);
  border:1px solid rgba(255,107,53,.12);
  box-shadow:0 14px 34px rgba(255,107,53,.08);
}
.pf-hero-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 100%)}
.pf-hero-content{position:relative;z-index:1}
.pf-av{
  width:92px;height:92px;border-radius:var(--rF);border:3px solid rgba(255,107,53,.22);
  margin:0 auto var(--s4);display:flex;align-items:center;justify-content:center;font-size:38px;overflow:hidden;
  box-shadow:0 10px 28px rgba(255,107,53,.16);background:linear-gradient(135deg,#FFF1E7 0%,#FFE1D0 100%);
}
.pf-av img{width:100%;height:100%;object-fit:cover}
.pf-name{font-family:var(--ff-display);font-size:var(--f24);font-weight:800;letter-spacing:-.6px}
.pf-email{font-size:var(--f13);color:var(--txt2);margin-top:4px}
.pf-layout{display:flex;flex-direction:column;gap:var(--s3)}
.pf-main,.pf-side{display:flex;flex-direction:column;gap:var(--s3)}

.pf-card{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF9F3 100%);
  border-radius:var(--r20);margin:0 var(--s4) var(--s3);overflow:hidden;
  border:1px solid rgba(255,107,53,.10);box-shadow:0 8px 24px rgba(10,10,10,.04)
}
.pf-field{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-bottom:1px solid rgba(255,107,53,.08)}
.pf-field:last-child{border-bottom:none}
.pf-fi{
  font-size:18px;width:36px;height:36px;border-radius:12px;text-align:center;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:#FFF1E7;color:var(--brand)
}
.pf-fd{flex:1}
.pf-fl{
  font-family:var(--ff-mono);font-size:var(--f10);font-weight:700;color:var(--brand-d);
  text-transform:uppercase;letter-spacing:.6px
}
.pf-fv{font-size:var(--f14);font-weight:600;margin-top:3px;color:var(--txt)}
.pf-act{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s4);cursor:pointer;
  border-bottom:1px solid rgba(255,107,53,.08);border:none;background:none;width:100%;text-align:left;
  font-family:var(--ff);transition:background .15s
}
.pf-act:active{background:#FFF5EC}
.pf-act:last-child{border-bottom:none}
.pf-ai{
  font-size:18px;width:36px;height:36px;border-radius:12px;text-align:center;
  display:flex;align-items:center;justify-content:center;background:#FFF1E7;color:var(--brand)
}
.pf-at{flex:1;font-size:var(--f14);font-weight:700}
.pf-aa{font-size:16px;color:var(--brand)}
.pf-act.dng .pf-at{color:var(--red)}
.pf-act.dng .pf-ai{color:var(--red);background:rgba(239,68,68,.10)}
.pf-help-card{padding-top:var(--s2)}
.pf-help-h{
  font-family:var(--ff-display);font-size:var(--f18);font-weight:800;
  color:var(--txt);letter-spacing:-.4px;padding:var(--s4) var(--s4) var(--s1)
}
.pf-help-s{font-size:var(--f13);color:var(--txt3);line-height:1.55;padding:0 var(--s4) var(--s2)}

/* ═══════════ MISC ═══════════ */
#toast-container{position:fixed;top:calc(var(--safe-t) + var(--s4));left:var(--s4);right:var(--s4);z-index:10000;display:flex;flex-direction:column;gap:var(--s2);pointer-events:none;max-width:420px;margin:0 auto}
.toast{padding:var(--s3) var(--s4);border-radius:var(--r14);font-size:var(--f14);font-weight:600;color:var(--inv);box-shadow:0 8px 32px rgba(0,0,0,.5);pointer-events:auto;animation:tIn .3s ease}
.toast.success{background:var(--green-g)}.toast.error{background:linear-gradient(135deg,#F87171,#EF4444)}.toast.warning{background:linear-gradient(135deg,#FBBF24,#F97316)}.toast.info{background:var(--accent-g)}
.toast.fade-out{animation:tOut .3s ease forwards}
@keyframes tIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateY(-10px)}}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:5000;display:flex;align-items:flex-end;justify-content:center}
.modal-overlay.hidden{display:none}
.modal-content{background:var(--srf);border-radius:var(--r24) var(--r24) 0 0;width:100%;max-width:600px;max-height:85vh;overflow-y:auto;padding:var(--s6) var(--s5) calc(var(--s6) + var(--safe-b));animation:mUp .3s ease}
@keyframes mUp{from{transform:translateY(100%)}to{transform:none}}
.modal-handle{width:40px;height:4px;background:var(--srf3);border-radius:2px;margin:0 auto var(--s5)}

.epm{display:flex;flex-direction:column;gap:var(--s5)}
.epm-hero{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s3);border-radius:var(--r20);
  background:
    radial-gradient(circle at top right,rgba(255,107,53,.16) 0%,rgba(255,107,53,0) 34%),
    linear-gradient(135deg,#FFF4E8 0%,#F7F6F2 52%,#FDF1E7 100%);
  border:1px solid rgba(255,107,53,.14);
  box-shadow:0 12px 30px rgba(255,107,53,.08);
}
.epm-av{
  width:72px;height:72px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FFF3EA 0%,#FFD9C3 100%);
  border:2px solid rgba(255,107,53,.24);
  box-shadow:0 10px 28px rgba(255,107,53,.16);
}
.epm-av img{width:100%;height:100%;object-fit:cover;display:block}
.epm-av-ini{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:24px;font-weight:800;color:var(--brand);
}
.epm-copy{min-width:0;flex:1}
.epm-k{
  font-family:var(--ff-mono);
  font-size:var(--f10);font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--brand);margin-bottom:4px;
}
.epm-t{
  font-family:var(--ff-display);font-size:var(--f24);font-weight:800;
  letter-spacing:-.7px;color:var(--txt);line-height:1.02;
}
.epm-s{font-size:var(--f13);color:var(--txt2);line-height:1.55;margin-top:8px;max-width:34ch}
.epm-grid{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.epm-fg{
  margin-bottom:0;
  padding:var(--s3);
  background:linear-gradient(180deg,rgba(255,248,240,.92) 0%,rgba(255,255,255,.92) 100%);
  border:1px solid rgba(255,107,53,.10);
  border-radius:var(--r18);
}
.epm-fg .fl{
  font-family:var(--ff-mono);
  font-size:var(--f11);
  letter-spacing:.5px;
  color:var(--brand-d);
  margin-bottom:8px;
}
.epm-inp{
  background:#fff;
  border-color:rgba(255,107,53,.12);
  border-radius:var(--r16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.epm-inp:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(255,107,53,.10);
}
.epm-actions{display:flex;flex-direction:column;gap:var(--s3)}
.epm-cancel{
  width:100%;
  background:linear-gradient(180deg,#FFF8F0 0%,#FFFFFF 100%);
}
.epm-save{
  width:100%;
  background:linear-gradient(135deg,#FF6B35 0%,#FF8A5C 100%);
  box-shadow:0 12px 24px rgba(255,107,53,.20);
}

.mn-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mn-ov.open{opacity:1;visibility:visible}
.side{position:fixed;top:0;left:0;width:min(300px,80vw);height:100%;background:var(--srf);z-index:9001;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.side.open{transform:translateX(0)}
.side-top{padding:calc(var(--safe-t) + var(--s6)) var(--s5) var(--s5);background:var(--srf2);border-bottom:1px solid var(--brd)}
.side-u{display:flex;align-items:center;gap:var(--s3)}
.side-av{width:50px;height:50px;border-radius:var(--rF);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden;border:2px solid var(--brand);box-shadow:var(--glow-brand)}
.side-av img{width:100%;height:100%;object-fit:cover}
.side-nm{font-size:var(--f16);font-weight:700}
.side-em{font-size:var(--f12);color:var(--txt3);margin-top:1px}
.side-nav{flex:1;padding:var(--s3) 0;overflow-y:auto}
.side-lk{display:flex;align-items:center;gap:var(--s3);padding:14px var(--s5);border:none;background:none;width:100%;text-align:left;font-size:var(--f15);font-weight:600;color:var(--txt);transition:background .15s;font-family:var(--ff);cursor:pointer}
.side-lk:active{background:var(--srf2)}
.side-lk-i{font-size:20px;width:24px;text-align:center}
.side-div{height:1px;background:var(--div);margin:var(--s2) var(--s5)}
.side-lk.red{color:var(--red)}

.fab{position:fixed;bottom:calc(var(--tab-h) + var(--safe-b) + var(--s4));right:var(--s4);width:54px;height:54px;border-radius:var(--rF);background:var(--accent-g);color:var(--inv);border:none;font-size:22px;z-index:90;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow-accent);transition:transform .15s}
.fab:active{transform:scale(.85)}

.mt-state{text-align:center;padding:var(--s16) var(--s6)}
.mt-state-i{font-size:52px;margin-bottom:var(--s4)}
.mt-state h3{font-size:var(--f18);font-weight:700}
.mt-state p{font-size:var(--f14);color:var(--txt3);margin-top:var(--s2)}
.ldr{display:flex;justify-content:center;padding:var(--s10)}
.spn{width:28px;height:28px;border:3px solid var(--srf3);border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ═══════════ RESPONSIVE — TABLET (600px–1023px) ═══════════ */
@media(min-width:600px){
  .hero{padding:var(--s6) var(--s6) var(--s8)}
  .hero-title{font-size:var(--f32)}
  .hero-search{max-width:480px}
  .cats{padding:var(--s3) var(--s6)}
  .sec-hdr{padding:var(--s5) var(--s6) var(--s3)}

  /* Products: 3 columns on tablet */
  .pgrid{grid-template-columns:repeat(3,1fr);gap:var(--s4);padding:0 var(--s6) var(--s8)}

  /* Showcase cards wider */
  .showcase{padding:0 var(--s6) var(--s4)}
  .show-card{width:340px;min-height:190px}

  /* Cart items wider (tablet) */
  .cart-hd{padding:var(--s3) var(--s6) var(--s2);max-width:680px;margin:0 auto}
  .c-list{padding:0 var(--s6);max-width:680px;margin:0 auto}
  .cart-loc{max-width:680px;margin:var(--s3) auto 0;padding-left:var(--s6);padding-right:var(--s6)}
  .cart-side{max-width:680px;margin:0 auto;padding:var(--s2) var(--s6) 0}
  .c-thumb-wrap{width:80px;height:80px}
  .cart-bar{max-width:680px;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - var(--s8))}

  /* Checkout centered (tablet) */
  .co-page{max-width:720px;margin:0 auto;padding:0 var(--s6) calc(96px + var(--safe-b))}
  .co-hero{padding:var(--s5) var(--s6)}
  .co-hero-amt{font-size:40px}

  /* Detail page — centered column (tablet) */
  .det-canvas{max-width:520px;margin:var(--s5) auto var(--s3)}
  .det-body{max-width:520px;margin-left:auto;margin-right:auto;padding:var(--s3) var(--s5) var(--s6)}

  /* Order history */
  .oh-card{margin:0 var(--s6) var(--s3)}
  .ow-shell{
    height:100%;
    display:grid;
    grid-template-columns:360px minmax(0,1fr);
    gap:0;
    padding:0;
  }
  .ow-side,.ow-main{height:100%}
  .ow-side{border-right:1px solid rgba(255,107,53,.08)}
  .ow-list{flex:1;min-height:0}
  .ow-thread-head{padding:calc(var(--safe-t) + var(--s4)) var(--s5) var(--s4)}
  .ow-side-head{padding:calc(var(--safe-t) + var(--s4)) var(--s5) var(--s4)}
  .ow-main .ch-lay{height:100%;margin:0}
  .ow-main .msgs{
    margin-left:clamp(24px,3vw,48px);
    margin-right:clamp(24px,3vw,48px);
    padding:var(--s5) 0 var(--s4);
  }
  .ow-main .m-bar{
    width:100%;max-width:none;align-self:stretch;
    margin:0;
    padding:var(--s3) var(--s5) calc(var(--s4) + var(--safe-b));
  }
  .ow-main .m-compose{min-height:58px}
  .ow-main .ch-empty{max-width:360px}
  .ow-thread-head{padding:var(--s4) var(--s5)}
  .ow-side-head{padding:var(--s4) var(--s5)}

  /* Chat */
  .bbl{max-width:100%}

  /* Profile */
  .pf-card{margin:0 var(--s6) var(--s3)}

  /* Confirmation */
  .cfm{max-width:500px;margin:0 auto}

  /* Tracking */
  .tk-card{margin:var(--s3) var(--s6)}

  /* Toast wider */
  #toast-container{max-width:500px}

  /* Modal */
  .modal-overlay{align-items:center}
  .modal-content{border-radius:var(--r24);max-width:520px}
  @keyframes mUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

  .epm-grid{grid-template-columns:1fr 1fr}
  .epm-span{grid-column:1/-1}
  .epm-actions{flex-direction:row;justify-content:flex-end}
  .epm-cancel,.epm-save{width:auto;min-width:160px}

  /* Detail bar — centered floating pill (tablet) */
  .det-bar{max-width:560px;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - var(--s8))}
}

/* ═══════════ RESPONSIVE — DESKTOP (1024px+) ═══════════ */
@media(min-width:1024px){
  /* ── Full-screen desktop: fill the whole viewport ── */
  body{position:fixed;width:100%;height:100%;--tab-h:0px}
  #app{height:100%;overflow:hidden}

  /* ── Desktop-only vs mobile-only toggles ── */
  .d-only{display:block}
  .hdr-btn.d-only,.fab.d-only,.hdr-nav.d-only,.hdr-cart-btn.d-only{display:flex}
  .m-greet{display:none}

  /* ── Mobile tab bar: hidden on desktop (replaced by header nav) ── */
  .tabs{display:none !important}

  /* ── Header: full-width top bar with nav + cart ── */
  .scr-browse{padding-top:calc(var(--safe-t) + 94px)}
  .scr-orders{
    padding-top:0;
    padding-right:0;
    padding-bottom:0;
    padding-left:0;
    overflow:hidden;
  }
  .hdr{padding:calc(var(--safe-t) + 14px) var(--s8) var(--s3);border-bottom:none;align-items:center;gap:var(--s3)}
  .hdr-title{font-size:var(--f24);flex:0 0 auto;margin-right:var(--s3)}
  .hdr-btn{width:50px;height:50px}
  .hdr-brand{flex:0 0 auto}
  .hdr-brand .wordmark{font-size:46px;letter-spacing:-1.6px}
  .hdr-chat-brand .wordmark{font-size:34px}
  .hdr-chat-wordmark{font-size:34px}
  .hdr-chat-live{width:62px;height:62px}
  .hdr-chat-live-ring-a{width:62px;height:62px}
  .hdr-chat-live-ring-b{width:76px;height:76px}
  .hdr-chat-live-core{width:46px;height:46px}
  .hdr-chat-prof{width:62px;height:62px}
  .hdr-chat-prof-core{width:46px;height:46px}
  .hdr-chat-orbit-a{width:62px;height:62px}
  .hdr-chat-orbit-b{width:76px;height:76px}

  .hdr-nav{display:flex;gap:10px;align-items:center;flex:1 1 auto;min-width:0}
  .hdr-nav-lk{
    padding:10px 18px;border-radius:14px;
    background:transparent;border:none;cursor:pointer;
    font-family:var(--ff);font-size:15px;font-weight:600;
    color:var(--txt2);letter-spacing:.1px;
    transition:all .15s;
  }
  .hdr-nav-lk:hover{background:var(--srf2);color:var(--txt)}
  .hdr-nav-lk.on{color:var(--brand);background:var(--brand-l);font-weight:700}

  .hdr-cart-btn{
    display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;min-height:52px;
    padding:10px 18px 10px 14px;border-radius:999px;
    background:var(--srf);border:1.5px solid var(--srf3);cursor:pointer;
    font-family:var(--ff);font-size:14px;font-weight:700;color:var(--txt);
    transition:all .15s;position:relative;box-shadow:0 10px 24px rgba(10,10,10,.06);
  }
  .hdr-cart-btn svg{width:20px;height:20px;color:var(--txt2)}
  .hdr-cart-btn:hover{border-color:var(--brand);color:var(--brand)}
  .hdr-cart-btn:hover svg{color:var(--brand)}
  .hdr-cart-lbl{line-height:1}
  .hdr-cart-ct{
    min-width:24px;height:24px;padding:0 7px;border-radius:999px;
    background:var(--brand);color:#fff;
    font-family:var(--ff-mono);font-size:12px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 2px 6px rgba(255,107,53,.35);
  }

  /* ── Hero: full-width with bigger text ── */
  .hero{padding:var(--s8) var(--s8) var(--s10)}
  .hero-title{font-size:38px;line-height:1.2}
  .hero-sub{font-size:var(--f16)}
  /* Search bar: stretch wide */
  .hero-search{max-width:680px}
  .hero-search input{font-size:var(--f16);padding:16px 0}

  /* ── Desktop search mode: only search field + filtered results ── */
  body.searching .hdr{display:none!important}
  body.searching .scr-browse{padding-top:0}
  body.searching .hero{
    margin:0;padding:var(--s5) var(--s8) 0;
    background:transparent!important;box-shadow:none!important;border-radius:0;
  }
  body.searching .hero::after{display:none}
  body.searching .hero-content{max-width:none}
  body.searching .hero-search{
    max-width:none;width:100%;
    background:var(--srf);border:1px solid rgba(255,107,53,.18);
    box-shadow:0 14px 30px rgba(10,10,10,.08);
  }
  body.searching .hero-search:focus-within{
    border-color:var(--brand);background:var(--srf);
    box-shadow:0 0 0 4px rgba(255,107,53,.10),0 14px 30px rgba(10,10,10,.08);
  }
  body.searching .hero-dark .hero-search-ic{color:var(--txt3)}
  body.searching .hero-dark .hero-search input{color:var(--txt)}
  body.searching .hero-dark .hero-search input::placeholder{color:var(--txt4)}
  body.searching #browse-results{padding-top:var(--s3)}
  body.searching .pgrid{padding:var(--s4) var(--s8) var(--s10)}

  /* ── Categories: spacious pills ── */
  .cats-wrap{padding:0}
  .cats{padding:var(--s4) var(--s8);gap:var(--s3);overflow-x:visible;flex-wrap:wrap;justify-content:center}
  .cat{flex:0 1 auto;min-width:0;padding:12px 24px;border-radius:var(--rF);justify-content:center;background:var(--srf);border:1px solid var(--brd)}
  .cat-icon{font-size:24px;height:28px}
  .cat-label{font-size:var(--f13);font-weight:600}
  .cat.on{box-shadow:var(--glow-brand);transform:scale(1.03)}
  .cat:hover:not(.on){background:var(--srf2);border-color:var(--txt4)}

  .sec-hdr{padding:var(--s6) var(--s8) var(--s4)}
  .sec-t{font-size:var(--f22)}

  /* ── Products: 4-column grid, full width ── */
  .pgrid{grid-template-columns:repeat(4,1fr);gap:var(--s5);padding:0 var(--s8) var(--s10)}
  .pc{transition:transform .2s,box-shadow .2s}
  .pc:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4)}
  .pc:active{transform:scale(1)}
  .pc-add{padding:7px 14px;font-size:var(--f12)}
  .pc-add:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(255,107,74,.4)}

  /* ── Showcase: full-width ── */
  .showcase{padding:0 var(--s8) var(--s5)}
  .show-card{width:380px;min-height:200px;padding:var(--s6)}
  .show-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.3)}
  .show-name{font-size:var(--f20)}
  .show-img{width:140px;height:140px}
  .show-btn:hover{background:rgba(255,255,255,.35)}

  /* ── Cart: two-column layout (items left, sticky summary right) ── */
  .cart-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:var(--s6);max-width:1180px;margin:var(--s4) auto 0;padding:0 var(--s8) var(--s8)}
  .cart-items{grid-column:1}
  .cart-side{grid-column:2;padding:0}
  .cart-hd{padding:0 0 var(--s3);font-size:var(--f16)}
  .c-list{padding:0;gap:var(--s3);max-width:none;margin:0}
  .cart-loc{margin:var(--s4) 0 0;padding-left:0;padding-right:0;max-width:none}
  .c-item{padding:var(--s4);gap:var(--s4)}
  .c-thumb-wrap{width:90px;height:90px}
  .c-name{font-size:var(--f15)}
  .c-total{font-size:var(--f16)}
  .c-sum{margin:0;padding:var(--s5);max-width:none;position:sticky;top:calc(var(--safe-t) + var(--s6))}
  .c-sum-t{font-size:14px;margin-bottom:var(--s4)}
  .s-row{font-size:var(--f14);padding:7px 0}
  .s-total{font-size:20px;padding-top:var(--s4);margin-top:var(--s4)}
  .s-total span:last-child{font-size:24px}
  .c-sum .btn-checkout.d-only{display:flex;width:100%;margin-top:var(--s4);padding:14px 18px;font-size:var(--f14)}
  /* Hide mobile floating bar on desktop */
  .cart-bar.m-only{display:none}
  .c-qb:hover{background:var(--srf2);border-color:var(--brand)}
  .c-bot{max-width:960px;margin:0 auto}

  /* ── Checkout: 2-column with sticky summary rail ── */
  .co-page{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,400px);
    column-gap:var(--s6);
    max-width:1180px;
    margin:var(--s4) auto 0;
    padding:0 var(--s8) var(--s8);
  }
  .co-hero{grid-column:1 / -1;margin:0 0 var(--s5);padding:var(--s6) var(--s8);border-radius:var(--r24)}
  .co-hero-amt{font-size:48px}
  .co-hero-lbl{font-size:var(--f12)}
  .co-hero-chip{font-size:var(--f12);padding:6px 14px}
  .co-hero-eta{font-size:var(--f12)}

  .co-main{grid-column:1;grid-row:2;max-width:none;margin:0;gap:var(--s5)}
  .co-sec{max-width:none;margin:0;padding:var(--s6) var(--s5) var(--s5);border-radius:var(--r24)}
  .co-sec-sum.m-only{display:none}

  .co-rail{grid-column:2;grid-row:2;display:block;position:sticky;top:calc(var(--safe-t) + var(--s6));align-self:start}

  .lo{padding:var(--s4);gap:var(--s4);margin-bottom:var(--s3)}
  .lo:hover{border-color:var(--brand);background:linear-gradient(180deg,rgba(255,107,53,.04) 0%,rgba(255,107,53,.02) 100%)}
  .lo-i{width:48px;height:48px}
  .lo-n{font-size:var(--f15)}
  .lo-d{font-size:var(--f12);margin-top:3px}

  /* Hide mobile-only sticky bar on desktop */
  .co-bar.m-only{display:none}

  /* ── Detail page: side-by-side layout ── */
  .det{display:flex;flex-wrap:wrap;align-items:flex-start;padding-bottom:calc(80px + var(--safe-b))}
  .det-hero{width:50%;height:auto;min-height:400px;border-radius:0 0 var(--r24) 0;position:sticky;top:0}
  .det-hero-img{width:280px;height:280px}
  .det-body{width:50%;margin-top:0;border-radius:0;padding:var(--s8)}
  .det-name{font-size:var(--f28)}
  .det-price{font-size:var(--f28)}
  .det-bar{max-width:960px;left:50%;transform:translateX(-50%);border-radius:var(--r16) var(--r16) 0 0}

  /* ── Order history: full-width ── */
  .oh-card{margin:0 var(--s8) var(--s3)}
  .oh-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}

  /* ── Chat: full-width with centered message bar ── */
  .scr-chat{
    background:linear-gradient(180deg,#F6F4EF 0%,#F7F6F2 100%);
    padding-top:0;
    padding-left:var(--s6);padding-right:var(--s6);
  }
  .hdr-chat{
    position:relative;top:auto;left:auto;right:auto;transform:none;
    width:auto;max-width:none;
    margin:calc(var(--safe-t) + var(--s4)) clamp(28px,4vw,72px) var(--s3);
    padding:calc(var(--safe-t) + 14px) var(--s5) 14px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,107,53,.08);
    border-radius:26px;
    box-shadow:0 14px 36px rgba(10,10,10,.06);
    backdrop-filter:blur(14px);
  }
  .cl-page{
    max-width:1280px;margin:0 auto;padding:var(--s4) var(--s8) var(--s8);
    display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.52fr);gap:var(--s5);align-items:start;
  }
  .cl-main,.cl-side{gap:var(--s4)}
  .cl-head{padding:0}
  .cl-h{font-size:48px;letter-spacing:-2px}
  .cl-s{font-size:15px;max-width:720px}
  .cl-metas{justify-content:flex-end}
  .cl-list{max-width:none;margin:0;padding:0}
  .cl-item{padding:var(--s4) var(--s5)}
  .cl-item:hover{background:linear-gradient(180deg,var(--srf) 0%,#FFF9F2 100%);border-color:rgba(255,107,53,.18);box-shadow:var(--sh2)}
  .cl-side{position:sticky;top:calc(var(--safe-t) + 104px)}
  .cl-side-card{margin:0}
  .hdr-chat-thread{min-width:0;flex:1}
  .hdr-chat-wordmark{font-size:34px;letter-spacing:-1.4px}
  .ch-lay{
    width:100%;max-width:none;min-height:0;margin:0 0 var(--s6);
    padding:0;background:transparent;border:none;border-radius:0;box-shadow:none;overflow:visible;
  }
  .bbl-wrap{max-width:min(64%,720px)}
  .msg-row.th .bbl-wrap{max-width:min(58%,640px)}
  .msgs{
    width:auto;max-width:none;align-self:stretch;
    margin-left:clamp(28px,4vw,72px);margin-right:clamp(28px,4vw,72px);
    padding:calc(var(--s6) + 8px) 0 var(--s5);gap:16px;
    background:transparent;overflow-x:hidden;
  }
  .bbl{
    min-width:56px;
    font-size:14px;line-height:1.36;
    box-shadow:0 1px .5px rgba(11,20,26,.13);
  }
  .bbl.th{
    background:#fff;
    border:none;
    box-shadow:0 1px .5px rgba(11,20,26,.13);
  }
  .bbl.me{
    background:#d9fdd3;
    box-shadow:0 1px .5px rgba(11,20,26,.13);
  }
  .bbl-t{font-size:11px;color:#667781;opacity:1}
  .m-bar{
    width:min(980px,calc(100vw - 160px));max-width:980px;align-self:center;
    margin:0 auto;
    padding:var(--s4) 0 calc(var(--s4) + var(--safe-b));
    background:transparent;border-top:none;
  }
  .m-compose{
    padding:8px 8px 8px 16px;
    border-color:rgba(255,107,53,.10);
    box-shadow:0 10px 24px rgba(10,10,10,.05),inset 0 1px 0 rgba(255,255,255,.72);
  }
  .m-btn.att{
    width:36px;height:36px;
    background:linear-gradient(180deg,#FFF8F0 0%,#FFFFFF 100%);
    border-color:rgba(255,107,53,.10);
  }
  .m-btn.snd{
    width:46px;height:46px;
    box-shadow:0 12px 26px rgba(255,107,53,.24);
  }
  .m-inp{font-size:var(--f15);padding:10px 0}

  /* ── Profile: full-width centered ── */
  .pf-page{padding:0 var(--s8) var(--s8)}
  .pf-hero{padding:var(--s10) var(--s8) var(--s8);max-width:1100px;margin:0 auto var(--s5)}
  .pf-av{width:100px;height:100px;font-size:44px}
  .pf-name{font-size:28px}
  .pf-layout{
    max-width:1100px;margin:0 auto;
    display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
    gap:var(--s4);align-items:start
  }
  .pf-main,.pf-side{gap:var(--s4)}
  .pf-card{max-width:none;margin:0}
  .pf-act:hover{background:#FFF7EF}
  .pf-help-card{position:sticky;top:calc(var(--safe-t) + 96px)}

  /* ── Confirmation: centered ── */
  .cfm{max-width:700px;margin:0 auto;padding:var(--s16) var(--s8)}

  /* ── Tracking: full-width ── */
  .tk-card{max-width:960px;margin:var(--s4) auto}

  /* ── Tab bar: centered floating pill ── */
  .tabs{padding:var(--s2) var(--s3);left:50%;right:auto;transform:translateX(-50%);max-width:520px;width:auto;bottom:calc(var(--safe-b) + var(--s5))}
  .tab{flex-direction:row;gap:var(--s2);padding:10px var(--s5)}
  .tab-i{font-size:22px}
  .tab-l{font-size:var(--f13);font-weight:600}
  .tab.on .tab-l{font-weight:800}
  .tab-b{top:-2px;right:auto;position:relative}

  /* ── FAB ── */
  .fab{right:var(--s8);bottom:calc(var(--tab-h) + var(--safe-b) + var(--s6));width:60px;height:60px;font-size:24px}
  .fab:hover{transform:scale(1.08)}

  /* ── Side menu: wider, clean overlay ── */
  .side{width:340px}
  .side-top{padding:var(--s8) var(--s6) var(--s5)}
  .side-av{width:56px;height:56px}
  .side-nm{font-size:var(--f18)}
  .side-lk{padding:16px var(--s6);font-size:var(--f16)}
  .side-lk:hover{background:var(--srf2)}
  .side-lk-i{font-size:22px}

  /* ── Auth: centered single-column card (desktop) ── */
  .auth{flex-direction:column;min-height:100%;align-items:center;justify-content:flex-start;padding:var(--s10) var(--s6)}
  .auth-hero{width:100%;max-width:520px;padding:var(--s8) 0 var(--s6);display:block}
  .auth-hero-bg{opacity:0}
  .auth-wordmark{font-size:56px}
  .auth-subtitle{font-size:var(--f16)}
  .auth-form{width:100%;max-width:520px;flex:none;border-radius:var(--r24);margin-top:0;padding:var(--s8) var(--s8) var(--s8);box-shadow:var(--sh2)}
  .auth-tabs{font-size:var(--f15)}
  .auth-tab{padding:var(--s4);font-size:var(--f15)}
  .fi{font-size:var(--f16);padding:14px var(--s4)}
  .btn-p{font-size:var(--f16);padding:16px}

  /* ── Modal: centered, no blur ── */
  .modal-overlay{align-items:center}
  .modal-content{border-radius:var(--r24);max-width:760px;padding:var(--s8) var(--s8) var(--s8)}
  @keyframes mUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

  .epm{gap:var(--s6)}
  .epm-hero{padding:var(--s4)}
  .epm-av{width:84px;height:84px}
  .epm-t{font-size:28px}
  .epm-grid{gap:var(--s4)}
  .epm-actions{margin-top:var(--s2)}

  /* ── Toast ── */
  #toast-container{max-width:400px;right:var(--s8);left:auto}

  /* ── PWA install pill: bottom-right anchor on desktop ── */
  #pwa-install-banner.pwa-pill{
    left:auto;right:var(--s8);bottom:var(--s8);margin:0;max-width:380px;
  }

  /* ── Product Detail: proper PDP 2-column (image left, info + inline CTA right) ── */
  .det{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--s8);row-gap:0;max-width:1120px;margin:var(--s5) auto 0;padding:0 var(--s8) var(--s8);padding-bottom:var(--s8)}
  .det-canvas{grid-column:1;grid-row:1/4;margin:0;align-self:start;position:sticky;top:calc(var(--safe-t) + var(--s6));max-width:none;aspect-ratio:1/1;border-radius:var(--r24)}
  .det-canvas-img{padding:var(--s10)}
  .det-body{grid-column:2;grid-row:1;padding:var(--s3) 0 0;max-width:none;margin:0}
  .det-brand{font-size:12px;margin-bottom:var(--s2)}
  .det-name{font-size:38px;line-height:1.08;letter-spacing:-.8px;margin-bottom:var(--s4)}
  .det-meta{margin-bottom:var(--s4)}
  .det-price{font-size:28px}
  .det-desc{font-size:15px;line-height:1.65;color:var(--txt2)}
  .nutr{margin-top:var(--s5);padding:var(--s5)}
  .nutr-t{font-size:14px}
  .nutr-v{font-size:20px}
  /* Add-to-bag bar: drop from fixed/floating into inline at bottom of right column */
  .det-bar{grid-column:2;grid-row:2;position:static;align-self:start;margin-top:var(--s5);max-width:460px;width:100%;left:auto;right:auto;transform:none;bottom:auto;padding:6px 6px 6px 10px}
  .btn-add-bag{padding:11px 18px;font-size:var(--f14)}
  .qty-b{width:34px;height:34px}
  .qty-v{font-size:15px;min-width:26px}
}

/* ═══════════ RESPONSIVE — WIDE DESKTOP (1400px+) ═══════════ */
@media(min-width:1400px){
  .pgrid{grid-template-columns:repeat(5,1fr)}
  .show-card{width:420px}
  .hero-title{font-size:42px}
  .hero-search{max-width:740px}
  .cats{padding:var(--s4) var(--s10);gap:var(--s4)}
  .cat{padding:14px 28px}
  .cat-icon{font-size:28px}
  .cat-label{font-size:var(--f14)}
  .sec-hdr{padding:var(--s6) var(--s10) var(--s4)}
  .pgrid{padding:0 var(--s10) var(--s10)}
  .showcase{padding:0 var(--s10) var(--s5)}
  .hero{padding:var(--s10) var(--s10) var(--s12)}
}

/* ── PWA Install Pill — on-brand floating glass with animated SnackApp icon ── */
#pwa-install-banner.pwa-pill{
  position:fixed;z-index:200;
  bottom:calc(var(--safe-b) + 86px);
  left:var(--s4);right:var(--s4);
  max-width:420px;margin:0 auto;
  display:flex;align-items:center;gap:var(--s2);
  padding:6px 8px 6px 10px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1.5px solid var(--brand);
  border-radius:999px;
  box-shadow:0 0 14px rgba(255,107,53,.50),0 0 28px rgba(255,107,53,.22),0 0 8px rgba(255,107,53,.45) inset,0 6px 20px rgba(10,10,10,.08);
  transform:translateY(calc(100% + 40px));opacity:0;
  transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;
  animation:pillGlowO 3s ease-in-out infinite alternate;
}
#pwa-install-banner.pwa-pill.show{transform:none;opacity:1}
.pwa-pill-icon{
  position:relative;width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.pwa-icon-ring,.pwa-icon-ring-2{
  position:absolute;inset:2px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,53,.45) 0%,rgba(255,107,53,0) 65%);
  animation:pwaRingPulse 2.2s ease-out infinite;
  pointer-events:none;
}
.pwa-icon-ring-2{animation-delay:1.1s}
.pwa-icon-brand{
  position:relative;width:36px;height:36px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-weight:800;font-size:13px;letter-spacing:-.5px;
  animation:pwaBounce 1.8s ease-in-out infinite;
  box-shadow:0 2px 6px rgba(255,107,53,.25);
}
.pwa-icon-brand .w-snack{color:var(--accent)}
.pwa-icon-brand .w-app{color:var(--brand)}
.pwa-pill-text{flex:1;min-width:0;line-height:1.2}
.pwa-pill-text strong{
  display:block;font-family:var(--ff-display);
  font-size:13px;font-weight:800;color:var(--txt);letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pwa-pill-text span{
  display:block;font-size:10px;color:var(--txt3);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pwa-pill-btn{
  flex-shrink:0;padding:8px 14px;
  background:var(--accent);color:#fff;
  border:none;border-radius:999px;
  font-size:12px;font-weight:700;font-family:inherit;
  cursor:pointer;white-space:nowrap;
  transition:transform .1s,background .15s;
}
.pwa-pill-btn:hover{background:#1a1a1a}
.pwa-pill-btn:active{transform:scale(.95)}
.pwa-pill-x{
  flex-shrink:0;width:24px;height:24px;
  background:transparent;color:var(--txt3);
  border:none;border-radius:50%;
  font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  transition:background .15s,color .15s;
}
.pwa-pill-x:hover{background:var(--srf2);color:var(--txt)}

@keyframes pwaBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes pwaRingPulse{
  0%{transform:scale(.85);opacity:.75}
  100%{transform:scale(1.7);opacity:0}
}

/* ── PWA Install Help Modal (shown when browser can't offer one-tap) ── */
.pwa-help-overlay{
  position:fixed;inset:0;z-index:10001;
  background:rgba(10,10,10,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--s5);
  opacity:0;transition:opacity .2s ease;
}
.pwa-help-overlay.show{opacity:1}
.pwa-help-card{
  background:var(--paper);
  border-radius:var(--r24);
  border:1.5px solid var(--brand);
  box-shadow:0 0 20px rgba(255,107,53,.45),0 0 40px rgba(255,107,53,.22),0 20px 60px rgba(10,10,10,.3);
  padding:var(--s6) var(--s5) var(--s5);
  max-width:380px;width:100%;
  text-align:center;
  transform:translateY(20px) scale(.96);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.pwa-help-overlay.show .pwa-help-card{transform:none}
.pwa-help-icon{
  position:relative;width:56px;height:56px;margin:0 auto var(--s4);
  display:flex;align-items:center;justify-content:center;
}
.pwa-help-icon .pwa-icon-brand{
  width:52px;height:52px;font-size:17px;
  animation:pwaBounce 1.8s ease-in-out infinite;
  box-shadow:0 3px 10px rgba(255,107,53,.3);
}
.pwa-help-icon .pwa-icon-ring{inset:0}
.pwa-help-title{
  font-family:var(--ff-display);font-size:18px;font-weight:800;
  color:var(--txt);letter-spacing:-.3px;margin-bottom:var(--s3);line-height:1.25;
}
.pwa-help-steps{
  text-align:left;padding:0 0 0 var(--s4);margin:0 0 var(--s5);
  color:var(--txt2);font-size:13px;line-height:1.55;
}
.pwa-help-steps li{margin-bottom:6px}
.pwa-help-steps li:last-child{margin-bottom:0}
.pwa-help-ok{
  width:100%;padding:12px 18px;
  background:var(--accent);color:#fff;
  border:none;border-radius:999px;
  font-size:14px;font-weight:700;font-family:inherit;
  cursor:pointer;
  transition:transform .1s,background .15s;
}
.pwa-help-ok:hover{background:#1a1a1a}
.pwa-help-ok:active{transform:scale(.98)}

/* ── Promotions — Top Banner ── */
.promo-top-banner{
  margin:0 var(--s4) var(--s3);border-radius:14px;overflow:hidden;
  background:var(--card);border:1px solid var(--brd);
  display:flex;align-items:center;gap:0;
  transition:transform .15s;
}
.promo-top-banner:active{transform:scale(0.98)}
.promo-top-img{width:90px;height:72px;object-fit:cover;flex-shrink:0}
.promo-top-text{padding:var(--s3) var(--s4);flex:1;min-width:0}
.promo-top-title{font-size:var(--f14);font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo-top-desc{font-size:var(--f12);color:var(--txt3);margin-top:2px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Promotions — Carousel ── */
.promo-carousel-wrap{padding:0 var(--s4) var(--s2)}
.promo-carousel{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:var(--s2)}
.promo-carousel::-webkit-scrollbar{display:none}
.promo-carousel-card{
  flex:0 0 72%;max-width:280px;scroll-snap-align:start;
  background:var(--card);border-radius:16px;overflow:hidden;
  border:1px solid var(--brd);transition:transform .15s;
}
.promo-carousel-card:active{transform:scale(0.98)}
.promo-carousel-img{width:100%;height:120px;object-fit:cover;display:block}
.promo-carousel-info{padding:var(--s3) var(--s4)}
.promo-carousel-title{font-size:var(--f15);font-weight:700;color:var(--txt);margin-bottom:2px}
.promo-carousel-desc{font-size:var(--f12);color:var(--txt3);line-height:1.3}

/* ── Promotions — Popup & Fullscreen overlays ── */
.promo-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
  background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  animation:promoFadeIn .25s ease;
}
.promo-overlay.closing{animation:promoFadeOut .3s ease forwards}
@keyframes promoFadeIn{from{opacity:0}to{opacity:1}}
@keyframes promoFadeOut{from{opacity:1}to{opacity:0}}

/* Popup — centered card */
.promo-popup .promo-ov-content{
  position:relative;width:88%;max-width:340px;
  background:var(--card);border-radius:20px;overflow:hidden;
  border:1px solid var(--brd);
  animation:promoSlideUp .3s ease;
}
@keyframes promoSlideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* Fullscreen — image at natural aspect, solid dominant color fills the rest */
.promo-fullscreen .promo-fs-content{
  position:relative;width:92%;height:70%;max-width:420px;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--brd);
  background:#1a1a2e;
  display:flex;flex-direction:column;
  animation:promoSlideUp .3s ease;
}
/* Sharp image — natural aspect, width fills card, vertically centered */
.promo-fs-img.promo-fs-img{
  width:100%;max-height:none;height:auto;
  object-fit:contain;display:block;
  margin:auto 0;flex-shrink:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 3%,#000 97%,transparent 100%),
                     linear-gradient(to right,transparent 0%,#000 3%,#000 97%,transparent 100%);
  -webkit-mask-composite:destination-in;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 3%,#000 97%,transparent 100%),
             linear-gradient(to right,transparent 0%,#000 3%,#000 97%,transparent 100%);
  mask-composite:intersect;
}
.promo-fullscreen .promo-ov-body{
  position:absolute;bottom:0;left:0;right:0;z-index:1;
  padding:var(--s6) var(--s4) var(--s4);
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 60%,transparent 100%);
}

/* Responsive height — tablet */
@media(min-width:600px){
  .promo-fullscreen .promo-fs-content{height:60%;max-width:500px}
}
/* Desktop */
@media(min-width:1024px){
  .promo-fullscreen .promo-fs-content{height:55%;max-width:560px}
}

/* Shared overlay elements */
.promo-ov-close{
  position:absolute;top:var(--s3);right:var(--s3);z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;
  border:none;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);transition:background .15s;
}
.promo-ov-close:active{background:rgba(0,0,0,.8)}
.promo-ov-img{width:100%;max-height:200px;object-fit:cover;display:block}
.promo-ov-body{padding:var(--s5) var(--s4)}
.promo-ov-title{font-size:var(--f20);font-weight:800;color:#fff;margin-bottom:var(--s2);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.promo-ov-desc{font-size:var(--f14);color:rgba(255,255,255,.85);line-height:1.5;margin-bottom:var(--s4);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.promo-ov-btn{
  display:inline-block;padding:var(--s3) var(--s6);
  background:var(--brand-g);color:#fff;border:none;
  border-radius:12px;font-size:var(--f15);font-weight:700;
  cursor:pointer;transition:transform .1s;
}
.promo-ov-btn:active{transform:scale(0.95)}

/* Popup — text colors (non-fullscreen, on card bg) */
.promo-popup .promo-ov-title{color:var(--txt);text-shadow:none}
.promo-popup .promo-ov-desc{color:var(--txt2);text-shadow:none}

/* ═══════════════════════════════════════════════════════════════
   CART DRAWER — Desktop-only (≥1024px) top-right glass panel
   Width ~420px (≈1.5 × product card). Contains items, location,
   payment, notes, and place-order. Scrim covers viewport.
   Hidden on mobile — mobile still uses the cart screen tab.
   ═══════════════════════════════════════════════════════════════ */
#cart-drawer-root{display:none}

@media(min-width:1024px){
  #cart-drawer-root{display:block;position:fixed;inset:0;z-index:180;pointer-events:none}
  #cart-drawer-root.open{pointer-events:auto}

  .cart-dd-scrim{
    position:absolute;inset:0;
    background:rgba(10,10,10,.26);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;transition:opacity .22s ease;
    cursor:pointer;
  }
  #cart-drawer-root.open .cart-dd-scrim{opacity:1}

  .cart-dd{
    position:absolute;
    top:calc(var(--safe-t) + 18px);
    right:var(--s5);
    width:420px;max-width:calc(100vw - var(--s8));
    max-height:calc(100vh - 40px - var(--safe-t) - var(--safe-b));
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,#FFFFFF 0%,var(--paper) 100%);
    border:1.5px solid var(--brand);
    border-radius:var(--r24);
    box-shadow:
      0 0 0 1px rgba(255,107,53,.08),
      0 24px 60px rgba(10,10,10,.22),
      0 8px 24px rgba(255,107,53,.18),
      0 0 0 6px rgba(255,107,53,.06);
    overflow:hidden;
    transform:translate(18px,-18px) scale(.96);opacity:0;
    transform-origin:top right;
    transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .22s ease;
  }
  #cart-drawer-root.open .cart-dd{transform:none;opacity:1}

  /* Header */
  .cart-dd-hd{
    display:flex;align-items:center;gap:var(--s3);
    padding:var(--s5) var(--s5) var(--s3);
    border-bottom:1px solid var(--srf3);
    flex-shrink:0;
  }
  .cart-dd-t{
    font-family:var(--ff-display);font-weight:800;font-size:var(--f18);
    color:var(--txt);letter-spacing:-.3px;
  }
  .cart-dd-n{
    font-family:var(--ff-mono);font-weight:700;font-size:var(--f12);
    color:var(--brand);background:var(--brand-l);
    padding:3px 9px;border-radius:999px;line-height:1;
  }
  .cart-dd-x{
    margin-left:auto;
    width:34px;height:34px;border-radius:var(--rF);
    border:1px solid var(--srf3);background:var(--srf);
    color:var(--txt2);font-size:18px;font-weight:600;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .15s;
  }
  .cart-dd-x:hover{background:var(--srf2);color:var(--txt);border-color:var(--txt4)}

  /* Body (scrollable) */
  .cart-dd-body{
    flex:1;min-height:0;overflow-y:auto;
    padding:var(--s4) var(--s5) var(--s5);
    display:flex;flex-direction:column;gap:var(--s5);
  }
  .cart-dd-body::-webkit-scrollbar{width:6px}
  .cart-dd-body::-webkit-scrollbar-thumb{background:var(--srf3);border-radius:4px}

  .cart-dd-sec{display:flex;flex-direction:column;gap:var(--s3)}
  .cart-dd-lbl{
    font-size:var(--f11);font-weight:800;
    color:var(--txt3);text-transform:uppercase;letter-spacing:.8px;
  }

  /* Empty state */
  .cart-dd-empty{
    padding:var(--s10) var(--s4) var(--s8);text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  }
  .cart-dd-empty-icon{font-size:44px;opacity:.85;margin-bottom:var(--s2)}
  .cart-dd-empty-t{font-family:var(--ff-display);font-size:var(--f18);font-weight:800;color:var(--txt);letter-spacing:-.3px}
  .cart-dd-empty-s{font-size:var(--f13);color:var(--txt3);line-height:1.5;max-width:260px}

  /* Items */
  .cart-dd-items{display:flex;flex-direction:column;gap:var(--s3)}
  .dd-item{
    display:grid;
    grid-template-columns:60px 1fr auto;
    grid-template-rows:auto auto;
    column-gap:var(--s3);row-gap:var(--s1);
    align-items:center;
    padding:var(--s3);
    background:var(--srf);
    border:1px solid var(--srf3);
    border-radius:var(--r14);
    transition:border-color .15s;
  }
  .dd-item:hover{border-color:var(--brand-l)}
  .dd-thumb{
    grid-column:1;grid-row:1/3;
    width:60px;height:60px;
    border-radius:var(--r12);
    background:linear-gradient(135deg,#fff 0%,var(--paper) 100%);
    border:1px solid var(--srf3);
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .dd-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;padding:4px}
  .dd-mid{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:2px;min-width:0}
  .dd-name{
    font-size:var(--f13);font-weight:700;color:var(--txt);
    line-height:1.25;letter-spacing:-.1px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .dd-unit{font-family:var(--ff-mono);font-size:var(--f11);font-weight:600;color:var(--txt3)}
  .dd-total{
    grid-column:3;grid-row:1;
    font-family:var(--ff-mono);font-size:var(--f14);font-weight:800;
    color:var(--txt);letter-spacing:-.3px;
  }
  .dd-qty{
    grid-column:2/4;grid-row:2;
    display:flex;align-items:center;gap:var(--s3);
    margin-top:4px;
  }
  .dd-qb{
    width:26px;height:26px;border-radius:var(--r8);
    border:1px solid var(--srf3);background:var(--srf);
    font-size:15px;font-weight:700;color:var(--txt2);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .15s;
  }
  .dd-qb:hover{background:var(--brand-l);border-color:var(--brand);color:var(--brand)}
  .dd-qb-x{color:#b91c1c}
  .dd-qb-x:hover{background:var(--red-l);border-color:rgba(239,68,68,.4);color:#b91c1c}
  .dd-qv{
    font-family:var(--ff-mono);font-size:var(--f13);font-weight:800;
    color:var(--txt);min-width:20px;text-align:center;
  }

  /* Option rows (location / payment) */
  .cart-dd-opts{display:flex;flex-direction:column;gap:var(--s2)}
  .dd-opt{
    display:flex;align-items:center;gap:var(--s3);
    padding:var(--s3);
    background:var(--srf);
    border:1.5px solid var(--srf3);
    border-radius:var(--r12);
    cursor:pointer;transition:all .15s;
    text-align:left;width:100%;
    font-family:var(--ff);
  }
  .dd-opt:hover{border-color:var(--txt4);background:var(--srf2)}
  .dd-opt.on{border-color:var(--brand);background:var(--brand-l)}
  .dd-opt-i{
    width:32px;height:32px;border-radius:var(--r10);
    background:var(--paper);
    display:flex;align-items:center;justify-content:center;
    font-size:16px;flex-shrink:0;
  }
  .dd-opt.on .dd-opt-i{background:#fff}
  .dd-opt-inf{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .dd-opt-n{
    font-size:var(--f13);font-weight:700;color:var(--txt);
    letter-spacing:-.1px;line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .dd-opt-d{
    font-size:var(--f11);color:var(--txt3);font-weight:500;
    line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .dd-opt-chk{
    width:20px;height:20px;border-radius:var(--rF);
    border:1.5px solid var(--srf3);background:var(--srf);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:11px;flex-shrink:0;
    transition:all .15s;
  }
  .dd-opt.on .dd-opt-chk{background:var(--brand);border-color:var(--brand)}
  .cart-dd-sec .loc-search-bar{margin-bottom:12px}

  /* Notes textarea */
  .cart-dd-notes{
    width:100%;resize:none;
    padding:var(--s3);
    background:var(--srf);
    border:1.5px solid var(--srf3);
    border-radius:var(--r12);
    font-family:var(--ff);font-size:var(--f13);color:var(--txt);
    line-height:1.5;
    transition:border-color .15s;
    min-height:64px;
  }
  .cart-dd-notes:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,107,53,.10)}
  .cart-dd-notes::placeholder{color:var(--txt4)}

  /* Footer (summary + place order) */
  .cart-dd-foot{
    flex-shrink:0;
    padding:var(--s4) var(--s5) var(--s5);
    background:linear-gradient(180deg,rgba(247,246,242,0) 0%,var(--paper) 40%);
    border-top:1px solid var(--srf3);
  }
  .cart-dd-sum{
    display:flex;flex-direction:column;gap:6px;
    padding:var(--s3) var(--s4);
    background:var(--srf);
    border:1px solid var(--srf3);
    border-radius:var(--r14);
    margin-bottom:var(--s3);
  }
  .cart-dd-sum .s-row{
    display:flex;justify-content:space-between;align-items:center;
    font-size:var(--f13);color:var(--txt2);
  }
  .cart-dd-sum .s-row span:last-child{font-family:var(--ff-mono);font-weight:700;color:var(--txt)}
  .cart-dd-sum .s-total{
    padding-top:var(--s2);margin-top:var(--s2);
    border-top:1px dashed var(--srf3);
    font-size:var(--f14);font-weight:800;color:var(--txt);
  }
  .cart-dd-sum .s-total span:last-child{
    font-family:var(--ff-mono);font-size:var(--f20);color:var(--brand);letter-spacing:-.4px;
  }
  .btn-place{
    width:100%;padding:14px;
    background:var(--brand-g);color:#fff;border:none;
    border-radius:var(--r14);
    font-family:var(--ff-display);font-size:var(--f15);font-weight:800;
    letter-spacing:.2px;cursor:pointer;
    box-shadow:var(--glow-brand),0 4px 12px rgba(255,107,53,.20);
    transition:transform .12s,box-shadow .15s;
    display:flex;align-items:center;justify-content:center;gap:var(--s2);
  }
  .btn-place:hover{box-shadow:var(--glow-brand),0 6px 16px rgba(255,107,53,.30);transform:translateY(-1px)}
  .btn-place:active{transform:translateY(0) scale(.98)}
  .btn-place[disabled]{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
  .btn-place .bag-lbl{font-weight:800}
  .btn-place .bag-dot{opacity:.7;font-weight:800}
  .btn-place .bag-pr{font-family:var(--ff-mono);font-weight:800;letter-spacing:-.2px}

  /* Minimum order hint + inline loader inside drawer */
  .cart-dd-foot .c-min-hint{
    font-size:var(--f12);color:var(--brand-d);font-weight:600;
    text-align:center;padding:var(--s2) 0;margin-bottom:var(--s2);
  }
  .cart-dd-sec .ldr-inline{
    display:flex;align-items:center;justify-content:center;
    padding:var(--s4);color:var(--txt3);
  }
}

/* Wide desktop: drawer slightly wider */
@media(min-width:1400px){
  .cart-dd{width:460px;top:calc(var(--safe-t) + 22px);right:var(--s8)}
}

/* ═══════════════════════════════════════════════════════════════
   TRACKING DRAWER (desktop)
   Right-side sliding panel with the tracking screen content inside.
   ═══════════════════════════════════════════════════════════════ */
#track-drawer-root{display:none}

@media(min-width:1024px){
  #track-drawer-root{display:block;position:fixed;inset:0;z-index:185;pointer-events:none}
  #track-drawer-root.open{pointer-events:auto}

  .track-dd-scrim{
    position:absolute;inset:0;
    background:rgba(10,10,10,.26);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;transition:opacity .22s ease;cursor:pointer;
  }
  #track-drawer-root.open .track-dd-scrim{opacity:1}

  .track-dd{
    position:absolute;
    top:calc(var(--safe-t) + 18px);
    right:var(--s5);left:var(--s5);
    margin-left:auto;
    width:min(1080px,calc(100vw - var(--s10)));
    max-height:calc(100vh - 40px - var(--safe-t) - var(--safe-b));
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,#FFFFFF 0%,var(--paper) 100%);
    border:1.5px solid var(--brand);
    border-radius:var(--r24);
    box-shadow:
      0 0 0 1px rgba(255,107,53,.08),
      0 24px 60px rgba(10,10,10,.22),
      0 8px 24px rgba(255,107,53,.18),
      0 0 0 6px rgba(255,107,53,.06);
    overflow:hidden;
    transform:translateY(-18px) scale(.98);opacity:0;
    transform-origin:top center;
    transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .22s ease;
  }
  #track-drawer-root.open .track-dd{transform:none;opacity:1}

  .track-dd-hd{
    display:flex;align-items:center;gap:var(--s3);
    padding:var(--s4) var(--s5);
    border-bottom:1px solid var(--srf3);
    flex-shrink:0;
    background:linear-gradient(90deg,#FFF6EC 0%,#FFFFFF 60%);
  }
  .track-dd-t{
    font-family:var(--ff-display);font-weight:800;font-size:var(--f16);
    color:var(--txt);letter-spacing:-.3px;
    display:flex;align-items:center;gap:var(--s2);
  }
  /* Live pulsing dot next to title */
  .track-dd-t::before{
    content:'';width:9px;height:9px;border-radius:50%;
    background:#EF4444;
    box-shadow:0 0 0 4px rgba(239,68,68,.15);
    animation:livePulse 1.4s ease-in-out infinite;
  }
  @keyframes livePulse{
    0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55),0 0 0 4px rgba(239,68,68,.18)}
    50%{box-shadow:0 0 0 8px rgba(239,68,68,0),0 0 0 4px rgba(239,68,68,.18)}
  }

  .track-dd-body{
    flex:1;min-height:0;overflow-y:auto;
    padding:var(--s5);
  }
  .track-dd-body::-webkit-scrollbar{width:6px}
  .track-dd-body::-webkit-scrollbar-thumb{background:var(--srf3);border-radius:4px}

  /* ── Horizontal tracking layout inside drawer ── */
  .track-dd-body .cfm{padding:0;gap:var(--s4);max-width:none}
  .track-dd-body .cfm-hero{padding:var(--s5) var(--s6);gap:var(--s4);border-radius:var(--r20)}
  .track-dd-body .cfm-hero-ico{width:46px;height:46px;font-size:20px}
  .track-dd-body .cfm-hero-t{font-size:22px}
  .track-dd-body .cfm-hero-s{font-size:var(--f12)}
  /* Two columns: status (wider) + summary side by side */
  .track-dd-body .cfm-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s4)}
  .track-dd-body .cfm-card{border-radius:var(--r16);padding:var(--s4)}

  /* Horizontal timeline inside the drawer — steps laid across */
  .track-dd-body .cfm-tl{display:flex;flex-direction:row;gap:0;padding:var(--s2) 0 0}
  .track-dd-body .cfm-tl .tl-s{
    flex:1;display:flex;flex-direction:column;align-items:flex-start;
    padding:0 var(--s3) 0 0;gap:var(--s2);
  }
  .track-dd-body .cfm-tl .tl-s::before{
    content:'';position:absolute;left:calc(26px + var(--s2));top:12px;right:0;
    width:auto;height:2px;background:var(--srf3);
  }
  .track-dd-body .cfm-tl .tl-s.dn::before{background:var(--brand)}
  .track-dd-body .cfm-tl .tl-s:last-child::before{display:none}
  .track-dd-body .cfm-tl .tl-dot{margin-bottom:2px}
  .track-dd-body .cfm-tl .tl-inf{padding-top:0}
  .track-dd-body .cfm-tl .tl-lb{font-size:var(--f12)}
  .track-dd-body .cfm-tl .tl-tm{font-size:var(--f11)}
  .track-dd-body .cfm-foot{margin-top:var(--s4);padding-top:var(--s3)}

  .track-dd-body .ldr{padding:var(--s8) 0}
}

/* ─── On ultra-wide desktops, give it a bit more breathing room ─── */
@media(min-width:1400px){
  .track-dd{top:calc(var(--safe-t) + 22px);right:var(--s8);left:var(--s8)}
}