/* ==========================================================================
   HARI SABZI WALA — Design System
   Colour + layout tokens lifted from the reference design.
   ========================================================================== */

:root{
  /* ---- Brand greens ---- */
  --green-950:#0d3b1a;
  --green-900:#123f1e;
  --green-800:#14532d;   /* topbar, trust card, footer */
  --green-700:#1b5e20;   /* headings, primary button */
  --green-600:#2e7d32;
  --green-500:#43a047;
  --green-400:#66bb6a;
  --green-300:#a5d6a7;
  --green-100:#e8f5e9;
  --green-50:#f3faf1;

  /* ---- Brand orange ---- */
  --orange-700:#e65100;
  --orange-600:#ef6c00;
  --orange-500:#f57c00;
  --orange-400:#fb8c00;
  --orange-100:#fff3e0;

  /* ---- Neutrals / surfaces ---- */
  --cream:#fffdf8;
  --cream-card:#fdf7e9;   /* min-order + steps cards */
  --cream-band:#f7f4ea;
  --band-green:#f2f8ea;   /* why-choose band */
  --ink:#1f2b21;
  --ink-soft:#5a6b5d;
  --ink-mute:#8a998c;
  --line:#e6efe6;
  --line-warm:#ece2cc;
  --white:#fff;

  /* ---- Shape ---- */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-full:999px;

  /* ---- Elevation ---- */
  --sh-xs:0 1px 3px rgba(20,83,45,.06);
  --sh-sm:0 3px 10px rgba(20,83,45,.07);
  --sh-md:0 10px 28px rgba(20,83,45,.10);
  --sh-lg:0 20px 48px rgba(20,83,45,.14);
  --sh-orange:0 10px 24px rgba(245,124,0,.32);

  --container:1260px;
  --topbar-h:38px;
  --tabbar-h:62px;

  /* ---- Quick-commerce palette (Blinkit/Zepto-like) ---- */
  --q-green:#0c831f; --q-green-dark:#0a6d1a; --q-green-soft:#f7fff9;
  --q-yellow:#f8cb46; --q-ink:#1f1f1f; --q-grey:#666; --q-bg:#e6f2e1; --q-line:#d8e8d4;
  --q-mint:#f2f8ee; --q-mint-2:#e6f2e1; --q-deep:#0a6b1f; --q-deep-2:#084a19;

  /* ---- Type ---- */
  --font-display:'Bricolage Grotesque','Poppins','Segoe UI',system-ui,sans-serif;
  --font-body:'Nunito Sans','Segoe UI',system-ui,Arial,sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Nunito Sans','Segoe UI',system-ui,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  margin:0 0 .5em;
  line-height:1.15;
  color:var(--green-800);
  font-weight:800;
  letter-spacing:-.02em;
}
p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea{ font-family:inherit; font-size:1rem; }
:focus-visible{ outline:3px solid var(--green-400); outline-offset:2px; }

.container{ --pad:24px; max-width:var(--container); margin:0 auto; padding:0 var(--pad); }
.section{ padding:70px 0; }
.section--sm{ padding:46px 0; }
.section--white{ background:var(--white); }
.section--cream{ background:var(--cream); }
.section--band{ background:var(--band-green); }

