/* ==========================================================================
   Sharma Kirana - application styles
   Consumes css/tokens.css exclusively. No raw hex values below this line.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--sp-4); z-index: var(--z-palette);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-btn);
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  text-decoration: none; transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { top: var(--sp-4); }

/* One consistent focus treatment everywhere. Never removed, only styled. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--sp-8); } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); white-space: nowrap;            /* CTA wrap ban */
  border-radius: var(--r-btn);
  font-weight: 600; font-size: var(--text-md);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-1); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--sh-2); }

.btn-wa { background: var(--wa-500); color: #fff; box-shadow: var(--sh-1); }
.btn-wa:hover:not(:disabled) { background: var(--wa-600); box-shadow: var(--sh-2); }

.btn-ghost {
  background: var(--surface); color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }

.btn-quiet { background: var(--surface-hover); color: var(--text); }
.btn-quiet:hover:not(:disabled) { background: var(--border); }

.btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--text-lg); }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-btn);
  color: var(--text-muted);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  position: relative;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.sm svg { width: 16px; height: 16px; }
.icon-btn.wa-btn { color: var(--wa-500); }
.icon-btn.wa-btn:hover { background: color-mix(in srgb, var(--wa-500) 10%, transparent); color: var(--wa-600); }

kbd {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  padding: 2px 5px; border-radius: 5px;
  background: var(--surface-hover); color: var(--text-subtle);
  border: 1px solid var(--border);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--surface); } }
.site-header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--sh-1); }

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--sp-4);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.brand-mark { display: grid; place-items: center; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: var(--text-lg); font-weight: 800; letter-spacing: var(--tracking-tight); }
.brand-sub { font-size: var(--text-xs); color: var(--text-subtle); font-weight: 500; }

.header-nav { display: none; gap: var(--sp-1); margin-left: var(--sp-4); }
@media (min-width: 900px) { .header-nav { display: flex; } }
.nav-item {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-text); }

.header-actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
/* WhatsApp is a duplicate route on small screens; the FAB covers it. */
@media (max-width: 560px) { .header-actions .wa-btn { display: none; } }

.cart-btn {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--r-btn);
  background: var(--accent); color: var(--on-accent);
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.cart-btn:hover { background: var(--accent-hover); }
.cart-btn:active { transform: scale(.94); }
.cart-btn svg { width: 21px; height: 21px; }
.cart-btn.is-bumped { animation: bump var(--dur-4) var(--ease-spring); }
@keyframes bump {
  0% { transform: scale(1); } 30% { transform: scale(1.16); } 60% { transform: scale(.96); } 100% { transform: scale(1); }
}
.cart-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--marigold-500); color: #241a05;
  font-size: var(--text-2xs); font-weight: 800; font-family: var(--font-mono);
  border: 2px solid var(--surface);
}

/* ==========================================================================
   Hero: statement + aisle grid
   ========================================================================== */
.hero { padding-block: var(--sp-10) var(--sp-12); }
@media (min-width: 960px) { .hero { padding-block: var(--sp-12) var(--sp-16); } }

.hero-head { max-width: 62ch; margin-bottom: var(--sp-10); }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 700; color: var(--accent-text);
  background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok-500) 22%, transparent);
}

.hero-title {
  font-size: clamp(1.9rem, 4.6vw, 3.25rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.06;
  margin-bottom: var(--sp-4);
}
.hero-sub {
  font-size: var(--text-lg); color: var(--text-muted);
  max-width: 50ch; margin-bottom: var(--sp-8);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Aisle tiles: the shop's range, and its fastest navigation --- */
.aisles {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .aisles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .aisles { grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); } }

.aisle {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden; text-align: left;
  padding: 0; isolation: isolate;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.aisle:hover { border-color: var(--border-strong); box-shadow: var(--sh-3); transform: translateY(-3px); }
.aisle:active { transform: translateY(-1px) scale(.995); }

/* Active aisle: a ring rather than a fill, so the artwork stays legible. */
.aisle.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-border), var(--sh-2); }

.aisle-art {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  overflow: hidden; background: var(--surface-2);
}
.aisle-art svg { width: 78%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .aisle-art svg { transition: transform var(--dur-4) var(--ease-out); }
  .aisle:hover .aisle-art svg { transform: scale(1.07) rotate(-1.5deg); }
}

.aisle-foot {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.aisle-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.aisle-label {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aisle-count { font-size: var(--text-xs); color: var(--text-subtle); font-family: var(--font-mono); }

/* Arrow slides in on hover/focus to signal the tile is navigable */
.aisle-go {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
.aisle-go svg { width: 14px; height: 14px; }
.aisle:hover .aisle-go,
.aisle:focus-visible .aisle-go,
.aisle.is-active .aisle-go { opacity: 1; transform: none; }
.aisle.is-active .aisle-go { background: var(--accent); color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) {
  .aisle-go { opacity: 1; transform: none; }
}

/* ==========================================================================
   Filter bar
   ========================================================================== */
.filterbar {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid var(--border);
  padding-block: var(--sp-3);
}
@supports not (backdrop-filter: blur(1px)) { .filterbar { background: var(--bg); } }

.filterbar-inner { display: flex; align-items: center; gap: var(--sp-4); }

/* Chips lead: browsing aisles is how people shop a kirana, so they get the
   space and the size. The row scrolls rather than wraps at every width. */
.chips {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  flex: 1 1 auto; min-width: 0;
  padding-block: var(--sp-2);
  scroll-padding-inline: var(--sp-5);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--text-md); font-weight: 600; color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
  min-height: 44px;                            /* comfortable tap target */
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.chip:active { transform: scale(.97); }
.chip svg { width: 16px; height: 16px; }
.chip .chip-n {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--text-subtle); background: var(--surface-hover);
  padding: 1px 7px; border-radius: var(--r-pill);
}
.chip.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.chip.is-active .chip-n { background: rgb(255 255 255 / .22); color: currentColor; }

/* Tools cluster sits at the right and never shrinks the chips. */
.filter-tools { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* ---------- Collapsed search ----------
   Width animates from 0 so opening it does not reflow the chip row. The input
   is removed from the tab order while closed (tabindex="-1" in the markup) and
   restored on open, so keyboard users are never sent to a hidden field. */
.search-field {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-input); padding: 0 var(--sp-3);
  height: 44px; width: 0; max-width: 0; opacity: 0;
  overflow: hidden; pointer-events: none;
  transition: max-width var(--dur-3) var(--ease-out),
              opacity var(--dur-2) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.filterbar.is-open .search-field {
  max-width: 260px; width: 260px; opacity: 1; pointer-events: auto;
}
.search-field:focus-within {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 20%, transparent);
}
.search-field svg { width: 17px; height: 17px; color: var(--text-subtle); flex-shrink: 0; }
.search-field input {
  border: 0; background: none; outline: none; width: 100%; min-width: 0;
  font-size: var(--text-sm); color: var(--text);
}
.search-field input::placeholder { color: var(--text-subtle); }

#searchToggle { width: 44px; height: 44px; }
#searchToggle .ic-close { display: none; width: 18px; height: 18px; }
.filterbar.is-open #searchToggle > svg:first-child { display: none; }
.filterbar.is-open #searchToggle .ic-close { display: block; }

/* Below 900px the bar is one scrollable row: chips take the width and the
   tools sit flush right, with sort dropped to keep the row usable. */
@media (max-width: 900px) {
  .filterbar-inner { gap: var(--sp-2); }
  .filterbar.is-open .search-field { max-width: 170px; width: 170px; }
}
/* Between 900 and 700 the tools would otherwise hold ~325px and squeeze the
   chips below half the bar. Collapse sort to its icon-only footprint here so
   chips keep priority until the field itself is dropped. */
@media (max-width: 820px) {
  .select-wrap select { padding-inline: var(--sp-3); max-width: 116px; }
}
@media (max-width: 700px) {
  .search-field { display: none; }             /* palette covers search here */
  .select-wrap { display: none; }
}

.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  height: 40px; padding: 0 calc(var(--sp-6) + 6px) 0 var(--sp-4);
  border-radius: var(--r-input); border: 1px solid var(--border);
  background: var(--surface); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; outline: none;
}
.select-wrap select:focus-visible { border-color: var(--focus-ring); }
.select-wrap > svg {
  position: absolute; right: var(--sp-3); width: 15px; height: 15px;
  color: var(--text-subtle); pointer-events: none;
}
@media (max-width: 560px) { .select-wrap { display: none; } }

.view-toggle {
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface-hover); border-radius: var(--r-input);
}
.view-toggle button {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; color: var(--text-subtle);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.view-toggle button svg { width: 17px; height: 17px; }
.view-toggle button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
@media (max-width: 700px) { .view-toggle { display: none; } }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: var(--sp-10); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.section-title { font-size: var(--text-2xl); font-weight: 800; }
.section-sub { font-size: var(--text-sm); color: var(--text-subtle); margin-top: 2px; }
.rail-nav { display: flex; gap: var(--sp-1); }
@media (max-width: 700px) { .rail-nav { display: none; } }

/* ---------- Best sellers rail ---------- */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 190px;
  gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-4);
  scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-padding-inline: var(--sp-5);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (max-width: 560px) { .rail { grid-auto-columns: 158px; gap: var(--sp-3); } }

