:root {
  /* "Mandi Kraft": brown-paper market stall. Chosen by the owner, Sep 2026. */
  --bg: #F3EBDD;          /* kraft paper */
  --surface: #FFFDF8;     /* cards, inputs */
  --text: #2A2118;
  --muted: #6E6152;
  --line: #DDD0BA;
  --card-line: #CDBB9C;   /* dashed card border */
  --field-line: #C3B08F;
  --placeholder: #EFE4D0;
  --accent: #2F5D3A;      /* leaf green: header, buttons */
  --accent-hover: #264C30;
  --accent-soft: #E8DCC4;
  --on-accent: #FFFDF8;
  --head-sub: #E9C77B;    /* "Singtam, Sikkim" on the green header */
  --pop: #C8841E;         /* cart count */
  --tag: #EBC46B;         /* paper price tag for discounts of 2% and more */
  --bar: #2A2118;         /* cart bar button */
  --error: #A3261B;
  --radius: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }  /* no blue flash on tap (Android Chrome); taps show their own press effect */
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; margin: 0; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: var(--accent); }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 50;
  background: var(--accent); color: #fff; padding: 10px 14px; border-radius: 8px;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--accent); color: var(--on-accent);
}
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-accent); line-height: 1.15; min-width: 0; }
.brand-mark { flex: none; width: 40px; height: 40px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name, .brand-town { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Small phones (under 410 px): the cart keeps its icon and count, so the logo line fits on one row. */
@media (max-width: 409px) {
  .shop-head .cart-btn { padding: 0 12px; }
  .shop-head .cart-btn > span:not(.count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 20px; }
.brand-town { font-size: 14px; color: var(--head-sub); font-weight: 600; }
/* Storefront header (owner, 4 Oct 2026: less space above the items, like Amazon).
   Phone: name + cart, search under them. PC (900px+): name | search | cart on one row.
   --head-h is the exact header height, so the sticky category row sits right under it. */
:root { --head-h: 112px; }
.shop-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand cart" "search search";
  grid-template-rows: 44px 44px; gap: 8px 12px; height: var(--head-h); padding-top: 8px; padding-bottom: 8px; min-height: 0;
}
.shop-head .brand { grid-area: brand; justify-content: center; }
.shop-head .brand-name { font-size: 18px; }
.shop-head .brand-town { font-size: 13px; }
.shop-head .cart-btn { grid-area: cart; }
.head-search { grid-area: search; }
.head-search input:not([type=checkbox]) { min-height: 44px; height: 44px; border: 0; border-radius: var(--radius); }
.head-search input:focus-visible { outline: 3px solid var(--head-sub); outline-offset: 0; }
.cart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  background: transparent; color: var(--on-accent); border: 1px solid rgba(255, 253, 248, 0.45); border-radius: 999px;
  font-weight: 600;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease), transform 150ms var(--ease-out);
}
.cart-btn:hover { border-color: var(--on-accent); background: rgba(255, 253, 248, 0.08); }
.cart-btn:focus-visible { outline-color: var(--head-sub); }
.count {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--pop); color: #fff; font-size: 13px; font-weight: 700;
  display: inline-grid; place-items: center;
}

/* Intro: the big heading is for Google and screen readers only (sr-only); status + delivery line stay small. */
.intro { padding: 10px 0 8px; }
.intro h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.intro p { color: var(--muted); }
.intro strong { color: var(--text); font-weight: 600; }