/* ---- Section heading with leaf ornaments (as in reference) ---- */
.sec-head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.sec-title{
  display:inline-flex; align-items:center; gap:14px;
  font-size:clamp(1.5rem,2.8vw,2.05rem); color:var(--green-800); margin:0 0 10px;
}
.sec-title::before,.sec-title::after{
  content:""; width:26px; height:26px; flex-shrink:0;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234caf50' d='M20 4c-9 0-15 5-15 12 0 1.2.2 2.3.6 3.3l-2.3 2.3 1.4 1.4 2.3-2.3c1 .4 2.1.6 3.3.6 7 0 12-6 12-15 0-1.2-.1-2.2-.3-2.3-.1 0-.6 0-2 0z'/%3E%3C/svg%3E");
}
.sec-title::after{ transform:scaleX(-1); }
.sec-head p{ margin:0; font-size:1rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 30px; border-radius:var(--r-full);
  font-weight:800; font-size:.95rem; white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--green{ background:var(--green-700); color:#fff; box-shadow:0 10px 24px rgba(27,94,32,.28); }
.btn--green:hover{ background:var(--green-800); }
.btn--orange{ background:var(--orange-500); color:#fff; box-shadow:var(--sh-orange); }
.btn--orange:hover{ background:var(--orange-600); }
.btn--outline{ background:#fff; color:var(--green-700); box-shadow:inset 0 0 0 2px var(--green-600); }
.btn--outline:hover{ background:var(--green-50); }
.btn--white{ background:#fff; color:var(--green-700); box-shadow:var(--sh-sm); }
.btn--white:hover{ background:var(--green-50); }
.btn--block{ width:100%; }
.btn--sm{ padding:10px 20px; font-size:.85rem; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ==========================================================================
   Icons
   ========================================================================== */
.i{
  width:20px; height:20px; flex-shrink:0; display:block;
  stroke:currentColor; fill:none; pointer-events:none;
}
.i--sm{ width:16px; height:16px; }
.i--lg{ width:24px; height:24px; }

/* ==========================================================================
   Header — quick-commerce layout
   logo · "Delivery today, 4–7 PM" + address · search · Login · My Cart
   Phones (≤900px): yellow app header — delivery line, address, search, chips
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:60; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08); border-top:3px solid var(--q-green); }
.hdr{ display:flex; align-items:center; height:84px; }

.brand{ display:flex; align-items:center; gap:10px; height:100%; padding-right:22px; border-right:1px solid var(--q-line); flex-shrink:0; }
.brand img{ height:52px; width:auto; object-fit:contain; }
.brand-name{ font-weight:800; font-size:1.02rem; color:var(--green-800); white-space:nowrap; letter-spacing:-.01em; }
.brand-name em{ font-style:normal; color:var(--orange-500); }

/* Delivery slot + detected address (js/location.js paints the address) */
.hdr-loc{ display:flex; flex-direction:column; justify-content:center; padding:0 22px; min-width:0; max-width:300px; flex-shrink:0; }
.hl-title{ display:block; font-size:.98rem; font-weight:800; color:var(--q-ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.i--bolt{ display:inline-block; width:15px; height:15px; margin-right:3px; vertical-align:-2px; fill:var(--q-ink); stroke:none; }
.hl-brief{ display:none; }
.stores,.hdr-wa{ display:none; }
.hl-addr{
  display:flex; align-items:center; gap:3px; min-width:0; padding:0; text-align:left;
  font-size:.78rem; font-weight:600; color:#333; line-height:1.3; cursor:pointer;
}
.hl-addr .i{ width:14px; height:14px; flex-shrink:0; }
.hl-lbl{ color:var(--q-grey); flex-shrink:0; }
.hl-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hl-txt.is-muted,.hdr-loc.is-loading .hl-txt{ color:var(--q-grey); }
.hdr-loc[data-state="ready"] .hl-lbl{ display:none; }
.hdr-loc:not([data-state="ready"]) .hl-title{ display:none; }
.hl-side{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.hl-side:empty{ display:none; }
.loc-btn{
  border:0; cursor:pointer; font:inherit; font-weight:800; font-size:.72rem;
  padding:5px 11px; border-radius:6px; background:var(--orange-500); color:#fff; white-space:nowrap;
}
.loc-btn--ghost{ background:var(--green-50); color:var(--green-700); box-shadow:inset 0 0 0 1px var(--green-100); }
.loc-chip{ display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:800; color:var(--q-green); white-space:nowrap; }
.loc-chip--warn{ color:var(--orange-700); }
.loc-chip .i{ width:13px; height:13px; }
.loc-refresh{ display:none; }              /* the address itself is the refresh button */

.hdr-search{ flex:1; min-width:0; margin:0 22px; }
.hs-field{
  display:flex; align-items:center; gap:10px; height:52px; padding:0 16px;
  background:#fff; border:1.5px solid #dcdfe4; border-radius:12px; color:var(--q-grey);
  transition:border-color .15s, background .15s;
}
.hs-field:focus-within{ border-color:var(--q-green); }
.hs-field input{ flex:1; min-width:0; border:none; outline:none; background:none; padding:0; font-size:.9rem; color:var(--q-ink); }
.hs-field .i{ width:18px; height:18px; color:#333; }

.hdr-login{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:0 14px; font-size:.82rem; font-weight:600; color:var(--q-ink); flex-shrink:0; }
.hdr-login .i{ width:26px; height:26px; }
.hdr-login:hover{ color:var(--q-green); }

.hdr-cart{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0;
  padding:0 14px; color:var(--q-ink); transition:color .2s;
}
.hdr-cart.has-items{ color:var(--q-green); }
.hdr-cart .i{ width:26px; height:26px; }
.hc-txt{ display:flex; flex-direction:column; align-items:center; line-height:1.15; }
.hc-txt b{ font-size:.82rem; font-weight:600; }
.hdr-cart.has-items .hc-txt b{ font-weight:800; }
.hc-txt small{ font-size:.72rem; font-weight:800; }
.hc-txt small:empty{ display:none; }
.hdr-cart .act-badge{ display:none; }
@media (min-width:901px){ .hdr-cart .act-badge{ display:none !important; } }   /* cart.js sets display inline for the phone badge */
.act-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:19px; height:19px; padding:0 5px; border-radius:var(--r-full);
  background:var(--orange-500); color:#fff; font-size:.63rem; font-weight:700;
  align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff;
}
.nav-toggle{ display:none; }

/* Small round icon buttons (drawer close etc.) */
.act{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:#555; }
.act--ghost{ box-shadow:inset 0 0 0 1px rgba(20,83,45,.13); }
.act--ghost:hover{ background:var(--green-50); color:var(--green-700); }

/* ---- Category strip (Zepto-style tabs under the header) ---- */
.catstrip{ border-top:1px solid var(--q-line); }
.catstrip .container{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.catstrip .container::-webkit-scrollbar{ display:none; }
.catstrip a{
  display:flex; align-items:center; gap:8px; padding:9px 14px; white-space:nowrap;
  font-size:.86rem; font-weight:600; color:#333; border-bottom:3px solid transparent; transition:color .15s;
}
.catstrip a:hover{ color:var(--q-green); }
.catstrip a.is-active{ color:var(--q-green); border-bottom-color:var(--q-green); font-weight:800; }
.cs-img{ width:26px; height:26px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.cs-img img{ width:100%; height:100%; object-fit:cover; }
.cs-ic .i{ width:20px; height:20px; }

/* ==========================================================================
   Mobile drawer
   ========================================================================== */
.scrim{
  position:fixed; inset:0; z-index:190;
  background:rgba(10,40,18,.55); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .3s ease;
}
.scrim.is-open{ opacity:1; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:200;
  width:min(330px,86vw); background:#fff;
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow:-16px 0 44px rgba(10,40,18,.22);
}
.drawer.is-open{ transform:none; }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--line);
}
.drawer-head img{ height:52px; width:auto; }

.drawer-search{ padding:14px 14px 4px; }
.drawer-search .hs-field{ background:var(--green-50); box-shadow:inset 0 0 0 1px var(--green-100); }
.drawer-search input{ padding:11px 0; font-size:.9rem; }

.drawer-nav{ display:flex; flex-direction:column; padding:12px; gap:2px; }
.drawer-nav a{
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; border-radius:var(--r-md);
  font-weight:700; font-size:.95rem; color:var(--ink);
  transition:background .16s, color .16s;
}
.drawer-nav a:hover{ background:var(--green-50); color:var(--green-700); }
.drawer-nav a .i{ color:var(--green-600); }
.drawer-nav a.is-active{ background:var(--green-700); color:#fff; }
.drawer-nav a.is-active .i{ color:#fff; }

.drawer-foot{
  margin-top:auto; padding:18px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.drawer-foot .btn{ padding:12px 20px; font-size:.88rem; }
.drawer-meta{
  display:flex; align-items:center; gap:10px; margin:0;
  font-size:.83rem; color:var(--ink-soft); font-weight:600;
}
.drawer-meta .i{ color:var(--green-600); width:17px; height:17px; }

body.no-scroll{ overflow:hidden; }

/* ==========================================================================
   Why choose band
   ========================================================================== */
.why{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.why-item{ text-align:center; }
.why-item .ic{
  width:62px; height:62px; margin:0 auto 14px; border-radius:50%;
  background:#fff; color:var(--green-700);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow:var(--sh-sm); transition:transform .18s ease;
}
.why-item:hover .ic{ transform:translateY(-5px); }
.why-item h4{ font-size:.9rem; margin:0 0 4px; }
.why-item p{ font-size:.78rem; margin:0; }

/* ==========================================================================
   Product cards — photo on a soft green tile · green OFF pill · tag ·
   ADD pill overlapping the photo · name · unit + rating · green price + MRP
   + "₹7 OFF" · delivery slot chip
   ========================================================================== */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:14px; }
.prod{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid #e3ece2; border-radius:14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.prod:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(12,131,31,.14); border-color:#cfe6cc; }
.prod-media{ position:relative; padding:8px 8px 0; container-type:inline-size; }
.prod-thumb{
  position:relative; display:block; aspect-ratio:1/1; border-radius:12px; overflow:hidden; padding:6px;
  background:linear-gradient(180deg,#f3faf0 0%,#e7f4e3 100%);
}
.prod-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:9px; transition:transform .35s ease; }
.prod:hover .prod-thumb img{ transform:scale(1.05); }
.prod .off{
  position:absolute; top:10px; left:10px; z-index:2; color:#fff;
  background:linear-gradient(180deg,#22a03e,#137a2e); border-radius:6px;
  font-size:.6rem; font-weight:800; line-height:1.1; letter-spacing:.03em; padding:4px 7px;
  box-shadow:0 2px 6px rgba(12,131,31,.3);
}
.prod .ptag{
  position:absolute; right:10px; top:10px; z-index:2; background:rgba(255,255,255,.96); color:var(--q-green);
  border:1px solid #cfe6cc; font-size:.54rem; font-weight:800; padding:3px 7px; border-radius:999px; letter-spacing:.05em; text-transform:uppercase;
}
/* ADD sits half over the photo */
.prod-media .qty-slot{ position:absolute; right:14px; bottom:-16px; z-index:3; width:74px; }
.add-btn{
  width:100%; height:34px; border-radius:999px; border:1.5px solid var(--q-green);
  background:#fff; color:var(--q-green); font-weight:800; font-size:.8rem; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(12,131,31,.18);
  transition:background .15s, color .15s, transform .15s;
}
.add-btn:hover,.prod:hover .add-btn{ background:var(--q-green); color:#fff; }
.add-btn:active{ transform:scale(.96); }
.stepper{
  height:34px; border-radius:999px; background:var(--q-green); color:#fff; box-shadow:0 3px 10px rgba(12,131,31,.22);
  display:flex; align-items:center; justify-content:space-between; padding:0 2px;
}
.stepper button{ width:26px; height:34px; color:#fff; display:flex; align-items:center; justify-content:center; }
.stepper button .i{ width:13px; height:13px; stroke-width:2.6; }
.stepper span{ font-size:.82rem; font-weight:800; }

.prod-body{ padding:22px 12px 12px; display:flex; flex-direction:column; gap:5px; flex:1; }
.prod h4{
  margin:0; font-family:var(--font-body); font-size:.88rem; font-weight:800; line-height:1.3; color:var(--q-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;
}
.prod-meta{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.prod .unit{ font-size:.74rem; color:var(--q-grey); font-weight:600; }
.prod .rate{ display:inline-flex; align-items:center; gap:3px; font-size:.72rem; font-weight:800; color:#1b5e20; }
.prod .rate .i{ width:12px; height:12px; fill:#1c9a3a; stroke:#1c9a3a; }
.price-row{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:2px; }
.prod .price{ font-size:1.05rem; font-weight:800; color:var(--q-green); letter-spacing:-.01em; }
.prod .mrp{ font-size:.74rem; color:#9a9a9a; font-weight:600; }
.save-pill{
  display:inline-flex; align-items:center; padding:2px 7px; border-radius:999px;
  background:#e6f7e9; color:#0c831f; font-size:.62rem; font-weight:800; letter-spacing:.02em; white-space:nowrap;
}
.prod-eta{
  display:inline-flex; align-items:center; gap:4px; align-self:flex-start; margin-top:auto; padding-top:2px;
  color:#1b5e20; font-size:.66rem; font-weight:800; letter-spacing:.01em;
}
.prod-eta .i{ width:12px; height:12px; }
.eta-short{ display:none; }
.price-pill,.save-txt{ display:none; }
.qty-slot{ width:66px; }

/* ==========================================================================
   Product rail (horizontal, "see all" rows)
   ========================================================================== */
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
  padding:4px 2px 12px; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ flex:0 0 178px; scroll-snap-align:start; }
.rail-btn{
  position:absolute; top:40%; z-index:5; width:40px; height:40px; border-radius:50%;
  background:#fff; color:var(--q-ink); border:1px solid var(--q-line);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:800;
  box-shadow:0 2px 10px rgba(0,0,0,.16); transition:background .15s;
}
.rail-btn:hover{ background:var(--q-mint-2); }
.rail-btn--prev{ left:-16px; }
.rail-btn--next{ right:-16px; }
.rail-btn[disabled]{ opacity:0; pointer-events:none; }

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero{
  background:linear-gradient(120deg,var(--green-800),var(--green-600));
  color:#fff; padding:46px 0; text-align:center; position:relative; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  border-radius:50%; background:rgba(255,255,255,.06);
}
.page-hero h1{ color:#fff; margin-bottom:8px; font-size:clamp(1.7rem,3.4vw,2.4rem); }
.crumb{ font-size:.85rem; color:rgba(255,255,255,.82); position:relative; z-index:1; }
.crumb a{ color:#fff; font-weight:700; }

/* ==========================================================================
   Category page — left category nav + product grid (Blinkit pattern)
   ========================================================================== */
.catpage{ display:grid; grid-template-columns:200px 1fr; align-items:start; }
.cat-nav{
  position:sticky; top:var(--hdr-h,128px); max-height:calc(100vh - var(--hdr-h,128px)); overflow-y:auto;
  border-right:1px solid var(--q-line); padding:8px 0; scrollbar-width:thin; background:#fff;
}
.cn{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  font-size:.82rem; font-weight:600; color:#333; border-left:3px solid transparent; transition:background .15s;
}
.cn:hover{ background:var(--q-mint-2); }
.cn.is-active{ background:var(--q-green-soft); border-left-color:var(--q-green); color:var(--q-green); font-weight:800; }
.cn-img{ width:44px; height:44px; border-radius:8px; overflow:hidden; background:var(--q-mint-2); flex-shrink:0; }
.cn-img img{ width:100%; height:100%; object-fit:cover; }
.catpage-main{ padding:14px 0 14px 18px; min-width:0; }
.shop-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.shop-bar h1{ font-size:1.15rem; margin:0; color:var(--green-900); font-family:var(--font-body); }
.shop-bar .count{ font-size:.82rem; color:var(--q-grey); font-weight:600; }
.shop-tools{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.shop-search,.shop-tools select{
  height:42px; border:1.5px solid var(--q-line); border-radius:11px; padding:0 14px;
  font-family:inherit; font-size:.86rem; font-weight:600; color:var(--q-ink); background:#fff; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.shop-search{ min-width:210px; }
.shop-search::placeholder{ color:#9aa89c; font-weight:400; }
.shop-search:hover,.shop-tools select:hover{ border-color:#bcd3b8; }
.shop-search:focus,.shop-tools select:focus{ border-color:var(--q-green); box-shadow:0 0 0 3px rgba(12,131,31,.14); }
.shop-tools select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230c831f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip{ border:1px solid var(--q-line); background:#fff; border-radius:var(--r-full); padding:7px 12px; font-size:.78rem; font-weight:700; color:#333; transition:background .15s, color .15s; }
.chip:hover{ background:var(--q-mint-2); }
.chip.is-on{ background:var(--q-green); color:#fff; border-color:var(--q-green); }
.empty{ text-align:center; padding:60px 20px; }
.empty .ic{ font-size:2.8rem; margin-bottom:10px; }
.empty h2,.empty h3{ margin-bottom:8px; }
.empty p{ margin-bottom:20px; }

/* ==========================================================================
   Cart / checkout
   ========================================================================== */
.cart-grid{ display:grid; grid-template-columns:1fr 352px; gap:28px; align-items:start; }
.cart-grid > *{ min-width:0; }
.cart-table{
  width:100%; border-collapse:collapse; background:#fff;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs);
}
.cart-table th{
  text-align:left; background:var(--green-50); color:var(--green-800);
  padding:14px 16px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800;
}
.cart-table td{ padding:14px 16px; border-top:1px solid var(--line); vertical-align:middle; }
.cart-prod{ display:flex; align-items:center; gap:13px; }
.cart-prod .thumb{ width:60px; height:60px; border-radius:var(--r-sm); overflow:hidden; flex-shrink:0; }
.cart-prod .thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-prod .nm{ font-weight:800; font-size:.92rem; }
.cart-prod .un{ font-size:.76rem; color:var(--ink-mute); }
.cart-qty{ display:inline-flex; align-items:center; gap:6px; }
.cart-qty button{
  width:29px; height:29px; border-radius:50%; background:#fff; color:var(--green-700);
  font-weight:800; box-shadow:inset 0 0 0 1px var(--line); transition:background .15s;
}
.cart-qty button:hover{ background:var(--green-50); }
.rm-btn{ color:#c0392b; font-weight:800; font-size:.8rem; }
.summary{
  background:#fff; border-radius:var(--r-lg); padding:24px;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-xs); position:sticky; top:90px;
}
.sum-row{ display:flex; justify-content:space-between; font-size:.9rem; padding:8px 0; color:var(--ink-soft); font-weight:600; }
.sum-row.total{
  font-weight:800; color:var(--green-800); font-size:1.15rem;
  border-top:1px dashed var(--line); margin-top:8px; padding-top:14px;
}
.mini-row{ display:flex; justify-content:space-between; font-size:.82rem; padding:5px 0; color:var(--ink-soft); }
.notice{
  background:#fff8e1; color:#8a6100; padding:13px 17px; border-radius:var(--r-md);
  font-size:.85rem; font-weight:700; margin-bottom:18px;
  box-shadow:inset 0 0 0 1px #ffe6a0;
}
.empty{ text-align:center; padding:64px 20px; }
.empty .ic{ font-size:3.6rem; margin-bottom:14px; }

.co-card{
  background:#fff; border-radius:var(--r-lg); padding:26px; margin-bottom:20px;
  box-shadow:inset 0 0 0 1px var(--line), var(--sh-xs);
}
.co-card h3{ font-size:1.05rem; margin-bottom:16px; }

/* ==========================================================================
   Form controls — ONE input look for the whole site (2026-09-11)
   `.field` = label + control + error.  Bare controls get the box themselves;
   wrap one in `.inp` to put a leading icon (or a "+91" prefix) inside the box.
   ========================================================================== */
.f-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:13px; min-width:0; }
.field > label{ font-size:.78rem; font-weight:800; color:#41514a; letter-spacing:.01em; }
.field > label .opt-t{ font-weight:600; color:var(--q-grey); }

/* Bare control (no icon wrapper) */
.field input,.field select,.field textarea{
  width:100%; min-width:0; height:48px; padding:0 14px;
  font-family:inherit; font-size:.92rem; font-weight:600; color:var(--q-ink);
  background:#fff; border:1.5px solid var(--q-line); border-radius:12px; outline:none; box-shadow:none;
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{ height:auto; min-height:92px; padding:12px 14px; font-weight:400; line-height:1.5; resize:vertical; }
.field select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230c831f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center;
}
.field input::placeholder,.field textarea::placeholder{ color:#9aa89c; font-weight:400; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:#bcd3b8; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--q-green); box-shadow:0 0 0 3px rgba(12,131,31,.14); }

/* Icon wrapper — the box moves to .inp and the control goes bare inside it */
.inp{
  display:flex; align-items:center; gap:9px; min-width:0; height:48px; padding:0 13px;
  background:#fff; border:1.5px solid var(--q-line); border-radius:12px;
  transition:border-color .15s, box-shadow .15s;
}
.inp:hover{ border-color:#bcd3b8; }
.inp:focus-within{ border-color:var(--q-green); box-shadow:0 0 0 3px rgba(12,131,31,.14); }
.inp > .i{ width:18px; height:18px; color:#8aa08d; flex-shrink:0; transition:color .15s; }
.inp:focus-within > .i{ color:var(--q-green); }
.inp input,.inp select,.inp textarea{
  flex:1; width:auto; min-width:0; height:auto; padding:0;
  border:0; border-radius:0; background:none; box-shadow:none; outline:none;
}
.inp input:hover,.inp select:hover,.inp textarea:hover{ border:0; }
.inp input:focus,.inp select:focus,.inp textarea:focus{ border:0; box-shadow:none; }
.inp select{ padding-right:22px; background-position:right 0 center; }
.inp .pre{ flex-shrink:0; font-size:.9rem; font-weight:800; color:var(--q-ink); padding-right:9px; border-right:1px solid var(--q-line); }
.inp--ta{ height:auto; align-items:flex-start; padding:12px 13px; }
.inp--ta > .i{ margin-top:2px; }
.inp--ta textarea{ min-height:60px; font-weight:400; line-height:1.45; resize:vertical; }

/* Validation */
.field .err{ display:none; font-size:.74rem; font-weight:700; color:#c0392b; }
.field.is-bad .err{ display:block; }
.field.is-bad .inp,.field.is-bad input,.field.is-bad select,.field.is-bad textarea{
  border-color:#e05252; box-shadow:0 0 0 3px rgba(224,82,82,.12);
}
.field.is-bad .inp input,.field.is-bad .inp textarea,.field.is-bad .inp select{ border:0; box-shadow:none; }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.news{
  background:linear-gradient(115deg,var(--green-800),var(--green-600));
  border-radius:var(--r-lg); padding:38px 40px; color:#fff;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.news::after{
  content:""; position:absolute; right:-50px; bottom:-70px; width:230px; height:230px;
  border-radius:50%; background:rgba(255,255,255,.06);
}
.news h3{ color:#fff; margin-bottom:5px; font-size:1.35rem; }
.news p{ color:rgba(255,255,255,.85); margin:0; font-size:.9rem; }
.news form{ display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }
.news input{
  padding:13px 20px; border-radius:var(--r-full); border:none; min-width:250px; outline:none;
}

/* ==========================================================================
   Footer — useful links · categories · download app · socials
   ========================================================================== */
.site-footer{ background:#f1f8ee; color:#333; padding-top:40px; border-top:1px solid #d9ecd6; }
.foot-top{ display:grid; grid-template-columns:1fr 2fr 1.2fr; gap:30px; padding-bottom:30px; }
.foot-col h4{ font-size:.98rem; margin:0 0 14px; color:var(--q-ink); display:flex; align-items:center; gap:10px; font-family:var(--font-body); }
.foot-seeall{ font-size:.8rem; color:var(--q-green); font-weight:700; }
.foot-links li{ margin-bottom:9px; font-size:.86rem; color:#555; overflow-wrap:anywhere; }
.foot-links a:hover,.foot-cats a:hover{ color:var(--q-green); }
.foot-cats{ columns:3; column-gap:20px; }
.foot-cats li{ margin-bottom:9px; font-size:.86rem; color:#555; break-inside:avoid; }
.foot-bottom{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:18px 0;
  border-top:1px solid var(--q-line); font-size:.8rem; color:#777;
}
.foot-app{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.foot-app b{ color:var(--q-ink); font-size:.82rem; margin-right:4px; }
.store-pill{ background:#1f1f1f; color:#fff; font-size:.66rem; font-weight:800; padding:6px 10px; border-radius:6px; letter-spacing:.03em; white-space:nowrap; }
.socials{ display:flex; gap:10px; }
.socials a{ width:36px; height:36px; border-radius:50%; background:#1f1f1f; color:#fff; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.socials a:hover{ background:var(--q-green); }
.socials a .i{ width:16px; height:16px; }
.socials a .i--fill{ fill:currentColor; stroke:none; }

/* ==========================================================================
   App chrome for phones: bottom tab bar + floating "View cart" bar
   Shown ≤900px (see Responsive). Both are mounted by js/layout.js.
   ========================================================================== */
.tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:150;
  grid-template-columns:repeat(5,1fr);
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:#fff; border-top:1px solid var(--q-line); box-shadow:0 -4px 16px rgba(0,0,0,.06);
}
.tabbar a{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:#777; font-size:.64rem; font-weight:700; letter-spacing:.02em; -webkit-tap-highlight-color:transparent;
}
.tabbar a .i{ width:22px; height:22px; transition:transform .2s; }
.tabbar a:active .i{ transform:scale(.88); }
.tabbar a.is-active{ color:var(--q-green); font-weight:800; }
.tab-badge{
  position:absolute; top:7px; left:calc(50% + 4px);
  min-width:17px; height:17px; padding:0 4px; border-radius:var(--r-full);
  background:var(--orange-500); color:#fff; font-size:.6rem; font-weight:800;
  display:none; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff;
}

.cartbar{
  display:none; position:fixed; left:12px; right:12px; z-index:149;
  bottom:calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom));
  align-items:center; gap:12px; padding:9px 12px; border-radius:12px;
  background:var(--q-green); color:#fff; box-shadow:0 10px 26px rgba(12,131,31,.35);
  animation:cbUp .3s cubic-bezier(.2,.8,.2,1) both;
}
.cb-ic{ width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cb-txt{ display:flex; flex-direction:column; line-height:1.15; flex:1; min-width:0; }
.cb-txt b{ font-size:.92rem; }
.cb-txt small{ font-size:.74rem; opacity:.9; font-weight:700; }
.cb-cta{ display:inline-flex; align-items:center; gap:2px; font-weight:800; font-size:.92rem; flex-shrink:0; }
.cb-cta .i{ width:18px; height:18px; transform:rotate(-90deg); }
@keyframes cbUp{ from{ transform:translateY(20px); opacity:0; } to{ transform:none; opacity:1; } }

/* ==========================================================================
   Delight: fly-to-cart image, badge bump, floating WhatsApp (desktop)
   ========================================================================== */
.fly-img{
  position:fixed; z-index:400; pointer-events:none; object-fit:cover;
  border-radius:14px; box-shadow:0 12px 30px rgba(20,83,45,.35);
}
@keyframes badgeBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.45); } 100%{ transform:scale(1); } }
.is-bump{ animation:badgeBump .45s cubic-bezier(.2,.8,.2,1); }
@keyframes cartShake{ 0%,100%{ transform:none; } 25%{ transform:rotate(-8deg); } 75%{ transform:rotate(8deg); } }
.is-shake .i{ animation:cartShake .45s ease; }

.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:140;
  display:flex; align-items:center; gap:10px; padding:12px 18px 12px 14px;
  background:#25d366; color:#fff; border-radius:var(--r-full); font-weight:800; font-size:.9rem;
  box-shadow:0 14px 34px rgba(37,211,102,.4); transition:transform .2s, box-shadow .2s;
}
.wa-float:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(37,211,102,.5); }
.wa-float .i{ width:24px; height:24px; fill:#fff; stroke:none; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:#25d366; animation:waPulse 2.2s ease-out infinite;
}
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.35); opacity:0; } }


.toast{
  position:fixed; bottom:26px; left:50%; z-index:999;
  transform:translateX(-50%) translateY(24px);
  background:var(--green-800); color:#fff; padding:14px 26px;
  border-radius:var(--r-full); font-weight:700; font-size:.9rem;
  box-shadow:var(--sh-lg); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  display:flex; align-items:center; gap:9px;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ==========================================================================
   Search suggestions dropdown
   ========================================================================== */
.sugg{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:80;
  background:#fff; border:1px solid var(--q-line); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.14); overflow:hidden;
}
.hdr-search{ position:relative; }
.sugg-row{ display:flex; align-items:center; gap:8px; padding:6px 8px 6px 8px; border-bottom:1px solid #edf4ea; }
.sugg-row:last-of-type{ border-bottom:0; }
.sugg-main{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; color:var(--q-ink); }
.sugg-main img{ width:40px; height:40px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.sugg-main b{ display:block; font-size:.86rem; line-height:1.2; }
.sugg-main small{ font-size:.72rem; color:var(--q-grey); font-weight:600; }
.sugg-add{ height:30px; padding:0 12px; border-radius:8px; border:1.5px solid var(--q-green); background:#fff; color:var(--q-green); font-weight:800; font-size:.74rem; flex-shrink:0; }
.sugg-add:hover{ background:var(--q-green); color:#fff; }
.sugg-all{ display:block; padding:10px 12px; font-size:.8rem; font-weight:800; color:var(--q-green); background:#f3faf0; }
.sugg-empty{ padding:12px; font-size:.82rem; color:var(--q-grey); }
.sugg-empty a{ color:var(--q-green); font-weight:800; }

/* ---- Coupon row (cart) ---- */
.coupon{ display:flex; gap:8px; align-items:center; }
.coupon input{
  flex:1; min-width:0; height:48px; padding:0 14px; border:1.5px solid var(--q-line); border-radius:12px;
  font-family:inherit; font-size:.88rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--q-ink);
  background:#fff; outline:none; transition:border-color .15s, box-shadow .15s;
}
.coupon input::placeholder{ font-weight:600; letter-spacing:.02em; color:#9aa89c; }
.coupon input:hover{ border-color:#bcd3b8; }
.coupon input:focus{ border-color:var(--q-green); box-shadow:0 0 0 3px rgba(12,131,31,.14); }
.coupon button{ height:48px; padding:0 18px; border-radius:12px; background:var(--q-green); color:#fff; font-weight:800; font-size:.85rem; flex-shrink:0; transition:background .15s, transform .15s; }
.coupon button:hover{ background:var(--q-green-dark); }
.coupon button:active{ transform:scale(.97); }
.coupon-on{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#e6f7e9; border-radius:8px; padding:9px 12px; font-size:.84rem; color:#0c831f; font-weight:800; }
.coupon-on button{ color:#a33; font-weight:800; font-size:.78rem; }
.coupon-msg{ font-size:.78rem; margin-top:6px; color:#a33; font-weight:700; }
.coupon-msg.ok{ color:var(--q-green); }
.coupon-hint{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.coupon-hint button{ font-size:.7rem; font-weight:800; padding:4px 9px; border-radius:999px; background:#f3faf0; color:var(--q-green); border:1px dashed #b9dcb6; }

/* ---- Install strip (home) ---- */
.install-strip{ display:flex; align-items:center; gap:12px; background:#0f5a24; color:#fff; border-radius:12px; padding:10px 12px; margin-top:12px; }
.install-strip img{ width:40px; height:40px; border-radius:10px; background:#fff; padding:3px; }
.install-strip b{ display:block; font-size:.9rem; }
.install-strip small{ font-size:.74rem; opacity:.85; }
.install-strip .btn{ margin-left:auto; background:#fff; color:var(--green-900); box-shadow:none; padding:9px 14px; font-size:.82rem; border-radius:8px; }
.install-strip .x{ color:#fff; opacity:.8; width:32px; height:32px; }
.install-strip[hidden]{ display:none; }

/* ==========================================================================
   Location picker sheet (tap the address in the header)
   ========================================================================== */
.loc-sheet{
  position:fixed; inset:0; z-index:320; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(10,40,18,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.ls-card{ width:100%; max-width:440px; max-height:82vh; overflow:auto; background:#fff; border-radius:18px; padding:8px 8px 10px; box-shadow:var(--sh-lg); }
.ls-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 10px 8px; }
.ls-head b{ font-size:1rem; color:var(--q-ink); }
.ls-x{ width:34px; height:34px; border-radius:50%; background:var(--q-mint-2); color:var(--q-ink); display:flex; align-items:center; justify-content:center; }
.ls-x .i{ width:16px; height:16px; }
.ls-sub{ padding:12px 12px 4px; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--q-grey); }
.ls-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 12px; border-radius:12px;
  color:var(--q-ink); transition:background .15s;
}
.ls-item:hover{ background:#f3faf0; }
.ls-item.is-on{ background:#e6f7e9; }
.ls-item .i{ width:20px; height:20px; color:var(--q-green); flex-shrink:0; }
.ls-item b{ display:block; font-size:.9rem; line-height:1.3; }
.ls-item small{ display:block; font-size:.74rem; color:var(--q-grey); font-weight:600; margin-top:2px; }
.ls-gps{
  display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 8px); margin:10px 4px 0;
  padding:12px; border-radius:12px; background:var(--q-green); color:#fff; font-weight:800; font-size:.9rem;
}
.ls-gps .i{ width:18px; height:18px; }
@media (max-width:640px){
  .loc-sheet{ align-items:flex-end; padding:0; }
  .ls-card{ max-width:none; border-radius:18px 18px 0 0; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Location gate — the page renders underneath, but nothing works until the
   visitor allows location (js/location.js)
   ========================================================================== */
.geo-gate{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(10,40,18,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:geoFade .3s ease both;
}
.geo-card{
  background:#fff; border-radius:var(--r-xl); width:100%; max-width:440px;
  padding:36px 32px 26px; text-align:center; box-shadow:var(--sh-lg);
  animation:geoRise .38s cubic-bezier(.2,.8,.2,1) both;
}
.geo-ic{
  position:relative; width:78px; height:78px; border-radius:50%; margin:0 auto 18px;
  background:var(--green-100); color:var(--green-700);
  display:flex; align-items:center; justify-content:center;
}
.geo-ic .i{ width:36px; height:36px; }
.geo-ic::before,.geo-ic::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--green-400); animation:locPulse 2.2s ease-out infinite;
}
.geo-ic::after{ animation-delay:1.1s; }
.geo-card h2{ font-size:1.38rem; margin:0 0 8px; color:var(--green-800); line-height:1.2; }
.geo-card p{ color:var(--ink-soft); font-size:.92rem; margin:0 0 20px; }
.geo-card .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.geo-card .btn .i{ width:18px; height:18px; }
.geo-status{
  font-size:.8rem; font-weight:700; color:var(--ink-mute);
  margin:14px 0 0; min-height:1.25em;
}
.geo-card p.geo-status{ margin:14px 0 0; color:var(--ink-mute); font-size:.8rem; }
.geo-card p.geo-status.is-err{ color:var(--orange-700); }
.geo-help{
  margin-top:14px; padding:12px 14px; border-radius:var(--r-md); text-align:left;
  background:var(--orange-100); color:var(--orange-700);
  font-size:.8rem; font-weight:600; line-height:1.5;
}
.geo-help ol{ margin:6px 0 6px 18px; padding:0; }
.geo-help li{ margin:2px 0; }

/* display:flex above would otherwise beat the UA's [hidden]{display:none} */
.geo-gate[hidden]{ display:none; }
body.geo-locked{ overflow:hidden; }

@keyframes geoFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes geoRise{ from{ opacity:0; transform:translateY(22px) scale(.98); } to{ opacity:1; transform:none; } }

/* ==========================================================================
   Utilities
   ========================================================================== */
.center{ text-align:center; }
.mt-32{ margin-top:32px; }
.hide-sm{ display:inline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .hdr-loc{ max-width:240px; padding:0 16px; }
  .hdr-search{ margin:0 16px; }
  .hdr-login{ padding:0 14px; }
  .rail > *{ flex-basis:168px; }
}
@media (max-width:1024px){
  .why{ grid-template-columns:repeat(3,1fr); row-gap:30px; }
  .cart-grid{ grid-template-columns:1fr; }
  .summary{ position:static; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .catpage{ grid-template-columns:170px 1fr; }
}
@media (max-width:900px){
  body{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

  /* App header — Zepto pattern: tinted block · "⚡ Delivery today" + address ·
     store tabs · white search + WhatsApp mini card · icon-over-label chips.
     js/main.js sets a negative sticky top so the top rows scroll away and the
     search bar + chips stay pinned. */
  .site-header{ top:0; background:linear-gradient(180deg,#dff2da 0%,#eef8ec 70%,#fff 100%); box-shadow:0 1px 3px rgba(0,0,0,.06); border-top:0; }
  .hdr{
    position:relative; height:auto; display:grid; align-items:center; gap:12px;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"brand loc menu" "stores stores stores" "search search wa";
  }
  /* .container's later `padding` shorthand would wipe this, hence the specificity */
  .site-header .hdr{ padding-block:12px 16px; }
  .brand{ grid-area:brand; border:0; padding:0; height:auto; }
  .brand img{ height:36px; width:36px; object-fit:contain; }
  .brand-name{ display:none; }
  .hdr-loc{ grid-area:loc; padding:0; max-width:none; min-width:0; gap:1px; }
  .hl-title{ font-size:.9rem; }
  .i--bolt{ width:13px; height:13px; }
  .hl-addr{ font-size:.76rem; font-weight:700; color:#333; line-height:1.25; gap:3px; }
  .hl-addr .i{ width:14px; height:14px; color:#333; }
  .hl-lbl{ color:var(--q-grey); }
  .hl-side{ margin-top:4px; }
  .hdr-loc .loc-btn{ background:var(--q-green); color:#fff; }
  .hdr-loc[data-state="ready"] .hl-side{ display:none; }     /* no room for the chip on phones */
  .hdr-loc:not([data-state="ready"]) .hl-txt{ display:none; }  /* "Location needed" + button is enough */
  .hdr-loc:not([data-state="ready"]) .hl-lbl{ font-size:.95rem; font-weight:800; color:var(--q-ink); }

  /* Store tabs */
  .stores{ grid-area:stores; display:flex; gap:8px; padding-top:2px; }
  .stores a{
    flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 8px;
    background:#fff; border-radius:12px 12px 0 0; font-size:.78rem; font-weight:800; color:#333; white-space:nowrap;
    box-shadow:0 1px 2px rgba(0,0,0,.05); border-bottom:3px solid transparent;
  }
  .stores a span{ overflow:hidden; text-overflow:ellipsis; }
  .stores a.is-active{ color:var(--q-green); border-bottom-color:var(--q-green); }
  .stores img{ width:26px; height:26px; object-fit:contain; }
  .stores .i{ width:18px; height:18px; color:var(--q-green); }

  .hdr-search{ grid-area:search; margin:0; }
  .hs-field{ height:46px; border-radius:12px; background:#fff; border:1px solid #e3e7e3; box-shadow:none; }
  .hs-field:focus-within{ border-color:var(--q-green); }
  .hs-field input{ font-size:.92rem; }
  .hs-field .i{ color:#1f1f1f; }
  .hdr-wa{
    grid-area:wa; display:flex; align-items:center; gap:6px; height:46px; padding:0 10px 0 12px;
    background:#fff; border:1px solid #e3e7e3; border-radius:12px; box-shadow:none;
    font-size:.66rem; font-weight:800; line-height:1.15; color:var(--q-ink); white-space:nowrap;
  }
  .hdr-wa .i{ width:24px; height:24px; fill:#25d366; stroke:none; }
  .hdr-login{ display:none; }
  .hdr-cart{ display:none; }
  .nav-toggle{
    grid-area:menu; justify-self:end; display:inline-flex; width:40px; height:40px; border-radius:50%;
    background:#fff; color:var(--q-ink); border:1.5px solid #dcdfe4; align-items:center; justify-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
  }

  /* Category chips: icon above label, active underlined (Zepto) */
  .catstrip{ position:relative; border:0; background:#fff; border-bottom:1px solid var(--q-line); }
  .catstrip::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:34px; pointer-events:none; background:linear-gradient(90deg, rgba(255,255,255,0), #fff 80%); }
  .catstrip .container{ gap:4px; padding-top:12px; padding-bottom:0; scroll-snap-type:x proximity; scroll-padding-left:14px; }
  .catstrip a{ scroll-snap-align:start; }
  .catstrip a{
    flex-direction:column; gap:4px; padding:6px 10px 8px; font-size:.7rem; font-weight:700; color:#333;
    background:none; border:0; border-bottom:2.5px solid transparent; border-radius:0; min-width:64px; justify-content:center;
  }
  .catstrip a.is-active{ color:var(--q-green); border-bottom-color:var(--q-green); font-weight:800; }
  .catstrip .cs-ic{ padding:0; }
  .cs-img{ width:30px; height:30px; box-shadow:none; }
  .cs-ic .i{ width:24px; height:24px; }

  .wa-float{ display:none; }                /* WhatsApp lives in the drawer + home strip on phones */
  .tabbar{ display:grid; }
  .cartbar{ display:flex; }
  .cartbar[hidden]{ display:none; }
  .toast{ bottom:calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom)); }
  .rail > *{ flex-basis:140px; }

  /* Category page: icon rail on the left, like the app */
  .catpage{ grid-template-columns:78px 1fr; }
  .cat-nav{ top:var(--hdr-h,104px); max-height:calc(100vh - var(--hdr-h,104px) - var(--tabbar-h)); padding:4px 0; }
  .cn{ flex-direction:column; gap:5px; padding:8px 4px; text-align:center; border-left:0; border-right:3px solid transparent; font-size:.62rem; line-height:1.15; }
  .cn.is-active{ border-right-color:var(--q-green); }
  .cn-img{ width:48px; height:48px; border-radius:10px; }
  .catpage-main{ padding:10px 0 10px 10px; }
  .shop-bar h1{ font-size:1rem; }
  .shop-tools{ width:100%; margin:0; }
  .shop-search{ flex:1; min-width:0; }
  .prod-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }

  .why{ grid-template-columns:repeat(2,1fr); }
  .foot-top{ grid-template-columns:1fr; gap:22px; }
  .foot-cats{ columns:2; }
  .foot-app{ margin-left:0; }
}
@media (max-width:640px){
  .section{ padding:28px 0; }
  .container{ --pad:14px; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .geo-gate{ align-items:flex-end; padding:0; }
  .geo-card{
    max-width:none; border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:30px 22px calc(22px + env(safe-area-inset-bottom));
  }
  .prod-body{ padding:20px 9px 10px; gap:4px; }
  .prod-media .qty-slot{ width:64px; right:12px; bottom:-15px; }
  .add-btn,.stepper{ height:31px; }
  .stepper button{ width:22px; height:31px; }
  .eta-long{ display:none; }
  .eta-short{ display:inline; }
  .prod h4{ font-size:.8rem; }
  .prod .price{ font-size:.95rem; }
  .prod .ptag{ max-width:58%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.52rem; padding:3px 6px; }
  .shop-tools{ flex-wrap:wrap; gap:8px; }
  .shop-search{ flex:1 1 100%; min-width:0; }
  .shop-tools select{ flex:1 1 auto; }
  .chips{ gap:6px; margin-bottom:10px; }
  .chip{ padding:6px 10px; font-size:.74rem; }
  .rail > *{ flex-basis:126px; }
  .f-grid{ grid-template-columns:1fr; }
  .news{ padding:28px 22px; }
  .news input{ min-width:0; width:100%; }
  .news form{ width:100%; }
  .news form .btn{ width:100%; }

  /* Cart table -> stacked cards */
  .cart-table thead{ display:none; }
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{ display:block; width:100%; }
  .cart-table tr{ padding:14px 16px; border-top:1px solid var(--line); }
  .cart-table td{ border:none; padding:5px 0; }
  .cart-table td[data-lbl]::before{
    content:attr(data-lbl) ": "; font-weight:800; color:var(--green-800); font-size:.76rem;
  }
}
@media (max-width:400px){
  .container{ --pad:12px; }
  .brand img{ height:32px; }
  .hdr{ gap:8px; }
  .prod-grid{ gap:8px; }
  .rail > *{ flex-basis:118px; }
  .prod-body{ padding:20px 7px 8px; }              /* room for the ADD pill that overhangs the photo */
  .prod h4{ font-size:.78rem; }
  .prod-media .qty-slot{ width:58px; right:8px; bottom:-14px; }
  .stepper button{ width:20px; }
  .sec-title{ font-size:1.35rem; gap:9px; }
  .sec-title::before,.sec-title::after{ width:19px; height:19px; }
}
@media (max-width:360px){
  .hl-long{ display:none; }
  .hl-brief{ display:inline; }                    /* "Tomorrow, 6–9 AM" fits beside the logo */
  .stores{ gap:6px; }
  .stores a{ flex-direction:column; gap:2px; font-size:.62rem; padding:0 4px; height:50px; border-radius:10px 10px 0 0; }
  .stores a span{ overflow:visible; }
  .stores img{ width:22px; height:22px; }
  .stores .i{ width:18px; height:18px; }
  .hdr-wa{ padding:0 8px 0 10px; font-size:.62rem; }
  .hdr-wa .i{ width:22px; height:22px; }
  .hs-field{ padding:0 12px; gap:8px; }
}
@media (max-width:340px){
  .container{ --pad:10px; }
  .hdr{ gap:6px 8px; }
  .hdr-cart,.nav-toggle{ width:40px; height:40px; }
  .prod-grid{ gap:6px; }
  .rail > *{ flex-basis:110px; }
  .add-btn{ font-size:.74rem; letter-spacing:0; }
  .prod .price{ font-size:.82rem; }
  .cn{ font-size:.58rem; }
  .cn-img{ width:40px; height:40px; }
  .catpage{ grid-template-columns:66px 1fr; }
  .why{ grid-template-columns:1fr; }
  .drawer{ width:min(300px,92vw); }
  .tabbar a span{ font-size:.6rem; }
  .btn{ padding:12px 20px; font-size:.88rem; }
}

/* ---- Tiny screens (220–300px): one column, icon-only tab bar ---- */
@media (max-width:300px){
  .container{ --pad:8px; }
  .prod-grid{ grid-template-columns:1fr; }
  .rail > *{ flex-basis:136px; }
  .prod-media .qty-slot{ width:66px; }
  .tabbar a span{ display:none; }
  .tabbar a .i{ width:24px; height:24px; }
  .hdr{ gap:6px; }
  .brand img{ height:34px; width:34px; }
  .hl-title{ font-size:.92rem; }
  .hl-addr{ font-size:.72rem; }
  .catstrip a{ padding:5px 8px 7px; font-size:.64rem; min-width:56px; }
  .stores a{ height:46px; }
  .hdr-wa span{ display:none; }                   /* icon-only WhatsApp card */
  .hdr-wa{ padding:0 12px; }
  .cartbar{ left:6px; right:6px; padding:8px 8px 8px 10px; gap:8px; }
  .cb-cta{ font-size:.8rem; }
  .catpage{ grid-template-columns:56px 1fr; }
  .cn-img{ width:36px; height:36px; }
  .cn .cn-txt{ display:none; }
  .drawer{ width:100vw; }
}

/* ---- Large desktops: a wider canvas so rails and tiles stay full ---- */
@media (min-width:1550px){
  :root{ --container:1440px; }
  .rail > *{ flex-basis:196px; }
  .prod-grid{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
}
@media (min-width:1900px){
  :root{ --container:1600px; }
  .rail > *{ flex-basis:210px; }
  .hs-field{ height:50px; }
}

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

/* ==========================================================================
   GREEN THEME (2026-09-11) — brand-green header, drawer head and footer on a
   mint page ground; white cards on top. Everything here overrides the neutral
   defaults above — delete this block to go back to the white look.
   ========================================================================== */
body{ background:var(--q-mint); }

/* ---- Header (desktop) ---- */
.site-header{ background:linear-gradient(90deg,#0a7a1f 0%,#0c8f25 55%,#149a31 100%); box-shadow:0 2px 12px rgba(8,70,20,.28); border-top:0; }
.brand{ border-right-color:rgba(255,255,255,.22); }
.brand img{ background:#fff; border-radius:12px; padding:3px; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.brand-name{ color:#fff; }
.brand-name em{ color:var(--q-yellow); }
.site-header .hl-title{ color:#fff; }
.site-header .i--bolt{ fill:var(--q-yellow); }
.site-header .hl-addr,.site-header .hl-addr .i{ color:rgba(255,255,255,.92); }
.site-header .hl-lbl,.site-header .hl-txt.is-muted,.site-header .hdr-loc.is-loading .hl-txt{ color:rgba(255,255,255,.72); }
.site-header .loc-btn{ background:var(--q-yellow); color:#1f1f1f; }
.site-header .loc-btn--ghost{ background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.site-header .loc-chip{ color:#d8f3d8; }
.site-header .loc-chip--warn{ color:#ffd98a; }
.site-header .hs-field{ border-color:transparent; box-shadow:0 3px 12px rgba(0,0,0,.16); }
.site-header .hs-field:focus-within{ border-color:transparent; box-shadow:0 0 0 3px rgba(248,203,70,.75), 0 3px 12px rgba(0,0,0,.16); }
.hdr-login{ color:#fff; }
.hdr-login:hover{ color:var(--q-yellow); }
.hdr-cart{ color:#fff; }
.hdr-cart.has-items{ background:#fff; color:var(--q-green); border-radius:12px; padding:6px 14px; box-shadow:0 3px 10px rgba(0,0,0,.15); }
.catstrip{ background:#fff; border-top:0; box-shadow:0 1px 0 var(--q-line); }

/* ---- Drawer head ---- */
.drawer-head{ background:linear-gradient(90deg,#0a7a1f,#0d8f26); border-bottom:0; }
.drawer-head img{ background:#fff; border-radius:12px; padding:3px; }
.drawer-head .act{ color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.drawer-head .act:hover{ background:rgba(255,255,255,.14); color:#fff; }

/* ---- Footer ---- */
.site-footer{ background:linear-gradient(180deg,#0b5f21 0%,#084a19 100%); color:#d7ead9; border-top:0; }
.site-footer p,.site-footer li,.site-footer a{ color:#cfe5d1; }
.site-footer .foot-col h4{ color:#fff; }
.site-footer .foot-seeall{ color:#a9e5ab; }
.site-footer .foot-links a:hover,.site-footer .foot-cats a:hover{ color:#fff; }
.site-footer .foot-bottom{ border-top-color:rgba(255,255,255,.16); color:#b8d6bb; }
.site-footer .foot-app b{ color:#fff; }
.site-footer .store-pill{ background:#fff; color:#084a19; }
.site-footer .socials a{ background:rgba(255,255,255,.14); color:#fff; }
.site-footer .socials a:hover{ background:#fff; color:var(--q-green); }

/* ---- Phone header + chrome ---- */
@media (max-width:900px){
  .site-header{ background:linear-gradient(180deg,#0a7a1f 0%,#0d8f26 100%); box-shadow:0 2px 10px rgba(8,70,20,.28); }
  .brand img{ border-radius:10px; padding:2px; }
  .site-header .hdr-loc:not([data-state="ready"]) .hl-lbl{ color:#fff; }
  .site-header .hdr-loc .loc-btn{ background:var(--q-yellow); color:#1f1f1f; }
  .stores a{ background:rgba(255,255,255,.16); color:#fff; box-shadow:none; }
  .stores a.is-active{ background:#fff; color:var(--q-green); border-bottom-color:var(--q-green); }
  .stores .i{ color:currentColor; }
  .stores img{ border-radius:6px; background:#fff; }
  .site-header .hs-field{ border-color:transparent; box-shadow:0 2px 8px rgba(0,0,0,.16); }
  .hdr-wa{ border-color:transparent; box-shadow:0 2px 8px rgba(0,0,0,.16); }
  .nav-toggle{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.45); box-shadow:none; }
  .tabbar{ box-shadow:0 -4px 16px rgba(12,131,31,.12); }
}

/* Narrow cards (phones, tablet rails): the tag drops under the OFF pill instead of colliding with it */
@container (max-width:200px){
  .prod .ptag{ top:36px; left:10px; right:auto; max-width:calc(100% - 20px); }
}

/* ==========================================================================
   HEADER POLISH (2026-09-11) — glass delivery card, pill search with a rolling
   hint, icon circles for Account/Cart, sliding underline + photo rings on the
   category strip, faint leaf texture. Desktop only (phones keep the app look).
   ========================================================================== */
.hs-field{ position:relative; }
.hs-hint{
  position:absolute; left:44px; right:16px; top:50%; transform:translateY(-50%); pointer-events:none;
  color:var(--q-grey); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hs-hint b{ color:var(--q-ink); font-weight:700; }
.hs-field.has-value .hs-hint{ display:none; }
.hs-hint.is-roll{ animation:hintRoll .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hintRoll{ from{ opacity:0; transform:translateY(calc(-50% + 9px)); } to{ opacity:1; transform:translateY(-50%); } }
.cs-badge{ display:none; }

@media (min-width:901px){
  .site-header::before{
    content:""; position:absolute; left:0; right:0; top:0; height:84px; pointer-events:none; z-index:0;
    background:
      radial-gradient(460px 170px at 6% 0%, rgba(255,255,255,.18), transparent 70%),
      radial-gradient(560px 220px at 100% 100%, rgba(0,0,0,.16), transparent 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='%23ffffff' fill-opacity='.07' d='M22 78c0-24 18-42 46-44-2 28-20 46-44 46zm8-6c10-4 20-14 26-26-12 6-22 16-26 26zM72 22c26 2 44 20 44 44-24 0-42-18-44-44zm8 8c4 12 14 22 26 26-6-12-16-22-26-26z'/%3E%3C/svg%3E") repeat;
    background-size:auto, auto, 120px 120px;
  }
  .site-header .hdr{ position:relative; z-index:1; }
  .site-header.is-stuck{ box-shadow:0 6px 24px rgba(8,70,20,.32); }

  /* Brand: logo card lifts, tagline under the name */
  .brand{ padding-right:20px; }
  .brand img{ transition:transform .22s cubic-bezier(.2,.8,.2,1); }
  .brand:hover img{ transform:translateY(-2px) rotate(-3deg); }
  .brand-name{ display:flex; flex-direction:column; line-height:1.1; gap:3px; }
  .brand-word{ white-space:nowrap; }
  .brand-tag{ font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); font-weight:800; }

  /* Delivery + address as a glass card */
  .hdr-loc{
    margin-left:16px; padding:7px 12px; gap:2px; max-width:min(320px, 26vw);
    border-radius:14px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
    transition:background .2s, border-color .2s;
  }
  .hdr-loc:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); }
  .site-header .i--bolt{ animation:boltFlash 3.2s ease-in-out infinite; transform-origin:center; }
  @keyframes boltFlash{ 0%,86%,100%{ opacity:1; transform:none; } 90%{ opacity:.5; transform:scale(1.3); } 94%{ opacity:1; transform:none; } }
  .hl-addr .i{ transition:transform .2s; }
  .hl-addr:hover .i{ transform:translateY(2px); }
  .hl-addr:hover .hl-txt{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.55); text-underline-offset:2px; }
  .site-header .loc-chip{ padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.12); font-size:.64rem; }
  .site-header .loc-chip--warn{ background:rgba(255,193,60,.22); }

  /* Search: pill, green icon disc, yellow focus ring */
  .hdr-search{ margin:0 26px; }
  .site-header .hs-field{
    height:54px; border-radius:999px; padding:0 18px 0 9px; gap:10px;
    box-shadow:0 4px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8);
    transition:box-shadow .2s, transform .2s;
  }
  .site-header .hs-field > .i{ width:36px; height:36px; padding:9px; border-radius:50%; background:var(--q-mint-2); color:var(--q-green); flex-shrink:0; transition:background .2s, color .2s; }
  .site-header .hs-field:focus-within > .i{ background:var(--q-green); color:#fff; }
  .site-header .hs-hint{ left:55px; }
  .site-header .hs-field:focus-within{ box-shadow:0 0 0 3px rgba(248,203,70,.85), 0 4px 14px rgba(0,0,0,.18); }

  /* Account + Cart: icon discs */
  .hdr-login .i,.hdr-cart .i{
    width:42px; height:42px; padding:9px; border-radius:50%;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
    transition:background .2s, color .2s, transform .2s;
  }
  .hdr-login:hover .i,.hdr-cart:not(.has-items):hover .i{ background:#fff; color:var(--q-green); transform:translateY(-2px); }
  .hdr-login:hover{ color:#fff; }
  .hdr-cart.has-items{ padding:5px 14px 6px; border-radius:14px; transition:transform .2s, box-shadow .2s; }
  .hdr-cart.has-items .i{ width:36px; height:36px; padding:7px; background:var(--q-mint-2); border-color:transparent; color:var(--q-green); }
  .hdr-cart.has-items:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.22); }
  .hdr-cart.has-items .hc-txt small{ color:var(--q-green-dark); }

  /* Category strip: sliding underline, photo rings, Sale tag */
  .catstrip{ box-shadow:0 1px 0 var(--q-line), 0 4px 12px rgba(12,131,31,.06); }
  .catstrip .container{ gap:4px; }
  .catstrip a{ position:relative; padding:10px 14px 11px; border-bottom:0; border-radius:10px 10px 0 0; transition:color .15s, background .15s; }
  .catstrip a::after{
    content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px; border-radius:3px 3px 0 0;
    background:var(--q-green); transform:scaleX(0); transform-origin:center; transition:transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .catstrip a:hover{ background:var(--q-mint); }
  .catstrip a:hover::after,.catstrip a.is-active::after{ transform:scaleX(1); }
  .catstrip .cs-img{ width:28px; height:28px; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--q-line); transition:transform .2s, box-shadow .2s; }
  .catstrip a:hover .cs-img,.catstrip a.is-active .cs-img{ transform:scale(1.08); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--q-green); }
  .catstrip .cs-ic .i{ transition:transform .2s; }
  .catstrip a:hover .cs-ic .i{ transform:scale(1.12); }
  .cs-badge{ display:inline-block; margin-left:2px; font-size:.56rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--q-yellow); color:#1f1f1f; padding:2px 6px; border-radius:999px; line-height:1.2; }
}

/* ==========================================================================
   PHONE HEADER POLISH (2026-09-11) — app-style green card with rounded bottom
   and leaf texture, segmented store tabs (icon over label, never truncated),
   pill search with green icon disc, WhatsApp button disc, category chips in
   mint circles with a sliding underline, Material-style pill on the active
   bottom tab. ≤900px only.
   ========================================================================== */
@media (max-width:900px){
  .site-header{ background:#fff; box-shadow:none; }
  .site-header .hdr{
    position:relative; z-index:1; isolation:isolate;
    background:linear-gradient(180deg,#0a7a1f 0%,#0d8f26 100%);
    border-radius:0 0 22px 22px; box-shadow:0 6px 18px rgba(8,70,20,.26);
    padding-block:10px 14px; gap:10px 10px;
  }
  .site-header .hdr::before{
    content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
    background:
      radial-gradient(380px 150px at 0% 0%, rgba(255,255,255,.18), transparent 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='%23ffffff' fill-opacity='.07' d='M22 78c0-24 18-42 46-44-2 28-20 46-44 46zm8-6c10-4 20-14 26-26-12 6-22 16-26 26zM72 22c26 2 44 20 44 44-24 0-42-18-44-44zm8 8c4 12 14 22 26 26-6-12-16-22-26-26z'/%3E%3C/svg%3E") repeat;
    background-size:auto, 120px 120px;
  }
  .brand img{ box-shadow:0 3px 8px rgba(0,0,0,.2); }

  /* Delivery line + address pill */
  .hdr-loc{ gap:4px; }
  .hl-title{ font-size:.92rem; letter-spacing:-.01em; }
  .hdr-loc[data-state="ready"] .hl-addr{
    align-self:flex-start; max-width:100%; min-width:0; padding:3px 8px 3px 7px; gap:4px;
    border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
    font-size:.72rem; font-weight:700; color:#fff; transition:background .2s;
  }
  .hdr-loc[data-state="ready"] .hl-addr:active{ background:rgba(255,255,255,.26); }
  .hl-addr .i{ width:13px; height:13px; }

  .nav-toggle{
    width:42px; height:42px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#fff;
    transition:transform .15s, background .2s;
  }
  .nav-toggle:active{ transform:scale(.92); background:rgba(255,255,255,.3); }

  /* Store tabs: segmented control */
  .stores{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:4px; gap:4px; }
  .stores a{
    height:50px; flex-direction:column; gap:3px; padding:0 4px; border-radius:12px; border-bottom:0;
    background:transparent; color:rgba(255,255,255,.92); font-size:.66rem; font-weight:800; letter-spacing:.02em;
    box-shadow:none; transition:background .2s, color .2s, transform .15s;
  }
  .stores a:active{ transform:scale(.96); }
  .stores a span{ overflow:visible; }
  .stores a.is-active{ background:#fff; color:var(--q-green); box-shadow:0 2px 8px rgba(0,0,0,.2); }
  .stores img{ width:24px; height:24px; border-radius:6px; }
  .stores .i{ width:20px; height:20px; }

  /* Search pill + WhatsApp */
  .site-header .hs-field{ height:48px; border-radius:999px; padding:0 14px 0 7px; gap:9px; box-shadow:0 4px 12px rgba(0,0,0,.16); transition:box-shadow .2s; }
  .site-header .hs-field > .i{ width:34px; height:34px; padding:8px; border-radius:50%; background:var(--q-mint-2); color:var(--q-green); flex-shrink:0; transition:background .2s, color .2s; }
  .site-header .hs-field:focus-within > .i{ background:var(--q-green); color:#fff; }
  .site-header .hs-field:focus-within{ box-shadow:0 0 0 3px rgba(248,203,70,.85), 0 4px 12px rgba(0,0,0,.16); }
  .site-header .hs-hint{ left:50px; right:12px; }
  .hdr-wa{ height:48px; border-radius:999px; padding:0 8px 0 12px; gap:7px; box-shadow:0 4px 12px rgba(0,0,0,.16); transition:transform .15s; }
  .hdr-wa:active{ transform:scale(.96); }
  .hdr-wa .i{ width:32px; height:32px; padding:7px; border-radius:50%; background:#25d366; fill:#fff; }

  /* Category chips: mint circles, sliding underline */
  .catstrip{ border-bottom:0; box-shadow:0 1px 0 var(--q-line); }
  .catstrip .container{ padding-top:12px; gap:2px; }
  .catstrip a{ position:relative; min-width:66px; padding:4px 8px 8px; gap:4px; font-size:.68rem; border-bottom:0; }
  .catstrip a::after{
    content:""; position:absolute; left:16px; right:16px; bottom:0; height:3px; border-radius:3px 3px 0 0;
    background:var(--q-green); transform:scaleX(0); transition:transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .catstrip a.is-active::after{ transform:scaleX(1); }
  .catstrip .cs-ic{
    width:40px; height:40px; border-radius:50%; background:var(--q-mint); display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 1.5px var(--q-line); transition:background .2s, box-shadow .2s, transform .15s;
  }
  .catstrip .cs-ic .i{ width:20px; height:20px; color:#2b3a2e; transition:color .2s; }
  .catstrip .cs-img{ width:40px; height:40px; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--q-line); transition:box-shadow .2s, transform .15s; }
  .catstrip a.is-active .cs-ic{ background:var(--q-green); box-shadow:0 0 0 1.5px var(--q-green); }
  .catstrip a.is-active .cs-ic .i{ color:#fff; }
  .catstrip a.is-active .cs-img{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--q-green); }
  .catstrip a:active .cs-ic,.catstrip a:active .cs-img{ transform:scale(.92); }

  /* Bottom tab bar: pill behind the active icon */
  .tabbar{ border-top:0; box-shadow:0 -6px 20px rgba(12,131,31,.10); }
  .tabbar a::before{
    content:""; position:absolute; top:8px; left:50%; width:52px; height:30px; border-radius:999px;
    background:var(--q-mint-2); opacity:0; transform:translateX(-50%) scaleX(.5);
    transition:opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .tabbar a.is-active::before{ opacity:1; transform:translateX(-50%) scaleX(1); }
  .tabbar a .i,.tabbar a span:not(.tab-badge){ position:relative; }
}
@media (max-width:360px){
  .stores a{ height:48px; font-size:.62rem; }
  .catstrip a{ min-width:62px; }
  .catstrip .cs-ic,.catstrip .cs-img{ width:38px; height:38px; }
}
@media (max-width:300px){
  .site-header .hdr{ border-radius:0 0 16px 16px; }
  .stores{ padding:3px; gap:3px; }
  .stores a{ height:44px; }
  .catstrip .cs-ic,.catstrip .cs-img{ width:36px; height:36px; }
  .catstrip .cs-ic .i{ width:19px; height:19px; }
}

/* ==========================================================================
   DELIVERY AREA — the radius set in Admin > Settings decides all three states
   (inside · distance charge · not in your area). js/location.js paints these.
   ========================================================================== */
.loc-chip--far{ color:var(--orange-700); }
.site-header .loc-chip--far{ color:#ffd98a; }

.zone-card{ padding-top:26px; }
.zone-art{ display:block; width:236px; max-width:84%; margin:0 auto 4px; overflow:visible; }
.zring{ fill:none; stroke:var(--green-100); stroke-width:1.5; }
.zring--3{ opacity:.65; }
.zserve{
  fill:rgba(102,187,106,.12); stroke:var(--green-500); stroke-width:2;
  stroke-dasharray:6 6; animation:zspin 26s linear infinite;
  transform-box:fill-box; transform-origin:center;
}
.zlink{ fill:none; stroke:var(--orange-400); stroke-width:2; stroke-dasharray:4 6; animation:zdash 1.1s linear infinite; }
.zstore{ fill:var(--green-700); }
.zstore-halo{ fill:rgba(46,125,50,.14); }
.zyou{ fill:var(--orange-500); }
.zyou-halo{
  fill:rgba(245,124,0,.18); animation:zpulse 2.1s ease-out infinite;
  transform-box:fill-box; transform-origin:center;
}
@keyframes zspin{ to{ transform:rotate(360deg); } }
@keyframes zdash{ to{ stroke-dashoffset:-20; } }
@keyframes zpulse{ 0%{ transform:scale(.7); opacity:.9; } 70%,100%{ transform:scale(1.25); opacity:0; } }

.zone-kicker{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 10px;
  padding:5px 12px; border-radius:var(--r-full);
  background:var(--orange-100); color:var(--orange-700);
  font-size:.7rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
}
.zone-kicker .i{ width:14px; height:14px; }
.zone-card p{ margin:0 0 4px; }

.zone-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0 12px; }
.zs{
  padding:10px 8px; border-radius:14px; text-align:center;
  background:var(--q-mint); border:1px solid var(--q-line);
}
.zs b{ display:block; font-size:1.12rem; color:var(--green-800); line-height:1.1; }
.zs small{ display:block; margin-top:2px; font-size:.7rem; font-weight:700; color:var(--ink-mute); }
.zs--bad{ background:var(--orange-100); border-color:#f6d7b4; }
.zs--bad b{ color:var(--orange-700); }

.zone-addr{
  display:flex; align-items:center; gap:8px; margin:0 0 16px;
  padding:10px 12px; border-radius:12px; text-align:left;
  border:1.5px dashed var(--q-line); background:var(--q-green-soft);
  font-size:.82rem; font-weight:700; color:var(--ink-soft);
}
.zone-addr .i{ width:16px; height:16px; color:var(--green-700); flex-shrink:0; }
.zone-addr span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.zone-wa{ margin-top:10px; box-shadow:inset 0 0 0 2px #25d366; color:#0f7b3f; }
.zone-wa:hover{ background:#eafaf0; }
.zone-wa .i{ width:18px; height:18px; }
.zone-foot{ margin:16px 0 0 !important; font-size:.76rem; line-height:1.6; color:var(--ink-mute); }
.zone-foot a{ color:var(--green-700); font-weight:800; text-decoration:underline; }
.zone-link{ display:inline-block; margin-top:4px; }

/* the distance charge, wherever a bill is shown */
.far-row .lbl,.far-row span{ color:var(--orange-700) !important; }
.zone-strip{
  display:flex; align-items:flex-start; gap:9px; margin:0 0 12px;
  padding:11px 13px; border-radius:14px;
  background:var(--orange-100); border:1px solid #f6d7b4;
  font-size:.78rem; font-weight:700; line-height:1.45; color:var(--orange-700);
}
.zone-strip .i{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }
.zone-strip b{ color:#b23c00; }
@media (max-width:640px){
  .zone-art{ width:200px; margin-bottom:2px; }
  .zs b{ font-size:1.02rem; }
}

/* Out of area = no shop at all: only the header and the screen itself stay.
   (The icon sprite must keep its box or every <use> stops rendering.) */
body.zone-blocked > *:not(.geo-gate):not(.site-header):not(script):not(svg){ display:none !important; }
body.zone-blocked .site-header{ filter:saturate(.9); }
.zone-foot a[href^="tel:"]{ white-space:nowrap; }

/* ==========================================================================
   STOCK — sold out + "only N left" (Admin > Products counts)
   ========================================================================== */
.prod.is-oos .prod-thumb img{ filter:grayscale(1); opacity:.5; }
.prod.is-oos h4 a,.prod.is-oos .price{ color:var(--ink-mute); }
.soldout,.left-chip{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:2;
  padding:4px 10px; border-radius:var(--r-full); font-size:.62rem; font-weight:800; white-space:nowrap;
  letter-spacing:.03em; text-transform:uppercase;
}
.soldout{ background:#1f2b21; color:#fff; }
.left-chip{ background:var(--orange-100); color:var(--orange-700); border:1px solid #f6d7b4; }
.add-btn.is-off{ background:#eef1ee; color:var(--ink-mute); border-color:#e0e5e0; cursor:not-allowed; box-shadow:none; }
.line.is-oos .line-img img{ filter:grayscale(1); opacity:.5; }
.line.is-oos .line-txt b::after{ content:" · sold out"; color:var(--orange-700); font-size:.72rem; }
.strip-btn{
  margin-left:8px; padding:4px 10px; border-radius:var(--r-full); border:0;
  background:var(--orange-700); color:#fff; font-weight:800; font-size:.72rem; cursor:pointer;
}

/* ==========================================================================
   UPI "pay now" card on the tracking page
   ========================================================================== */
.paycard{ border:1.5px solid var(--green-300) !important; background:linear-gradient(180deg,#fff,var(--q-green-soft)) !important; }
.paycard.is-paid{ border-color:var(--green-500) !important; }
.paycard h3 .tiny{ margin-left:auto; font-size:.7rem; font-weight:700; color:var(--ink-mute); }
.pay-grid{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; align-items:start; }
.pay-qr{ background:#fff; border:1px solid var(--q-line); border-radius:14px; padding:6px; }
.pay-qr svg{ display:block; width:100%; height:auto; }
.pay-note{ margin:0 0 10px; font-size:.86rem; color:var(--ink-soft); line-height:1.5; }
.pay-open{ margin-bottom:10px; }
.pay-utr{ display:flex; gap:8px; align-items:center; margin:0 0 8px; }
.pay-utr .inp{ flex:1; min-width:0; height:44px; }
.pay-utr .btn{ padding:11px 16px; font-size:.82rem; flex-shrink:0; }
.pay-got{ display:flex; gap:6px; align-items:center; margin:0 0 8px; padding:9px 12px; border-radius:12px; background:var(--green-100); color:var(--green-800); font-size:.82rem; font-weight:700; }
.pay-got .i{ width:16px; height:16px; }
.paycard .fine{ margin:0; font-size:.74rem; color:var(--ink-mute); display:flex; gap:6px; align-items:center; }
.paycard .fine .i{ width:14px; height:14px; }
@media (max-width:640px){
  .pay-grid{ grid-template-columns:1fr; }
  .pay-qr{ width:190px; margin:0 auto; }
  .pay-utr{ flex-wrap:wrap; } .pay-utr .btn{ width:100%; }
}

/* ==========================================================================
   Product reviews (product.html)
   ========================================================================== */
.pd-reviews .hsec-head h2{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rv-sum{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--ink-soft); }
.rv-sum small{ font-weight:600; color:var(--ink-mute); }
.rv-st{ display:inline-flex; gap:1px; }
.rv-st .i{ width:14px; height:14px; color:#d9ded9; fill:currentColor; stroke:none; }
.rv-st .i.on{ color:#f5b301; }
.rv-form{ background:#fff; border:1.5px solid var(--q-line); border-radius:18px; padding:16px; margin:0 0 16px; position:relative; }
.rv-form[hidden]{ display:none; }
.rv-stars{ display:flex; gap:4px; margin:0 0 12px; }
.rv-stars button{ width:38px; height:38px; border:0; background:var(--q-mint); border-radius:10px; color:#cfd6cf; cursor:pointer; display:grid; place-items:center; transition:transform .12s, color .12s; }
.rv-stars button .i{ width:22px; height:22px; fill:currentColor; stroke:none; }
.rv-stars button.on{ color:#f5b301; }
.rv-stars button:hover{ transform:scale(1.08); }
.rv-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.rv-form .field{ display:block; margin:0 0 10px; }
.rv-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.rv-hint{ font-size:.74rem; color:var(--ink-mute); }
.rv-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.rv{ background:#fff; border:1px solid var(--q-line); border-radius:16px; padding:14px 16px; }
.rv-head{ display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:.86rem; }
.rv-head b{ color:var(--q-ink); }
.rv-ver{ display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; background:var(--green-100); color:var(--green-800); font-size:.66rem; font-weight:800; }
.rv-ver .i{ width:11px; height:11px; }
.rv-date{ margin-left:auto; font-size:.72rem; color:var(--ink-mute); }
.rv p{ margin:8px 0 0; font-size:.86rem; line-height:1.5; color:var(--ink-soft); }
.rv-empty{ color:var(--ink-mute); font-size:.9rem; }
@media (max-width:640px){ .rv-row{ grid-template-columns:1fr; } .rv-list{ grid-template-columns:1fr; } }

/* ==========================================================================
   Language toggle (हिं / EN) — js/lang.js
   ========================================================================== */
.hdr-lang{
  flex-shrink:0; height:38px; min-width:44px; padding:0 12px; margin-left:6px;
  border-radius:999px; border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14);
  color:#fff; font-weight:800; font-size:.86rem; cursor:pointer; transition:background .15s, transform .15s;
}
.hdr-lang:hover{ background:rgba(255,255,255,.26); transform:translateY(-1px); }
html.lang-hi body{ font-family:"Nunito Sans",-apple-system,"Noto Sans Devanagari","Mangal",system-ui,sans-serif; }
@media (max-width:900px){
  .hdr-lang{ position:absolute; right:56px; top:10px; height:32px; min-width:40px; padding:0 10px; font-size:.78rem; }
  .site-header .hdr{ position:relative; }
}

/* ==========================================================================
   FOOTER v2 — rates-on-WhatsApp strip, brand column, contact icons, payment row
   ========================================================================== */
.foot-cta{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin:0 0 30px; padding:20px 24px; border-radius:20px;
  background:linear-gradient(135deg,#0f7a2a,#0a6b1f 60%,#0d5a1d); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.fc-txt{ display:grid; gap:4px; min-width:0; flex:1 1 320px; }
.fc-txt b{ display:flex; align-items:center; gap:8px; color:#fff; font-size:1.06rem; }
.fc-txt b .i{ width:22px; height:22px; fill:#25d366; stroke:none; }
.fc-txt span{ color:#cfe5d1; font-size:.84rem; }
.fc-form{ display:flex; gap:8px; align-items:center; flex:0 1 420px; min-width:0; position:relative; }
.fc-form .inp{ flex:1; min-width:0; height:46px; background:#fff; border-color:#fff; }
.fc-form .inp input{ color:var(--q-ink); }
.fc-form .btn{ padding:12px 18px; font-size:.86rem; flex-shrink:0; background:var(--q-yellow); color:#1f1f1f; box-shadow:none; }
.fc-form .btn:hover{ background:#ffd95c; }
.fc-done{ display:flex; gap:10px; align-items:center; flex:0 1 460px; color:#eaf6ea; font-size:.86rem; line-height:1.45; }
.fc-done .i{ width:24px; height:24px; padding:4px; border-radius:50%; background:#25d366; color:#fff; flex-shrink:0; }
.fc-done a{ color:#fff; font-weight:800; text-decoration:underline; }

.site-footer .foot-top{ grid-template-columns:1.3fr 1fr 1.6fr 1.3fr; }
.foot-brand p{ margin:12px 0 14px; font-size:.84rem; line-height:1.55; color:#cfe5d1 !important; max-width:300px; }
.fb-logo{ display:flex; align-items:center; gap:10px; }
.fb-logo img{ width:44px; height:44px; border-radius:12px; background:#fff; padding:3px; }
.fb-logo b{ display:block; color:#fff; font-size:1.05rem; line-height:1.1; }
.fb-logo small{ display:block; color:#a9e5ab; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }
.fb-install{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.fb-install:hover{ background:rgba(255,255,255,.1); }
.fb-install .i{ width:16px; height:16px; }
.foot-contact li{ display:flex; gap:8px; align-items:flex-start; }
.foot-contact .i{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:#a9e5ab; }
.foot-contact a{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); }

.foot-pay{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 0;
  border-top:1px solid rgba(255,255,255,.14); font-size:.78rem; color:#b8d6bb;
}
.fp-lbl{ display:inline-flex; align-items:center; gap:6px; font-weight:800; color:#e6f4e7; margin-right:4px; }
.fp-lbl .i{ width:15px; height:15px; }
.fp-lbl--r{ margin-left:auto; font-weight:600; color:#b8d6bb; }
.fp-chip{ display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-weight:700; font-size:.74rem; }
.fp-chip .i{ width:14px; height:14px; }
.site-footer .foot-bottom{ flex-wrap:wrap; gap:10px; }

@media (max-width:1024px){ .site-footer .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){
  .foot-cta{ padding:16px; margin-bottom:22px; border-radius:16px; }
  .fc-form{ flex:1 1 100%; flex-wrap:wrap; } .fc-form .btn{ width:100%; }
  .site-footer .foot-top{ grid-template-columns:1fr; }
  .fp-lbl--r{ margin-left:0; flex-basis:100%; }
}

/* popular searches as chips · rail arrows are for mouse users only */
.pop-row a{ display:inline-block; padding:5px 11px; margin:0 6px 6px 0; border-radius:999px; background:#fff; border:1px solid var(--q-line); font-size:.78rem; font-weight:700; color:var(--ink-soft); }
.pop-row a:hover{ border-color:var(--q-green); color:var(--q-green); }
.pop-row b{ display:block; margin:0 0 6px; font-size:.78rem; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:900px){ .rail-btn{ display:none; } }

/* ==========================================================================
   SMALL PHONES — the location / out-of-area sheets must never be taller
   than the screen without scrolling (320×568 iPhone SE, 320×642 etc.)
   ========================================================================== */
.geo-gate{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; align-items:flex-start; }
.geo-card{ max-height:none; margin:auto; }          /* centred when it fits, scrolls from the top when it doesn't */
@media (max-width:640px){
  /* sit at the bottom when short, start at the top and scroll when tall */
  .geo-card{ margin:auto 0 0; }
  .zone-card{ padding:22px 18px calc(18px + env(safe-area-inset-bottom)); }
  .zone-card p{ font-size:.86rem; }
  .zone-card h2{ font-size:1.22rem; }
  .zone-art{ width:190px; margin-bottom:0; }
  .zone-stats{ margin:12px 0 10px; gap:8px; }
  .zone-addr{ margin-bottom:12px; padding:8px 10px; font-size:.78rem; }
  .zone-card .btn{ padding:12px 18px; font-size:.9rem; }
  .zone-wa{ margin-top:8px; }
  .zone-foot{ margin-top:12px !important; font-size:.72rem; }
}
@media (max-width:360px){
  .geo-card{ padding:22px 16px calc(16px + env(safe-area-inset-bottom)); }
  .geo-card h2{ font-size:1.2rem; }
  .geo-card p{ font-size:.86rem; margin-bottom:14px; }
  .geo-ic{ width:64px; height:64px; margin-bottom:12px; }
  .zone-art{ width:150px; }
  .zone-kicker{ font-size:.62rem; padding:4px 10px; margin-bottom:8px; }
  .zone-card h2{ font-size:1.12rem; }
  .zs{ padding:8px 6px; } .zs b{ font-size:.98rem; } .zs small{ font-size:.64rem; }
  .zone-card .btn{ padding:11px 14px; font-size:.86rem; }
}
/* short screens (landscape phones, small androids): trim the art, keep the buttons */
@media (max-height:600px){
  .zone-art{ width:130px; } .zone-card p{ margin-bottom:2px; }
  .zone-stats{ margin:10px 0 8px; }
  .geo-card{ animation:none; }
}

/* ==========================================================================
   OUT-OF-AREA SHEET v2 — map hero with a riding scooter, compare tiles,
   "notify me" waitlist. Painted by paintZoneGate() in js/location.js.
   ========================================================================== */
.zone-card--v2{ padding:0 !important; overflow:hidden; text-align:left; max-width:460px; }
.zone-hero{
  position:relative; background:linear-gradient(160deg,#0d3b1a 0%,#0c831f 62%,#2e9d3a 100%);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.zone-map{ display:block; width:100%; height:200px; }
.zroad{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:6; stroke-linecap:round; }
.zzone{ fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.55); stroke-width:1.5; stroke-dasharray:5 5; animation:zspin 30s linear infinite; transform-box:fill-box; transform-origin:center; }
.zr{ fill:none; stroke:#a5d6a7; stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; animation:zradar 3.6s ease-out infinite; }
.zr2{ animation-delay:1.2s; } .zr3{ animation-delay:2.4s; }
@keyframes zradar{ 0%{ transform:scale(.4); opacity:.9; } 100%{ transform:scale(2.6); opacity:0; } }
.zroute{ fill:none; stroke:#ffd36b; stroke-width:3; stroke-dasharray:7 7; stroke-linecap:round; animation:zdash 1.2s linear infinite; }
.zlabel{ font:800 10.5px "Nunito Sans",system-ui,sans-serif; fill:#e8f5e9; letter-spacing:.02em; }
.ztag text{ font:800 11px "Nunito Sans",system-ui,sans-serif; fill:#e65100; }
.ztag rect{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.zyoupin{ transform-box:fill-box; transform-origin:50% 100%; animation:zbounce 1.8s ease-in-out infinite; }
@keyframes zbounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.zrider circle{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.zone-kicker--hero{
  position:absolute; left:14px; top:14px; margin:0;
  background:rgba(255,255,255,.95); color:var(--orange-700); box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.zone-body{ padding:18px 20px calc(18px + env(safe-area-inset-bottom)); }
.zone-card--v2 h2{ font-size:1.42rem; margin:0; color:var(--green-900); letter-spacing:-.01em; }
.zone-card--v2 h2 em{ font-style:normal; color:var(--orange-600); }
.zone-hi{ margin:2px 0 8px !important; font-size:.92rem; font-weight:700; color:var(--q-green); }
.zone-p{ margin:0 0 14px !important; font-size:.86rem; line-height:1.5; color:var(--ink-soft); }

.zone-compare{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:8px; margin:0 0 12px; }
.zc{ position:relative; border-radius:16px; padding:12px 10px 10px 48px; border:1px solid var(--q-line); background:var(--q-mint); }
.zc b{ display:block; font-size:1.18rem; line-height:1.1; color:var(--green-800); }
.zc small{ display:block; font-size:.68rem; font-weight:700; color:var(--ink-mute); margin-top:2px; }
.zc-ic{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:var(--green-700); color:#fff; }
.zc-ic .i{ width:16px; height:16px; }
.zc--bad{ background:var(--orange-100); border-color:#f6d7b4; }
.zc--bad b{ color:var(--orange-700); }
.zc--bad .zc-ic{ background:var(--orange-500); }
.zc-vs{ align-self:center; font-size:.68rem; font-weight:800; color:var(--ink-mute); text-transform:uppercase; }

.zone-addr--v2{ margin:0 0 12px; padding:9px 8px 9px 12px; background:#fff; border:1.5px solid var(--q-line); border-radius:14px; }
.zone-addr--v2 .i{ color:var(--orange-600); }
.za-fix{ margin-left:auto; flex-shrink:0; width:32px; height:32px; border-radius:10px; border:0; background:var(--q-mint-2); color:var(--green-800); display:grid; place-items:center; cursor:pointer; }
.za-fix .i{ width:15px; height:15px; }

.zone-wait{ margin:0 0 14px; padding:12px 12px 12px; border-radius:16px; background:linear-gradient(135deg,#fff8e6,#fff3d1); border:1px solid #f4dfa6; }
.zone-wait > b{ display:flex; align-items:center; gap:7px; font-size:.82rem; color:#7a5600; margin:0 0 8px; }
.zone-wait > b .i{ width:16px; height:16px; fill:#f5b301; stroke:none; }
.zone-wait form{ display:flex; gap:8px; }
.zone-wait .inp{ flex:1; min-width:0; height:44px; background:#fff; }
.zone-wait .btn{ flex-shrink:0; padding:10px 16px; font-size:.84rem; }
.zone-acts{ display:grid; gap:8px; }
.zone-acts .btn{ padding:13px 18px; font-size:.92rem; }
.zone-wa{ background:#25d366; color:#fff; box-shadow:0 8px 20px rgba(37,211,102,.28); }
.zone-wa:hover{ background:#1ebe5a; }
.zone-wa .i{ fill:currentColor; stroke:none; }
.zone-card--v2 .zone-foot{ margin:12px 0 0 !important; text-align:center; }

@media (max-width:640px){
  .zone-card--v2{ max-width:none; }
  .zone-hero{ border-radius:var(--r-xl) var(--r-xl) 0 0; }
  .zone-body{ padding:16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .zone-card--v2 h2{ font-size:1.3rem; }
}
@media (max-width:360px){
  .zone-card--v2 h2{ font-size:1.18rem; }
  .zc{ padding:10px 8px 8px 42px; } .zc b{ font-size:1.02rem; } .zc-ic{ width:26px; height:26px; left:8px; }
  .zone-wait form{ flex-wrap:wrap; } .zone-wait .btn{ width:100%; }
}
@media (max-width:640px){ .zone-map{ height:186px; } }
@media (max-height:640px){
  .zone-map{ height:140px; }
  .zone-p{ display:none; }
}

/* ==========================================================================
   OUT-OF-AREA SHEET — wide screens: map on the left, everything else on the
   right, so the whole thing fits without scrolling on a laptop.
   ========================================================================== */
@media (min-width:700px){
  .zone-card--v2{
    display:grid; grid-template-columns:300px minmax(0,1fr); max-width:860px; width:calc(100% - 40px);
    border-radius:28px; box-shadow:0 30px 80px rgba(5,40,15,.45);
  }
  .zone-hero{ border-radius:28px 0 0 28px; height:100%; min-height:100%; display:flex; flex-direction:column; }
  .zone-map{ height:100%; min-height:420px; flex:1; }
  .zone-kicker--hero{ left:16px; top:16px; }
  .zone-hero .zone-shop{ display:flex; }
  .zone-body{ padding:26px 30px 24px; display:flex; flex-direction:column; }
  .zone-card--v2 h2{ font-size:1.55rem; }
  .zone-hi{ font-size:.96rem; }
  .zone-p{ font-size:.88rem; margin-bottom:16px !important; }
  .zone-compare{ margin-bottom:12px; }
  .zone-acts{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
  .zone-acts .btn{ padding:12px 14px; font-size:.88rem; }
  .zone-card--v2 .zone-foot{ margin-top:auto !important; padding-top:12px; }
}
@media (min-width:700px) and (max-height:640px){
  .zone-p{ display:none; }
  .zone-body{ padding:20px 24px 18px; }
  .zone-map{ min-height:360px; }
}

/* shop identity pinned to the bottom of the map (wide screens) */
.zone-shop{
  display:none; position:absolute; left:14px; right:14px; bottom:14px; align-items:center; gap:10px;
  padding:9px 12px; border-radius:14px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); color:#fff;
}
.zone-shop img{ width:34px; height:34px; border-radius:10px; background:#fff; padding:2px; flex-shrink:0; }
.zone-shop b{ display:block; font-size:.86rem; line-height:1.15; }
.zone-shop small{ display:block; font-size:.68rem; color:#d7ead9; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zone-map--tall{ display:none; }
@media (min-width:700px){ .zone-map--wide{ display:none; } .zone-map--tall{ display:block; } }

/* phones: the compact version of the out-of-area sheet should fit a 390×740 screen without scrolling */
.zone-p--short{ display:none; }
@media (max-width:699px){
  .zone-p{ display:none; }
  .zone-p--short{ display:block; margin:0 0 12px !important; font-size:.84rem; }
  .zone-map--wide{ height:160px; }
  .zone-body{ padding:14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .zone-card--v2 h2{ font-size:1.26rem; }
  .zone-hi{ margin:1px 0 6px !important; font-size:.88rem; }
  .zone-compare{ margin-bottom:10px; }
  .zc{ padding:9px 8px 8px 46px; } .zc b{ font-size:1.08rem; }
  .zone-addr--v2{ margin-bottom:10px; padding:7px 8px 7px 12px; }
  .zone-wait{ margin-bottom:10px; padding:10px; }
  .zone-wait > b{ font-size:.78rem; margin-bottom:7px; }
  .zone-wait .inp{ height:42px; }
  .zone-acts{ gap:8px; } .zone-acts .btn{ padding:12px 16px; font-size:.9rem; }
  .zone-card--v2 .zone-foot{ margin-top:10px !important; font-size:.7rem; }
}
@media (max-width:699px) and (max-height:720px){
  .zone-map--wide{ height:132px; }
  .zone-p--short{ display:none; }
  .zone-kicker--hero{ top:10px; left:10px; }
  .zone-compare{ margin-bottom:8px; } .zone-addr--v2{ margin-bottom:8px; } .zone-wait{ margin-bottom:8px; }
}
@media (max-width:699px) and (max-height:620px){
  .zone-map--wide{ height:104px; }
  .zone-hi{ display:none; }
}

/* ==========================================================================
   Rate your sabzi (track.html + account.html) — rateWidgetHTML() in js/cart.js
   ========================================================================== */
.ratecard{ background:linear-gradient(135deg,#fffdf4,#fff8e6); border:1.5px solid #f4dfa6; border-radius:18px; padding:16px 18px; margin:0 0 14px; }
.ratecard h3{ display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:1rem; color:#6b4b00; }
.ratecard h3 .i{ width:18px; height:18px; fill:#f5b301; stroke:#f5b301; }
.ratecard h3 .tiny{ margin-left:auto; font-size:.7rem; font-weight:700; color:#a07a1a; }
.rc-sub{ margin:0 0 12px; font-size:.82rem; color:#7a5a00; }
.rate-list{ display:grid; gap:8px; }
.rate-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px; background:#fff; border:1px solid #f1e3bd; }
.rate-row img{ width:40px; height:40px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.rate-row b{ flex:1; min-width:0; font-size:.86rem; color:var(--q-ink); line-height:1.2; }
.rate-row b small{ display:block; font-size:.7rem; font-weight:600; color:var(--ink-mute); margin-top:2px; }
.rate-stars{ display:inline-flex; gap:2px; flex-shrink:0; }
.rate-stars button,.rate-stars i{ width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:#dcd6c4; display:grid; place-items:center; cursor:pointer; padding:0; transition:transform .12s, color .12s; }
.rate-stars .i{ width:20px; height:20px; fill:currentColor; stroke:none; }
.rate-stars button.on,.rate-stars i.on{ color:#f5b301; }
.rate-stars button:hover{ transform:scale(1.15); }
.rate-stars.is-static i{ width:22px; height:22px; cursor:default; }
.rate-stars.is-static .i{ width:16px; height:16px; }
.rate-text{ width:100%; margin:12px 0 10px; min-height:58px; border:1.5px solid #f1e3bd; border-radius:12px; padding:10px 12px; font:inherit; font-size:.86rem; background:#fff; resize:vertical; }
.rate-text:focus{ outline:0; border-color:#f5b301; box-shadow:0 0 0 3px rgba(245,179,1,.18); }
.rate-acts{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rate-acts .btn{ padding:11px 20px; font-size:.86rem; }
.rate-hint{ font-size:.74rem; font-weight:700; color:#a07a1a; }
.ratecard.is-done{ background:var(--q-green-soft); border-color:var(--green-300); }
.ratecard.is-done h3{ color:var(--green-800); margin-bottom:10px; }
.ratecard.is-done .rate-row{ border-color:var(--q-line); }
@media (max-width:420px){ .rate-stars button{ width:26px; height:26px; } .rate-stars .i{ width:18px; height:18px; } .rate-row img{ width:34px; height:34px; } }

/* review count next to the star on product cards */
.prod .rate small{ font-weight:700; color:var(--ink-mute); margin-left:1px; }