/* ==========================================================================
   Product card
   --------------------------------------------------------------------------
   Structure, top to bottom:
     media   square, holds the illustration, deal ribbon and out-of-stock flag
     body    unit chip, name, price row, action
   The price row owns `margin-top:auto`, so every card in a row aligns its
   price on the same baseline regardless of how many lines the name takes.

   Hover is deliberately restrained: a warm wash fades in behind the body, a
   hairline rule draws across, the art lifts slightly, and the border warms.
   Four small coordinated moves read as one considered gesture. No springs,
   no looping motion, nothing that distracts across a 32-card grid.
   ========================================================================== */
.grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
@media (max-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }

.grid.is-list { grid-template-columns: 1fr; gap: var(--sp-3); }

.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}

/* Warm wash. Sits behind the content, fades in on hover, and gives the card a
   sense of being lit from the top without any shadow glow. */
.pcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 4%, transparent) 0%,
    transparent 42%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
  pointer-events: none;
}
.pcard:hover::after { opacity: 1; }

.pcard:hover {
  border-color: var(--border-strong);
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
}
.pcard:active { transform: translateY(-1px); }
.pcard.is-out { opacity: .58; }
.pcard.is-out:hover { transform: none; box-shadow: var(--sh-2); }

/* In-cart and out-of-stock cards never lift, so the grid holds still while
   the user works through a list. */
.pcard.is-in-cart { border-color: var(--accent); }
.pcard.is-in-cart:hover { box-shadow: 0 0 0 1px var(--accent), var(--sh-3); }

/* ---------- Media ---------- */
.pcard-media {
  position: relative; aspect-ratio: 1; background: var(--surface-2);
  display: grid; place-items: center; overflow: hidden;
}
.pcard-media svg.art {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 58%;
}
@media (prefers-reduced-motion: no-preference) {
  .pcard-media svg.art { transition: transform var(--dur-4) var(--ease-out); }
  .pcard:hover .pcard-media svg.art { transform: scale(1.045); }
}

/* Deal ribbon: a flat tag in the top-left, squared on the inner edge so it
   reads as a label on the product rather than a floating pill. */
.badge {
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center;
  padding: 4px var(--sp-3) 4px var(--sp-3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--text-2xs); font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--sh-1);
}

.badge-oos {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-2);
  font-size: var(--text-2xs); font-weight: 700; text-align: center;
  letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--warm-900) 88%, transparent);
  color: #fff;
  backdrop-filter: blur(3px);
}

/* ---------- Body ---------- */
.pcard-body {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  flex: 1;
}

/* Unit chip: the single most decision-relevant fact after price, so it gets
   its own treatment instead of sitting as grey text above the name. */
