/* ============================================================================
   NURIVA ORGANIC — storefront
   Built to the palette in the Website Development Blueprint §1: white/cream
   grounds, deep botanical green, restrained gold accents, clean typography.

   Plain CSS, deliberately. This hosting has no shell, so a build step is one
   more thing that can be missing at deploy time — this file uploads as itself.
   ========================================================================= */

:root {
  /* Ground: cream, warmed very slightly, never pure white for large areas. */
  --cream:        #f7f5ef;
  --cream-deep:   #efece2;
  --paper:        #ffffff;

  /* The botanical green the brand is built on. */
  --green:        #1e4d3a;
  --green-deep:   #143224;
  --green-soft:   #e6efe8;
  --green-mid:    #3d7256;

  /* Gold, restrained: hairlines, eyebrows and small marks only. Never a fill. */
  --gold:         #9c7c3c;
  --gold-soft:    #d9c48c;

  --ink:          #1b211d;
  --ink-soft:     #55605a;
  --ink-faint:    #8a938d;
  --line:         #e2e0d6;
  --line-soft:    #eeece4;

  --ok:           #2c7a57;
  --warn:         #a8762b;
  --bad:          #a2453a;

  --radius:       3px;
  --shadow:       0 1px 2px rgba(20, 50, 36, .05), 0 8px 24px -12px rgba(20, 50, 36, .18);

  --wrap:         1180px;
  --gap:          clamp(16px, 3vw, 28px);

  --serif:        "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:         "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] is a UA rule at the lowest specificity, so any class setting
   `display` quietly overrides it. Everything toggled by script depends on it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

.visually-hidden {
  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; left: 8px; top: -60px; z-index: 200;
  background: var(--green); color: #fff; padding: 12px 18px; border-radius: var(--radius);
  transition: top .18s;
}
.skip-link:focus { top: 8px; color: #fff; }

/* ---------------------------------------------------------------- eyebrow */
.eyebrow {
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}

/* --------------------------------------------------- 01 announcement bar */
.announce {
  background: var(--green-deep);
  color: #eef3ee;
  font: 500 13px/1.5 var(--sans);
  letter-spacing: .04em;
  text-align: center;
  padding: 9px 16px;
}
.announce strong { color: var(--gold-soft); font-weight: 700; }

/* --------------------------------------------------------- 02 header/nav */
.masthead { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.masthead__bar { display: flex; align-items: center; gap: 18px; padding-block: 14px; }

.brand { display: flex; flex-direction: column; text-decoration: none; margin-right: auto; }
.brand__name { font: 700 22px/1 var(--serif); color: var(--green); letter-spacing: .06em; }
.brand__tag { font: 500 10px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }

/* Nav labels never break mid-phrase. Without nowrap, "Wellness & Nutrition"
   folds into three stacked lines and drags the whole header out of shape —
   and it does it silently, because nothing overflows. */
.mainnav { display: none; gap: clamp(12px, 1.6vw, 22px); align-items: center; }
.mainnav a {
  font: 600 14px/1 var(--sans); letter-spacing: .04em; text-decoration: none;
  color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.mainnav a:hover, .mainnav a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--green); }

.tools { display: flex; align-items: center; gap: 6px; }
.tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 44px; min-height: 44px; padding: 0 10px; white-space: nowrap;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--ink); text-decoration: none; cursor: pointer;
  font: 600 14px/1 var(--sans);
}
.tool:hover { background: var(--green-soft); color: var(--green); }
.tool__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--green); color: #fff; font: 700 11px/20px var(--sans); text-align: center;
}

.searchbar { display: none; }
.searchbar form { display: flex; gap: 8px; }
.searchbar { flex: 0 1 210px; min-width: 0; }
.searchbar input {
  width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream); font: 400 14px/1.3 var(--sans); color: var(--ink);
}
.searchbar input:focus { border-color: var(--green-mid); background: var(--paper); }

@media (min-width: 900px) {
  .mainnav { display: flex; }
  .searchbar { display: block; }
  .burger { display: none; }
}

/* Between 900 and 1200 the bar is tight: the search box collapses to an icon's
   worth of space rather than squeezing the navigation into two lines. */
@media (min-width: 900px) and (max-width: 1200px) {
  .searchbar { flex: 0 1 130px; }
  .brand__tag { display: none; }
}

/* Mobile drawer */
.burger { display: inline-flex; }
.drawer { border-top: 1px solid var(--line); background: var(--paper); padding: 10px 0 18px; }
.drawer[hidden] { display: none; }
.drawer__group + .drawer__group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.drawer a { display: block; padding: 10px 0; text-decoration: none; color: var(--ink); font-weight: 600; }
.drawer .sub a { padding-left: 14px; font-weight: 400; color: var(--ink-soft); font-size: 15px; }
.drawer form { display: flex; gap: 8px; margin-bottom: 6px; }
.drawer input[type="search"] { flex: 1; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }

/* ------------------------------------------------------------- 03 hero */
.hero {
  background: linear-gradient(180deg, var(--cream-deep), var(--cream));
  border-bottom: 1px solid var(--line);
  padding-block: clamp(44px, 8vw, 88px);
}
.hero__grid { display: grid; gap: clamp(28px, 5vw, 52px); align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4rem); color: var(--green-deep); letter-spacing: -.01em; }
.hero p { max-width: 46ch; color: var(--ink-soft); font-size: clamp(1rem, 1.6vw, 1.12rem); margin: 18px 0 26px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__art { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 860px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

/* ----------------------------------------------------------- 04 trust bar */
.trustbar { background: var(--green); color: #e9f1ea; }
.trustbar ul {
  list-style: none; margin: 0; padding: 16px 0; display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  font: 600 13px/1.4 var(--sans); letter-spacing: .05em; text-align: center;
}
@media (min-width: 760px) { .trustbar ul { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------- sections */
.section { padding-block: clamp(40px, 7vw, 76px); }
.section--paper { background: var(--paper); border-block: 1px solid var(--line); }
.section--soft { background: var(--green-soft); }
.section__head { margin-bottom: clamp(22px, 4vw, 36px); }
.section__head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); color: var(--green-deep); }
.section__head p { color: var(--ink-soft); max-width: 62ch; margin: 12px 0 0; }
.section__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ------------------------------------------------------------- 05 category */
.catgrid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .catgrid { grid-template-columns: repeat(4, 1fr); } }

.cat {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .18s, box-shadow .18s;
}
.cat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cat__img { aspect-ratio: 4 / 3; background: var(--cream-deep); overflow: hidden; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; }
.cat__body { padding: 14px 16px 16px; }
.cat__name { font: 600 16px/1.3 var(--serif); color: var(--green-deep); }
.cat__meta { font: 500 12px/1.4 var(--sans); color: var(--ink-faint); margin-top: 5px; letter-spacing: .04em; }
.cat__soon {
  position: absolute; top: 10px; right: 10px; background: var(--paper);
  border: 1px solid var(--gold-soft); color: var(--gold);
  font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 2px;
}

/* ---------------------------------------------------------- product cards */
.pgrid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card__media { position: relative; aspect-ratio: 1; background: var(--cream-deep); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.flag {
  font: 700 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 8px; border-radius: 2px; background: var(--green); color: #fff;
}
.flag--sale { background: var(--gold); }
.flag--new  { background: var(--green-mid); }

.card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
/* The name is the primary target on a card, so it gets a real tap area
   rather than the 26px an inline link would have. */
.card__name { font: 600 16px/1.35 var(--serif); color: var(--ink); }
.card__name a { text-decoration: none; color: inherit; display: block; padding-block: 3px; }
.card__name a:hover { color: var(--green); }
.card__benefit { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.price { font: 700 16px/1.2 var(--sans); color: var(--green-deep); white-space: nowrap; }
.price small { font-weight: 500; color: var(--ink-faint); text-decoration: line-through; margin-right: 7px; font-size: 13px; }
.price--enquiry { font-size: 13.5px; font-weight: 600; color: var(--gold); letter-spacing: .03em; }

.stock { font: 600 11.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.stock--in  { color: var(--ok); }
.stock--low { color: var(--warn); }
.stock--out { color: var(--bad); }

/* Quick-add: a compact "+" beside the price, on every card in every grid. */
/* Was/now stack rather than sitting on one line.
   Once every product carried a compare-at price, "Rs. 1,620 Rs. 1,299" was a
   single nowrap line inside a flex item allowed to shrink to nothing: the box
   squeezed to ~52px, the text kept its full 132px and ran straight under the
   quick-add button. Stacking halves the line, and letting the row wrap means a
   very narrow card drops the button below the price instead of overlapping it. */
.card__pricewrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.card .price small { display: block; margin-right: 0; }
.card__foot { flex-wrap: wrap; row-gap: 10px; }
.card__addform { margin: 0 0 0 auto; flex: none; }
.card__plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; padding: 0;
  border: 1px solid var(--green); border-radius: 999px;
  background: var(--green); color: #fff; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.card__plus:hover { background: var(--green-deep); border-color: var(--green-deep); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(31, 74, 45, .55); }
.card__plus:active { transform: translateY(0); }
.card__plus:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.card__plus svg { display: block; }
/* "Choose a size" reuses the shape but stays an outline, to read as a step, not a buy. */
.card__plus--choose { background: transparent; color: var(--green); }
.card__plus--choose:hover { background: var(--green-soft); color: var(--green-deep); border-color: var(--green); }
.card__ask { font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.card__ask:hover { color: var(--green); }
@media (prefers-reduced-motion: reduce) { .card__plus { transition: background .15s, border-color .15s; } .card__plus:hover { transform: none; } }

/* Buy now: a full-width action on its own line under the price row, so the
   existing price + quick-add line is left exactly as it was. A filled green
   gradient pill with a soft shadow, a lift on hover and an arrow that nudges —
   the prominent "take me to checkout" control beside the quiet "+" quick-add. */
.card__buynow { margin: 10px 0 0; }
.card__buynow-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--green-mid) 0%, var(--green-deep) 100%);
  color: #fff;
  font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px -9px rgba(20, 50, 36, .55);
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
.card__buynow-btn:hover { transform: translateY(-2px); box-shadow: 0 13px 22px -10px rgba(20, 50, 36, .62); filter: brightness(1.07); }
.card__buynow-btn:active { transform: translateY(0); box-shadow: 0 6px 16px -9px rgba(20, 50, 36, .55); }
.card__buynow-btn:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.card__buynow-arrow { flex: none; transition: transform .18s ease; }
.card__buynow-btn:hover .card__buynow-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .card__buynow-btn, .card__buynow-arrow { transition: none; }
  .card__buynow-btn:hover { transform: none; }
  .card__buynow-btn:hover .card__buynow-arrow { transform: none; }
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius);
  font: 700 14.5px/1 var(--sans); letter-spacing: .03em;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--green); border-color: var(--green); }
.btn--ghost:hover { background: var(--green-soft); color: var(--green-deep); }
.btn--quiet { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn--quiet:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------- breadcrumbs */
.crumbs { padding-block: 14px; font-size: 13.5px; color: var(--ink-faint); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--green); text-decoration: underline; }

/* ---------------------------------------------------------------- listing */
.listing { display: grid; gap: clamp(20px, 4vw, 34px); }
@media (min-width: 900px) { .listing { grid-template-columns: 232px 1fr; align-items: start; } }

.facets { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 20px; }
.facets h3 { font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.facets ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.facets a { text-decoration: none; color: var(--ink-soft); font-size: 14.5px; }
.facets a:hover, .facets a[aria-current="true"] { color: var(--green); font-weight: 600; }
.facets label { display: flex; gap: 9px; align-items: center; font-size: 14.5px; color: var(--ink-soft); cursor: pointer; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar__count { font-size: 14px; color: var(--ink-soft); }
.toolbar select { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font: 500 14px var(--sans); color: var(--ink); }

/* ------------------------------------------------------------------ empty */
.empty { text-align: center; padding: clamp(40px, 8vw, 80px) 20px; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty h2 { font-size: 1.5rem; color: var(--green-deep); margin-bottom: 10px; }
.empty p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 20px; }

/* --------------------------------------------------------------- product */
.pdp { display: grid; gap: clamp(24px, 5vw, 48px); padding-block: clamp(24px, 4vw, 40px); }
@media (min-width: 900px) { .pdp { grid-template-columns: 1.05fr .95fr; align-items: start; } }

.gallery__main { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery__thumbs button {
  width: 68px; height: 68px; padding: 0; border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper); overflow: hidden; cursor: pointer;
}
.gallery__thumbs button[aria-current="true"] { border-color: var(--green); border-width: 2px; }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--green-deep); }
.pdp__brand { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.pdp__price { display: flex; align-items: baseline; gap: 12px; margin: 18px 0; }
.pdp__price .price { font-size: 1.7rem; }
.pdp__short { color: var(--ink-soft); font-size: 1.02rem; }

/* The size picker sits inside the add-to-basket form now, so it is a fieldset
   rather than a bare flex row: the border and padding have to be reset, and the
   options get their own flex container. */
.variants { border: 0; padding: 0; margin: 18px 0; width: 100%; }
.variants > legend { padding: 0; margin-bottom: 8px; }
.variants__options { display: flex; flex-wrap: wrap; gap: 9px; }
.variants__options label {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 15px;
  font: 600 14px var(--sans); cursor: pointer; background: var(--paper); min-height: 44px;
  display: inline-flex; align-items: center;
}
.variants__options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.variants__options input:checked + span { color: var(--green); }
.variants__options span small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-faint); }
.variants__options label:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.variants__options label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.addbar { display: flex; gap: 12px; align-items: stretch; margin: 22px 0; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.qty button { width: 44px; height: 46px; border: 0; background: none; font-size: 19px; cursor: pointer; color: var(--ink-soft); }
.qty button:hover { color: var(--green); background: var(--green-soft); }
.qty input { width: 52px; height: 46px; border: 0; text-align: center; font: 600 15px var(--sans); background: none; color: var(--ink); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.panels { margin-top: clamp(30px, 5vw, 50px); border-top: 1px solid var(--line); }
.panel { border-bottom: 1px solid var(--line); }
.panel summary {
  cursor: pointer; list-style: none; padding: 18px 2px;
  font: 600 15.5px var(--sans); color: var(--green-deep);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.panel summary::-webkit-details-marker { display: none; }
.panel summary::after { content: "+"; font-size: 19px; color: var(--gold); font-weight: 400; }
.panel[open] summary::after { content: "\2212"; }
.panel__body { padding: 0 2px 22px; color: var(--ink-soft); font-size: 15px; }
.panel__body p { margin-top: 0; }
.spec { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.spec li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.spec dt, .spec .k { color: var(--ink-faint); font-size: 13.5px; }

/* ---------------------------------------------------------------- basket */
.basket { display: grid; gap: clamp(22px, 4vw, 40px); align-items: start; }
@media (min-width: 900px) { .basket { grid-template-columns: 1fr 340px; } }

.line {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft);
}
.line__img { width: 84px; height: 84px; border-radius: 2px; overflow: hidden; background: var(--cream-deep); }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__name { font: 600 15.5px/1.35 var(--serif); }
.line__name a { text-decoration: none; color: inherit; }
.line__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.line__total { font: 700 15px var(--sans); color: var(--green-deep); }
.line--blocked { opacity: .62; }

.summary { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; position: sticky; top: 92px; }
.summary h2 { font-size: 1.15rem; margin-bottom: 14px; }

/* Order line items: the name takes the room it needs and wraps as prose;
   the price stays on the first line, right-aligned, and never wraps. */
.summary__lines { list-style: none; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.summary__lines li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.summary__item { font-size: 14px; line-height: 1.4; color: var(--ink); min-width: 0; }
.summary__qty { color: var(--ink-faint); white-space: nowrap; }
.summary__price { font: 600 14px var(--sans); color: var(--ink); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }

.summary dl { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; margin: 0 0 14px; font-size: 14.5px; }
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.summary dd .muted { color: var(--ink-faint); font-size: 13.5px; }
.summary .total { border-top: 1px solid var(--line); padding-top: 12px; font-weight: 700; font-size: 1.05rem; color: var(--green-deep); white-space: nowrap; }

/* ----------------------------------------------------------------- notes */
.note { padding: 14px 16px; border-radius: var(--radius); border-left: 3px solid; font-size: 14.5px; margin-bottom: 16px; }
.note--info { background: var(--green-soft); border-color: var(--green); color: var(--green-deep); }
.note--warn { background: #fbf3e3; border-color: var(--warn); color: #6b4c14; }
.note--bad  { background: #f9e7e4; border-color: var(--bad); color: #7a2e26; }
.note--ok   { background: #e4f2ea; border-color: var(--ok); color: #1c5540; }
.note strong { display: block; margin-bottom: 3px; }

/* ------------------------------------------------------------------ forms */
/* align-content:start stops the input row from stretching to fill a field that
   a hint-carrying sibling has made taller — without it a field with no hint
   balloons its input from 46px to the row height and drops out of line. */
.field { display: grid; gap: 6px; margin-bottom: 16px; align-content: start; }
.field label { font: 600 13.5px var(--sans); color: var(--ink); }
.field .hint { font-size: 12.5px; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); font: 400 15px var(--sans); color: var(--ink);
}
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-mid); }
.field .err { color: var(--bad); font-size: 13px; font-weight: 600; }
.field--bad input, .field--bad select, .field--bad textarea { border-color: var(--bad); }
/* Top-align the two columns so a hint under one field doesn't stretch the other.
   Each field keeps its natural height; labels and inputs line up across the row. */
.field-row { display: grid; gap: 0 16px; align-items: start; }
@media (min-width: 620px) { .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); margin-bottom: 16px; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex: none; }

/* ------------------------------------------------------------- newsletter */
.news { background: var(--green-deep); color: #e8f0e9; }
.news .wrap { padding-block: clamp(36px, 6vw, 64px); }
.news h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.news p { color: #bfd2c4; max-width: 52ch; margin: 12px 0 22px; }
.news form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.news input {
  flex: 1 1 240px; min-height: 48px; padding: 12px 15px; border: 1px solid #2f5c47;
  border-radius: var(--radius); background: #10261c; color: #eaf2eb; font: 400 15px var(--sans);
}
.news input::placeholder { color: #7f9a89; }
.news .btn--primary { background: var(--gold); color: #21170a; border-color: var(--gold); }
.news .btn--primary:hover { background: var(--gold-soft); color: #21170a; }

/* --------------------------------------------------------------- 14 footer */
.foot { background: var(--green-deep); color: #c8d8cd; padding-block: clamp(36px, 6vw, 60px) 0; }
.foot__cols { display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .foot__cols { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.foot h3 { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: #c8d8cd; text-decoration: none; font-size: 14.5px; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__brand .brand__name { color: #fff; }
.foot__brand p { color: #9db3a5; font-size: 14px; max-width: 34ch; margin: 14px 0 0; }
.foot__contact { margin-top: 16px; display: grid; gap: 6px; font-size: 14.5px; }
.foot__legal {
  margin-top: 34px; border-top: 1px solid #29483a; padding-block: 18px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: #8ba699;
}
.foot__legal ul { display: flex; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------- pagination */
.pager { margin-top: 34px; display: flex; justify-content: center; }
.pager nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pager a, .pager span {
  min-width: 42px; min-height: 42px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); text-decoration: none; color: var(--ink-soft);
  font: 600 14px var(--sans);
}
.pager a:hover { border-color: var(--green); color: var(--green); }
.pager [aria-current="page"] { background: var(--green); border-color: var(--green); color: #fff; }
.pager .disabled { opacity: .4; }

/* ------------------------------------------------------------- long copy */
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.5rem; color: var(--green-deep); margin: 32px 0 12px; }
.prose h3 { font-size: 1.2rem; margin: 24px 0 10px; }
.prose p { margin: 0 0 16px; color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; color: var(--ink-soft); }
.prose li { margin-bottom: 7px; }

/* --------------------------------------------------------------- timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding-bottom: 18px; }
.timeline .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green); margin-top: 6px; position: relative; }
.timeline li:not(:last-child) .dot::after {
  content: ""; position: absolute; left: 5px; top: 14px; width: 1px; height: calc(100% + 12px); background: var(--line);
}
.timeline time { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------- image-less placeholders */
/*
   A product or category without a photograph is a blank square, and a grid of
   blank squares reads as a broken page rather than an unfinished catalogue.
   A quiet botanical mark says "no picture yet" without pretending otherwise.
*/
.cat__img:empty,
.cat__img:not(:has(img)),
.card__media:not(:has(img)) {
  background:
    radial-gradient(circle at 50% 42%, var(--green-soft) 0 34%, transparent 34%),
    linear-gradient(160deg, var(--cream-deep), var(--cream));
  position: relative;
}
.cat__img:not(:has(img))::after,
.card__media:not(:has(img))::after {
  content: "";
  position: absolute; inset: 0;
  background: no-repeat center / 34px 34px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7256' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M12 21c0-6 3-10 8-12-1 7-4 10-8 12Z'/%3E%3Cpath d='M12 21c0-5-2.5-8.5-7-10 .8 6 3.5 8.5 7 10Z'/%3E%3Cpath d='M12 21v-6'/%3E%3C/svg%3E");
  opacity: .5;
}

/* --------------------------------------------------------- text-only tiles */
/*
   Sections 08 and 10 of the blueprint are lists of ideas, not products. They
   were borrowing the category card, which expects a photograph and collapses
   to a cramped strip without one.
*/
.tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

.tile {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--gold-soft);
  border-radius: var(--radius); padding: 20px 20px 22px;
  text-decoration: none; color: inherit; min-height: 100%;
}
a.tile { transition: border-color .18s, transform .18s; }
a.tile:hover { border-left-color: var(--green); transform: translateY(-2px); }
.tile__name { font: 600 17px/1.3 var(--serif); color: var(--green-deep); }
.tile__body { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.tile__more { margin-top: auto; font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding-top: 10px; }

/* ============================================================================
   Reviews — blueprint §11
   ========================================================================= */

.stars { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1; }
.stars__on   { color: var(--gold); }
.stars__off  { color: var(--line); }
/* Half a star: the gold half is painted with a gradient clip so it is one
   glyph, not two overlapping ones that drift apart at different font sizes. */
.stars__half {
  background: linear-gradient(90deg, var(--gold) 50%, var(--line) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stars__count { color: var(--ink-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.card__rating { margin: 0 0 6px; }
.pdp__rating { margin: 10px 0 0; }
.pdp__rating a { text-decoration: none; }
.pdp__rating a:hover .stars__count { text-decoration: underline; }

.reviews__grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); }
@media (max-width: 800px) { .reviews__grid { grid-template-columns: minmax(0, 1fr); } }

.reviews__summary { align-self: start; }
.reviews__average { font-family: var(--serif); font-size: 54px; line-height: 1; margin: 0 0 8px; color: var(--green); }
.reviews__average span { font-size: 20px; color: var(--ink-faint); }
.reviews__count { color: var(--ink-soft); font-size: 13.5px; margin: 8px 0 16px; }
.reviews__none { color: var(--ink-soft); font-size: 14.5px; }
.reviews__none strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 19px; margin-bottom: 4px; }

.reviews__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reviews__bars li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; align-items: center; gap: 8px; font-size: 12.5px; }
.reviews__barlabel { color: var(--ink-faint); }
.reviews__bartrack { background: var(--line-soft); height: 7px; border-radius: 4px; overflow: hidden; }
.reviews__barfill  { display: block; height: 100%; background: var(--gold-soft); }
.reviews__barcount { color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }

.review { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.review:first-child { padding-top: 0; }
.review__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.review__who { font-weight: 600; font-size: 14px; }
.review__verified {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  color: var(--ok); background: var(--green-soft); padding: 2px 8px; border-radius: 10px;
}
.review__head time { color: var(--ink-faint); font-size: 12.5px; margin-left: auto; }
.review__title { font-family: var(--serif); font-size: 19px; margin: 0 0 6px; }
.review__body { margin: 0; color: var(--ink-soft); white-space: pre-wrap; }

.review__reply { margin-top: 12px; padding: 12px 16px; background: var(--cream-deep); border-radius: var(--radius); }
.review__reply strong { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--green); }
.review__reply p { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }

.reviews__pager { display: flex; gap: 16px; align-items: center; padding: 18px 0; font-size: 13.5px; color: var(--ink-faint); }

.review-form { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 20px; }
.review-form > summary {
  cursor: pointer; font-family: var(--serif); font-size: 21px; color: var(--green);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.review-form > summary::-webkit-details-marker { display: none; }
.review-form > summary::after { content: "+"; color: var(--gold); font-size: 24px; }
.review-form[open] > summary::after { content: "−"; }
.review-form form { margin-top: 18px; max-width: 620px; }
.review-form__terms { font-size: 12.5px; color: var(--ink-faint); margin: 4px 0 16px; }

/* The star picker. Radios laid out in reverse so a plain sibling selector can
   light every star to the left of the hovered or checked one — no JavaScript,
   and it still works as a radio group for a keyboard or a screen reader. */
.rate { border: 0; padding: 0; margin: 0 0 18px; }
.rate legend { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 0; margin-bottom: 6px; }
.rate__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate__stars label { font-size: 30px; line-height: 1; color: var(--line); cursor: pointer; transition: color .12s; }
.rate__stars input:checked ~ label,
.rate__stars label:hover,
.rate__stars label:hover ~ label { color: var(--gold); }
.rate__stars input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* ------------------------------------------------------- discount codes */

.summary dt.discount, .summary dd.discount { color: var(--ok); }
.summary .free { color: var(--ok); font-weight: 600; }

.coupon { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.coupon__toggle > summary {
  cursor: pointer; font-size: 13.5px; color: var(--green); list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.coupon__toggle > summary::-webkit-details-marker { display: none; }
.coupon__toggle > summary::after { content: "+"; color: var(--gold); }
.coupon__toggle[open] > summary::after { content: "−"; }
.coupon__toggle form { display: flex; gap: 8px; margin-top: 10px; }
.coupon__toggle input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); text-transform: uppercase;
}
.coupon__toggle input::placeholder { text-transform: none; }

.coupon__applied {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--green-soft); border-radius: var(--radius); padding: 10px 12px; font-size: 13.5px;
}
.coupon__what { display: block; color: var(--ink-soft); font-size: 12.5px; }
.linkbtn {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--green); text-decoration: underline; cursor: pointer;
}

/* ------------------------------------------------ saved items & cookies */

.saveline { margin: 12px 0 0; font-size: 13.5px; }

.saved { position: relative; display: flex; flex-direction: column; gap: 8px; }
.saved form { text-align: right; }

.cookiebar {
  position: fixed; inset: auto 0 0 0; z-index: 150;
  background: var(--green-deep); color: #e2ece6;
  box-shadow: 0 -8px 30px -18px rgba(0, 0, 0, .6);
}
.cookiebar__inner {
  max-width: var(--wrap); margin-inline: auto; padding: 16px clamp(16px, 4vw, 32px);
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.cookiebar__title {
  margin: 0 0 2px; font-family: var(--serif); font-size: 18px; color: #fff;
}
.cookiebar__body { margin: 0; font-size: 13.5px; max-width: 62ch; line-height: 1.55; }
.cookiebar__body a { color: var(--gold-soft); }
/* Declining is one button, the same size as accepting. A banner where
   refusing takes three taps through a preferences panel is not a choice. */
.cookiebar__actions { margin-left: auto; display: flex; gap: 10px; }
.cookiebar .btn--quiet { background: transparent; color: #dbe7e0; border: 1px solid rgba(255,255,255,.35); }
.cookiebar .btn--quiet:hover { border-color: var(--gold-soft); color: #fff; }

/* On a narrow screen the review date wraps only when the name and badge happen
   to be long enough, so some rows carry it inline and others below. Give it its
   own line on every row instead — inconsistent is worse than either choice. */
@media (max-width: 560px) {
  .review__head time { flex-basis: 100%; margin-left: 0; order: -1; }
}

/* ============================================================================
   Wellness Journal — blueprint §2, §12
   ========================================================================= */

.journal__filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.journal__filters a {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 20px;
  font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-soft);
  background: var(--paper); white-space: nowrap;
}
.journal__filters a:hover { border-color: var(--green-mid); color: var(--green); }
.journal__filters a[aria-current="page"] { background: var(--green); border-color: var(--green); color: #fff; }

.journal__grid {
  display: grid; gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.jcard { display: flex; flex-direction: column; gap: 14px; }
.jcard__media {
  display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--radius); background: var(--cream-deep);
}
.jcard__media img { width: 100%; height: 100%; object-fit: cover; }
/* A card with no image keeps its shape rather than collapsing and pulling the
   whole row ragged — grid rows size to the tallest item either way. */
.jcard__blank { display: block; width: 100%; height: 100%; background: var(--cream-deep); }

.jcard__body { display: flex; flex-direction: column; gap: 7px; }
.jcard__cat {
  margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.jcard__title { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 24px); margin: 0; }
.jcard__title a { text-decoration: none; color: var(--ink); }
.jcard__title a:hover { color: var(--green); }
.jcard__excerpt { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.jcard__meta {
  margin: 0; display: flex; gap: 12px; color: var(--ink-faint); font-size: 12.5px;
}

/* ------------------------------------------------------------- an article */

.article { max-width: 760px; margin-inline: auto; padding-block: clamp(20px, 4vw, 44px); }
.article__head { margin-bottom: 28px; }
.article__head h1 { font-size: clamp(30px, 5vw, 46px); margin-bottom: 14px; }
.article__head .eyebrow a { color: var(--gold); text-decoration: none; }
.article__meta {
  display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-faint);
  font-size: 13.5px; margin: 16px 0 0;
}

.article__hero { margin: 0 0 32px; }
.article__hero img { width: 100%; border-radius: var(--radius); }

/* Reading measure. The body sits at roughly 68 characters, which is why the
   article column is narrower than the rest of the shop. */
.article__body { font-size: 17px; line-height: 1.75; }
.article__body h2 { font-size: clamp(24px, 3vw, 30px); margin: 38px 0 12px; }
.article__body h3 { font-size: 20px; margin: 28px 0 10px; }
.article__body p { margin: 0 0 20px; }
.article__body ul, .article__body ol { margin: 0 0 20px; padding-left: 24px; }
.article__body li { margin-bottom: 8px; }

.article__shop { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------- 3D pack shot view */
/* The pane overlays the photograph inside .gallery__main rather than replacing
   it in flow, so toggling the 3D view never changes the page height. */
.gallery__3d {
  /* Transparent until a frame has painted: the page opens in 3D, and the pack
     shot underneath is what fills the box while the model downloads. */
  position: absolute; inset: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.gallery__3d.is-ready { background: var(--paper); }
.gallery__3d[hidden] { display: none; }
.gallery__3d canvas { display: block; width: 100%; height: 100%; }

.gallery__3d.is-loading::after {
  content: "Loading 3D view‚6";
  font: 500 13px/1 var(--sans); color: var(--ink-faint); letter-spacing: .04em;
}
.gallery__3d.is-failed {
  font: 500 13px/1.5 var(--sans); color: var(--ink-faint); text-align: center; padding: 0 24px;
}

.gallery__thumbs button.thumb--3d {
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--sans); letter-spacing: .06em;
  color: var(--green-deep); background: var(--paper);
}
.gallery__thumbs button.thumb--3d[aria-pressed="true"] { border-color: var(--green); border-width: 2px; }
.gallery__thumbs button.thumb--3d[disabled] { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------- 3D on a listing card */
/* Absolute inside .card__media (which is already positioned), transparent
   until a frame paints, and never taking the pointer so the whole card is
   still one link to the product. */
.card__3d {
  position: absolute; inset: 0; display: block;
  pointer-events: none; background: transparent;
}
.card__3d.is-ready { background: var(--cream-deep); }
.card__3d canvas { display: block; width: 100%; height: 100%; }
.card__3d.is-failed { display: none; }

/* ---------------------------------------------------------------- checkout: payment method
   Each method is a bordered option; the selected one is ringed in the brand
   green via :has(), with a plain-border fallback for older engines. The
   instructions sit inside the label so they read as part of the choice. */
.pay { border: 0; padding: 0; margin: 4px 0 18px; }
.pay legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 10px; }
.pay__opt {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.pay__opt:hover { border-color: var(--green); }
.pay__opt:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: var(--cream); }
.pay__opt input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--green); }
.pay__body { display: flex; flex-direction: column; gap: 4px; }
.pay__label { font-weight: 600; font-size: 15px; }
.pay__note { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.pay__ref { font-size: 12.5px; color: var(--ink-faint); }

/* order confirmation: how to pay */
.paybox { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; background: var(--cream); margin: 4px 0 0; }
.paybox__head { margin: 0 0 6px; font-size: 14.5px; }
.paybox__note { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.paybox__ref { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); }

/* -------------------------------------------------------------- contact page */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; margin: 6px 0 8px; }
.contact-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; background: var(--paper); }
a.contact-card:hover { border-color: var(--green); }
.contact-card__k { font: 600 11.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.contact-card__v { font-size: 15px; color: var(--ink); }
.contact-card__cta { font-size: 13.5px; color: var(--green); margin-top: 2px; }
.contact-card--wa { background: #25d3661a; border-color: #25d36655; }

/* floating WhatsApp button */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: #25d366;
  box-shadow: 0 6px 18px rgba(0,0,0,.22); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(0,0,0,.28); }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } }

/* ------------------------------------------------- homepage trust + why-choose */
.trustbar { background: var(--green); color: #fff; position: relative; z-index: 4; }
.trustbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px clamp(18px, 4vw, 40px); padding-block: 14px; }
.trustbar__item { font: 600 13.5px/1.2 var(--sans); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.trustbar__item + .trustbar__item::before { content: ""; }

.whychoose__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.whychoose__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px); }
.whychoose__icon { font-size: 30px; line-height: 1; display: block; margin-bottom: 12px; }
.whychoose__title { font: 600 1.15rem/1.3 var(--serif); color: var(--green-deep); margin: 0 0 8px; }
.whychoose__text { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* #6 — Add to basket + Order now, side by side */
.addbar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.addbar__actions .btn { flex: 1 1 160px; }
.addbar__add { border-color: var(--green); color: var(--green); }
.addbar__add:hover { background: var(--green-soft); }

/* Order by WhatsApp — its own row under the two basket buttons, in WhatsApp's
   own green so it reads as a different route to the same thing. */
.addbar__wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 10px;
  background: #25d366; border-color: #25d366; color: #fff;
}
.addbar__wa:hover { background: #1eb958; border-color: #1eb958; color: #fff; }
.addbar__wa svg { flex: 0 0 auto; }

/* The unit price, shown only once more than one is being bought. */
.pdp__price-each { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-soft); }
.pdp__price-each[hidden] { display: none; }

/* #8 — clearer was / now pricing wherever a sale price is set */
.price small { color: var(--ink-faint); text-decoration: line-through; margin-right: 7px; font-weight: 500; }
.price--sale { color: var(--bad); }
.price__save { display: inline-block; margin-left: 8px; font: 700 11px/1 var(--sans); letter-spacing: .04em; color: var(--bad); background: #fbecea; padding: 3px 7px; border-radius: 4px; vertical-align: middle; }
.price--wasnow { display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price__was { font: 500 15px/1 var(--sans); color: var(--ink-faint); }
.price__was s { text-decoration: line-through; }
.price__now { font: 700 clamp(1.4rem, 2.4vw, 1.9rem)/1 var(--sans); color: var(--bad); }

/* #14 — click-to-zoom lightbox */
.gallery__main img.is-zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 40, 30, 0.86); cursor: zoom-out; animation: lb-in .15s ease; }
.lightbox img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.6); }
.lightbox__close { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox__close:hover { background: rgba(255,255,255,.26); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } }

/* #7 — variant with price, one clear line each */
.variants__opt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; }
.variants__label { font-weight: 600; }
.variants__price { font: 600 14px/1 var(--sans); color: var(--green-deep); white-space: nowrap; }

/* #13 — price + need filters in the listing sidebar */
.pricefilter { margin-top: 16px; }
.pricefilter__label { display: block; font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.pricefilter__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pricefilter__row input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font: 400 14px var(--sans); }
.pricefilter__row input:focus { border-color: var(--green-mid); }
.tagfilter { margin-top: 16px; }
.tagfilter .check { font-size: 14px; }

/* #11 — bundle "what's inside" block on the product page */
.bundle-includes { background: var(--green-soft); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 8px; }
.bundle-includes__head { font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 8px; }
.bundle-includes ul { margin: 0; padding-left: 18px; }
.bundle-includes li { font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.bundle-includes a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bundle-includes a:hover { color: var(--green-deep); }

/* #5 — trust badge slider (auto-scroll marquee, pauses on hover) */
.trustbadges { background: var(--cream-deep); border-block: 1px solid var(--line); overflow: hidden; padding: clamp(18px,2.6vw,30px) 0; position: relative; z-index: 4; }
/* Two identical groups sit side by side; each is repeated (in JS) until it is at
   least as wide as the row, so translating the track by exactly one group
   (-50%) loops seamlessly and never shows a gap. The animation is only switched
   on once that setup has run — without it the badges rest in place. Speed comes
   from --marquee-dur, set in JS so the travel rate is constant at any width. */
.trustbadges__track { display: flex; width: max-content; }
.trustbadges--ready .trustbadges__track { animation: badges-scroll var(--marquee-dur, 30s) linear infinite; }
.trustbadges:hover .trustbadges--ready .trustbadges__track,
.trustbadges--ready:hover .trustbadges__track,
.trustbadges--ready:focus-within .trustbadges__track { animation-play-state: paused; }
/* The trailing gap lives on the group, so one group + its gap is exactly the
   repeating unit that -50% steps by. */
.trustbadges__group { display: flex; align-items: flex-start; gap: clamp(20px,4vw,56px); padding-right: clamp(20px,4vw,56px); }
.trustbadges__item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 118px; text-align: center; }
.trustbadges__item img { width: clamp(72px, 8vw, 92px); height: auto; }
.trustbadges__cap { font: 500 12.5px/1.35 var(--sans); color: var(--ink-soft); }
@keyframes badges-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trustbadges { overflow-x: auto; }
  .trustbadges--ready .trustbadges__track { animation: none; }
}

/* Standing shelves in the listing sidebar (New in, Bestsellers, On offer…). */
.facets__browse { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 2px; }
.facets__browse a {
  display: block; padding: 7px 10px; margin-left: -10px; border-radius: var(--radius);
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.facets__browse a:hover { background: var(--green-soft); color: var(--green-deep); }
.facets__browse a.is-here { background: var(--green); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------- the people band
   The reference for this section was a black card set with gold rings. Dropped
   straight in it would have been the one dark band on a cream shop, so it is
   rebuilt in the shop's own materials: paper cards on cream, the portrait ringed
   in the brand gold, and the deep green kept for the names. */
.people { background: var(--cream-deep); border-block: 1px solid var(--line); }
.people__title { font-size: clamp(1.9rem, 3vw, 2.9rem); margin-top: 12px; color: var(--green-deep); }
.people__lede { margin-top: 14px; max-width: 60ch; }
.people__grid {
  display: grid; gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin-top: clamp(24px, 3.4vw, 44px);
}
.person {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px); text-align: center;
  border-top: 2px solid var(--gold-soft);
}
.person__portrait {
  width: clamp(104px, 12vw, 132px); aspect-ratio: 1; margin: 0 auto 16px;
  border-radius: 50%; overflow: hidden; background: var(--green-soft);
  display: grid; place-items: center; color: var(--green);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--gold-soft);
}
.person__portrait img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font: 600 19px/1.3 var(--serif); color: var(--green-deep); }
.person__role { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--gold); }
.person__note { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.person__tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 0; }
.person__tags span {
  font: 600 11.5px/1 var(--sans); letter-spacing: .04em;
  padding: 7px 12px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-deep);
}

/* ------------------------------------------------- reviews as a mobile rail
   On a phone a column of review cards is a long scroll past the same shape
   repeated. Below 768px they become one swipeable row instead: native scroll
   with snap points, so there is no script to load and no carousel to break.
   Above that they stay the grid they already were. */
@media (max-width: 767px) {
  .grid-bands.reviews-rail,
  .reviews__list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    /*
     * NOT decoration — this is what stops the rail widening the whole page.
     *
     * A scroll container only clips descendants whose containing block is
     * inside it. Left `static`, the absolutely-positioned bits within the
     * cards — the `visually-hidden` labels on each star rating — resolved
     * against an ancestor OUTSIDE the rail, escaped its clipping, and dragged
     * the document out to 604px on a 360px phone. The visible result was a
     * page that panned sideways and cut its own content off, on the product
     * page and anywhere else these rails appear.
     *
     * `position: relative` makes the rail their containing block, so they are
     * clipped with everything else. `.trustbadges` above has always had it,
     * which is why that scroller never leaked.
     */
    position: relative;
    scroll-snap-type: x mandatory;
    /* Cards reach the screen edges, which is what makes it read as swipeable. */
    margin-inline: calc(var(--gap, 20px) * -1);
    padding-inline: var(--gap, 20px);
    padding-bottom: 6px;
    scroll-padding-inline: var(--gap, 20px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .grid-bands.reviews-rail::-webkit-scrollbar,
  .reviews__list::-webkit-scrollbar { display: none; }

  .grid-bands.reviews-rail > *,
  .reviews__list > * {
    flex: 0 0 86%;
    /* `start`, so a card comes to rest against the left edge and the next one
       peeks on the right. Centred snapping left a sliver on BOTH sides, which
       reads as two broken cards rather than one whole one. */
    scroll-snap-align: start;
    margin: 0;
  }

  /*
   * In a column, a review is a bordered row and its text may run edge to edge.
   * In a ROW that is exactly what makes the rail look broken: the bottom border
   * becomes a stray line, and the next card peeks as words sliced down the
   * middle of a letter — which nobody reads as "swipe for more".
   *
   * As proper cards, what peeks is a border, a corner and some padding: the
   * shape everybody recognises as a carousel.
   */
  .reviews__list > .review,
  .reviews__list > .review-form {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 16px;
    margin: 0;
  }

  /* The column layout zeroes the first card's top padding and hangs a top
     border on the form. Both are wrong once these are cards. */
  .reviews__list > .review:first-child { padding-top: 16px; }
  .reviews__list > .review-form { border-top: 1px solid var(--line-soft); margin-top: 0; }
}