/* ============================================================
   The public website — home, menu, cart, checkout and tracking.
   Warm, appetising, and quick on a phone.
   ============================================================ */
:root {
  color-scheme: light;
  --red: #C8102E;
  --red-dark: #A00D25;
  --red-soft: rgba(200, 16, 46, .14);
  --ink: #15110F;
  --muted: #6B6560;
  --line: rgba(21, 17, 15, .10);
  --cream: #FFF6EE;
  --card: rgba(255, 255, 255, .86);
  --card-solid: #FFFFFF;
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-line: rgba(255, 255, 255, .75);
  --field: rgba(255, 255, 255, .78);
  --shadow: 0 22px 48px -30px rgba(24, 12, 8, .55);
  --shadow-lift: 0 30px 60px -28px rgba(24, 12, 8, .6);
  --glow: 0 0 0 1px rgba(200, 16, 46, .18), 0 18px 40px -18px rgba(200, 16, 46, .55);
  /* the slow colour wash behind everything */
  --bg-1: #FFF4EC;
  --bg-2: #FFE9E4;
  --bg-3: #F4F0FF;
  --bg-4: #FFF7F0;
  --blob-1: rgba(200, 16, 46, .20);
  --blob-2: rgba(245, 158, 11, .20);
  --blob-3: rgba(99, 102, 241, .16);
  --on-dark: #fff;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --red: #FF5670;
  --red-dark: #E23A56;
  --red-soft: rgba(255, 86, 112, .16);
  --ink: #F6EFEA;
  --muted: #A79E98;
  --line: rgba(255, 255, 255, .12);
  --cream: #1A1418;
  --card: rgba(30, 24, 30, .72);
  --card-solid: #1E181E;
  --glass: rgba(34, 27, 34, .58);
  --glass-strong: rgba(28, 22, 28, .86);
  --glass-line: rgba(255, 255, 255, .10);
  --field: rgba(255, 255, 255, .06);
  --shadow: 0 24px 54px -30px rgba(0, 0, 0, .9);
  --shadow-lift: 0 34px 70px -30px rgba(0, 0, 0, .95);
  --glow: 0 0 0 1px rgba(255, 86, 112, .28), 0 20px 46px -18px rgba(255, 86, 112, .5);
  --bg-1: #140C14;
  --bg-2: #1B0F18;
  --bg-3: #0E1020;
  --bg-4: #180E14;
  --blob-1: rgba(255, 86, 112, .22);
  --blob-2: rgba(245, 158, 11, .14);
  --blob-3: rgba(99, 102, 241, .22);
  --on-dark: #fff;
}
* { box-sizing: border-box; }
body.site {
  margin: 0; font-family: 'Inter', system-ui, sans-serif; color: var(--ink);
  background: linear-gradient(135deg, var(--bg-1), var(--bg-2) 32%, var(--bg-3) 64%, var(--bg-4));
  background-size: 320% 320%; background-attachment: fixed;
  animation: siteWash 34s ease-in-out infinite;
  transition: color .35s ease;
}
/* do halki roshniyan jo aahista aahista ghoomti rehti hain */
body.site::before {
  content: ''; position: fixed; inset: -25vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 22%, var(--blob-1), transparent 62%),
    radial-gradient(34vmax 34vmax at 82% 18%, var(--blob-2), transparent 60%),
    radial-gradient(42vmax 42vmax at 62% 86%, var(--blob-3), transparent 64%);
  filter: blur(36px);
  animation: siteDrift 42s ease-in-out infinite alternate;
}
@keyframes siteWash {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes siteDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5vmax, -2vmax, 0) scale(1.06); }
  100% { transform: translate3d(-2vmax, 2.5vmax, 0) scale(1.02); }
}
html { scroll-behavior: smooth; }
html { --nav-h: 72px; }
:target, [id] { scroll-margin-top: calc(var(--nav-h) + 14px); }
img { max-width: 100%; }
a { color: var(--red); }

/* ---------------- nav ---------------- */
.s-nav {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.s-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.s-brand img { width: 42px; height: 42px; border-radius: 12px; object-fit: contain; }
.s-brand-mark { font-size: 1.8rem; }
.s-brand b { font-family: 'Poppins', sans-serif; font-size: 1.05rem; display: block; line-height: 1.15; }
.s-brand small { color: var(--muted); font-size: .76rem; }
.s-links { display: flex; gap: 16px; margin-left: auto; }
.s-links a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .92rem; }
.s-links a:hover { color: var(--red); }
.s-nav-right { display: flex; align-items: center; gap: 10px; }
.s-call { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; font-size: .88rem; color: var(--ink); }
.s-cart-btn {
  background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 10px 18px;
  font-weight: 800; font-size: .92rem; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(200, 16, 46, .9);
}

/* ---------------- hero: a video, a dark veil, and the name on top ------- */
.s-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 72vh; display: grid; place-items: center; text-align: center; color: #fff;
  padding: 84px 20px 76px;
  background: linear-gradient(135deg, #6E0817, #C8102E 55%, #E4572E);
}
.s-hero.has-video { min-height: 80vh; }
/* Video ka apna ek manzar hamesha peeche laga rehta hai — chahe video
   der se aaye ya bilkul na chale, hero kabhi khali nazar nahi aata. */
.s-hero-still {
  position: absolute; inset: 0; z-index: -3;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  animation: heroZoom 18s ease-in-out infinite alternate;
}
.s-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  background-size: cover; background-position: center;
  animation: heroZoom 26s ease-in-out infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.09); } }
.s-hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 25%, rgba(0, 0, 0, .10), rgba(0, 0, 0, .58) 72%),
    linear-gradient(180deg, rgba(18, 3, 6, .42), rgba(18, 3, 6, .18) 38%, rgba(18, 3, 6, .88));
}
.s-hero-in { max-width: 820px; position: relative; }
.s-hero-logo { width: 88px; height: 88px; border-radius: 26px; object-fit: contain; background: rgba(255, 255, 255, .95);
               padding: 8px; margin-bottom: 18px; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .9); }