.pcard-unit {
  align-self: flex-start;
  font-size: var(--text-2xs); font-weight: 700;
  font-family: var(--font-mono); letter-spacing: .02em;
  color: var(--text-subtle);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  padding: 2px var(--sp-2); border-radius: var(--r-sm);
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.pcard:hover .pcard-unit {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.pcard-name {
  font-size: var(--text-sm); font-weight: 600; line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}

/* Price row. `margin-top:auto` keeps prices on one baseline across a row when
   product names run to one line vs two.
   No wrapping: the three parts are short (price, MRP, saving) and always fit
   on one line at desktop widths. The savings chip is the dispensable one, so
   it collapses first as the card narrows rather than forcing a second line. */
.pcard-price {
  display: flex; align-items: baseline;
  gap: var(--sp-2);
  margin-top: auto; padding-top: var(--sp-1);
  flex-wrap: nowrap;
  min-width: 0;
}
.price-now {
  font-size: var(--text-lg); font-weight: 800;
  font-family: var(--font-mono); letter-spacing: -.03em;
  color: var(--price);
  flex-shrink: 0;
}
.price-was {
  font-size: var(--text-xs); color: var(--text-subtle);
  text-decoration: line-through; font-family: var(--font-mono);
  flex-shrink: 0;
}
/* Amount saved, in the deal colour, so the discount reads as a fact rather
   than decoration. Only rendered when the saving clears ₹10.
   It yields before the price or MRP ever do. */
.price-save {
  font-size: var(--text-2xs); font-weight: 700;
  color: var(--deal-text);
  background: var(--deal-bg);
  padding: 1px var(--sp-2); border-radius: var(--r-sm);
  font-family: var(--font-mono);
  white-space: nowrap;
  flex: 0 1 auto;
  overflow: hidden;
}
/* Below ~230px of card the row cannot hold all three comfortably; drop the
   least important one instead of wrapping to a second line. */
@media (max-width: 620px) {
  .pcard-price .price-save { display: none; }
}
/* The MRP is the next to go on the narrowest cards, leaving price alone. */
@media (max-width: 380px) {
  .pcard-price .price-was { display: none; }
}

.pcard-action { margin-top: var(--sp-1); }

.pcard-action { margin-top: var(--sp-2); }

/* Quantity stepper, used on cards and in the cart */
.stepper {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
  border-radius: var(--r-btn); padding: 3px; height: 38px;
}
.stepper button {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 7px; color: var(--accent-text);
  transition: background var(--dur-1) var(--ease-out);
}
.stepper button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.stepper button:active { transform: scale(.9); }
.stepper button svg { width: 15px; height: 15px; }
.stepper .qty {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--text-md);
  color: var(--accent-text); min-width: 22px; text-align: center;
}

/* ---------- List layout ---------- */
/* List layout: one horizontal row per product. The unit chip and name stack in
   a flexible middle column, price and action hold the right edge. */
.grid.is-list .pcard { flex-direction: row; align-items: center; gap: var(--sp-4); padding-right: var(--sp-4); }
.grid.is-list .pcard:hover { transform: none; box-shadow: var(--sh-2); }
.grid.is-list .pcard-media { width: 88px; aspect-ratio: 1; flex-shrink: 0; border-radius: var(--r-card) 0 0 var(--r-card); }
.grid.is-list .pcard-body {
  flex-direction: row; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0; flex: 1; min-width: 0;
}
.grid.is-list .pcard-unit { order: 1; align-self: center; flex-shrink: 0; }
.grid.is-list .pcard-name {
  order: 2; -webkit-line-clamp: 1; min-height: 0;
  flex: 1; font-size: var(--text-md); margin-inline-end: auto;
}
.grid.is-list .pcard-price { order: 3; margin: 0; padding: 0; flex-shrink: 0; flex-wrap: nowrap; }
.grid.is-list .pcard-action { order: 4; margin: 0; width: 132px; flex-shrink: 0; }
/* The savings chip is redundant once the MRP is on the same line. */
.grid.is-list .price-save { display: none; }
@media (max-width: 700px) {
  .grid.is-list .pcard-body { flex-wrap: wrap; gap: var(--sp-2); }
  .grid.is-list .pcard-action { width: 100%; }
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty { text-align: center; padding: var(--sp-16) var(--sp-4); }
.empty-art { display: grid; place-items: center; margin-bottom: var(--sp-5); }
.empty h3 { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.empty p { color: var(--text-muted); max-width: 42ch; margin: 0 auto var(--sp-6); font-size: var(--text-sm); }

/* ==========================================================================
   Shop info
   ========================================================================== */
.shopinfo { background: var(--surface-2); border-top: 1px solid var(--border); margin-top: var(--sp-16); }
.shopinfo-inner { display: grid; gap: var(--sp-10); padding-block: var(--sp-16); }
@media (min-width: 860px) { .shopinfo-inner { grid-template-columns: 1fr 1.1fr; gap: var(--sp-16); } }
.shopinfo-title { font-size: var(--text-3xl); margin-bottom: var(--sp-4); }
.shopinfo-body { color: var(--text-muted); max-width: 46ch; }

.shopinfo-list { display: grid; gap: var(--sp-6); }
@media (min-width: 620px) { .shopinfo-list { grid-template-columns: repeat(2, 1fr); } }
.shopinfo-list.stacked { grid-template-columns: 1fr; gap: var(--sp-5); }
.shopinfo-list dt {
  font-size: var(--text-xs); font-weight: 700; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--sp-1);
}
.shopinfo-list dd { font-size: var(--text-md); font-weight: 500; }

/* ==========================================================================
   Page head / views
   ========================================================================== */
.view { display: none; }
.view.is-current { display: block; animation: viewin var(--dur-3) var(--ease-out); }
@keyframes viewin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { padding-block: var(--sp-10) var(--sp-6); }
.page-title { font-size: var(--text-4xl); }
.page-sub { color: var(--text-muted); margin-top: var(--sp-2); }


/* ---------- About ---------- */
.about-grid { display: grid; gap: var(--sp-8); padding-bottom: var(--sp-16); }
@media (min-width: 860px) { .about-grid { grid-template-columns: 1.3fr 1fr; } }
.about-map {
  border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--border); aspect-ratio: 4 / 3; background: var(--surface-2);
}
.about-detail { display: grid; gap: var(--sp-6); align-content: start; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  align-items: center; justify-content: space-between;
  padding-block: var(--sp-8); font-size: var(--text-sm); color: var(--text-muted);
}
.footer-meta { font-size: var(--text-xs); color: var(--text-subtle); }

/* ==========================================================================
   Cart sheet
   ========================================================================== */
.sheet-root, .modal-root, .palette-root { position: fixed; inset: 0; z-index: var(--z-sheet); }
.modal-root { z-index: var(--z-modal); }
.palette-root { z-index: var(--z-palette); }

.scrim {
  position: absolute; inset: 0; background: var(--scrim);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fadein var(--dur-2) var(--ease-out);
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%); display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--sh-4);
  animation: slidein var(--dur-3) var(--ease-out);
}
@keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }

.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-5); border-bottom: 1px solid var(--border);
}
.sheet-title { font-size: var(--text-xl); }
.sheet-sub { font-size: var(--text-sm); color: var(--text-subtle); margin-top: 2px; }
.sheet-body { flex: 1; overflow-y: auto; padding: var(--sp-4); }
.sheet-foot { padding: var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2); display: grid; gap: var(--sp-3); }

/* Cart line */
.cline { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-input); }
.cline + .cline { border-top: 1px solid var(--border); }
.cline-thumb {
  width: 56px; height: 56px; border-radius: var(--r-sm);
  overflow: hidden; flex-shrink: 0; background: var(--surface-2);
}
.cline-thumb svg { width: 100%; height: 100%; }
.cline-info { flex: 1; min-width: 0; }
.cline-name { font-size: var(--text-sm); font-weight: 600; }
.cline-meta { font-size: var(--text-xs); color: var(--text-subtle); font-family: var(--font-mono); margin-top: 2px; }
.cline-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.cline-price { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); }
.cline-remove {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--r-sm); color: var(--bad-500);
  transition: background var(--dur-1) var(--ease-out);
}
.cline-remove:hover { background: color-mix(in srgb, var(--bad-500) 12%, transparent); }
.cline-remove svg { width: 15px; height: 15px; }
.stepper.sm { height: 30px; padding: 2px; }
.stepper.sm button { width: 24px; height: 24px; }
.stepper.sm button svg { width: 13px; height: 13px; }
.stepper.sm .qty { font-size: var(--text-sm); }

.totals { display: grid; gap: var(--sp-2); }
.total-row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-muted); }
.total-row .save { color: var(--ok-500); font-weight: 700; }
.total-row.grand {
  font-size: var(--text-lg); font-weight: 800; color: var(--text);
  padding-top: var(--sp-2); border-top: 1px solid var(--border);
}
.total-row.grand span:last-child { font-size: var(--text-2xl); }

.sheet-note {
  font-size: var(--text-xs); color: var(--warn-500); font-weight: 600;
  background: color-mix(in srgb, var(--warn-500) 10%, transparent);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
}
.sheet-note:empty { display: none; }
.sheet-fine { font-size: var(--text-xs); color: var(--text-subtle); text-align: center; line-height: 1.45; }

/* Cart empty */
.cart-empty { display: grid; gap: var(--sp-4); place-items: center; text-align: center; padding: var(--sp-12) var(--sp-4); }
.cart-empty h3 { font-size: var(--text-lg); }
.cart-empty p { font-size: var(--text-sm); color: var(--text-muted); max-width: 30ch; }