/* Delivery line (moving) */
/* "Open till 8 PM · Order by 5 PM for delivery today" (renderStatus in app.js) */
.shop-status { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.shop-status .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.shop-status.is-open .dot { background: #2E8B45; box-shadow: 0 0 0 3px rgba(46, 139, 69, 0.18); }
.shop-status.is-closed-today { padding: 10px 12px; border-radius: 10px; background: #FBEBD0; border: 1px solid #E9C68A; }
.shop-status.is-closed .dot { background: var(--pop); box-shadow: 0 0 0 3px rgba(200, 132, 30, 0.2); }
.ticker { display: flex; align-items: center; background: var(--accent-soft); border-radius: 10px; padding-left: 12px; overflow: hidden; }
.ticker-window { overflow: hidden; flex: 1; min-width: 0; }
.ticker-run { display: flex; width: max-content; animation: ticker-run var(--dur, 20s) linear infinite; }
.ticker-run ul { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-run li { white-space: nowrap; padding: 6px 0; font-size: 14px; color: var(--accent); font-weight: 600; } /* every line highlighted (owner, 2 Oct) */
.ticker-run li::after { content: '·'; padding: 0 12px; color: var(--muted); }
.ticker-run strong { color: var(--accent); font-weight: 600; }
.ticker.paused .ticker-run { animation-play-state: paused; }
.ticker-btn {
  border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--accent);
  font: 600 13px var(--font-body); padding: 0 12px; align-self: stretch; min-height: 34px; cursor: pointer;
}
.ticker-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Festival / sale line under it: twice as big, paper-tag yellow, only when switched on in Website settings. */
.promo { margin-top: 8px; background: var(--tag); border: 1px dashed #A8833A; }
.promo .ticker-run li { padding: 12px 0; font: 700 22px/1.3 var(--font-head); color: var(--text); }
.promo .ticker-run li::after { padding: 0 16px; color: var(--accent); }
.promo { padding-right: 12px; }
.promo .ticker-window { cursor: pointer; }
.promo .ticker-window:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Weather (weather.js): a note for customers + a light effect over the page, once per visit, for 15 s. */
.wx-note { position: relative; z-index: 9; display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.wx-note svg { flex: none; }
.wx-note.k-sunny { background: #F6E2B3; color: #5A3F0E; }
.wx-note.k-cloudy, .wx-note.k-fog { background: #E5E1D8; color: #3A352D; }
.wx-note.k-rain, .wx-note.k-storm { background: #DCE5EC; color: #1E3A50; }
.wx { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 600ms var(--ease); }
.wx-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 600ms var(--ease); }
.site-header .header-row { position: relative; z-index: 1; }
.wx.is-on, .wx-sky.is-on { opacity: 1; }
.wx.wx-top { z-index: 11; } /* the rainbow, in front of the sticky header (10) and category row (9) */
.wx-tint { position: absolute; inset: 0; }
.wx-warm { background: rgba(255, 190, 70, 0.10); }
.wx-dim { background: rgba(42, 33, 24, 0.06); }
.wx-dark { background: rgba(18, 22, 30, 0.22); }
.wx-sky-dark { background: rgba(10, 14, 20, 0.28); }
.wx-grey { background: rgba(80, 86, 96, 0.24); }
.wx-mist { background: rgba(250, 247, 240, 0.2); }
.wx-fog-c { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The ends dissolve into the page like a real rainbow (a mask, not a visible gradient). Size and place: rainbow() in weather.js. */
.wx-rainbow { position: absolute; left: 0; width: 100%; opacity: 0.6;
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%); mask-image: linear-gradient(#000 62%, transparent 100%); }
.wx-rainbow svg { display: block; overflow: visible; }
.wx-rainbow path { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: wx-bow 2.4s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes wx-bow { to { stroke-dashoffset: 0; } }
.wx-sun { position: absolute; top: calc(var(--head-h) - 105px); right: -105px; width: 255px; height: 255px; opacity: 0.6; animation: wx-pulse 4s ease-in-out infinite; }
/* PC (owner, 4 Oct): lower, so the sun is not hidden behind the green header. */
@media (min-width: 900px) { .wx-sun { top: calc(var(--head-h) - 30px); right: -80px; } }
.wx-sun svg { width: 100%; height: 100%; fill: #F2B23A; }
.wx-rays { transform-origin: 100px 100px; animation: wx-spin 24s linear infinite; }
.wx-cloud { position: absolute; left: 0; width: calc(120px * var(--s)); opacity: var(--o); animation: wx-drift 40s linear infinite; will-change: transform; }
.wx-cloud * { fill: #FFFDF8; }
.wx-rain .wx-cloud * { fill: #C9CED3; }
.wx-cloud.wx-big * { fill: #A3A9B0; }
.wx-cloud.wx-front * { fill: #8F959D; }
.wx-shade { animation: wx-shade 4.5s ease-in-out infinite alternate; }
.wx-storm .wx-cloud * { fill: #9AA1AA; }
.wx-rain-c { position: absolute; inset: 0; width: 100%; height: 100%; }
.wx-glow { position: absolute; inset: 0; background: #FFF8E1; opacity: 0; }
.wx-glow.on { animation: wx-flash 0.45s linear; }
.wx-glow.flick { animation: wx-flick 0.3s linear; }
#main.wx-thunder { animation: wx-thunder 0.5s linear; }
/* A bolt that hits an item (strikeLoop in weather.js): drawn twice, a soft wide glow and a bright thin core. */
.wx-zap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: wx-zap 0.5s linear forwards; }
.wx-zap path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wx-zap-glow { stroke: rgba(110, 128, 240, 0.38); stroke-width: 24; }
.wx-zap-mid { stroke: #6A80F0; stroke-width: 8; }
.wx-zap-core { stroke: #FFFFFF; stroke-width: 3.4; }
.wx-spark { stroke: #FFF4B0; stroke-width: 2.6; }
.card.wx-hit { animation: wx-hit 0.6s var(--ease-out); }
.card.wx-sway { animation: wx-sway 1.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.wx-cloud.wx-fast { animation-duration: 9s; }
.wx-wind-c { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The funny line in the middle of the screen (weather.js showJoke): 4 s, with a bar that runs down; a tap closes it. */
.wx-joke-catch { position: fixed; inset: 0; z-index: 39; }
.wx-joke {
  position: fixed; left: 50%; top: 46%; z-index: 40; width: min(320px, calc(100% - 48px)); transform: translate(-50%, -50%);
  padding: 20px 20px 16px; overflow: hidden; text-align: center; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1.5px dashed var(--card-line); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(42, 33, 24, 0.28); animation: wx-joke-in 0.35s var(--ease-pop);
}
.wx-joke::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--accent); transform-origin: left; animation: wx-joke-bar 6s linear forwards; }
.wx-joke-text { font: 700 21px/1.3 var(--font-head); }
.wx-joke-hint { margin-top: 10px; font-size: 13px; color: var(--muted); }
.wx-joke.out { animation: wx-joke-out 0.25s var(--ease) forwards; }
@keyframes wx-joke-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } }
@keyframes wx-joke-out { to { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } }
@keyframes wx-joke-bar { to { transform: scaleX(0); } }
@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-pulse { 50% { transform: scale(1.06); } }
@keyframes wx-drift { from { transform: translateX(-40vw); } to { transform: translateX(110vw); } }
/* Soft glow, two pulses within half a second, then 4.5 s dark: far below 3 flashes a second (WCAG 2.3.1). */
@keyframes wx-flash { 0% { opacity: 0; } 10% { opacity: 0.78; } 30% { opacity: 0.05; } 48% { opacity: 0.55; } 85%, 100% { opacity: 0; } }
@keyframes wx-shade { from { opacity: 0.2; } to { opacity: 1; } }
@keyframes wx-flick { 0%, 100% { opacity: 0; } 35% { opacity: 0.38; } }
@keyframes wx-thunder { 0%, 100% { transform: none; } 15% { transform: translate(-3px, 1px); } 30% { transform: translate(3px, -1px); } 45% { transform: translate(-2px, 2px); } 60% { transform: translate(2px, 0); } 80% { transform: translate(-1px, 0); } }
@keyframes wx-zap { 0% { opacity: 0; } 8% { opacity: 1; } 28% { opacity: 0.15; } 44% { opacity: 1; } 75% { opacity: 0.6; } 100% { opacity: 0; } }
@keyframes wx-hit { 0% { filter: brightness(1); } 12% { filter: brightness(1.8); transform: translateX(-4px) rotate(-1deg); } 30% { transform: translateX(4px) rotate(1deg); } 48% { filter: brightness(1.25); transform: translateX(-3px); } 70% { transform: translateX(2px); } 100% { filter: brightness(1); transform: none; } }
@keyframes wx-sway { from { transform: rotate(-0.8deg) translateX(-2px); } to { transform: rotate(0.8deg) translateX(2px); } }
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.section-title { font-size: 18px; margin-bottom: 10px; }

/* Search + category tabs */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shop-tools {
  position: sticky; top: var(--head-h); z-index: 9;
  margin: 0 -16px 12px; padding: 6px 16px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.search { position: relative; display: block; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { padding-left: 42px !important; }
.chips { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 0; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-weight: 500; font-size: 15px; white-space: nowrap;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.chip { position: relative; z-index: 1; }
.chip:hover { border-color: var(--accent); }
.chip:active { transform: scale(0.96); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Sliding green pill behind the active category (placed by app.js). */
.chip-pill {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--accent); pointer-events: none;
  transition: transform 350ms var(--ease-out), width 350ms var(--ease-out);
}
.chips.has-pill .chip.is-active { background: transparent; border-color: transparent; }
/* With the pill, chips are see-through so the pill is never half hidden behind a chip while it slides. */
.chips.has-pill .chip { background: transparent; }
.chips.has-pill .chip:hover { background: rgba(47, 93, 58, 0.06); }
.chips.has-pill .chip.is-active:hover { background: transparent; }
.cat { scroll-margin-top: 200px; }
.cat .grid { margin-bottom: 22px; }
.loading { padding: 24px 0; }
.no-results { text-align: center; padding: 32px 0 48px; }
.no-results p { margin-bottom: 16px; color: var(--muted); }

/* Product grid */
.grid {
  list-style: none; margin: 0 0 40px; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px dashed var(--card-line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform 150ms var(--ease-out);
}
.card:has(.card-main:active) { transform: scale(0.985); }
/* Cards further down the page rise in once as they scroll into view (app.js adds .later). */
.card.reveal { transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.card.reveal.later { opacity: 0; transform: translateY(16px); }
.card-main {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  background: none; border: 0; padding: 0; flex: 1;
}
.card-main:focus-visible { outline-offset: -2px; border-radius: var(--radius) var(--radius) 0 0; }
.thumb {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: var(--placeholder); color: var(--muted); font-weight: 500; font-size: 15px;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-ph { padding: 12px; text-align: center; line-height: 1.3; }
.card-text { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 2px; }
.card-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.card-hindi { font-size: 14px; color: var(--muted); }
.card-size { font-size: 14px; color: var(--muted); }
.card-price { font-size: 15px; margin-top: 4px; }
/* Prices: Figtree Bold; discounts (priceHTML in app.js) */
.price-now { font-weight: 700; }
s.was { text-decoration: line-through; }
s.was { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.ptag {
  display: inline-block; background: var(--tag); color: var(--text); font-weight: 700;
  padding: 1px 10px 1px 14px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}
.tag-off { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.per { color: var(--muted); font-size: 14px; }
.card-ctrl { padding: 6px 10px 10px; }
.card.is-out .thumb { opacity: 0.55; }
.out-label { font-size: 14px; font-weight: 600; color: var(--muted); }
.out-note { font-size: 13px; color: var(--muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius);
  border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent);
  font-weight: 700; text-decoration: none;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease-out);
}
.btn:hover { background: var(--accent-soft); }
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-add { width: 100%; background: var(--accent); color: var(--on-accent); }
.btn-add:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.link-btn {
  background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; font-size: 14px;
}
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: none; border: 0; border-radius: 10px; color: var(--text);
}
.icon-btn:hover { background: var(--placeholder); }

/* Quantity stepper */
.stepper {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--accent); border-radius: var(--radius); min-height: 44px; overflow: hidden;
  background: var(--accent); color: var(--on-accent);
}
.stepper button {
  width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: var(--on-accent);
  font-size: 20px; font-weight: 700; line-height: 1; transition: background-color 150ms var(--ease), transform 120ms var(--ease-out);
}
.stepper button:hover:not([aria-disabled=true]) { background: var(--accent-hover); }
.stepper button:active:not([aria-disabled=true]) { transform: scale(0.85); }
.stepper button[aria-disabled=true] { color: rgba(255, 253, 248, 0.45); cursor: not-allowed; }
.stepper button:focus-visible { outline: 2px solid var(--on-accent); outline-offset: -4px; }
.stepper output { flex: 1; text-align: center; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; }
/* Two cards side by side on a phone: keep "1 dozen" fully visible. */
.card-ctrl .stepper button { width: 34px; }
.card-ctrl:has(.stepper) { padding-left: 10px; padding-right: 10px; }
.card-ctrl .stepper output { font-size: 14px; }
.fade { animation: fade-in 180ms var(--ease); }
/* Add turns into − 1 kg + (opens from the middle); the number slides up or down. */
.stepper.open { animation: stepper-open 300ms var(--ease-out); }
.qty-up { animation: qty-up 220ms var(--ease-out); }
.qty-down { animation: qty-down 220ms var(--ease-out); }
@keyframes stepper-open { from { clip-path: inset(0 45% round var(--radius)); } to { clip-path: inset(0 0 round var(--radius)); } }
@keyframes qty-up { from { transform: translateY(70%); opacity: 0; } }
@keyframes qty-down { from { transform: translateY(-70%); opacity: 0; } }
/* Cart count jumps when something is added. */
.bump { animation: bump 450ms var(--ease-pop); }
@keyframes bump { 40% { transform: scale(1.35); } }
.fly { position: fixed; left: 0; top: 0; z-index: 60; width: 36px; height: 36px; border-radius: 50%; pointer-events: none;
  background: var(--pop) center / cover no-repeat; box-shadow: 0 2px 8px rgba(42, 33, 24, 0.3); }

/* Sticky cart bar (mobile) */
.cart-bar {
  position: sticky; bottom: 0; z-index: 9;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(243, 235, 221, 0.97); border-top: 1px solid var(--line);
  animation: bar-up 300ms var(--ease-out);
}
.cart-bar-btn { width: 100%; max-width: 560px; margin: 0 auto; display: flex; justify-content: space-between; background: var(--bar); border-color: var(--bar); }
.cart-bar-btn:hover { background: #3A2E22; border-color: #3A2E22; }
@keyframes bar-up { from { transform: translateY(100%); } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0 36px; font-size: 15px; }
.footer-grid { display: grid; gap: 20px; }
.footer-grid p + p { margin-top: 6px; }
.footer-title { font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.footer-links { margin: 6px 0 0; padding-left: 20px; }
.footer-links li { padding: 3px 0; }
.footer-links li::marker { color: var(--muted); }
.footer-links a { display: inline-block; padding: 2px 0; }
.footer-links .all { font-weight: 600; }

/* Sheets (dialogs) */
dialog.sheet {
  width: 100%; max-width: 560px; max-height: 92dvh;
  margin: auto auto 0; padding: 0; border: 0;
  border-radius: 16px 16px 0 0;
  background: var(--bg); color: var(--text);
  box-shadow: 0 -4px 24px rgba(27, 31, 29, 0.12);
}
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-up 340ms var(--ease-out); }
dialog.sheet::backdrop { background: rgba(42, 33, 24, 0.5); }
dialog.sheet[open]::backdrop { animation: fade-in 260ms var(--ease); }
/* Closing: slide back down (app.js waits for this, then closes). */
dialog.sheet.closing { animation: sheet-down 240ms var(--ease) forwards; }
dialog.sheet.closing::backdrop { animation: fade-out 240ms var(--ease) forwards; }
/* Item opened from a card: the sheet's paper fades in while a copy of the photo travels out of the
   card (app.js). Only the paper fades, so the photo never turns see-through. */
dialog.sheet.zoom[open] { animation: bg-fill 240ms var(--ease) backwards; }
dialog.sheet.zoom[open] .sheet-head { animation: fade-in 220ms var(--ease) backwards; }
@keyframes bg-fill { from { background-color: transparent; box-shadow: none; } }
.zoom-clone { position: fixed; z-index: 2; margin: 0; object-fit: cover; background: var(--placeholder); transform-origin: 0 0; pointer-events: none; border-radius: var(--radius); }
/* ...and closing is the reverse: text and sheet fade away while the photo shrinks back into its card. */
dialog.sheet.zoom.closing[open] { animation: bg-clear 200ms var(--ease) forwards; box-shadow: none; }
dialog.sheet.zoom.closing .sheet-head,
dialog.sheet.zoom.closing #pdBody > :not(:first-child) { animation: fade-out 150ms var(--ease) forwards; }
@keyframes bg-clear { to { background-color: transparent; } }
.rise > :not(:first-child) { animation: rise 360ms var(--ease-out) backwards; }
.rise > :nth-child(2) { animation-delay: 60ms; } .rise > :nth-child(3) { animation-delay: 100ms; }
.rise > :nth-child(4) { animation-delay: 140ms; } .rise > :nth-child(n+5) { animation-delay: 180ms; }
/* Cart lines arrive one by one when the cart opens. */
.stagger .line { animation: rise 340ms var(--ease-out) backwards; }
.stagger .line:nth-child(2) { animation-delay: 50ms; } .stagger .line:nth-child(3) { animation-delay: 100ms; }
.stagger .line:nth-child(4) { animation-delay: 150ms; } .stagger .line:nth-child(n+5) { animation-delay: 200ms; }
.sheet-head {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line);
}
.sheet-head .icon-btn:first-child { margin-left: -8px; }
.sheet-title { font-size: 19px; flex: 1; }
.sheet-body {
  overflow-y: auto; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom));
  scrollbar-width: thin; scrollbar-color: var(--card-line) transparent;
}
/* While a sheet animates in or out, hide its scrollbar so it never hangs in the air on its own. */
dialog.sheet.closing .sheet-body, dialog.sheet.tripping .sheet-body { overflow: hidden; }
.view { animation: fade-in 200ms var(--ease); }
.sheet-foot { position: sticky; bottom: -16px; background: var(--bg); padding: 12px 0 4px; margin-top: 8px; }

/* Product detail */
.pd-thumb { border-radius: var(--radius); margin-bottom: 14px; aspect-ratio: 4 / 3; }

/* More photos: "1/4" on the card; swipe or ‹ › on the item page */
.thumb { position: relative; }
.thumb-count {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(42, 33, 24, 0.78); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.5;
}
.gallery { position: relative; margin-bottom: 14px; }
.g-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.g-track::-webkit-scrollbar { display: none; }
.g-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 3; }
.g-nav {
  position: absolute; top: calc(50% - 32px); width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 253, 248, 0.94); color: var(--text);
  font-size: 26px; line-height: 1; display: grid; place-items: center; padding: 0 0 3px; cursor: pointer;
}
.g-prev { left: 8px; }
.g-next { right: 8px; }
.g-nav:disabled { opacity: 0; pointer-events: none; }
.g-count { text-align: center; font-size: 14px; color: var(--muted); margin-top: 6px; }
.g-swipe { display: none; }
@media (hover: none) and (pointer: coarse) { .g-swipe { display: inline; } }
.pd-hindi { color: var(--muted); }
.pd-price { font-size: 18px; margin: 6px 0 10px; }
.pd-desc { margin-bottom: 16px; }
.pd-limits { font-size: 14px; color: var(--muted); margin-bottom: 16px; }

/* Cart */
.lines { list-style: none; margin: 0; padding: 0; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line-name { font-weight: 600; }
.line-sub { font-size: 14px; color: var(--muted); }
.line-total { font-weight: 600; text-align: right; }
.line-ctrl { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.line-ctrl .stepper { width: 168px; }
.summary { margin: 16px 0 4px; display: grid; gap: 6px; }
.summary-row { display: flex; justify-content: space-between; }
.summary-total { font-weight: 700; font-size: 18px; padding-top: 8px; border-top: 1px solid var(--line); }
.free { color: var(--accent); font-weight: 600; }
.warn {
  margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--text);
  border-radius: 8px; background: var(--surface); font-size: 15px;
}
.empty { text-align: center; padding: 24px 0; }
.empty p { margin-bottom: 16px; color: var(--muted); }

/* Form */
.field { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.field > label, legend { display: block; font-weight: 600; margin-bottom: 6px; padding: 0; }
input:not([type=checkbox]):not([type=radio]), textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius);
  font-size: 16px; transition: border-color 150ms var(--ease);
}
textarea { resize: vertical; min-height: 88px; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); border-radius: 10px; }
[aria-invalid=true] { border-color: var(--error) !important; }
.prefix-input { display: flex; align-items: stretch; }
.prefix-input span {
  display: grid; place-items: center; padding: 0 12px;
  border: 1px solid var(--field-line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--placeholder);
}
.prefix-input input { border-radius: 0 10px 10px 0 !important; }
.hint { font-size: 14px; color: var(--muted); margin-top: 4px; }
.err { font-size: 14px; color: var(--error); margin-top: 4px; font-weight: 500; }
.err:empty { display: none; }
.check { display: flex; align-items: flex-start; gap: 12px; }
.check label { font-weight: 500; padding-top: 10px; }
.check input, .radio input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
.check input { margin-top: 11px; }
.radios { display: grid; gap: 8px; }
.radio {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 500;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio { padding-top: 10px; padding-bottom: 10px; }
.radio-text { display: grid; gap: 2px; }
.radio-sub { font-size: 14px; font-weight: 400; color: var(--muted); }
.radio-row { position: relative; }
.radio-row .radio { padding-right: 56px; }
.info-btn {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--accent); cursor: pointer;
}
.info-btn:hover, .info-btn[aria-expanded=true] { background: var(--accent-soft); }
.info-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.info-note {
  padding: 12px 14px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); font-size: 15px; line-height: 1.5;
}
.pickup-box { margin: 0 0 18px; padding: 14px; border-radius: 10px; background: var(--accent-soft); }
.pickup-title { font-weight: 600; margin-bottom: 4px; }
.pay-box { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 16px; }
.pay-box > p { margin-bottom: 10px; }
.upi-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--placeholder); margin-bottom: 12px; }
.upi-row code { font-family: inherit; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; flex: 1 1 100%; }
.upi-row .btn { min-height: 40px; padding: 0 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#turnstile:not(:empty) { margin-bottom: 16px; }
.alert {
  margin: 0 0 12px; padding: 14px; border-radius: 10px; scroll-margin-bottom: 104px;
  border: 1px solid var(--error); background: #FBF1EF;
}
.alert p + p, .alert p + .btn { margin-top: 10px; }

/* Location + WhatsApp confirm */
.loc-btn { width: 100%; }
.loc.is-set .loc-btn { border-color: var(--line); color: var(--text); }
#locStatus.is-ok { color: var(--accent); font-weight: 500; }
#locStatus.is-warn { color: var(--error); font-weight: 500; }
/* "Order again" card above the shop (last order on this phone) */
.again {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px;
  background: var(--surface); border: 1px dashed var(--card-line); border-radius: var(--radius);
}
.again-text { flex: 1; min-width: 0; }
.again-title { font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.again-items { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.again .btn { flex: none; min-height: 44px; }
.me-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
.me-note .link-btn { min-height: 0; padding: 0; color: var(--text); }
.install-box { padding: 14px; border: 1px dashed var(--card-line); border-radius: 12px; margin: 16px 0; font-size: 15px; }
.install-box p { margin: 0 0 10px; }
.install-box p:last-child { margin: 0; }
.install-box svg { vertical-align: -2px; }

/* Success */
.ok-id { font-family: var(--font-head); font-size: 30px; font-weight: 700; margin: 4px 0 12px; }
/* Order placed: the circle and the tick draw themselves, then the order number rises. */
.ok-tick { display: grid; place-items: center; margin: 4px 0 10px; }
.ok-tick svg { width: 72px; height: 72px; animation: settle 450ms var(--ease-pop) 700ms; }
.ok-tick circle { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 214; animation: draw 500ms var(--ease-out) backwards; }
.ok-tick path { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; animation: draw 320ms var(--ease-out) 420ms backwards; }
.ok-tick circle { --len: 214; } .ok-tick path { --len: 44; }
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes settle { 45% { transform: scale(1.08); } }
.ok-rise { animation: rise 380ms var(--ease-out) 650ms backwards; }
.ok-label { font-size: 14px; color: var(--muted); }
.ok-call { margin: 12px 0; font-size: 16px; }
.ok-promise { padding: 14px; background: var(--accent-soft); border-radius: 10px; margin-bottom: 16px; }
.ok-hint { margin-top: 14px; }
.ok-actions { display: grid; gap: 10px; margin-top: 20px; }

@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .intro h1 { font-size: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1.6fr; gap: 32px; }
  :root { --head-h: 64px; }
  .shop-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand search cart"; grid-template-rows: 48px; gap: 0 28px; }
  .intro { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
  .ticker.promo, .wx-note { flex: 0 0 100%; }
  .promo .ticker-run li { font-size: 26px; padding: 14px 0; }
  .shop-status { margin: 0; flex: none; }
  .ticker { flex: 1; min-width: 0; }
  .cart-bar { display: none !important; }
  dialog.sheet { margin: auto; border-radius: 16px; max-height: 86vh; }
  dialog.sheet[open] { animation: sheet-in 260ms var(--ease-out); }
  dialog.sheet.closing { animation: sheet-out 200ms var(--ease) forwards; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
  @keyframes sheet-out { to { opacity: 0; transform: translateY(12px) scale(0.98); } }
}

/* Big screens: wider page and 5-6 items in a row (like Amazon). */
@media (min-width: 1100px) {
  .wrap.wide { max-width: 1360px; }
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1300px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; }
  /* No movement wanted: show the delivery line as plain wrapped text. */
  .ticker { padding: 8px 12px; }
  .ticker-run, .ticker-run ul { width: auto; flex-wrap: wrap; }
  .ticker-run li { white-space: normal; padding: 2px 0; }
  .ticker-run ul[aria-hidden], .ticker-run li[data-repeat], .ticker-btn { display: none; }
}

/* ---------- Shop policies page (/policies, functions/policies.js) ---------- */
.policies { max-width: 760px; padding-top: 24px; padding-bottom: 48px; }
.policies h1 { font-size: 30px; }
.pol-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pol-top-back { flex: none; gap: 4px; padding: 0 14px 0 8px; }
.policies h2 { font-size: 21px; margin: 0 0 10px; }
.policies section { background: var(--surface); border: 1.5px dashed var(--card-line); border-radius: var(--radius); padding: 18px 18px 16px; margin-top: 16px; scroll-margin-top: 156px; }
.policies ul { margin: 0; padding-left: 20px; }
.policies li + li { margin-top: 8px; }
.policies section > p + ul, .policies section > dl + p { margin-top: 10px; }
.policies dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.policies dt { font-weight: 600; }
.policies dd { margin: 0; overflow-wrap: anywhere; }
/* The row of section chips: sticky under the header like the shop's categories, same sliding pill (policies.js). */
.pol-nav { position: sticky; top: 64px; z-index: 8; margin: 14px -16px 0; padding: 4px 16px 6px; background: var(--bg); border-bottom: 1px solid var(--line); }
.pol-nav .chips { padding: 6px 0 4px; }
.pol-nav .chip { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
.pol-nav .chip.is-active { color: var(--on-accent); }
.policies h1, .policies > p.muted { animation: rise 360ms var(--ease-out) backwards; }
.policies > p.muted { animation-delay: 60ms; }
/* Sections rise in as they come into view (once), and the one a chip jumps to glows briefly. */
.policies section.reveal { transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.policies section.reveal.later { opacity: 0; transform: translateY(16px); }
.policies section.flash { animation: pol-flash 650ms var(--ease-out); }
@keyframes pol-flash { from { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47, 93, 58, 0.22); } }
.pol-back { margin-top: 24px; }
@media (max-width: 380px) { .policies dl { grid-template-columns: 1fr; gap: 2px; } .policies dd { margin-bottom: 8px; } }
.policy-note { text-align: center; margin: 8px 0 0; }
/* Packed item facts in the item sheet (net quantity, maker, country of origin). */
.pd-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 12px 0 10px; font-size: 14px; color: var(--muted); }
.pd-facts dt { font-weight: 600; }
.pd-facts dd { margin: 0; overflow-wrap: anywhere; }
/* Moving between the shop and its policies page: a soft cross-fade (browsers with cross-page view transitions). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }