/* =====================================================================
   HERO
   Shorter than the old one and no longer full-bleed theatre: a band of
   forest green, one headline, one line of copy, two small buttons.
   ===================================================================== */
.hero {
  position: relative;
  background: var(--green-900);
  color: var(--white);
  overflow: hidden;
  min-height: clamp(400px, 60vh, 560px);
  display: flex;
  align-items: center;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* The first layer is a solid band in exactly the announcement bar's
     green, fading out over the top 160px. Without it the backdrop's
     lighter gradient met the solid bar above in a visible seam. */
  background:
    linear-gradient(180deg, var(--green-900) 0%, var(--green-900) 56px, transparent 160px),
    linear-gradient(100deg, rgba(18,39,26,.95) 0%, rgba(18,39,26,.82) 45%, rgba(18,39,26,.55) 100%);
}
/* Over a real photograph the scrim only has to protect the headline on the
   left; the right-hand side stays open so the picture is actually visible. */
.hero--photo .hero__media::after {
  background:
    linear-gradient(180deg, var(--green-900) 0%, var(--green-900) 56px, transparent 160px),
    linear-gradient(100deg, rgba(18,39,26,.93) 0%, rgba(18,39,26,.74) 38%, rgba(18,39,26,.28) 72%, rgba(18,39,26,.12) 100%);
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.hero__content { max-width: 38rem; display: grid; gap: var(--sp-4); }

.hero .eyebrow { color: var(--gold-400); }

.hero h1 {
  color: var(--white);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
/* The second sentence is the signature: Playfair's italic set in a soft
   gold gradient, so it reads as foil-stamped rather than merely coloured.
   Browsers without background-clip get the flat gold. */
.hero h1 .accent {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-400);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 .accent {
    background: linear-gradient(92deg, var(--gold-200) 0%, var(--gold-400) 45%, #E9C97A 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: none;                  /* WebKit would paint it over the fill */
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35));
    padding: .04em .1em .08em 0;        /* room for italic overhang and descent */
    line-height: 1.1;
  }
}

/* Phones: the headline was set at the bottom of the fluid scale, which read
   as timid under a tall empty band. It steps up, the band shrinks to its
   content, and the lines get a little more air between them. */
@media (max-width: 720px) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: clamp(2rem, 7vw, 3rem) clamp(2.5rem, 8vw, 3.5rem); }
  .hero__content { gap: var(--sp-3); }
  .hero h1 { font-size: clamp(2.4rem, 11.5vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; }
  .hero h1 .accent { margin-top: .04em; }
  .hero__tagline { font-size: var(--step-1); margin-top: var(--sp-1); }
  .hero__copy { font-size: var(--step-0); }
}

.hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--gold-200);
  letter-spacing: .01em;
}
.hero__tagline::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold-400);
  opacity: .8;
}

.hero__copy {
  font-size: var(--step-0);
  line-height: 1.65;
  color: color-mix(in srgb, var(--white) 76%, transparent);
  max-width: 46ch;
}

/* The hero spice backdrop now lives in effects.css, which owns the whole
   decorative motion layer: placement, 3D tumble, scroll parallax and the
   reduced-motion switches all belong together. */

.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.hero__cta .btn-outline {
  --btn-fg: var(--white);
  --btn-border: color-mix(in srgb, var(--white) 38%, transparent);
  --btn-bg-hover: color-mix(in srgb, var(--white) 12%, transparent);
  --btn-fg-hover: var(--white);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vw, 38px);
  z-index: 3;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  font-size: var(--step--2);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 62%, transparent);
}
.hero__scroll span.line {
  width: 1px; height: 34px;
  background: linear-gradient(var(--gold-400), transparent);
  animation: scroll-hint 2.2s var(--ease) infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; }
  50%      { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}

/* Staggered entrance for the hero copy.
   The visible state is the DEFAULT and the hidden state lives inside the
   keyframes with `backwards` fill. Written the other way round — opacity:0
   in the base rule, revealed by the animation — the headline stays invisible
   on any browser that does not run the animation. */
.hero__content > * {
  animation: hero-in .9s var(--ease-out) backwards;
}
.hero__content > *:nth-child(1) { animation-delay: .12s; }
.hero__content > *:nth-child(2) { animation-delay: .22s; }
.hero__content > *:nth-child(3) { animation-delay: .32s; }
.hero__content > *:nth-child(4) { animation-delay: .42s; }
.hero__content > *:nth-child(5) { animation-delay: .52s; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__content > * { opacity: 1; transform: none; animation: none; }
  .hero__media img { animation: none; }
}

/* Compact hero used on inner pages */
.page-hero {
  position: relative;
  background: var(--green-800);
  color: var(--white);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  text-align: center;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .45;
  mix-blend-mode: overlay;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); font-weight: 400; }
.page-hero p {
  max-width: 58ch;
  margin: var(--sp-4) auto 0;
  color: color-mix(in srgb, var(--white) 80%, transparent);
  font-size: var(--step-1);
}
.page-hero .breadcrumbs { justify-content: center; color: color-mix(in srgb, var(--white) 62%, transparent); }
.page-hero .breadcrumbs a:hover { color: var(--gold-400); }
.page-hero .breadcrumbs [aria-current="page"] { color: var(--gold-400); }

@media (max-width: 640px) {
  /* Height follows the content on phones; a fixed 560px left a tall empty
     band above the headline on the commonest screen sizes. */
  .hero { min-height: 0; text-align: left; }
  .hero__media img { object-position: center 32%; }
  .hero__media::after {
    background:
      linear-gradient(180deg, var(--green-900) 0%, var(--green-900) 56px, transparent 170px),
      linear-gradient(180deg, rgba(18, 39, 26,.72) 0%, rgba(18, 39, 26,.86) 60%, rgba(18, 39, 26,.95) 100%);
  }
  /* Buttons keep their own width on phones too: a pair of stretched
     full-width slabs was the loudest thing on the small layout. */
  .hero__cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero__scroll { display: none; }
}

/* =====================================================================
   CART DRAWER
   ===================================================================== */
.cart-drawer {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 320;
  /* dvh follows the browser's collapsing toolbars; vh does not, and the
     footer ends up under them. */
  height: 100vh;
  height: 100dvh;
  width: min(440px, 92vw);
  background: var(--white);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.cart-drawer__head h3 { font-size: var(--step-2); }
.cart-drawer__head .count { font-size: var(--step--1); color: var(--muted); }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-5);
}

.cart-drawer__foot {
  border-top: 1px solid var(--line);
  padding: var(--sp-5);
  background: var(--cream);
  display: grid;
  gap: var(--sp-3);
  /* A soft lift, so a row cut off behind it reads as "more above" rather
     than as a broken layout. */
  box-shadow: 0 -10px 20px -18px rgba(27, 33, 28, .5);
}
.cart-drawer__body { padding-bottom: var(--sp-5); }

/* Free-shipping progress meter */
.ship-meter { display: grid; gap: var(--sp-2); }
.ship-meter__text { font-size: var(--step--1); color: var(--ink-soft); }
.ship-meter__text b { color: var(--green-700); }
.ship-meter__bar {
  height: 5px;
  background: var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ship-meter__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-600), var(--gold-600));
  border-radius: inherit;
  transition: width .6s var(--ease-out);
}

/* Cart line item */
.cart-line {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line__img {
  width: 78px; height: 78px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--cream-deep);
}
.cart-line__body { display: grid; gap: var(--sp-2); align-content: start; }
.cart-line__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--green-900);
  line-height: 1.25;
}
.cart-line__variant {
  font-size: var(--step--2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cart-line__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}
.cart-line__price { font-weight: 600; color: var(--green-800); white-space: nowrap; }
.cart-line__remove {
  font-size: var(--step--2);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-line__remove:hover { color: var(--danger); }
.cart-line .qty { transform: none; }
.cart-line .qty button { width: 34px; height: 34px; font-size: 1rem; }
.cart-line .qty input { width: 34px; height: 34px; font-size: .85rem; }

/* Totals block, shared by drawer / cart / checkout */
.totals { display: grid; gap: var(--sp-3); }
.totals__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.totals__row.discount { color: var(--success); }
.totals__row .free { color: var(--success); font-weight: 600; }
.totals__grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
}
.totals__grand span:first-child { font-size: var(--step-1); color: var(--green-900); }
.totals__grand span:last-child { font-size: var(--step-3); font-weight: 600; color: var(--green-900); }
.totals__note { font-size: var(--step--2); color: var(--muted); }

/* The product page ran very tall on a phone: a desktop-sized headline and
   price, 1.68 line-height on the summary, and option buttons with desktop
   padding. Everything below tightens the vertical rhythm without shrinking
   any tap target below 40px.
   ------------------------------------------------------------------- */
@media (max-width: 860px) {
  .pdp { gap: var(--sp-5); }
  .pdp-info { gap: var(--sp-3); }
  .pdp-info h1 { font-size: var(--step-3); letter-spacing: -0.01em; }
  .pdp-info .hindi-name { font-size: var(--step-1); line-height: 1.35; }
  .pdp-short { font-size: var(--step-0); line-height: 1.55; }

  .pdp-price { padding-block: 0; gap: var(--sp-2) var(--sp-3); }
  .pdp-price .now { font-size: var(--step-3); }
  .pdp-price .was { font-size: var(--step-0); }

  .variant-group { gap: var(--sp-2); }
  .variant-group + .variant-group { margin-top: var(--sp-1); }
  .variant-options { gap: var(--sp-2); }
  .variant-option {
    min-width: 64px;
    padding: .5rem .85rem;
    min-height: 40px;
  }
  .pdp-sku { margin-top: var(--sp-2) !important; font-size: var(--step--2); }
  .pdp-actions { gap: var(--sp-2); }
  .pdp-assurances { gap: var(--sp-2); }
}

/* On a phone the drawer's footer was taking nearly half the screen, leaving
   a keyhole for the items themselves. Everything here buys back vertical
   room without shrinking a control below a comfortable tap size. */
@media (max-width: 560px) {
  /* Full width: the 8% sliver of page showing beside it served no purpose. */
  .cart-drawer { width: min(440px, 100vw); }
  .cart-drawer__head { padding: var(--sp-4) var(--sp-5); }
  .cart-drawer__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .cart-drawer__foot { padding: var(--sp-4); gap: var(--sp-2); }

  .cart-line { grid-template-columns: 58px 1fr; gap: var(--sp-3); padding-block: var(--sp-3); }
  .cart-line__img { width: 58px; height: 58px; }
  .cart-line__body { gap: 4px; }

  .totals__note { font-size: var(--step--2); }
  .cart-drawer__foot .totals { gap: var(--sp-2); }
}

/* =====================================================================
   TRUST — one lead card and four beside it
   ===================================================================== */
.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--sp-4);
}

.trust-card {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.trust-card:hover { border-color: var(--green-300); box-shadow: var(--shadow); }

.trust-card__index {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--gold-400);
  line-height: 1;
}
.trust-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--green-700);
  background: var(--green-050);
  border: 1px solid color-mix(in srgb, var(--gold-400) 55%, transparent);
  margin-bottom: var(--sp-2);
}
.trust-card h3 { font-size: var(--step-2); }
.trust-card p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; }

/* The lead card is the brand's core promise: dark green, gold icon, larger
   type, and one spice illustration bleeding out of the corner for depth. */
.trust-card--lead {
  grid-row: 1 / 3;
  padding: var(--sp-7) var(--sp-6);
  background: linear-gradient(160deg, var(--green-800) 0%, var(--green-900) 100%);
  border-color: transparent;
  color: var(--white);
  gap: var(--sp-3);
}
.trust-card--lead:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
.trust-card--lead .trust-card__index { color: var(--gold-400); opacity: .9; }
.trust-card--lead .trust-card__icon {
  width: 54px; height: 54px;
  color: var(--green-900);
  background: var(--gold-400);
  border-color: transparent;
}
.trust-card--lead h3 { color: var(--white); font-size: var(--step-3); max-width: 12ch; }
.trust-card--lead p { color: color-mix(in srgb, var(--white) 80%, transparent); font-size: var(--step-1); max-width: 30ch; }
.trust-card--lead .link-arrow { color: var(--gold-400); margin-top: auto; padding-top: var(--sp-3); }
.trust-card--lead .link-arrow:hover { color: var(--white); }
.trust-card__spice {
  position: absolute;
  right: -8%;
  bottom: -6%;
  width: clamp(120px, 14vw, 190px);
  height: auto;
  opacity: .28;
  transform: rotate(-12deg);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .5));
  pointer-events: none;
}

@media (max-width: 900px) {
  /* Rows size to their own content here: the desktop equal-height rows made
     each small card as tall as the lead card, mostly empty. */
  .trust-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .trust-card--lead { grid-column: 1 / -1; grid-row: auto; padding: var(--sp-6) var(--sp-5); }
}
@media (max-width: 480px) {
  .trust-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .trust-card { padding: var(--sp-4); }
  .trust-card__spice { width: 110px; }
}

/* =====================================================================
   ABOUT US — editorial layout
   ===================================================================== */
.about-hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-400);
}
/* The brand seal sits above the headline like a crest. It is the supplied
   logo, untouched — only sized and given a soft halo against the green. */
.about-hero__seal {
  display: block;
  width: clamp(88px, 10vw, 128px);
  height: auto;
  margin: var(--sp-4) auto var(--sp-5);
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .45));
}
@media (max-width: 560px) {
  .about-hero__seal { width: 84px; margin-bottom: var(--sp-4); }
}

/* Story: framed figure with a caption strip, editorial body with a lead
   paragraph and a pull quote. */
.about-story {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.about-story__figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream);
  box-shadow: var(--shadow-lg);
}
.about-story__figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.about-story__figure figcaption {
  position: absolute;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--1);
  color: var(--green-900);
  background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.about-story__mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-050);
  color: var(--green-700);
  flex: none;
}
.about-story__body { display: grid; gap: var(--sp-4); }
.about-story__body h2 { font-size: var(--step-4); }
.about-story__body p { color: var(--ink-soft); line-height: 1.7; }
.about-story__lead {
  font-size: var(--step-1);
  color: var(--ink) !important;
}
.about-story__lead::first-letter {
  font-family: var(--font-display);
  font-size: 3.1em;
  font-weight: 500;
  line-height: .8;
  float: left;
  padding: .12em .12em 0 0;
  color: var(--green-700);
}
.about-story__quote {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--gold-400);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--green-800);
}

/* Process: three numbered steps with a hairline running behind them. */
.about-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  counter-reset: step;
  position: relative;
}
.about-step {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.about-step__num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-600);
}
.about-step h3 { font-size: var(--step-2); margin-top: var(--sp-1); }
.about-step p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.65; }
.about-step::after {
  /* A short gold rule under the numeral. */
  content: '';
  position: absolute;
  top: calc(var(--sp-6) + 2.5rem);
  left: var(--sp-5);
  width: 34px; height: 2px;
  background: var(--gold-400);
  opacity: .8;
}

/* Promises: an intro column and a numbered, ruled list — no boxes. */
.about-promises {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about-promises__intro { display: grid; gap: var(--sp-3); position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
.about-promises__intro h2 { font-size: var(--step-4); }
.promise-list { display: grid; }
.promise {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
}
.promise:last-child { border-bottom: 1px solid var(--line); }
.promise__index {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--gold-600);
  padding-top: .15em;
}
.promise h3 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.promise p { color: var(--ink-soft); line-height: 1.65; }

/* CTA: two of the hero's spice illustrations give the closing band depth. */
.about-cta { overflow: hidden; }
.about-cta__spices { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.about-cta__spices .spice {
  position: absolute;
  width: clamp(90px, 11vw, 170px);
  height: auto;
  opacity: .55;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .45));
}
.about-cta__spices .spice--anise    { top: -6%; left: 6%;  transform: rotate(-14deg); }
.about-cta__spices .spice--cinnamon { bottom: -8%; right: 7%; transform: rotate(18deg); }

@media (max-width: 900px) {
  .about-story, .about-promises { grid-template-columns: 1fr; }
  .about-story__figure { max-width: 460px; margin-inline: auto; }
  .about-promises__intro { position: static; }
  .about-steps { grid-template-columns: 1fr; gap: var(--sp-4); }
  .about-step { padding: var(--sp-5); }
}
@media (max-width: 560px) {
  .about-cta__spices { display: none; }
  .promise { grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--sp-3); padding-block: var(--sp-4); }
}

/* =====================================================================
   MOBILE STICKY BUY BAR
   ===================================================================== */
.buy-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 170;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--white) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.buy-bar.is-visible { transform: translateY(0); }
.buy-bar__price { display: grid; line-height: 1.2; flex: none; }
.buy-bar__price .now { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--green-900); }
.buy-bar__price .label { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.buy-bar .btn { flex: 1; }

@media (max-width: 860px) {
  .buy-bar { display: flex; }
  body.has-buy-bar { padding-bottom: 74px; }
}

/* =====================================================================
   SHOP — filter rail + toolbar
   ===================================================================== */
.shop-layout {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: start;
}

.filter-rail {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: grid;
  gap: var(--sp-5);
  max-height: calc(100dvh - var(--header-h) - var(--sp-8));
  overflow-y: auto;
  padding-right: var(--sp-2);
}

.filter-group { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-5); }
.filter-group:last-child { border-bottom: 0; }

.filter-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: var(--sp-3);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-800);
}
.filter-group__head svg { transition: transform var(--dur) var(--ease); color: var(--gold-600); }
.filter-group[data-open="false"] .filter-group__head svg { transform: rotate(-90deg); }
.filter-group[data-open="false"] .filter-group__body { display: none; }

.filter-group__body { display: grid; gap: var(--sp-3); padding-top: var(--sp-1); }
.filter-group__body .check { font-size: var(--step--1); }
.filter-group__body .check span.count { margin-left: auto; color: var(--muted); font-size: var(--step--2); }
.filter-group__body .check { justify-content: flex-start; }

.price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-2); }
.price-inputs .input { padding: .55rem .7rem; min-height: 42px; font-size: var(--step--1); }
.price-inputs span { color: var(--muted); }

.filter-active {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-5);
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}
.shop-toolbar__count { font-size: var(--step--1); color: var(--muted); }
.shop-toolbar__count b { color: var(--green-800); font-weight: 600; }
.shop-toolbar__right { display: flex; align-items: center; gap: var(--sp-3); }
.shop-toolbar .select { min-height: 44px; padding-block: .5rem; font-size: var(--step--1); width: auto; }

.mobile-filter-bar { display: none; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  /* Cards in a row end level with each other whatever their copy length. */
  align-items: stretch;
}
.product-grid > .product-card { height: 100%; }

@media (max-width: 1024px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filter-rail {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 320;
    width: min(370px, 90vw);
    max-height: none;
    background: var(--white);
    padding: var(--sp-5);
    box-shadow: var(--shadow-drawer);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease-out);
    align-content: start;
    overflow-y: auto;
  }
  .filter-rail.is-open { transform: translateX(0); }
  .mobile-filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
  }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .product-card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  .product-card__title { font-size: var(--step-0); }
  .price__now { font-size: var(--step-1); }
}

/* Two per row all the way down. Below about 420px each card is only ~138px
   wide, so everything inside it has to shrink to match: at the inherited
   sizes the badges ran under the wishlist button and the category label and
   price each wrapped onto an extra line. Nothing here goes under 11px.
   This block also catches a normal phone held at 150% browser zoom, which
   reports the same CSS viewport width. */
@media (max-width: 419px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }

  .product-card__flags { top: 6px; left: 6px; gap: 2px; }
  .product-card__flags .badge {
    font-size: .7rem;
    padding: .12rem .38rem;
    letter-spacing: .02em;
  }
  .product-card__wish { top: 6px; right: 6px; width: 34px; height: 34px; }
  .product-card__wish svg { width: 15px; height: 15px; }

  .product-card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); gap: 3px; }
  .product-card__cat { font-size: .7rem; letter-spacing: .05em; }
  .product-card__title { font-size: .92rem; line-height: 1.22; }
  .product-card__hindi { font-size: .76rem; }
  .product-card__sizes { font-size: .72rem; }

  /* Price above, size count below — always, so the two cards in a row line
     up even when one of them has no struck-through MRP to widen it. */
  .product-card__meta { display: grid; justify-items: start; gap: 2px; padding-top: var(--sp-2); }
  .price { gap: var(--sp-1) .4rem; }
  .price__from { font-size: .7rem; letter-spacing: .04em; }
  .price__now { font-size: 1.05rem; }
  .price__was { font-size: .76rem; }

  .product-card__quick .btn { padding-inline: .5rem; }
}

/* Touch screens never hover, so the quick-add overlay would stay invisible;
   and a desktop window narrowed below the sidebar breakpoint should not lose
   the button either. In both cases it joins the normal flow — and because it
   precedes the body in the DOM (it must overlay the image on desktop), `order`
   moves it to the foot of the card, after the price, where a thumb expects it. */
@media (hover: none), (max-width: 1023px) {
  .product-card { grid-template-rows: auto 1fr auto; }
  .product-card__quick {
    grid-area: 3 / 1;
    align-self: end;
    opacity: 1;
    transform: none;
    margin: 0 var(--sp-4) var(--sp-4);
  }
  .product-card__body { padding-bottom: var(--sp-3); }
}
@media (max-width: 480px) {
  .product-card__quick { margin-inline: var(--sp-3); }
}

/* =====================================================================
   PRODUCT DETAIL
   ===================================================================== */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, clamp(300px, 36vw, 440px)) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: start;
}

.pdp-gallery { position: sticky; top: calc(var(--header-h) + var(--sp-5)); display: grid; gap: var(--sp-4); }

.pdp-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--cream), var(--gold-050));
  border: 1px solid var(--line);
  cursor: zoom-in;
}
.pdp-gallery__main img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out), opacity var(--dur) var(--ease);
}
/* Cursor-tracked zoom, driven by --zx/--zy set in JS. */
.pdp-gallery__main.is-zoomed img {
  transform: scale(2);
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}

.pdp-gallery__nav {
  position: absolute;
  inset-inline: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.pdp-gallery__nav button {
  pointer-events: auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  color: var(--green-800);
  background: color-mix(in srgb, var(--white) 90%, transparent);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast) var(--ease);
}
.pdp-gallery__nav button:hover { background: var(--white); border-color: var(--green-300); }

.pdp-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: var(--sp-3);
}
.pdp-gallery__thumbs button {
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pdp-gallery__thumbs button:hover { border-color: var(--green-300); }
.pdp-gallery__thumbs button[aria-current="true"] {
  border-color: var(--green-700);
  box-shadow: 0 0 0 1px var(--green-700);
}
.pdp-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp-info { display: grid; gap: var(--sp-3); }

.pdp-info h1 {
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pdp-info .hindi-name {
  font-family: var(--font-hindi);
  font-size: var(--step-1);
  color: var(--gold-700);
  line-height: 1.5;
}

.pdp-rating { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--step--1); }
.pdp-rating a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pdp-rating a:hover { color: var(--green-700); }

.pdp-short { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; }

.pdp-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-block: var(--sp-2);
}
.pdp-price .now {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--green-900);
  letter-spacing: -0.02em;
}
.pdp-price .was { font-size: var(--step-1); color: var(--muted); text-decoration: line-through; }
.pdp-price .off {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--chilli);
  background: var(--chilli-050);
  padding: .25rem .65rem;
  border-radius: var(--radius-pill);
}
.pdp-price .tax-note { flex-basis: 100%; font-size: var(--step--2); color: var(--muted); }

/* Variant selectors — only valid combinations are ever rendered. */
.variant-group { display: grid; gap: var(--sp-2); }
.variant-group__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-800);
}
.variant-group__label .chosen {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--muted);
}
.variant-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.variant-option {
  position: relative;
  min-width: 66px;
  padding: .48rem .85rem;
  min-height: 40px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: all var(--dur-fast) var(--ease);
}
.variant-option:hover:not(:disabled) { border-color: var(--green-500); color: var(--green-700); }
.variant-option[aria-pressed="true"] {
  border-color: var(--green-700);
  background: var(--green-700);
  color: var(--white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-700) 14%, transparent);
}
.variant-option:disabled {
  color: var(--muted);
  opacity: .45;
  cursor: not-allowed;
  background: var(--cream);
}
/* Strike-through for out-of-stock sizes */
.variant-option:disabled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top left, transparent 47.5%, var(--muted) 47.5%, var(--muted) 52.5%, transparent 52.5%);
  opacity: .55;
}
.variant-option small { display: block; font-weight: 400; font-size: .68rem; opacity: .78; margin-top: 2px; }

.pdp-sku { font-size: var(--step--2); color: var(--muted); letter-spacing: .06em; }

.pdp-actions { display: grid; gap: var(--sp-3); }
.pdp-actions__row { display: flex; gap: var(--sp-3); align-items: stretch; flex-wrap: wrap; }
.pdp-actions__row .qty { flex: none; }
/* Add to Cart takes the room it needs, not the whole row. */
.pdp-actions__row .btn { flex: 1 1 auto; min-width: 150px; max-width: 260px; }
.pdp-actions #pdpBuyNow { justify-self: start; min-width: 150px; max-width: 260px; }
.pdp-actions .btn-wish {
  --btn-bg: transparent;
  --btn-fg: var(--green-700);
  --btn-border: var(--line);
  flex: none;
  width: 40px;
  min-width: 0;
  padding: 0;
}
.pdp-actions .btn-wish[aria-pressed="true"] { --btn-fg: var(--chilli); }
.pdp-actions .btn-wish[aria-pressed="true"] svg { fill: currentColor; }

.pdp-assurances {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pdp-assurances li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}
.pdp-assurances svg { flex: none; color: var(--green-600); margin-top: 2px; }

/* ---- Accordion ------------------------------------------------------ */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--green-900);
  transition: color var(--dur-fast) var(--ease);
}
.accordion__trigger:hover { color: var(--gold-700); }
.accordion__icon {
  flex: none;
  position: relative;
  width: 18px; height: 18px;
  color: var(--gold-600);
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.accordion__icon::before { inset: 8px 0 auto; height: 1.5px; }
.accordion__icon::after  { inset: 0 8px auto; width: 1.5px; height: 18px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); opacity: 0; }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel .inner { padding-bottom: var(--sp-5); color: var(--ink-soft); line-height: 1.72; }

/* The gallery is a square that fills its column, so stacking the layout made
   it as tall as the screen is wide: at 700px the placeholder alone was 640px
   and pushed the price, options and Add to Cart below the fold. Two narrower
   columns survive down to 760px, and below that the image is capped so the
   buying controls stay near the top of the page. */
@media (max-width: 900px) {
  .pdp {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: var(--sp-6);
  }
  .pdp-gallery { position: static; }
  .pdp-info h1 { font-size: var(--step-3); }
  .pdp-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}

@media (max-width: 760px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-gallery {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }
}

/* =====================================================================
   REVIEWS
   ===================================================================== */
.review-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: var(--sp-6);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.review-summary__score { text-align: center; }
.review-summary__score .num {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1;
  color: var(--green-900);
}
.review-summary__score .of { font-size: var(--step--1); color: var(--muted); }
.review-bars { display: grid; gap: var(--sp-2); min-width: 0; }
.review-bar {
  display: grid;
  grid-template-columns: 46px 1fr 40px;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--step--2);
  color: var(--muted);
}
.review-bar__track { height: 6px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.review-bar__fill { height: 100%; background: var(--gold-600); border-radius: inherit; }

.review-item { padding-block: var(--sp-5); border-bottom: 1px solid var(--line-soft); }
.review-item__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.review-item__author { font-weight: 600; color: var(--green-900); }
.review-item__date { font-size: var(--step--2); color: var(--muted); margin-left: auto; }
.review-item__title { font-family: var(--font-display); font-size: var(--step-1); margin-top: var(--sp-2); color: var(--green-900); }
.review-item__body { margin-top: var(--sp-2); color: var(--ink-soft); line-height: 1.7; }
.review-item__reply {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--green-050);
  border-left: 2px solid var(--green-600);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--step--1);
}
.review-item__reply b { color: var(--green-800); }

@media (max-width: 640px) {
  .review-summary { grid-template-columns: 1fr; text-align: center; }
  .review-summary__score .num { font-size: var(--step-4); }
}

/* =====================================================================
   CHECKOUT
   ===================================================================== */
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.checkout-step { margin-bottom: var(--sp-7); }
.checkout-step__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.checkout-step__num {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--green-800);
  background: var(--gold-050);
  border: 1px solid var(--gold-200);
  border-radius: 50%;
}
.checkout-step__head h3 { font-size: var(--step-2); }

.summary-panel {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.summary-panel__head {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.summary-panel__head h3 { font-size: var(--step-1); }
.summary-panel__items { max-height: 320px; overflow-y: auto; padding: 0 var(--sp-5); }
.summary-panel__totals { padding: var(--sp-5); border-top: 1px solid var(--line); }

.coupon-form { display: flex; gap: var(--sp-2); }
.coupon-form .input { min-height: 46px; text-transform: uppercase; letter-spacing: .08em; }
.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--success-bg);
  border: 1px dashed color-mix(in srgb, var(--success) 40%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  color: var(--success);
}
.coupon-applied b { letter-spacing: .1em; }

/* Payment method chooser */
.pay-methods { display: grid; gap: var(--sp-3); }
.pay-method {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.pay-method:hover { border-color: var(--green-300); }
.pay-method:has(input:checked) {
  border-color: var(--green-700);
  background: color-mix(in srgb, var(--green-050) 60%, var(--white));
  box-shadow: 0 0 0 1px var(--green-700);
}
.pay-method.is-disabled { opacity: .55; cursor: not-allowed; }
.pay-method__body { display: grid; gap: var(--sp-1); flex: 1; }
.pay-method__title { font-weight: 600; color: var(--green-900); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pay-method__desc { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
.pay-logos { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.pay-logos span {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .22rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}

.secure-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: center;
  font-size: var(--step--2);
  color: var(--muted);
  margin-top: var(--sp-4);
}
.secure-note svg { color: var(--success); }

@media (max-width: 940px) {
  /* minmax(0, 1fr): a bare 1fr track has an `auto` minimum, so the cart
     table's min-content width (five columns, ~660px) would stretch the whole
     column — and the summary panel with it — past the phone's edge. */
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  .summary-panel { position: static; order: -1; }
  .summary-panel__items { max-height: none; }
}
.checkout-layout > * { min-width: 0; }

/* Cart table → stacked rows on phones. Five columns cannot share 390px, and
   a sideways-scrolling cart hides the total and the remove button. Each row
   becomes a small card: product on top, quantity / unit price / line total
   underneath, remove in the corner. */
@media (max-width: 700px) {
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; }
  /* .table carries a 620px minimum so five-column tables scroll instead of
     crushing; a stacked card layout has no columns to protect. */
  .cart-table { min-width: 0; }
  .cart-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .cart-table .cart-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-3) var(--sp-4);
    align-items: center;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--line-soft);
  }
  .cart-table .cart-row:last-child { border-bottom: 0; }
  .cart-table .cart-row td { padding: 0; border: 0; text-align: left; }
  .cart-table .cart-row td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .cart-table .cart-row td:nth-child(1) > div { min-width: 0 !important; }
  .cart-table .cart-row td:nth-child(5) { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
  .cart-table .cart-row td:nth-child(3) { grid-column: 1; grid-row: 2; }
  .cart-table .cart-row td:nth-child(2) {
    grid-column: 2; grid-row: 2;
    font-size: var(--step--1); color: var(--muted);
  }
  .cart-table .cart-row td:nth-child(2)::after { content: ' each'; }
  .cart-table .cart-row td:nth-child(4) { grid-column: 3; grid-row: 2; text-align: right; font-size: var(--step-0); }
}

/* =====================================================================
   ORDER TRACKING TIMELINE
   ===================================================================== */
.timeline { display: grid; gap: 0; position: relative; padding-left: var(--sp-6); }
.timeline::before {
  content: '';
  position: absolute;
  left: 11px; top: 12px; bottom: 12px;
  width: 1px;
  background: var(--line);
}
.timeline__step { position: relative; padding-bottom: var(--sp-6); }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: calc(var(--sp-6) * -1);
  top: 2px;
  width: 23px; height: 23px;
  display: grid; place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--white);
  z-index: 1;
}
.timeline__step.is-done .timeline__dot {
  background: var(--green-700);
  border-color: var(--green-700);
}
.timeline__step.is-current .timeline__dot {
  background: var(--gold-600);
  border-color: var(--gold-600);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-600) 22%, transparent);
}
.timeline__step.is-done ~ .timeline__step .timeline__dot { color: transparent; }
.timeline__label {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--muted);
  line-height: 1.3;
}
.timeline__step.is-done .timeline__label,
.timeline__step.is-current .timeline__label { color: var(--green-900); }
.timeline__meta { font-size: var(--step--2); color: var(--muted); margin-top: var(--sp-1); }
.timeline__note { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--sp-2); }

/* Filled progress line up to the current step */
.timeline[data-progress]::after {
  content: '';
  position: absolute;
  left: 11px; top: 12px;
  width: 1px;
  height: var(--progress, 0%);
  background: var(--green-600);
  transition: height .8s var(--ease-out);
}

/* =====================================================================
   ACCOUNT
   ===================================================================== */
.account-layout {
  display: grid;
  grid-template-columns: 258px 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.account-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.account-nav__head {
  padding: var(--sp-5);
  background: var(--green-800);
  color: var(--white);
}
.account-nav__head .name { font-family: var(--font-display); font-size: var(--step-1); }
.account-nav__head .email { font-size: var(--step--2); color: var(--gold-200); word-break: break-all; }
.account-nav ul { padding: var(--sp-2); display: grid; gap: 2px; }
.account-nav a, .account-nav button {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  text-align: left;
  transition: all var(--dur-fast) var(--ease);
}
.account-nav a:hover, .account-nav button:hover { background: var(--cream); color: var(--green-800); }
.account-nav a[aria-current="page"] {
  background: var(--green-050);
  color: var(--green-800);
  font-weight: 600;
}
.account-nav svg { flex: none; color: var(--gold-600); }
.account-nav .logout { color: var(--danger); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); }
.stat-card {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: var(--sp-1);
}
.stat-card .value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--green-900);
  line-height: 1;
}
.stat-card .label {
  font-size: var(--step--2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.order-card:hover { border-color: var(--green-100); box-shadow: var(--shadow); }
.order-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.order-card__num { font-family: var(--font-display); font-size: var(--step-1); color: var(--green-900); }
.order-card__date { font-size: var(--step--2); color: var(--muted); }
.order-card__body { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.order-card__thumbs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.order-card__thumbs img {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--cream-deep);
}
.order-card__thumbs .more {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-size: var(--step--1);
  color: var(--muted);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.order-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}

.address-card {
  position: relative;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--step--1);
  line-height: 1.6;
}
.address-card.is-default { border-color: var(--green-500); box-shadow: 0 0 0 1px var(--green-500); }
.address-card__name { font-weight: 600; color: var(--green-900); font-size: var(--step-0); }
.address-card__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); flex-wrap: wrap; }
.address-card__actions button, .address-card__actions a {
  font-size: var(--step--2);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.address-card__actions .danger { color: var(--danger); }

@media (max-width: 860px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-nav { position: static; }
  .account-nav ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .account-nav a span, .account-nav button span { white-space: nowrap; }
}

/* =====================================================================
   AUTH PAGES
   ===================================================================== */
.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100dvh - var(--header-h));
}
.auth-visual {
  position: relative;
  background: var(--green-900);
  overflow: hidden;
  display: grid;
  align-items: end;
  padding: clamp(2rem, 4vw, 4rem);
  color: var(--white);
}
.auth-visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .42;
}
.auth-visual__content { position: relative; z-index: 1; max-width: 34ch; display: grid; gap: var(--sp-3); }
.auth-visual blockquote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  line-height: 1.24;
  color: var(--white);
}
.auth-visual cite {
  font-style: normal;
  font-size: var(--step--2);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.auth-form {
  display: grid;
  align-content: center;
  padding: clamp(2rem, 5vw, 4.5rem) var(--gutter);
  background: var(--white);
}
.auth-form__inner { width: 100%; max-width: 26rem; margin-inline: auto; }
.auth-form h1 { font-size: var(--step-3); margin-bottom: var(--sp-2); }
.auth-form .sub { color: var(--muted); margin-bottom: var(--sp-6); }
.auth-alt { text-align: center; margin-top: var(--sp-5); font-size: var(--step--1); color: var(--muted); }
.auth-alt a { color: var(--green-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block: var(--sp-5);
  font-size: var(--step--2);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
}

/* =====================================================================
   TESTIMONIALS / NEWSLETTER / STORY
   ===================================================================== */
.testimonial {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: -12px; left: var(--sp-5);
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--gold-200);
}
.testimonial p { position: relative; color: var(--ink-soft); line-height: 1.75; font-size: var(--step-0); }
.testimonial__author { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.testimonial__author img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.testimonial__author .name { font-weight: 600; color: var(--green-900); font-size: var(--step--1); }
.testimonial__author .place { font-size: var(--step--2); color: var(--muted); }

.newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.newsletter-form { display: flex; gap: var(--sp-3); flex-wrap: wrap; min-width: min(420px, 100%); }
.newsletter-form .input {
  flex: 1;
  min-width: 220px;
  background: color-mix(in srgb, var(--white) 12%, transparent);
  border-color: color-mix(in srgb, var(--white) 30%, transparent);
  color: var(--white);
}
.newsletter-form .input::placeholder { color: color-mix(in srgb, var(--white) 55%, transparent); }
.newsletter-form .input:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-400) 22%, transparent);
}
.newsletter .note { font-size: var(--step--2); color: color-mix(in srgb, var(--green-100) 70%, transparent); margin-top: var(--sp-3); }

@media (max-width: 860px) {
  .newsletter { grid-template-columns: 1fr; }
}

/* Story section — asymmetric, image overlapping the text block. */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* Mirrored variant: copy left, image right on desktop. Declared as a class,
   never an inline style — an inline grid-template-columns beats the mobile
   media query below and traps the section in two columns on a phone. */
.story--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.story--flip .story__media { order: -1; }
.story__media { position: relative; }
.story__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.story__media::after {
  content: '';
  position: absolute;
  inset: clamp(10px, 1.6vw, 20px);
  border: 1px solid color-mix(in srgb, var(--gold-400) 55%, transparent);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
}
.story__badge {
  position: absolute;
  right: clamp(-14px, -1.5vw, 0px);
  bottom: clamp(20px, 4vw, 46px);
  width: clamp(112px, 13vw, 148px);
  height: clamp(112px, 13vw, 148px);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 2px;
  padding: var(--sp-3);
  background: var(--gold-600);
  color: var(--green-900);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-display);
  line-height: 1.15;
}
.story__badge .big { font-size: var(--step-2); font-weight: 600; }
.story__badge .small { font-family: var(--font-body); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

.story__body { display: grid; gap: var(--sp-4); }
.story__body p { color: var(--ink-soft); line-height: 1.78; }

@media (max-width: 860px) {
  .story,
  .story--flip { grid-template-columns: 1fr; }
  .story--flip .story__media { order: 0; }
  .story__media { max-width: 460px; }
}

/* Owner-supplied circular spice motif above the filter row. Purely
   decorative, so it carries an empty alt and simply does not render at all
   when the file has not been uploaded. */
.spice-motif {
  display: block;
  width: clamp(150px, 22vw, 230px);
  height: auto;
  margin: 0 auto var(--sp-5);
  mix-blend-mode: multiply;
}
@media (max-width: 560px) { .spice-motif { width: 132px; margin-bottom: var(--sp-4); } }

/* ---- Spice index (Our Spices page) ----------------------------------
   Was a full-width row list: the illustration sat marooned beside a very
   wide text column, seven identical size chips wrapped onto two lines, and
   the button drifted to the far right with nothing near it. As cards the
   page reads as a catalogue and reflows to one column without any of that.
   ------------------------------------------------------------------- */
.spice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}

.spice-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.spice-card:hover { border-color: var(--green-300); box-shadow: var(--shadow); }

.spice-card__head { display: flex; align-items: center; gap: var(--sp-4); }
.spice-card__img {
  width: 76px; height: 76px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--cream-deep);
}
.spice-card__names { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.spice-card__names h3 { font-size: var(--step-2); }
.spice-card__names .hindi { font-family: var(--font-hindi); color: var(--gold-700); font-size: var(--step-0); }

/* A definition list: the label is the point, so it gets the gold small-cap
   treatment and the answer runs on the line below it. */
.spice-card__facts { display: grid; gap: var(--sp-1); margin: 0; }
.spice-card__facts dt {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.spice-card__facts dd {
  margin: 0 0 var(--sp-3);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
}
.spice-card__facts dd:last-child { margin-bottom: 0; }

.spice-card__sizes { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.spice-card__go { margin-top: auto; align-self: start; }

@media (max-width: 480px) {
  .spice-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .spice-card { padding: var(--sp-4); }
  .spice-card__img { width: 60px; height: 60px; }
}
}