/* ==========================================================================
   Options modal
   ========================================================================== */
.modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100% - var(--sp-8)));
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: var(--sh-4); overflow: hidden;
  animation: modalin var(--dur-3) var(--ease-spring);
}
@keyframes modalin { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.modal-head h2 { font-size: var(--text-lg); }
.modal-body { padding: 0 var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-2); }

.opt-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-input);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
  width: 100%; text-align: left;
}
.opt-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.opt-label { font-weight: 600; }
.opt-price { font-family: var(--font-mono); font-weight: 700; }

/* ==========================================================================
   Command palette
   ========================================================================== */
.palette {
  position: absolute; left: 50%; top: 12vh; transform: translateX(-50%);
  width: min(620px, calc(100% - var(--sp-6)));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--sh-4);
  overflow: hidden; animation: modalin var(--dur-2) var(--ease-out);
  display: flex; flex-direction: column; max-height: 70vh;
}
.palette-input {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
}
.palette-input svg { width: 19px; height: 19px; color: var(--text-subtle); flex-shrink: 0; }
.palette-input input {
  flex: 1; border: 0; background: none; outline: none;
  font-size: var(--text-lg); color: var(--text);
}
.palette-input input::placeholder { color: var(--text-subtle); }
.palette-list { overflow-y: auto; padding: var(--sp-2); flex: 1; }
.palette-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-input); cursor: pointer;
  width: 100%; text-align: left;
}
.palette-item.is-active { background: var(--accent-soft); }
.palette-thumb { width: 34px; height: 34px; border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; background: var(--surface-2); }
.palette-thumb svg { width: 100%; height: 100%; }
.palette-label { flex: 1; font-size: var(--text-sm); font-weight: 600; min-width: 0; }
.palette-hint { font-size: var(--text-xs); color: var(--text-subtle); font-family: var(--font-mono); }
.palette-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-muted); font-size: var(--text-sm); }
.palette-foot {
  display: flex; gap: var(--sp-5); padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--text-xs); color: var(--text-subtle);
}
.palette-foot span { display: flex; align-items: center; gap: 5px; }

/* ==========================================================================
   Sticky cart bar + toasts
   ========================================================================== */
.cartbar {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  z-index: var(--z-toast); width: min(520px, calc(100% - var(--sp-8)));
  animation: barup var(--dur-3) var(--ease-spring);
}
@keyframes barup { from { opacity: 0; transform: translate(-50%, 120%); } to { opacity: 1; transform: translate(-50%, 0); } }
.cartbar-btn {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card);
  background: var(--wa-500); color: #fff; box-shadow: var(--sh-4);
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.cartbar-btn:hover { background: var(--wa-600); }
.cartbar-btn:active { transform: scale(.985); }
.cartbar-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-btn); background: rgb(255 255 255 / .18); flex-shrink: 0; }
.cartbar-icon svg { width: 20px; height: 20px; }
.cartbar-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; line-height: 1.25; }
.cartbar-text strong { font-size: var(--text-md); font-weight: 700; }
.cartbar-text span { font-size: var(--text-xs); opacity: .85; }
.cartbar-total { font-size: var(--text-lg); font-weight: 800; }
.cartbar-chev { width: 18px; height: 18px; opacity: .8; flex-shrink: 0; }

.toast-stack {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5);
  z-index: var(--z-toast); display: grid; gap: var(--sp-2); justify-items: end;
}
@media (max-width: 560px) { .toast-stack { left: var(--sp-4); right: var(--sp-4); justify-items: stretch; } }
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-input);
  background: var(--warm-900); color: #fff; box-shadow: var(--sh-3);
  font-size: var(--text-sm); font-weight: 500;
  animation: toastin var(--dur-3) var(--ease-spring);
  max-width: 360px;
}
@keyframes toastin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.toast.is-out { animation: toastout var(--dur-2) var(--ease-out) forwards; }
@keyframes toastout { to { opacity: 0; transform: translateY(6px) scale(.97); } }
.toast-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-500); flex-shrink: 0; }
.toast-icon svg { width: 13px; height: 13px; }

/* ==========================================================================
   Skeleton loading
   ========================================================================== */
.skel { background: var(--skeleton-a); border-radius: var(--r-card); overflow: hidden; position: relative; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-b), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skel-card { height: 292px; }