.s-hero h1 {
  font-family: 'Poppins', sans-serif; font-weight: 900; letter-spacing: -.025em; margin: 0 0 10px;
  font-size: clamp(2.3rem, 7vw, 4.2rem); line-height: 1.02;
  text-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.s-hero p { font-size: clamp(1rem, 2.4vw, 1.25rem); opacity: .95; margin: 0 0 22px; text-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
.s-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.s-hero-chips span {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 8px 16px; font-size: .84rem; font-weight: 600;
}
.s-hero-chips .is-open { background: rgba(34, 197, 94, .26); border-color: rgba(134, 239, 172, .5); }
.s-hero-chips .is-shut { background: rgba(239, 68, 68, .26); border-color: rgba(252, 165, 165, .5); }
.s-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.s-btn-big { padding: 16px 34px; font-size: 1.05rem; border-radius: 16px; }

/* the text arrives, it does not just appear */
.reveal { opacity: 0; transform: translateY(18px); animation: heroUp .8s cubic-bezier(.22, .9, .3, 1) forwards; }
.reveal.d1 { animation-delay: .10s; }
.reveal.d2 { animation-delay: .22s; }
.reveal.d3 { animation-delay: .34s; }
.reveal.d4 { animation-delay: .46s; }
.reveal.d5 { animation-delay: .58s; }
@keyframes heroUp { to { opacity: 1; transform: none; } }

.s-scroll { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px;
            border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px; display: grid; justify-items: center; }
.s-scroll span { width: 4px; height: 8px; border-radius: 4px; background: #fff; margin-top: 7px; animation: heroScroll 1.8s ease-in-out infinite; }
@keyframes heroScroll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------------- round promo cards ---------------- */
.s-promos { background: linear-gradient(180deg, #14060A, var(--cream) 62%); padding: 0 0 8px; }
.s-promos-in { max-width: 1180px; margin: 0 auto; padding: 22px 18px 6px; }
.s-promos h2 { color: #fff; font-family: 'Poppins', sans-serif; font-size: 1.02rem; text-align: center;
               letter-spacing: .05em; text-transform: uppercase; opacity: .92; margin: 0 0 16px; }
.s-promo-row { display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x mandatory; justify-content: center; flex-wrap: wrap; }
.s-promo {
  flex: 0 0 auto; width: 150px; text-align: center; text-decoration: none; color: var(--ink); scroll-snap-align: center;
  opacity: 0; transform: translateY(14px); animation: heroUp .7s cubic-bezier(.22, .9, .3, 1) forwards; animation-delay: var(--delay, 0ms);
}
.s-promo-ring {
  position: relative; display: grid; place-items: center; width: 126px; height: 126px; margin: 0 auto 12px;
  border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent, #C8102E), 0 18px 34px -18px rgba(0, 0, 0, .8);
  transition: transform .25s cubic-bezier(.22, .9, .3, 1), box-shadow .25s ease;
}
.s-promo:hover .s-promo-ring { transform: translateY(-6px) scale(1.04); box-shadow: 0 0 0 3px #fff, 0 0 0 8px var(--accent, #C8102E), 0 26px 44px -18px rgba(0, 0, 0, .85); }
.s-promo-ring img { width: 100%; height: 100%; object-fit: cover; }
.s-promo-emoji { font-size: 2.8rem; }
.s-promo-badge { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap;
                 background: var(--accent, #C8102E); color: #fff; font-size: .7rem; font-weight: 800;
                 padding: 4px 12px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .9); }
.s-promo-title { display: block; font-family: 'Poppins', sans-serif; font-size: .96rem; color: #1a1210; }
.s-promo small { color: var(--muted); font-size: .78rem; display: block; margin-top: 2px; }

.s-btn {
  display: inline-block; background: var(--red); color: #fff; border: 0; border-radius: 13px;
  padding: 13px 24px; font-weight: 800; font-size: .98rem; cursor: pointer; text-decoration: none;
  box-shadow: 0 14px 28px -16px rgba(200, 16, 46, .95);
}
.s-btn:hover { background: var(--red-dark); color: #fff; }
.s-btn:disabled { opacity: .5; cursor: default; }
.s-btn-ghost { background: rgba(255, 255, 255, .16); box-shadow: none; border: 1.5px solid rgba(255, 255, 255, .5); }
.site .s-section .s-btn-ghost, .t-wrap .s-btn-ghost { background: #fff; color: var(--red); border-color: var(--line); }

/* ---------------- sections ---------------- */
.s-section { max-width: 1180px; margin: 0 auto; padding: 44px 18px; }
body.site, .t-wrap, .s-section { overflow-x: hidden; }
.s-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.s-head h2 { font-family: 'Poppins', sans-serif; font-size: 1.5rem; margin: 0; }
.s-head-note { color: var(--muted); font-size: .88rem; }
#menuSearch {
  margin-left: auto; min-width: 240px; flex: 1 1 240px; max-width: 420px;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 18px; font-size: .95rem; font-family: inherit;
}
#menuSearch:focus { outline: none; border-color: var(--red); }

.s-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 8px; }
.s-cats button {
  flex: 0 0 auto; background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 9px 18px; font-weight: 700; font-size: .88rem; cursor: pointer; color: var(--ink);
}
.s-cats button.on { background: var(--red); border-color: transparent; color: #fff; }

.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.s-loading { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 36px 0; }
.s-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 18px 40px -30px rgba(15, 17, 15, .7);
  transition: transform .18s ease, box-shadow .18s ease;
}
.s-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -28px rgba(15, 17, 15, .8); }
.s-card-media { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--cream); overflow: hidden; }
.s-card-media img { width: 100%; height: 100%; object-fit: cover; }
.s-emoji { font-size: 3rem; }
.s-save { position: absolute; top: 10px; left: 10px; background: #16A34A; color: #fff; border-radius: 999px; padding: 4px 11px; font-size: .74rem; font-weight: 800; }
.s-card-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.s-card-body h3 { font-family: 'Poppins', sans-serif; font-size: 1rem; margin: 0; }
.s-includes { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.s-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.s-price { font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--red); font-size: 1rem; }
.s-price s { color: var(--muted); font-weight: 500; font-size: .8rem; margin-left: 4px; }
.s-add { background: var(--ink); color: #fff; border: 0; border-radius: 11px; padding: 9px 16px; font-weight: 700; font-size: .85rem; cursor: pointer; }
.s-add:hover { background: var(--red); }

.s-deals { background: var(--cream); max-width: none; }
.s-deals > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* ---------------- about ---------------- */
.s-about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.s-about h2 { font-family: 'Poppins', sans-serif; font-size: 1.5rem; margin: 0 0 10px; }
.s-about p { line-height: 1.7; color: #4B443E; }
.s-contact { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: .94rem; }
.s-contact a { text-decoration: none; }
.s-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.s-socials a { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; font-size: .85rem; font-weight: 700; text-decoration: none; }
.s-about-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 18px 40px -30px rgba(15, 17, 15, .7); }
.s-about-card h3 { font-family: 'Poppins', sans-serif; margin: 0 0 6px; }
.s-about-card p { color: var(--muted); font-size: .92rem; margin-bottom: 14px; }

/* ---------------- footer ---------------- */
.s-foot { margin-top: 40px; color: #E7E1DB; background: linear-gradient(180deg, #1A0E10, #100809); }
.s-foot-top {
  max-width: 1180px; margin: 0 auto; padding: 46px 20px 34px;
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 30px;
}
.s-foot-brand img { width: 62px; height: 62px; border-radius: 18px; object-fit: contain; background: #fff; padding: 6px; margin-bottom: 12px; }
.s-foot-brand b { display: block; font-family: 'Poppins', sans-serif; font-size: 1.2rem; color: #fff; }
.s-foot-brand span { color: #B9ADA5; font-size: .9rem; }
.s-foot-socials { display: flex; gap: 8px; margin-top: 16px; }
.s-foot-socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
                    background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; font-size: 1rem;
                    transition: background .2s ease, transform .2s ease; }
.s-foot-socials a:hover { background: var(--red); transform: translateY(-3px); }
.s-foot-col h3 { font-family: 'Poppins', sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
                 color: #fff; margin: 0 0 14px; }
.s-foot-col a, .s-foot-col span { display: block; color: #B9ADA5; text-decoration: none; font-size: .9rem; margin-bottom: 9px; }
.s-foot-col a:hover { color: #fff; }
.s-foot-hours { display: inline-flex !important; align-self: flex-start; align-items: center; gap: 8px; background: rgba(239, 68, 68, .18);
                color: #FCA5A5 !important; border-radius: 999px; padding: 6px 14px; font-weight: 700; }
.s-foot-hours i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.s-foot-hours.is-open { background: rgba(34, 197, 94, .18); color: #86EFAC !important; }
.s-foot-bar { border-top: 1px solid rgba(255, 255, 255, .08); }
.s-foot-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
              max-width: 1180px; margin: 0 auto; padding: 18px 20px 26px; font-size: .84rem; color: #8C807A; }
.s-foot-links { display: flex; gap: 16px; }
.s-foot-bar a { color: #8C807A; text-decoration: none; }
.s-foot-bar a:hover { color: #fff; }

/* ---------------- sheets ---------------- */
.s-sheet, .s-variant {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 17, 15, .5); backdrop-filter: blur(3px);
}
.s-sheet[hidden], .s-variant[hidden] { display: none; }
.s-sheet-card {
  width: min(560px, 100%); max-height: 92vh; background: #fff; border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.s-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.s-sheet-head h3 { font-family: 'Poppins', sans-serif; margin: 0; font-size: 1.15rem; }
.s-x { background: #F3F0EC; border: 0; border-radius: 10px; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; }
.s-sheet-body { padding: 16px 20px; overflow: auto; }
.s-sheet-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px 20px; border-top: 1px solid var(--line); }
.s-sheet-foot .s-btn { flex: 1 1 130px; text-align: center; padding: 13px 14px; }
.s-sheet-foot #placeBtn { flex: 2 1 180px; }

.s-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.s-line { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.s-line b { font-size: .95rem; }
.s-line small { display: block; color: var(--muted); font-size: .78rem; }
.s-qty { display: flex; align-items: center; gap: 8px; background: #F7F4F1; border-radius: 999px; padding: 4px 8px; }
.s-qty button { background: #fff; border: 0; border-radius: 50%; width: 28px; height: 28px; font-size: 1rem; cursor: pointer; }
.s-line-total { white-space: nowrap; }
.s-empty { color: var(--muted); text-align: center; padding: 20px 0; }

.s-type, .s-pay-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.s-type button, .s-pay-tabs button {
  flex: 1; background: #fff; border: 1.5px solid var(--line); border-radius: 13px; padding: 11px;
  font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--ink);
}
.s-type button.on, .s-pay-tabs button.on { background: var(--red); border-color: transparent; color: #fff; }

.s-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.s-fields input, .s-fields textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 13px; padding: 12px 14px; font-size: 1rem; font-family: inherit;
}
.s-fields input:focus, .s-fields textarea:focus { outline: none; border-color: var(--red); }
.s-address { display: flex; flex-direction: column; gap: 8px; }
.s-loc { background: #F7F4F1; border: 0; border-radius: 11px; padding: 10px; font-weight: 700; font-size: .86rem; cursor: pointer; }
.s-loc-note { color: var(--muted); font-size: .8rem; }
.s-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.s-pay-label { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.s-accounts { background: var(--cream); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.s-acc { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.s-acc span { font-family: 'Poppins', sans-serif; font-weight: 700; }
.s-acc small { color: var(--muted); }
.s-acc-qr { width: 120px; border-radius: 10px; margin-top: 6px; }
.s-accounts > small { color: var(--muted); font-size: .8rem; }

.s-summary { border-top: 1px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.s-summary div { display: flex; justify-content: space-between; font-size: .95rem; }
.s-summary .s-total { font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--red); padding-top: 6px; border-top: 1px solid var(--line); }
.s-warn { background: #FEF3C7; color: #92400E; border-radius: 12px; padding: 10px 12px; font-size: .86rem; margin-top: 12px; }

.s-done { text-align: center; padding: 30px 24px 26px; gap: 10px; align-items: center; }
.s-done-mark { font-size: 3.2rem; }
.s-done h3 { font-family: 'Poppins', sans-serif; margin: 6px 0 4px; }
.s-done p { color: var(--muted); margin: 0 0 10px; }
.s-code { background: var(--cream); border: 1.5px dashed var(--red); border-radius: 14px; padding: 12px; font-family: 'Poppins', sans-serif; font-weight: 800; margin-bottom: 14px; }
.s-done .s-btn { display: block; margin: 0 auto 8px; width: min(320px, 100%); text-align: center; }

.s-variant-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 8px;
  font-size: 1rem; font-weight: 600; cursor: pointer; }
.s-variant-row:hover { border-color: var(--red); }
.s-variant-row b { color: var(--red); font-family: 'Poppins', sans-serif; }

.s-toasts { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 90; display: flex;
            flex-direction: column; gap: 8px; width: min(420px, calc(100% - 28px)); align-items: center; pointer-events: none; }
.s-toast { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: .9rem;
           opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.s-toast.show { opacity: 1; transform: none; }

/* ---------------- tracking ---------------- */
.t-wrap { max-width: 720px; margin: 0 auto; padding: 26px 18px 60px; }
.t-find { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; margin-bottom: 18px;
          box-shadow: 0 18px 40px -32px rgba(15, 17, 15, .8); }
.t-find label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.t-find-row { display: flex; gap: 8px; margin: 8px 0 6px; flex-wrap: wrap; }
.t-find input { flex: 1 1 160px; min-width: 0; border: 1.5px solid var(--line); border-radius: 13px; padding: 12px 15px; font-size: 1.1rem;
                font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.t-find input:focus { outline: none; border-color: var(--red); }
.t-find small { color: var(--muted); font-size: .8rem; }

.t-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: 0 20px 44px -32px rgba(15, 17, 15, .8); }
.t-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.t-order { font-size: .8rem; color: var(--muted); }
.t-head h1 { font-family: 'Poppins', sans-serif; font-size: 1.5rem; margin: 4px 0 2px; }
.t-head p { color: var(--muted); margin: 0; }
.t-eta { background: var(--cream); border-radius: 16px; padding: 10px 16px; text-align: center; }
.t-eta b { display: block; font-family: 'Poppins', sans-serif; font-size: 1.6rem; color: var(--red); line-height: 1; }
.t-eta small { color: var(--muted); font-size: .72rem; }

.t-steps { list-style: none; padding: 0; margin: 20px 0; display: flex; justify-content: space-between; position: relative; }
.t-steps::before { content: ''; position: absolute; left: 6%; right: 6%; top: 19px; height: 3px; background: var(--line); border-radius: 2px; }
.t-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; }
.t-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #F3F0EC; font-size: 1.05rem; border: 3px solid #fff; }
.t-step-name { font-size: .72rem; color: var(--muted); font-weight: 600; line-height: 1.2; }
.t-step.is-done .t-dot { background: #DCFCE7; }
.t-step.is-done .t-step-name { color: #15803D; }
.t-step.is-now .t-dot { background: var(--red); color: #fff; box-shadow: 0 0 0 4px rgba(200, 16, 46, .18); animation: tPulse 1.8s ease-in-out infinite; }
.t-step.is-now .t-step-name { color: var(--red); font-weight: 800; }
@keyframes tPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(200, 16, 46, .18); } 50% { box-shadow: 0 0 0 10px rgba(200, 16, 46, .05); } }

.t-map-wrap { margin: 6px 0 18px; }
.t-map { height: 300px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.t-map-note { color: var(--muted); font-size: .84rem; margin: 8px 2px 0; }
.t-pin { display: grid; place-items: center; }
.t-pin span { font-size: 1.5rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.t-pin-rider span { animation: tRide 1.4s ease-in-out infinite; }
@keyframes tRide { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.t-items { border-top: 1px dashed var(--line); padding-top: 14px; }
.t-items h2 { font-family: 'Poppins', sans-serif; font-size: 1rem; margin: 0 0 8px; }
.t-items ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.t-items li { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.t-total { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px;
           font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--red); }
.t-paid { color: #15803D; font-weight: 700; margin: 8px 0 0; }
.t-foot { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.t-foot .s-btn { flex: 1; text-align: center; }
.t-error { background: #FEE2E2; color: #991B1B; border-radius: 14px; padding: 14px; text-align: center; font-weight: 600; }

@media (max-width: 820px) {
  .s-about-grid { grid-template-columns: 1fr; }
  .s-links { order: 3; width: 100%; justify-content: space-between; margin-left: 0; }
  .s-call span { display: none; }
  .t-steps::before { left: 10%; right: 10%; }
  .t-step-name { font-size: .64rem; }
}
@media (max-width: 980px) { .s-foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .s-foot-top { grid-template-columns: 1fr; gap: 24px; padding: 34px 20px 26px; }
  .s-hero { min-height: 72vh; padding: 70px 18px 84px; }
  .s-hero.has-video { min-height: 78vh; }
  .s-promo { width: 126px; }
  .s-promo-ring { width: 108px; height: 108px; }
  .s-promo-row { flex-wrap: nowrap; justify-content: flex-start; }
  /* chhoti screen par nav ke link poore nazar aayein, kata hua na lage */
  .s-links { gap: 10px; justify-content: space-around; }
  .s-links a { font-size: .84rem; white-space: nowrap; }
}
@media (max-width: 400px) { .s-links a { font-size: .79rem; } .s-links { gap: 7px; } }
@media (prefers-reduced-motion: reduce) {
  .s-card, .s-toast, .t-step.is-now .t-dot, .t-pin-rider span { transition: none; animation: none; }
  .s-hero-video, .reveal, .s-promo, .s-scroll span { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}
.t-map.is-plain { height: auto; padding: 14px; background: var(--cream); }
.t-map-links { display: flex; flex-direction: column; gap: 8px; }
.t-map-links a { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
                 font-weight: 700; text-decoration: none; font-size: .92rem; }

/* ---------- The rider's card on the tracking page ---------- */
.t-rider { display: flex; align-items: center; gap: 12px; background: var(--cream); border: 1px solid var(--line);
           border-radius: 18px; padding: 12px 14px; margin: 16px 0 6px; }
.t-rider[hidden] { display: none; }
.t-rider-avatar { width: 46px; height: 46px; border-radius: 14px; background: #fff; display: grid; place-items: center; font-size: 1.5rem; flex: 0 0 auto; }
.t-rider-info { display: flex; flex-direction: column; min-width: 0; }
.t-rider-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.t-rider-info b { font-family: 'Poppins', sans-serif; font-size: 1.02rem; }
.t-rider-info small { color: var(--muted); font-size: .82rem; }
.t-rider-call { margin-left: auto; background: #16A34A; color: #fff; border-radius: 12px; padding: 10px 16px;
                font-weight: 800; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.t-rider-call:hover { background: #15803D; color: #fff; }

/* ---------- Opening hours, order again, sticky cart, item notes ---------- */
.s-closed { margin-top: 18px; background: rgba(0, 0, 0, .28); border-radius: 16px; padding: 14px 18px; display: inline-block; text-align: left; }
.s-closed b { display: block; font-size: 1rem; }
.s-closed span { font-size: .9rem; opacity: .9; }
.s-closed-cta { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.s-closed-cta a { background: rgba(255, 255, 255, .2); border-radius: 999px; padding: 8px 16px; color: #fff;
                  text-decoration: none; font-weight: 700; font-size: .86rem; }

.s-again { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.s-again[hidden] { display: none; }
.s-again-in { max-width: 1180px; margin: 0 auto; padding: 16px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.s-again-in b { font-family: 'Poppins', sans-serif; display: block; }
.s-again-in small { color: var(--muted); font-size: .86rem; }
.s-again-cta { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.s-again-cta .s-btn { padding: 10px 18px; font-size: .9rem; }

.s-cartbar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50;
  width: min(520px, calc(100% - 28px)); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: #fff; border: 0; border-radius: 16px; padding: 14px 18px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .98rem; cursor: pointer;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7);
}
.s-cartbar[hidden] { display: none; }
.s-cartbar-mid { opacity: .85; font-weight: 600; font-size: .88rem; }

.s-line { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name qty total" "note note note";
          align-items: center; row-gap: 6px; }
.s-line-main { grid-area: name; min-width: 0; }
.s-line .s-qty { grid-area: qty; }
.s-line .s-line-total { grid-area: total; }
.s-line-note { grid-area: note; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 11px;
               font-size: .84rem; font-family: inherit; width: 100%; }
.s-line-note:focus { outline: none; border-color: var(--red); border-style: solid; }
.t-item-note { display: block; color: var(--muted); font-size: .8rem; }

@media (max-width: 640px) {
  .s-again-cta { margin-left: 0; width: 100%; }
  .s-again-cta .s-btn { flex: 1; text-align: center; }
}
.t-recent-box { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; margin-bottom: 16px; }
.t-recent-box[hidden] { display: none; }
.t-recent-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.t-recent-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.t-recent { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px;
            font-weight: 700; font-size: .86rem; cursor: pointer; text-align: left; }
.t-recent small { display: block; color: var(--muted); font-weight: 500; font-size: .74rem; }
.t-recent:hover { border-color: var(--red); }

/* ============================================================
   WEB-3 LAYER — glass, glow, motion and the dark theme.
   Sab kuch sirf transform/opacity par chalta hai, taake saste
   phone par bhi makhan jaisa chale.
   ============================================================ */

/* ---------------- navigation ---------------- */
body.site .s-nav {
  background: var(--glass); backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .7);
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
body.site .s-nav.is-stuck { padding-top: 7px; padding-bottom: 7px; box-shadow: 0 16px 40px -26px rgba(0, 0, 0, .85); }
.s-brand, .s-links a, .s-call { color: var(--ink); }
.s-links a { position: relative; transition: color .25s ease; }
.s-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.22,.9,.3,1);
}
.s-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.s-cart-btn { box-shadow: var(--glow); transition: transform .2s ease, box-shadow .25s ease; }
.s-cart-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(200,16,46,.3), 0 22px 44px -16px rgba(200,16,46,.8); }

/* theme switch */
.s-theme {
  width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--glass-line);
  background: var(--glass-strong); color: var(--ink); font-size: 1.05rem; cursor: pointer;
  display: grid; place-items: center; transition: transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s ease, background .3s ease;
}
.s-theme:hover { transform: translateY(-2px) rotate(-8deg); box-shadow: var(--glow); }
.s-theme .s-theme-sun { display: none; }
:root[data-theme="dark"] .s-theme .s-theme-sun { display: block; }
:root[data-theme="dark"] .s-theme .s-theme-moon { display: none; }

/* ---------------- surfaces: glass everywhere ---------------- */
body.site .s-card,
body.site .s-about-card,
body.site .t-card,
body.site .t-find,
body.site .t-recent-box,
body.site .s-sheet-card {
  background: var(--card); backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.22,.9,.3,1), box-shadow .3s ease, border-color .3s ease, background .35s ease;
}
body.site .s-card:hover {
  transform: translateY(-8px) scale(1.012);
  box-shadow: var(--shadow-lift), var(--glow);
  border-color: rgba(200, 16, 46, .35);
}
body.site .s-card-media { background: var(--red-soft); }
body.site .s-card-body h3, body.site .s-head h2, body.site .s-about h2 { color: var(--ink); }
body.site .s-about p, body.site .s-includes, body.site .s-contact { color: var(--muted); }
body.site .s-deals { background: transparent; }
body.site .s-cats button, body.site #menuSearch, body.site .s-socials a {
  background: var(--glass-strong); color: var(--ink); border: 1px solid var(--glass-line);
  transition: transform .2s ease, box-shadow .25s ease, background .3s ease, color .3s ease;
}
body.site .s-cats button:hover { transform: translateY(-2px); box-shadow: var(--glow); }
body.site .s-cats button.on { background: linear-gradient(135deg, var(--red), #E4572E); color: #fff; box-shadow: var(--glow); }
body.site .s-socials a:hover { transform: translateY(-3px); box-shadow: var(--glow); }
body.site .s-add { background: var(--ink); color: var(--card-solid); transition: transform .2s ease, background .25s ease, box-shadow .25s ease; }
body.site .s-add:hover { background: var(--red); color: #fff; transform: translateY(-2px); box-shadow: var(--glow); }
body.site .s-btn { transition: transform .22s cubic-bezier(.22,.9,.3,1), box-shadow .28s ease, background .25s ease; }
body.site .s-btn:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(200,16,46,.28), 0 26px 50px -18px rgba(200,16,46,.85); }
body.site .s-btn:active { transform: translateY(-1px) scale(.99); }
body.site .s-section .s-btn-ghost, body.site .t-wrap .s-btn-ghost {
  background: var(--glass-strong); color: var(--red); border: 1px solid var(--glass-line);
}

/* fields */
body.site .s-fields input, body.site .s-fields textarea, body.site .t-find input, body.site .s-line-note {
  background: var(--field); color: var(--ink); border-color: var(--line);
  transition: border-color .25s ease, box-shadow .25s ease, background .3s ease;
}
body.site .s-fields input::placeholder, body.site .s-fields textarea::placeholder { color: var(--muted); }
body.site .s-fields input:focus, body.site .s-fields textarea:focus, body.site .t-find input:focus {
  border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft);
}
body.site .s-type button, body.site .s-pay-tabs button, body.site .s-loc, body.site .s-accounts, body.site .s-summary,
body.site .t-eta, body.site .t-recent, body.site .t-rider, body.site .s-qty {
  background: var(--field); color: var(--ink); border-color: var(--glass-line);
}
body.site .s-type button.on, body.site .s-pay-tabs button.on {
  background: linear-gradient(135deg, var(--red), #E4572E); color: #fff; box-shadow: var(--glow);
}
body.site .s-qty button { background: var(--card-solid); color: var(--ink); }
body.site .s-sheet, body.site .s-variant { background: rgba(10, 6, 10, .55); backdrop-filter: blur(6px); }
body.site .s-variant-row { background: var(--field); color: var(--ink); border-color: var(--glass-line);
  transition: transform .2s ease, border-color .25s ease, box-shadow .25s ease; }
body.site .s-variant-row:hover { transform: translateX(4px); border-color: var(--red); box-shadow: var(--glow); }
body.site .s-x { background: var(--field); color: var(--ink); }
body.site .s-cartbar { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 26px 50px -20px rgba(0,0,0,.8); }
body.site .s-again { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(14px); }

/* promo rings glow softly, and lift on hover */
body.site .s-promo-ring {
  background: var(--card-solid);
  box-shadow: 0 0 0 3px var(--card-solid), 0 0 0 6px var(--accent, var(--red)),
              0 0 34px -6px var(--accent, var(--red)), 0 18px 34px -18px rgba(0, 0, 0, .8);
}
body.site .s-promo:hover .s-promo-ring {
  box-shadow: 0 0 0 3px var(--card-solid), 0 0 0 8px var(--accent, var(--red)),
              0 0 48px -4px var(--accent, var(--red)), 0 26px 44px -18px rgba(0, 0, 0, .85);
}
body.site .s-promo-title { color: var(--ink); }
body.site .s-promos { background: linear-gradient(180deg, rgba(10, 4, 7, .92), transparent 78%); }
:root[data-theme="dark"] body.site .s-promos { background: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 78%); }

/* ---------------- scroll reveal ---------------- */
/* .js sirf tab lagta hai jab JavaScript chal rahi ho — warna sab kuch
   normal nazar aata hai, kuch chhupa nahi rehta. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1);
  transition-delay: var(--rd, 0ms);
}
.js [data-reveal="left"]  { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="zoom"]  { transform: scale(.94); }
.js [data-reveal].is-in { transform: none; }

/* ============================================================
   CATEGORY ARC — categories ek kaman par ghoomte hain.
   Beech wala bara aur seedha, kinare wale jhuke hue aur mand.
   ============================================================ */
.s-arc {
  position: relative; margin: 6px 0 26px; border-radius: 26px; overflow: hidden;
  background: linear-gradient(170deg, #180A12 0%, #0B0509 55%, #14070E 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -40px rgba(0, 0, 0, .9);
  padding: 22px 10px 52px;
  perspective: 1500px; perspective-origin: 50% 40%;
  touch-action: pan-y;
}
.s-arc[hidden] { display: none; }
/* beech mein ek narm roshni, jaise stage par spotlight */
.s-arc-glow {
  position: absolute; left: 50%; top: 42%; width: min(760px, 88%); aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(200, 16, 46, .38), rgba(228, 87, 46, .12) 55%, transparent 72%);
  filter: blur(18px);
  animation: arcBreathe 7s ease-in-out infinite alternate;
}
@keyframes arcBreathe { from { opacity: .75; transform: translate(-50%, -50%) scale(1); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.09); } }

/* stage sirf jagah banata hai — tap cards tak jani chahiye. 3D mein stage ka
   apna plane (z = 0) kinare wale cards (z < 0) se aage hota hai, is liye woh
   un ki tap kha jata tha. pointer-events: none se masla khatam. */
.s-arc-stage { position: relative; height: 300px; transform-style: preserve-3d; pointer-events: none; }
.s-arc-card { pointer-events: auto; }
.s-arc-card {
  position: absolute; left: 50%; top: 42%; width: 176px;
  background: linear-gradient(180deg, rgba(38, 26, 34, .96), rgba(14, 8, 12, .98));
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; padding: 12px 12px 14px;
  color: #fff; cursor: pointer; text-align: center; transform-style: preserve-3d;
  box-shadow: 0 26px 46px -24px rgba(0, 0, 0, .95);
  transition: transform .75s cubic-bezier(.22, .9, .3, 1), opacity .6s ease, box-shadow .4s ease, border-color .4s ease;
  will-change: transform, opacity;
}
.s-arc-media {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, rgba(200, 16, 46, .35), rgba(0, 0, 0, .55));
}
.s-arc-media img { width: 100%; height: 100%; object-fit: cover; }
.s-arc-emoji { font-size: 2.9rem; font-style: normal; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6)); }
.s-arc-face { display: block; margin-top: 10px; }
.s-arc-face b { display: block; font-family: 'Poppins', sans-serif; font-size: .96rem; line-height: 1.2; }
.s-arc-face small { color: rgba(255, 255, 255, .55); font-size: .74rem; }
.s-arc-card.is-here {
  border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 0 0 1px rgba(200, 16, 46, .5), 0 34px 60px -26px rgba(200, 16, 46, .85), 0 0 60px -12px rgba(228, 87, 46, .6);
}
.s-arc-card.is-here .s-arc-face b { text-shadow: 0 0 22px rgba(255, 140, 120, .5); }
.s-arc-card.is-here::after {
  content: 'Open'; position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); white-space: nowrap;
}
.s-arc-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.s-arc-nav {
  position: absolute; top: 46%; z-index: 45; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 1.3rem; line-height: 1;
  color: #fff; background: rgba(16, 8, 12, .62); border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(8px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.s-arc-nav:hover { background: rgba(200, 16, 46, .85); transform: scale(1.08); }
.s-arc-nav.is-prev { left: 12px; }
.s-arc-nav.is-next { right: 12px; }

.s-arc-dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 7px; }
.s-arc-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .26); transition: width .3s ease, background .3s ease;
}
.s-arc-dots button.on { width: 22px; border-radius: 4px; background: linear-gradient(90deg, var(--red), #E4572E); }

@media (max-width: 700px) {
  .s-arc { padding: 18px 6px 46px; border-radius: 22px; }
  .s-arc-stage { height: 248px; }
  .s-arc-card { width: 118px; padding: 8px 8px 10px; border-radius: 16px; }
  .s-arc-face b { font-size: .8rem; }
  .s-arc-emoji { font-size: 2.1rem; }
  .s-arc-nav { width: 34px; height: 34px; font-size: 1.1rem; }
  .s-arc-card.is-here::after { bottom: -26px; font-size: .64rem; }
}

/* ---------------- ek category khuli ho to uska apna stage ----------------
   Wahi gehra rang jo arc ka hai, taake dono ek hi cheez lagen. */
.s-stage {
  display: block; border-radius: 26px; padding: 22px 20px 26px;
  background: linear-gradient(170deg, #180A12 0%, #0B0509 58%, #14070E 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.s-stage .s-row-head { margin-bottom: 18px; }
.s-stage .s-row-head h3 { color: #fff; }
.s-stage .s-row-count { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .7); }
.s-stage .s-row-head::after { background: linear-gradient(90deg, var(--red), rgba(228, 87, 46, .4), transparent 78%); }
.s-stage .s-row-all { color: #FF8A98; }
.s-stage .s-loading { color: rgba(255, 255, 255, .6); }
body.site .s-stage .s-card {
  background: linear-gradient(180deg, rgba(38, 26, 34, .96), rgba(14, 8, 12, .98));
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 26px 46px -26px rgba(0, 0, 0, .95);
}
body.site .s-stage .s-card:hover { border-color: rgba(255, 140, 120, .45); box-shadow: 0 34px 60px -26px rgba(200, 16, 46, .75); }
body.site .s-stage .s-card-media { background: radial-gradient(120% 90% at 50% 0%, rgba(200, 16, 46, .32), rgba(0, 0, 0, .6)); }
body.site .s-stage .s-card-body h3 { color: #fff; }
body.site .s-stage .s-includes { color: rgba(255, 255, 255, .55); }
body.site .s-stage .s-price { color: #FF8A98; }
body.site .s-stage .s-price s { color: rgba(255, 255, 255, .42); }
body.site .s-stage .s-add { background: #fff; color: #14070E; }
body.site .s-stage .s-add:hover { background: var(--red); color: #fff; }
body.site .s-stage .s-card::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .16), transparent 46%);
}
.s-stage-head h3 { font-size: 1.35rem; }
.s-stage-head .s-row-all i { font-style: normal; display: inline-block; transition: transform .28s cubic-bezier(.22, .9, .3, 1); }
.s-stage-head .s-row-all:hover i { transform: translateX(-5px); }
.s-stage-grid { perspective: 1200px; }
.js .s-stage-grid .s-card.is-fresh { animation: stageIn .62s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes stageIn {
  from { opacity: 0; transform: perspective(1200px) rotateX(14deg) translateY(30px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- menu ek saath nahi, category ki rows mein ---------------- */
.s-rows { display: block; }
.s-row + .s-row { margin-top: 38px; }
.s-row-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding-bottom: 10px; position: relative;
}
.s-row-head::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--red), rgba(228, 87, 46, .35), transparent 78%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.22, .9, .3, 1) .12s;
}
.js .s-row-head.is-in::after, html:not(.js) .s-row-head::after { transform: scaleX(1); }
.s-row-head h3 { font-family: 'Poppins', sans-serif; font-size: 1.18rem; margin: 0; color: var(--ink); }
.s-row-count {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: 999px; padding: 3px 10px;
}
.s-row-all {
  margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--red);
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .86rem; padding: 4px 2px;
  display: inline-flex; align-items: center; gap: 6px;
}
.s-row-all i { font-style: normal; transition: transform .28s cubic-bezier(.22, .9, .3, 1); }
.s-row-all:hover i { transform: translateX(5px); }

.s-row-more, .s-rows-more { display: flex; justify-content: center; margin-top: 18px; }
.s-rows-more { margin-top: 34px; }
.s-rows-more i, .s-more-arrow { font-style: normal; transition: transform .3s cubic-bezier(.22, .9, .3, 1); }
.s-more {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--glass-strong); color: var(--ink);
  border: 1px solid var(--glass-line); border-radius: 999px; padding: 10px 20px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .88rem;
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.22, .9, .3, 1), box-shadow .28s ease, border-color .28s ease, color .25s ease;
}
.s-more b { background: var(--red-soft); color: var(--red); border-radius: 999px; padding: 2px 9px; font-size: .8rem; }
.s-more:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), var(--glow); border-color: rgba(200, 16, 46, .35); color: var(--red); }
.s-more:hover .s-more-arrow { transform: translateY(3px); }
.s-more.is-open:hover .s-more-arrow { transform: translateY(-3px); }
.s-rows-more .s-btn i { margin-left: 6px; }
.s-rows-more .s-btn:hover i { transform: translateY(3px); }

/* jo card abhi parde ke neeche hai, wo scroll par hi aata hai */
.js .s-card.is-wait { opacity: 0; transform: translateY(22px); }

/* photo zara si zoom hoti hai jab card par ungli/mouse aaye */
body.site .s-card .product-photo { transition: transform .6s cubic-bezier(.22, .9, .3, 1); }
body.site .s-card:hover .product-photo { transform: scale(1.07); }
body.site .s-card .s-emoji { transition: transform .5s cubic-bezier(.22, .9, .3, 1); }
body.site .s-card:hover .s-emoji { transform: scale(1.12) rotate(-6deg); }

/* upar patli si lakeer — kitna page parh liya */
.s-prog {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; transform-origin: left;
  transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, var(--red), #E4572E 55%, #F59E0B);
  box-shadow: 0 0 18px -2px var(--red);
}

/* wapas upar jane ka gol button */
.s-top {
  position: fixed; right: 18px; bottom: 96px; z-index: 45; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; color: var(--ink);
  background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  opacity: 0; transform: translateY(14px) scale(.85); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, .9, .3, 1), box-shadow .3s ease;
}
.s-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.s-top:hover { box-shadow: var(--shadow-lift), var(--glow); transform: translateY(-3px); }

@media (max-width: 560px) {
  .s-row + .s-row { margin-top: 28px; }
  .s-row-head h3 { font-size: 1.05rem; }
  .s-row-all { margin-left: auto; font-size: .8rem; }
  .s-top { right: 12px; bottom: 88px; width: 42px; height: 42px; }
}

/* phone par ek line mein do card — pura menu ek nazar mein aa jaye */
@media (max-width: 640px) {
  .s-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .s-card-media { aspect-ratio: 1 / 1; }
  .s-card-media .s-emoji { font-size: 2.4rem; }
  .s-card-body { padding: 10px 11px 12px; gap: 4px; }
  .s-card-body h3 { font-size: .92rem; line-height: 1.25; }
  .s-includes { font-size: .72rem; }
  .s-price { font-size: .9rem; }
  .s-price s { display: block; margin: 2px 0 0; }
  .s-save { top: 7px; left: 7px; padding: 3px 8px; font-size: .68rem; }
}
@media (max-width: 430px) {
  .s-card-foot { flex-direction: column; align-items: stretch; gap: 7px; }
  .s-add { width: 100%; padding: 8px 10px; font-size: .8rem; }
}

/* cards re-arranging (search / category change) */
.s-grid { transition: none; }
.s-card.is-moving { will-change: transform; }
.s-card.is-fresh { animation: cardIn .5s cubic-bezier(.22,.9,.3,1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.s-card.is-leaving { animation: cardOut .28s ease forwards; }
@keyframes cardOut { to { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* ---------------- footer: even columns, one rhythm ---------------- */
body.site .s-foot { background: linear-gradient(180deg, rgba(16, 8, 12, .96), rgba(10, 5, 8, .99)); color: #EDE5DF; }
:root[data-theme="dark"] body.site .s-foot { background: linear-gradient(180deg, rgba(8, 4, 8, .96), rgba(4, 2, 5, .99)); }
body.site .s-foot-top {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
  align-items: start; padding: 52px 20px 34px;
}
body.site .s-foot-brand { display: flex; flex-direction: column; align-items: flex-start; }
body.site .s-foot-col { display: flex; flex-direction: column; }
body.site .s-foot-col h3 { margin: 0 0 16px; min-height: 18px; }
body.site .s-foot-col a, body.site .s-foot-col span { margin: 0 0 10px; line-height: 1.45; }
body.site .s-foot-col a { position: relative; width: fit-content; transition: color .25s ease, transform .25s ease; }
body.site .s-foot-col a:hover { color: #fff; transform: translateX(3px); }
body.site .s-foot-socials a:hover { box-shadow: 0 0 22px -4px var(--red); }
body.site .s-foot-bar { align-items: center; }
@media (max-width: 980px) { body.site .s-foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } }
@media (max-width: 560px) {
  body.site .s-foot-top { grid-template-columns: 1fr; text-align: center; padding: 34px 20px 24px; }
  body.site .s-foot-brand, body.site .s-foot-col { align-items: center; }
  body.site .s-foot-hours { align-self: center; }
  body.site .s-foot-col a { width: auto; }
  body.site .s-foot-socials { justify-content: center; }
  body.site .s-foot-bar { flex-direction: column; text-align: center; gap: 12px; }
}

/* ============================================================
   PREMIUM LAYER — lehar, jhukao, magnet, dhundli se saaf tasveer.
   Har cheez transform/opacity par, is liye 60fps par chalti hai.
   ============================================================ */

/* ---- chhoo par lehar ---- */
.fx .s-btn, .fx .s-add, .fx .s-more, .fx .s-cats button, .fx .s-cart-btn, .fx .s-theme,
.fx .s-row-all, .fx .s-type button, .fx .s-pay-tabs button, .fx .s-qty button, .fx .t-recent, .fx .s-x {
  position: relative; overflow: hidden; isolation: isolate;
}
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 68%);
  transform: scale(0); opacity: .9; animation: fxRipple .62s cubic-bezier(.22, .9, .3, 1) forwards;
}
.s-cats button .fx-ripple, .s-add .fx-ripple, .s-more .fx-ripple, .s-row-all .fx-ripple,
.s-qty button .fx-ripple, .t-recent .fx-ripple, .s-x .fx-ripple {
  background: radial-gradient(circle, var(--red-soft), rgba(200, 16, 46, 0) 70%);
}
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }

/* ---- card ka halka jhukao + roshni ka dhabba ---- */
body.site .s-card, body.site .s-about-card, body.site .t-card { transform-style: preserve-3d; }
body.site .s-card.is-tilting {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) scale(1.012);
  transition: transform .18s ease-out, box-shadow .3s ease, border-color .3s ease;
}
body.site .s-about-card.is-tilting, body.site .t-card.is-tilting {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .2s ease-out;
}
body.site .s-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .34), transparent 46%);
  opacity: 0; transition: opacity .35s ease;
}
:root[data-theme="dark"] body.site .s-card::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .14), transparent 46%);
}
body.site .s-card.is-tilting::after { opacity: 1; }
body.site .s-card { position: relative; }

/* ---- magnet ---- */
.fx .is-magnet {
  transform: translate(var(--fx-x, 0), var(--fx-y, 0)) translateY(-3px);
  transition: transform .18s cubic-bezier(.22, .9, .3, 1);
}
.fx .s-top.is-magnet { transform: translate(var(--fx-x, 0), var(--fx-y, 0)) scale(1.06); }
.fx .s-btn-big, .fx .s-cart-btn, .fx .s-more, .fx .s-top { will-change: transform; }

/* ---- tasveer dhundli se saaf ---- */
.js.fx body.site img.product-photo {
  opacity: 0; filter: blur(14px); transform: scale(1.06);
  transition: opacity .6s ease, filter .7s cubic-bezier(.22, .9, .3, 1), transform .7s cubic-bezier(.22, .9, .3, 1);
}
.js.fx body.site img.product-photo.is-ready { opacity: 1; filter: none; transform: none; }

/* ---- naam lafz ba lafz ---- */
.s-hero h1 .fx-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.s-hero h1 .fx-word > i {
  display: inline-block; font-style: normal; transform: translateY(110%);
  animation: fxWord .95s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: calc(120ms + var(--w, 0) * 110ms);
}
@keyframes fxWord { to { transform: none; } }

/* ---- cart ki ginti ---- */
.s-cart-btn #cartCount { display: inline-block; }
#cartCount.is-pop { animation: fxPop .5s cubic-bezier(.22, .9, .3, 1); }
@keyframes fxPop {
  30% { transform: scale(1.45) translateY(-2px); }
  60% { transform: scale(.92); }
  100% { transform: none; }
}

/* ---- cart tak udta hua gola ---- */
.fx-fly {
  position: fixed; z-index: 70; width: 52px; height: 52px; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center; font-size: 1.7rem; line-height: 1;
  background: var(--card-solid) center/cover no-repeat;
  box-shadow: 0 0 0 2px var(--card-solid), 0 18px 34px -14px rgba(0, 0, 0, .6), var(--glow);
}

/* ---- menu load hote waqt ki chamak ---- */
.s-loading-say { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: .88rem; padding: 10px 0 0; }
.s-skel { border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-line); background: var(--card); }
.s-skel-media { aspect-ratio: 4 / 3; }
.s-skel-line { height: 12px; border-radius: 6px; margin: 14px 14px 0; }
.s-skel-line.is-short { width: 46%; margin-bottom: 16px; }
.s-skel-media, .s-skel-line {
  background: linear-gradient(100deg, var(--red-soft) 8%, rgba(255, 255, 255, .45) 26%, var(--red-soft) 42%);
  background-size: 300% 100%; animation: fxShine 1.5s ease-in-out infinite;
}
:root[data-theme="dark"] .s-skel-media, :root[data-theme="dark"] .s-skel-line {
  background: linear-gradient(100deg, rgba(255, 255, 255, .05) 8%, rgba(255, 255, 255, .13) 26%, rgba(255, 255, 255, .05) 42%);
  background-size: 300% 100%;
}
@keyframes fxShine { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* ---- sheets: neeche se uth kar aana ---- */
body.site .s-sheet, body.site .s-variant { animation: fxFade .28s ease both; }
body.site .s-sheet .s-sheet-card, body.site .s-variant .s-sheet-card {
  animation: fxRise .42s cubic-bezier(.19, 1, .22, 1) both;
}
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxRise { from { transform: translateY(26px) scale(.98); opacity: .4; } to { transform: none; opacity: 1; } }

/* neeche wali patti bhi uchhal kar aati hai */
body.site .s-cartbar:not([hidden]) { animation: fxRise .45s cubic-bezier(.19, 1, .22, 1) both; }
body.site .s-toast { transition: transform .45s cubic-bezier(.19, 1, .22, 1), opacity .35s ease; }

/* ---- theme badalne ka gol parda (View Transitions) ---- */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: fxWipe .55s cubic-bezier(.22, .9, .3, 1); }
@keyframes fxWipe { from { clip-path: circle(0 at var(--fx-cx, 50%) var(--fx-cy, 0)); } to { clip-path: circle(150% at var(--fx-cx, 50%) var(--fx-cy, 0)); } }

/* ---------------- calm mode ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.site, body.site::before { animation: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  body.site .s-card:hover, body.site .s-btn:hover, body.site .s-theme:hover { transform: none; }
  .s-card.is-fresh, .s-card.is-leaving { animation: none; }
  .js .s-card.is-wait { opacity: 1; transform: none; }
  .s-row-head::after { transform: scaleX(1); transition: none; }
  body.site .s-card:hover .product-photo, body.site .s-card:hover .s-emoji { transform: none; }
  .s-prog { display: none; }
  .s-top { transition: opacity .2s linear; }
  .fx-ripple { display: none; }
  body.site .s-card.is-tilting, body.site .s-about-card.is-tilting, body.site .t-card.is-tilting,
  .fx .is-magnet { transform: none; }
  body.site .s-card::after { display: none; }
  .js.fx body.site img.product-photo { opacity: 1; filter: none; transform: none; }
  .s-hero h1 .fx-word > i { transform: none; animation: none; }
  .s-skel-media, .s-skel-line { animation: none; }
  .fx-fly { display: none; }
  .s-arc-glow { animation: none; }
  .s-arc-card { transition: opacity .2s linear; }
  .js .s-stage-grid .s-card.is-fresh { animation: none; }
  body.site .s-sheet, body.site .s-variant,
  body.site .s-sheet .s-sheet-card, body.site .s-variant .s-sheet-card,
  body.site .s-cartbar:not([hidden]) { animation: none; }
  ::view-transition-new(root) { animation: none; }
}

/* "App install karein" — nav mein, sirf jab browser laga sakta ho */
.s-install {
  width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--glass-line);
  background: var(--glass-strong); color: var(--ink); font-size: 1rem; cursor: pointer;
  display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s ease, background .3s ease;
}
.s-install[hidden] { display: none; }
.s-install:hover { transform: translateY(-2px); box-shadow: var(--glow); background: var(--red); color: #fff; }

/* ============================================================
   MEMBERSHIP — website par members ka hissa
   ============================================================ */
.s-nav-member { position: relative; }
.s-nav-member::before {
  content: ''; position: absolute; inset: -6px -10px; border-radius: 999px; z-index: -1;
  background: var(--red-soft); opacity: 0; transition: opacity .25s ease;
}
.s-nav-member:hover::before { opacity: 1; }

.s-member { max-width: none; padding: 0; }
.s-member-in {
  max-width: 1180px; margin: 0 auto; text-align: center; color: #fff;
  border-radius: 28px; padding: 46px 26px 44px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2A0E18 0%, #7E0C22 52%, #C8102E 100%);
  box-shadow: 0 34px 70px -40px rgba(200, 16, 46, .9);
}
.s-member-in::after {
  content: ''; position: absolute; inset: -50% -20% auto auto; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent 70%); pointer-events: none;
}
.s-member-badge {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; padding: 6px 14px;
}
.s-member-in h2 { font-family: 'Poppins', sans-serif; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 14px 0 8px; color: #fff; }
.s-member-in p { max-width: 560px; margin: 0 auto; opacity: .92; line-height: 1.6; }
.s-member-perks {
  list-style: none; padding: 0; margin: 22px auto 6px; max-width: 700px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 22px; text-align: left;
}
.s-member-perks li { position: relative; padding-left: 26px; font-size: .94rem; }
.s-member-perks li::before {
  content: '✓'; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: .68rem; font-weight: 800;
  background: rgba(255, 255, 255, .22);
}
.s-member-price { margin-top: 16px !important; font-size: 1.05rem; }
.s-member-price b { font-family: 'Poppins', sans-serif; font-size: 1.5rem; }
.s-member-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* cart mein member ki bachat */
.s-sum-member { color: #16A34A; font-weight: 700; }
.s-sum-member[hidden] { display: none; }
:root[data-theme="dark"] .s-sum-member { color: #86EFAC; }

@media (max-width: 560px) {
  .s-member-in { border-radius: 22px; padding: 34px 18px 32px; }
  .s-member-perks { text-align: center; }
  .s-member-perks li { padding-left: 0; padding-top: 22px; }
  .s-member-perks li::before { left: 50%; transform: translateX(-50%); top: 0; }
}

/* ============================================================
   EXCLUSIVE DEALS — sirf members ke liye.
   Sab ko nazar aati hain (taake dil lalchaye), khulti members par.
   ============================================================ */
body.site .s-card-vip {
  position: relative;
  border-color: rgba(168, 85, 247, .45);
  background:
    linear-gradient(180deg, rgba(76, 29, 149, .10), rgba(24, 10, 30, .04)),
    var(--card);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .18), var(--shadow);
}
body.site .s-card-vip::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 1;
  padding: 1.5px;
  background: linear-gradient(135deg, #F5C451, #C084FC 45%, #C8102E);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}
body.site .s-card-vip:hover {
  border-color: rgba(168, 85, 247, .6);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .35), var(--shadow-lift), 0 26px 50px -22px rgba(168, 85, 247, .6);
}
body.site .s-card-vip.is-locked { cursor: pointer; }

/* taj wala nishan */
.s-vip-tag {
  position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #2A1042, #4C1D95 60%, #6D28D9);
  color: #FBE8A6; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 11px 5px 8px;
  box-shadow: 0 10px 22px -10px rgba(76, 29, 149, .95), inset 0 0 0 1px rgba(251, 232, 166, .35);
}
.s-vip-tag i { font-style: normal; font-size: .9rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.s-save-vip {
  left: auto; right: 10px;                    /* taj bayen, bachat dayen — dono saaf nazar aayein */
  background: linear-gradient(135deg, #7E22CE, #C8102E);
  box-shadow: 0 10px 20px -10px rgba(126, 34, 206, .9);
}

/* jo card abhi taala hai — tasveer halki si dhundli, upar taala */
.s-card-vip.is-locked .s-card-media::after {
  content: '🔒'; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  font-size: 1.7rem; background: rgba(20, 6, 26, .34); backdrop-filter: blur(1.5px);
  opacity: 0; transition: opacity .3s ease;
}
.s-card-vip.is-locked:hover .s-card-media::after { opacity: 1; }

/* qeemat: purani kati hui, nayi numaya */
.s-vip-price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 2px; }
.s-vip-price s { color: var(--muted); font-size: .88rem; }
.s-vip-price b {
  font-family: 'Poppins', sans-serif; font-size: 1.32rem; line-height: 1;
  background: linear-gradient(135deg, #7E22CE, #C8102E 60%, #E4572E);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="dark"] .s-vip-price b {
  background: linear-gradient(135deg, #E9D5FF, #FCA5A5 60%, #FDBA74);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s-vip-price small { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.s-vip-note { color: var(--muted); font-size: .78rem; font-weight: 700; }

body.site .s-add-vip {
  background: linear-gradient(135deg, #4C1D95, #7E22CE 55%, #C8102E);
  color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 12px 26px -12px rgba(124, 34, 206, .9);
}
body.site .s-add-vip:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(124, 34, 206, 1); }

/* membership fee: "pehle itna tha" */
.m-price-was { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.m-price-was s { color: var(--muted); font-size: 1.05rem; font-weight: 600; }
.m-price-off {
  background: linear-gradient(135deg, #16A34A, #15803D); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 10px; box-shadow: 0 10px 20px -10px rgba(21, 128, 61, .9);
}
.s-member-was { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; }
.s-member-was s { opacity: .75; font-size: 1.1rem; }

/* =====================================================================
   PHONE PAR SAAF LAYOUT  (v56)
   ---------------------------------------------------------------------
   Pehle phone par: header teen lane leta tha (naam, buttons, links),
   hero poori screen, aur card itne lambe ke ek screen par mushkil se
   do hi nazar aate the. Ab:
     • header ek patli si line — logo + naam, aur daen taraf cart/theme
     • menu ke link neeche ek chhoti si patti mein (ungli se sarka lein)
     • har jagah DO ka grid — deals, menu rows, khula hua category, search
     • card chhote aur saaf: tasveer 4:3, naam do line, qeemat aur Add
       hamesha ek nazar mein
   ===================================================================== */
@media (max-width: 640px) {

  /* ---------- header: ek patli line ---------- */
  body.site .s-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand right" "links links";
    align-items: center;
    gap: 6px 8px;
    padding: 8px 12px 0;
  }
  body.site .s-brand { grid-area: brand; gap: 8px; min-width: 0; }
  body.site .s-brand img, body.site .s-brand-mark {
    width: 34px; height: 34px; font-size: 1.3rem;
    flex: 0 0 34px; display: grid; place-items: center; line-height: 1;
  }
  body.site .s-brand b { font-size: .98rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  body.site .s-brand small { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 56vw; }
  body.site .s-nav.is-stuck .s-brand small { display: none; }

  body.site .s-nav-right { grid-area: right; gap: 6px; }
  body.site .s-call span { display: none; }                 /* sirf 📞 ka gol button */
  body.site .s-call { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
  body.site .s-theme { width: 38px; height: 38px; padding: 0; }
  body.site .s-cart-btn { height: 38px; padding: 0 12px; font-size: .9rem; }

  /* menu ke link: neeche ek patti, ungli se sarak jati hai */
  body.site .s-links {
    grid-area: links; display: flex; flex-wrap: nowrap; gap: 6px;
    justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -12px; padding: 4px 12px 8px;
    scrollbar-width: none;
  }
  body.site .s-links::-webkit-scrollbar { display: none; }
  body.site .s-links a {
    flex: 0 0 auto; font-size: .82rem; padding: 8px 13px; border-radius: 999px;
    background: var(--glass); border: 1px solid var(--glass-line); white-space: nowrap;
    min-height: 34px; display: inline-flex; align-items: center;
  }

  /* ---------- hero thora chhota ---------- */
  body.site .s-hero { min-height: 62vh; }
  body.site .s-hero h1 { font-size: clamp(1.7rem, 8.5vw, 2.4rem); line-height: 1.12; }
  body.site .s-hero p { font-size: .92rem; }
  body.site .s-hero-btns { gap: 8px; }
  body.site .s-hero-btns .s-btn { padding: 11px 18px; font-size: .9rem; }

  /* ---------- section ke sir ----------
     Daen baen ki jagah (14px) hamesha rehni chahiye — warna "Our menu"
     jaise unwaan screen ke kinare se chipak kar kat jate hain. */
  body.site .s-section { padding: 26px 14px 10px; }
  body.site .s-section > h2, body.site .s-sec-head h2 { font-size: 1.45rem; }
  body.site .s-sec-sub, body.site .s-section > p { font-size: .88rem; }

  /* unwaan apni line, talash apni line — dono ko poori chaurai */
  body.site .s-head { gap: 8px; margin-bottom: 12px; }
  body.site .s-head h2 { font-size: 1.45rem; flex: 1 1 100%; }
  body.site .s-head-note { flex: 1 1 100%; font-size: .82rem; }
  body.site #menuSearch {
    margin-left: 0; min-width: 0; flex: 1 1 100%; max-width: none;
    padding: 11px 16px; font-size: 16px;            /* 16px = iOS zoom nahi karta */
    min-height: 44px;
  }
  body.site .s-search input, body.site #searchBox { font-size: 16px; }

  /* ---------- DO ka grid, har jagah ---------- */
  body.site .s-grid,
  body.site .s-row-grid,
  body.site .s-stage .s-grid,
  body.site .s-deals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* ---------- card: chhota aur saaf ---------- */
  body.site .s-card { border-radius: 16px; }
  body.site .s-card-media { aspect-ratio: 4 / 3; }
  body.site .s-card-media .s-emoji { font-size: 2.1rem; }
  body.site .s-card-body { padding: 9px 10px 11px; gap: 2px; }
  body.site .s-card-body h3 {
    font-size: .88rem; line-height: 1.22; min-height: 2.44em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.site .s-includes { display: none; }                   /* chhoti screen par jagah bachao */
  /* Qeemat upar, button neeche poori chaurai ka — do ke grid mein
     daen baen rakhne ki jagah nahi bachti, aur poora button ungli ke
     liye aasan nishana ban jata hai. */
  body.site .s-card-foot {
    flex-direction: column; align-items: stretch; gap: 7px; margin-top: 2px;
  }
  body.site .s-price { font-size: .88rem; min-width: 0; line-height: 1.2; }
  body.site .s-price s { display: inline-block; font-size: .72rem; margin: 0 0 0 5px; opacity: .75; }
  body.site .s-add {
    width: 100%; min-width: 0; max-width: 100%; flex: 0 0 auto;
    padding: 9px 10px; font-size: .82rem;
    min-height: 38px; border-radius: 11px; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
  }
  body.site .s-card-foot > * { max-width: 100%; }
  body.site .s-save { top: 6px; left: 6px; padding: 2px 7px; font-size: .64rem; }

  /* ---------- category ki patti aur arc ---------- */
  body.site .s-stage { padding: 16px 10px 18px; border-radius: 20px; }
  body.site .s-stage .s-row-head { margin-bottom: 12px; }
  body.site .s-stage-head h3 { font-size: 1.1rem; }
  body.site .s-arc { padding: 14px 6px 40px; }
  body.site .s-arc-stage { height: 212px; }
  body.site .s-row + .s-row { margin-top: 24px; }
  body.site .s-row-head { gap: 8px; flex-wrap: wrap; }
  body.site .s-row-head h3 { font-size: 1.02rem; min-width: 0; }
  body.site .s-row-count { font-size: .7rem; padding: 2px 8px; }
  body.site .s-row-all { font-size: .78rem; min-height: 36px; display: inline-flex; align-items: center; }

  /* gol nishan chhote dikhte hain magar ungli ke liye jagah poori ho */
  body.site .s-arc-dots { bottom: 12px; gap: 9px; }
  body.site .s-arc-dots button { position: relative; }
  body.site .s-arc-dots button::after { content: ''; position: absolute; inset: -12px -6px; }
  body.site .s-arc-nav { width: 36px; height: 36px; }

  /* ---------- cart / checkout ---------- */
  body.site .s-sheet-card { border-radius: 20px 20px 0 0; max-height: 92vh; }
  body.site .s-sheet input, body.site .s-sheet select, body.site .s-sheet textarea { font-size: 16px; min-height: 44px; }
  body.site .s-sheet .s-btn { min-height: 48px; font-size: .95rem; }

  /* ---------- footer ---------- */
  body.site .s-foot-top { grid-template-columns: 1fr; gap: 18px; }
  /* neeche ke link ungli ke liye kushada hon */
  body.site .s-foot-col a, body.site .s-foot-links a {
    display: inline-flex; align-items: center; min-height: 34px; padding: 4px 0;
  }
  body.site .s-foot-links { gap: 6px 16px; flex-wrap: wrap; }
}

/* bohat chhoti screen (320–380) */
@media (max-width: 380px) {
  body.site .s-grid, body.site .s-row-grid, body.site .s-deals-grid { gap: 8px; }
  body.site .s-card-body h3 { font-size: .84rem; }
  body.site .s-price { font-size: .86rem; }
  body.site .s-add { padding: 7px 10px; font-size: .76rem; }
  body.site .s-brand b { font-size: .92rem; }
  body.site .s-arc-stage { height: 196px; }
}

/* tablet: teen ka grid, taake badi screen khali na lage */
@media (min-width: 641px) and (max-width: 1024px) {
  body.site .s-grid, body.site .s-row-grid, body.site .s-deals-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* =====================================================================
   "APP BANA LEN" WALI PATTI  (assets/js/install.js se banti hai)

   Neeche se aati hai, ek dafa. Band kar dein to dobara nahi aati.
   App ki tarah chal rahi ho to banti hi nahi.
   ===================================================================== */
#ipzInstallTip {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2000;
  width: min(560px, calc(100vw - 24px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #1f2937;
  color: #fff;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .75);
  font-size: .88rem;
  line-height: 1.35;
  animation: ipzTipUp .28s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes ipzTipUp { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (prefers-reduced-motion: reduce) { #ipzInstallTip { animation: none; } }

#ipzInstallTip .ipz-tip-text { flex: 1 1 240px; min-width: 0; }
#ipzInstallTip b { color: #FDE68A; }
#ipzInstallTip .ipz-tip-acts { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
#ipzInstallTip button {
  border: 0; border-radius: 10px; font: inherit; font-weight: 700;
  min-height: 40px; padding: 0 14px; cursor: pointer; white-space: nowrap;
}
#ipzInstallTip .ipz-tip-go { background: #C8102E; color: #fff; }
#ipzInstallTip .ipz-tip-go:hover { background: #a60d26; }
#ipzInstallTip .ipz-tip-no { background: rgba(255, 255, 255, .14); color: #fff; }
#ipzInstallTip .ipz-tip-no:hover { background: rgba(255, 255, 255, .24); }

@media (max-width: 420px) {
  #ipzInstallTip { font-size: .83rem; padding: 11px 12px; }
  #ipzInstallTip .ipz-tip-acts { margin-left: 0; width: 100%; }
  #ipzInstallTip button { flex: 1 1 auto; }
}