/* ============================================================================
   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. */
.card__pricewrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card__addform { margin: 0; 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; } }

/* ------------------------------------------------------------------ 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; }
.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; }