/* ==========================================================================
   Primic Jeevamrit — storefront design system
   Matched to the reference: cream #fff9e3 page, dark-olive #3d3e16 headings
   and footer, orange #fd8912 accents/CTAs, ALL-CAPS section titles,
   full-bleed collection band, circular concern tiles.
   ========================================================================== */

:root {
  /* ---- Brand: warm amber / turmeric (matches the Jeevamrit label) ---- */
  --brand-900: #004e52;
  --brand-800: #006b70;
  --brand-700: #00848a;
  --brand-600: #00989e;
  --brand-500: #00a6a6;   /* teal sampled from the Primic medical mark */
  --brand-400: #2ebabb;
  --brand-300: #70d0cf;
  --brand-200: #afe5e2;
  --brand-100: #d9f3f0;
  --brand-50:  #effaf8;
  --logo-red: #f3131b;
  --logo-red-dark: #c90d16;

  /* ---- Secondary: herbal green, used sparingly for trust cues ---- */
  --leaf-900: #251006;
  --leaf-800: #351503;
  --leaf-700: #4a210d;
  --leaf-600: #65331d;
  --leaf-500: #85533d;
  --leaf-100: #eaded7;
  --leaf-50:  #f7f1ed;

  /* ---- Neutrals ---- */
  --ink-900: #351503;
  --ink-800: #4a210d;
  --ink-700: #55564a;
  --ink-500: #6f7060;
  --ink-400: #9a938b;
  --ink-300: #c8c2ba;
  --ink-200: #e2ddc4;
  --ink-100: #efeada;
  --cream:   #fff9e3;   /* page background, sampled */
  --paper:   #fbf8ef;
  --white:   #ffffff;

  /* ---- Footer ---- */
  --foot-bg:   #351503;
  --foot-bg-2: #251006;

  /* ---- Status ---- */
  --red-600:   #c8382a;
  --green-600: #2f8a52;
  --blue-600:  #2563a8;
  --amber-500: #e08a14;

  /* ---- Type: single sans family, like the reference ---- */
  --font-head: 'Segoe UI', SegoeUI, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-body: 'Segoe UI', SegoeUI, -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* ---- Shape ---- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(23,21,18,.05);
  --shadow-sm: 0 1px 3px rgba(23,21,18,.07), 0 1px 2px rgba(23,21,18,.04);
  --shadow-md: 0 4px 12px -2px rgba(23,21,18,.08);
  --shadow-lg: 0 10px 26px -6px rgba(23,21,18,.12);
  --shadow-xl: 0 20px 44px -12px rgba(23,21,18,.18);

  --wrap: 1280px;
  --nav-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Floating cart drawer */
.cart-drawer-backdrop { position:fixed; inset:0; z-index:1090; background:rgba(18,28,20,.48); opacity:0; visibility:hidden; transition:opacity .28s,visibility .28s; }
.cart-drawer-backdrop.on { opacity:1; visibility:visible; }
.cart-drawer { position:fixed; z-index:1100; top:0; right:0; width:min(440px,100%); max-width:100vw; height:100dvh; overflow:hidden; background:#fff; box-shadow:-12px 0 40px rgba(25,45,29,.18); transform:translateX(105%); transition:transform .32s ease; display:flex; flex-direction:column; }
.cart-drawer.open { transform:translateX(0); }
.cart-drawer-open { overflow:hidden; }
.cart-drawer__head { padding:1.25rem 1.4rem; border-bottom:1px solid var(--line,#e5e8e2); display:flex; align-items:center; justify-content:space-between; }
.cart-drawer__head h2 { margin:0; font-size:1.35rem; }
.cart-drawer__head span { color:var(--ink-400,#687169); font-size:.82rem; }
.cart-drawer__close { border:0; background:transparent; font-size:2rem; line-height:1; color:var(--ink-700,#354038); cursor:pointer; padding:.2rem; }
.cart-drawer__items { overflow-y:auto; overflow-x:hidden; min-width:0; flex:1; padding:0 1.4rem; }
.cart-drawer__item { display:grid; grid-template-columns:88px minmax(0,1fr); gap:1rem; min-width:0; padding:1.2rem 0; border-bottom:1px solid var(--line,#e5e8e2); }
.cart-drawer__item img { width:88px; height:100px; border-radius:10px; object-fit:cover; background:#f3f5f1; }
.cart-drawer__info { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; }
.cart-drawer__name { max-width:100%; overflow-wrap:anywhere; color:var(--ink-900,#1c271f); font-weight:600; line-height:1.35; }
.cart-drawer__info>span { color:var(--ink-400,#687169); font-size:.78rem; }
.cart-drawer__info>strong { color:var(--green-700,#32633c); margin-top:.15rem; }
.cart-drawer__actions { display:flex; width:100%; align-items:center; justify-content:space-between; margin-top:.55rem; }
.cart-drawer__qty { display:flex; align-items:center; border:1px solid var(--line,#dfe4dc); border-radius:7px; overflow:hidden; }
.cart-drawer__qty button { width:30px; height:29px; border:0; background:#f6f8f4; cursor:pointer; font-size:1rem; }
.cart-drawer__qty span { min-width:30px; text-align:center; font-size:.85rem; }
.cart-drawer__remove { border:0; background:none; color:#8e3f35; text-decoration:underline; cursor:pointer; font-size:.78rem; }
.cart-drawer__empty { margin:auto; text-align:center; padding:2rem; }
.cart-drawer__empty p { margin-bottom:1rem; color:var(--ink-500,#657067); }
.cart-drawer__foot { padding:1.2rem 1.4rem 1.4rem; border-top:1px solid var(--line,#e5e8e2); box-shadow:0 -8px 24px rgba(25,45,29,.06); }
.cart-drawer__foot>div { display:flex; justify-content:space-between; font-size:1.05rem; }
.cart-drawer__foot p { font-size:.75rem; text-align:center; color:var(--ink-400,#687169); margin:.45rem 0 1rem; }
.cart-drawer__view { display:block; text-align:center; margin-top:.8rem; color:var(--green-700,#32633c); text-decoration:underline; font-size:.88rem; }
@media (prefers-reduced-motion:reduce) { .cart-drawer,.cart-drawer-backdrop { transition:none; } }

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink-900);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Section titles are set in caps in the reference */
h1, h2 { text-transform: none; letter-spacing: -.035em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }

::selection { background: var(--brand-200); color: var(--brand-900); }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Layout ------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(3.2rem, 6.5vw, 5.5rem) 0; }
.section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }
/* Reference alternates white with a soft cream — low contrast, lots of air */
.section--alt   { background: var(--cream); }
.section--cream { background: var(--brand-50); }
.section--tint  { background: var(--cream); }
.section--green { background: var(--leaf-800); color: rgba(255,255,255,.82); }
.section--green h2, .section--green h3, .section--green h4 { color: #fff; }

.grid { display: grid; gap: 1.4rem; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }

.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap-sm { gap: .5rem; }
.gap { gap: 1rem; }
.wrapf { flex-wrap: wrap; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.muted { color: var(--ink-500); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
.strong { font-weight: 600; color: var(--ink-900); }

/* ---- Section heading ---------------------------------------------------- */
.shead { margin-bottom: 2.4rem; }
.shead--center { text-align: center; max-width: 640px; margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head);
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-500);
  margin-bottom: .55rem;
}
.eyebrow::before {
  content: ''; width: 20px; height: 2px;
  background: var(--brand-500); border-radius: 2px;
}
.shead--center .eyebrow::before { display: none; }
.shead h2 em, .hero h1 em { font-style: normal; color: var(--brand-500); }
.shead p { color: var(--ink-500); margin-top: .65rem; font-size: 1rem; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 500; font-size: .92rem;
  border: 1.5px solid transparent;
  transition: all .2s var(--ease);
  white-space: nowrap;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand-500); color: #fff; }
.btn-primary:hover { background: var(--brand-600); box-shadow: var(--shadow-lg); }

.btn-gold { background: var(--brand-500); color: #fff; }
.btn-gold:hover { background: var(--brand-600); box-shadow: var(--shadow-lg); }

.btn-outline { border-color: var(--brand-500); color: var(--brand-700); background: transparent; }
.btn-outline:hover { background: var(--brand-500); color: #fff; }

.btn-ghost { color: var(--ink-700); border-color: var(--ink-200); background: var(--white); }
.btn-ghost:hover { border-color: var(--brand-500); color: var(--brand-700); }

.btn-light { background: #fff; color: var(--ink-900); }
.btn-light:hover { background: var(--brand-100); }

.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: var(--ink-800); }

.btn-sm { padding: .5rem 1.05rem; font-size: .82rem; }
.btn-lg { padding: .95rem 2.1rem; font-size: .98rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---- Announcement bar --------------------------------------------------- */
.announce {
  background: #404117; color: rgba(255,255,255,.96);
  font-family: var(--font-head);
  font-size: .95rem; font-weight: 550; letter-spacing: .015em;
  padding: .72rem 0; text-align: center; overflow: hidden;
}
/* Key words highlighted so the offer and the code stand out at a glance */
.announce b, .announce strong, .announce em {
  color: var(--brand-400); font-style: normal; font-weight: 800;
  letter-spacing: .02em;
}
/* Marquee: the track holds two copies of the text, so as the first scrolls
   out the second is already in place and the loop reads as continuous. */
.announce__track {
  display: flex; width: max-content;
  animation: ticker 30s linear infinite;
}
.announce__track > p {
  white-space: nowrap; margin: 0;
  padding-right: 4rem; /* gap between the repeats */
  /* Each copy spans at least the viewport, so the text is never on screen
     twice at once and no empty gap trails the first copy. */
  min-width: 100vw; text-align: center;
}
.announce:hover .announce__track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Respect a reduced-motion preference: hold the text still and centred. */
@media (prefers-reduced-motion: reduce) {
  .announce__track { animation: none; width: 100%; justify-content: center; }
  .announce__track > p { padding-right: 0; }
  .announce__track > p + p { display: none; }
}

@media (max-width: 640px) { .announce { font-size: .85rem; } }

/* ---- Header -------------------------------------------------------------
   Reference layout: cream bar, primary nav on the LEFT, logo CENTRED,
   Track Order + search pill + icon buttons on the RIGHT.
   ------------------------------------------------------------------------ */
.hdr {
  position: sticky; top: 0; z-index: 200;
  background: #fffbef;
  border-bottom: 1px solid var(--ink-200);
  transition: box-shadow .3s var(--ease);
}
.hdr.scrolled { box-shadow: var(--shadow-md); }
.hdr__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: var(--nav-h);
}
/* The reference header runs wider than the 1280px content wrap and its nav
   sits close to the viewport edge. */
.hdr .wrap { width: min(100% - 2.5rem, 1660px); }

/* Logo sits in the centre column. The artwork already contains the brand
   name, so it stands alone — no adjacent text. */
.logo { display: flex; align-items: center; justify-self: center; }
.logo img { height: 62px; width: auto; }
/* Kept for any legacy text-logo usage */
.logo__txt { display: flex; flex-direction: column; line-height: 1.05; }
.logo__txt b {
  font-family: var(--font-head); font-size: 1.22rem;
  color: var(--ink-900); font-weight: 700; letter-spacing: -.02em;
}
.logo__txt span {
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand-600); font-weight: 600;
}

/* Nav: left column, uppercase olive links */
.nav { display: flex; align-items: center; gap: .2rem; justify-self: start; margin-left: -.7rem; }
.nav__link {
  padding: .55rem .7rem; border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-size: .78rem; font-weight: 500; color: var(--ink-900);
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: .3rem;
  transition: color .18s var(--ease);
  position: relative;
}
.nav__link::after {
  content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .24rem;
  height: 2px; background: var(--brand-500); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__link:hover, .nav__link.active { color: var(--brand-600); }
.nav__link:hover::after, .nav__link.active::after { transform: scaleX(1); }
.nav__link .caret { width: 9px; height: 9px; opacity: .55; transition: transform .2s; }
.has-drop:hover .caret { transform: rotate(180deg); }

.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 4px); left: 0;
  transform: translateY(8px);
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-md); box-shadow: var(--shadow-xl);
  padding: .55rem; min-width: 248px;
  opacity: 0; visibility: hidden; transition: all .22s var(--ease);
}
.drop--wide { min-width: 470px; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; }
.has-drop:hover .drop, .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.drop a {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .7rem; border-radius: var(--r-sm);
  font-size: .865rem; color: var(--ink-700);
  transition: all .16s var(--ease);
}
.drop a:hover { background: var(--brand-50); color: var(--brand-700); }
.drop a .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-400); flex-shrink: 0; }

/* Right cluster */
.hdr__acts { display: flex; align-items: center; gap: .5rem; justify-self: end; }

.hdr__track {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head);
  font-size: .82rem; font-weight: 500; color: var(--ink-900);
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.hdr__track:hover { color: var(--brand-600); }
.hdr__track i {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--ink-200);
  display: grid; place-items: center; font-style: normal;
  flex-shrink: 0;
}
.hdr__track i svg { width: 19px; height: 19px; }

.hdr__search {
  display: flex; align-items: center;
  border: 1px solid var(--ink-200); border-radius: var(--r-pill);
  background: #fff; overflow: hidden;
  height: 40px; width: clamp(150px, 16vw, 240px);
  transition: border-color .18s var(--ease);
}
.hdr__search:focus-within { border-color: var(--brand-500); }
.hdr__search input {
  flex: 1; min-width: 0; border: none; background: none;
  padding: 0 .3rem 0 1rem; font-size: .84rem;
}
.hdr__search input:focus { outline: none; }
.hdr__search button {
  width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--ink-500); flex-shrink: 0;
}
.hdr__search button:hover { color: var(--brand-600); }
.hdr__search button svg { width: 17px; height: 17px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  color: var(--ink-900); transition: all .18s var(--ease);
  border: 1px solid var(--ink-200);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-300); }
.icon-btn svg { width: 19px; height: 19px; }
.badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--brand-500); color: #fff;
  font-size: .62rem; font-weight: 700;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  border: 2px solid #fffbef;
}
.burger { display: none; }

/* Below the desktop breakpoint the centre column collapses to a normal bar */
@media (max-width: 1100px) {
  .hdr__track span { display: none; }
  .hdr__search { width: 150px; }
}
/* ---- Mobile nav --------------------------------------------------------- */
.mnav {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 370px);
  background: #fff; z-index: 400;
  transform: translateX(100%); transition: transform .32s var(--ease);
  overflow-y: auto; padding: 1.25rem; box-shadow: var(--shadow-xl);
}
.mnav.open { transform: translateX(0); }
.mnav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.mnav details { border-bottom: 1px solid var(--ink-100); }
.mnav summary {
  padding: .85rem .2rem; font-weight: 600; cursor: pointer;
  font-family: var(--font-head);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  color: var(--ink-900);
}
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::after { content: '+'; font-size: 1.3rem; color: var(--brand-500); font-weight: 400; }
.mnav details[open] summary::after { content: '−'; }
.mnav details a, .mnav > a {
  display: block; padding: .6rem .2rem .6rem 1rem;
  font-size: .9rem; color: var(--ink-500);
}
.mnav > a {
  padding-left: .2rem; font-weight: 600; color: var(--ink-900);
  border-bottom: 1px solid var(--ink-100); font-family: var(--font-head);
}
.mnav details a:hover, .mnav > a:hover { color: var(--brand-600); }
.scrim {
  position: fixed; inset: 0; background: rgba(23,21,18,.45);
  z-index: 380; opacity: 0; visibility: hidden; transition: all .3s;
}
.scrim.on { opacity: 1; visibility: visible; }

/* ---- Hero: image-only slider -------------------------------------------
   The banner creatives already carry their own headline, CTA and branding,
   so slides are pure artwork — no scrim, no HTML text overlay. The slider is
   sized to the artwork's own aspect ratio so nothing is cropped away.
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--cream);
  /* Break out to the full viewport so the banner is edge-to-edge. Using
     100vw would add the scrollbar width and cause a horizontal scroll, so
     measure against the containing block instead. */
  width: 100%;
  margin-inline: 0;
}
.heroslide {
  position: relative;
  display: grid;
  width: 100%;
  /* Matches the banner artwork (~1.943:1) so slides fill the frame exactly.
     No max-height here: capping the height while an aspect-ratio is set makes
     the grid shrink its own width to satisfy the cap, which left a gap at the
     right edge. Cap the image instead if a shorter hero is ever needed. */
  aspect-ratio: 1246 / 641;
  overflow: hidden;
}
/* All slides share one grid cell; inactive ones sit behind the active slide.
   visibility:hidden alone still leaves their box in paint order. */
.heroslide__item {
  grid-area: 1 / 1;
  position: relative;
  z-index: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease);
  display: block;
}
.heroslide__item.on { opacity: 1; visibility: visible; z-index: 2; }
.heroslide__bg {
  position: absolute; inset: 0; z-index: 0;
  /* max-width/height must be reset explicitly: the global
     `img { max-width:100%; height:auto }` reset otherwise wins and the image
     renders at its natural size, leaving a gap beside the slide. */
  width: 100%; height: 100%;
  max-width: none; min-width: 100%;
  /* All three creatives sit within 0.1% of the slider ratio, so cover fills
     the frame with imperceptible crop — and never leaves letterbox bars. */
  object-fit: cover;
  object-position: center;
  background: var(--cream);
}
@media (max-width: 640px) {
  .heroslide { max-height: none; }
}
.heroslide__dots {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 5;
}
/* The visible dot is a 4px bar, but a 4px tap target is unusable on touch.
   The button carries transparent vertical padding to reach the 24px minimum,
   and paints the bar through a pseudo-element so the look is unchanged. */
.heroslide__dots button {
  width: 30px; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.42); transition: all .25s var(--ease);
  position: relative;
}
.heroslide__dots button::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 24px;            /* invisible, extends the hit area only */
}
.heroslide__dots button.on { background: #fff; width: 46px; }

.heroslide__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: grid; place-items: center; color: var(--ink-900);
  box-shadow: var(--shadow-md); transition: all .2s var(--ease);
}
.heroslide__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.heroslide__arrow svg { width: 20px; height: 20px; }
.heroslide__arrow--prev { left: 1.2rem; }
.heroslide__arrow--next { right: 1.2rem; }

/* ---- Trust infographic --------------------------------------------------
   Four checkpoints read as one left-to-right process: a connecting rule
   runs behind the numbered markers, so the row is a flow rather than four
   unrelated icons. */
.trust { background: var(--cream); border-bottom: 1px solid var(--ink-200); }
.trust__head { text-align: center; padding: 3.2rem 0 0; }
/* Centred heading: drop the leading dash the inline eyebrow normally uses. */
.trust__head .eyebrow { color: var(--brand-700); }
.trust__head .eyebrow::before { display: none; }
.trust__head h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.2;
  color: var(--ink-900); margin: 0 0 .5rem;
}
.trust__head p { color: var(--ink-500); font-size: .95rem; margin: 0; }

.trust__flow {
  list-style: none; margin: 0; padding: 2.6rem 0 3.4rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
  position: relative;
}
.tstep {
  position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
/* Connector: drawn between adjacent markers only, so it never overhangs
   the first or last card. Sits behind the icons. */
.tstep + .tstep::before {
  content: ""; position: absolute; z-index: 0;
  top: 37px; right: calc(50% + 44px); width: calc(100% - 88px + 1.4rem);
  border-top: 2px dashed var(--brand-200);
}
.tstep__mark { position: relative; z-index: 1; margin-bottom: 1.1rem; }
.tstep__mark i {
  width: 74px; height: 74px; border-radius: 50%;
  background: #fff; color: var(--brand-700);
  display: grid; place-items: center; font-style: normal;
  box-shadow: inset 0 0 0 2px var(--brand-200), 0 10px 26px rgba(43,44,16,.09);
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}
.tstep__mark i svg { width: 32px; height: 32px; }
.tstep:hover .tstep__mark i {
  transform: translateY(-4px);
  color: var(--brand-800);
  box-shadow: inset 0 0 0 2px var(--brand-400), 0 16px 34px rgba(43,44,16,.16);
}
/* Step number badge on the marker */
.tstep__num {
  position: absolute; right: -4px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--logo-red); color: #fff;
  font-family: var(--font-head); font-size: .8rem; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 3px 9px rgba(243,19,27,.35);
}
.tstep__stat {
  font-family: var(--font-head); font-size: 1.32rem; font-weight: 800;
  color: var(--brand-700); line-height: 1.1; margin-bottom: .18rem;
}
.tstep__title {
  font-family: var(--font-head); font-size: .95rem; font-weight: 700;
  color: var(--ink-900); margin-bottom: .4rem;
}
.tstep__desc {
  font-size: .82rem; line-height: 1.55; color: var(--ink-500);
  max-width: 25ch;
}

@media (prefers-reduced-motion: reduce) {
  .tstep__mark i { transition: none; }
  .tstep:hover .tstep__mark i { transform: none; }
}

/* ---- Product card ------------------------------------------------------- */
.pcard {
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .25s var(--ease);
  position: relative;
}
.pcard:hover { box-shadow: var(--shadow-lg); border-color: var(--ink-200); transform: translateY(-3px); }

.pcard__media {
  position: relative; display: block;
  aspect-ratio: 1/1; background: var(--brand-50);
  overflow: hidden;
}
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.05); }

.pcard__tags { position: absolute; top: .7rem; left: .7rem; display: flex; flex-direction: column; gap: .3rem; z-index: 2; }
.tag {
  font-family: var(--font-head);
  font-size: .66rem; font-weight: 600; letter-spacing: .03em;
  padding: .26rem .6rem;
  border-radius: var(--r-sm); color: #fff;
  background: var(--brand-500);
}
.tag--off  { background: var(--red-600); }
.tag--best { background: var(--ink-900); }
.tag--out  { background: var(--ink-400); }

.pcard__wish {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.94);
  display: grid; place-items: center; color: var(--ink-400);
  box-shadow: var(--shadow-sm); transition: all .2s;
}
.pcard__wish:hover { color: var(--red-600); transform: scale(1.1); }
.pcard__wish.on { color: var(--red-600); }
.pcard__wish svg { width: 17px; height: 17px; }

.pcard__body { padding: 1rem 1.05rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.pcard__cat {
  font-family: var(--font-head);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--brand-600); font-weight: 600; margin-bottom: .35rem;
}
.pcard__name {
  font-family: var(--font-head); font-size: .95rem; font-weight: 600;
  color: var(--ink-900); line-height: 1.4; margin-bottom: .35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard:hover .pcard__name { color: var(--brand-700); }
.pcard__size { font-size: .74rem; color: var(--ink-400); margin-bottom: .45rem; }
.pcard__rate { display: flex; align-items: center; gap: .35rem; margin-bottom: .6rem; font-size: .75rem; color: var(--ink-500); }
.pcard__price { display: flex; align-items: baseline; gap: .45rem; margin-top: auto; margin-bottom: .85rem; flex-wrap: wrap; }
.pcard__price b {
  font-size: 1.12rem; color: var(--ink-900);
  font-family: var(--font-head); font-weight: 700;
}
.pcard__price s { font-size: .84rem; color: var(--ink-400); }
.pcard__buy-actions { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.pcard__buy-actions .btn { padding-left:.55rem; padding-right:.55rem; }
.pcard__quantity { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.65rem; }
.pcard__quantity>span { color:var(--ink-500); font-size:.75rem; font-weight:600; }
.qty--card { border-radius:8px; }
.qty--card button { width:28px; height:30px; font-size:.9rem; }
.qty--card input { width:34px; font-size:.8rem; }
@media (max-width:420px) { .pcard__buy-actions { grid-template-columns:1fr; } }

.pcard__price em {
  font-size: .74rem; color: var(--brand-600); font-weight: 600; font-style: normal;
}

/* ---- Stars -------------------------------------------------------------- */
.stars { display: inline-flex; gap: 1px; }
.stars .star {
  width: 13px; height: 13px; display: inline-block;
  background: var(--ink-200);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.stars .star.on { background: var(--brand-500); }
.stars .star.half { background: linear-gradient(90deg, var(--brand-500) 50%, var(--ink-200) 50%); }
.stars--lg .star { width: 16px; height: 16px; }

/* ---- Shop by concern: square image tiles, label underneath -------------- */
.concerns {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 1.4rem 1.1rem;
}
.concern { text-align: center; display: block; transition: transform .25s var(--ease); }
.concern:hover { transform: translateY(-4px); }
.concern i {
  display: grid; place-items: center;
  aspect-ratio: 1/1; width: 100%;
  border-radius: 50%;
  background: var(--tint, var(--brand-100));
  color: var(--ink, var(--brand-700));
  font-style: normal; margin-bottom: .7rem;
  overflow: hidden;
  transition: all .28s var(--ease);
  border: 1px solid rgba(23,21,18,.05);
}
.concern:hover i { box-shadow: var(--shadow-lg); }
.concern i svg { width: 40%; height: 40%; }
.concern b {
  display: block; font-family: var(--font-head);
  font-size: .875rem; color: var(--ink-900); font-weight: 500;
  line-height: 1.35;
}
.concern:hover b { color: var(--brand-700); }

/* Soft per-tile tints — warm, low-saturation, in the reference's spirit */
.concern:nth-child(10n+1) { --tint:#fdeed4; --ink:#a8630c; }
.concern:nth-child(10n+2) { --tint:#e6f4ea; --ink:#2a6b3f; }
.concern:nth-child(10n+3) { --tint:#eaf1fa; --ink:#26497f; }
.concern:nth-child(10n+4) { --tint:#fdecef; --ink:#a8333f; }
.concern:nth-child(10n+5) { --tint:#f3eefb; --ink:#5b3f96; }
.concern:nth-child(10n+6) { --tint:#e6f5f7; --ink:#186a76; }
.concern:nth-child(10n+7) { --tint:#fdf0e2; --ink:#a35a12; }
.concern:nth-child(10n+8) { --tint:#eff7e4; --ink:#4a7318; }
.concern:nth-child(10n+9) { --tint:#fdeee9; --ink:#a8462a; }
.concern:nth-child(10n)   { --tint:#eef1f6; --ink:#3c4a63; }

/* ---- Collection cards --------------------------------------------------- */
.colcard {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: 250px; display: flex; align-items: flex-end;
  padding: 1.6rem; color: #fff;
  background: var(--ink-800);
  transition: all .3s var(--ease);
}
.colcard__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.colcard:hover .colcard__bg { transform: scale(1.06); }
.colcard::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(18,14,10,.86) 0%, rgba(18,14,10,.34) 55%, rgba(18,14,10,.08) 100%);
}
.colcard:hover { box-shadow: var(--shadow-xl); }
.colcard > div { position: relative; z-index: 2; }
.colcard h3 { color: #fff; margin-bottom: .35rem; }
.colcard p { font-size: .85rem; opacity: .85; margin-bottom: .8rem; }
.colcard span {
  font-family: var(--font-head);
  font-size: .8rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--brand-300);
}

/* ---- Ingredient cards --------------------------------------------------- */
.ing {
  background: #fff; border-radius: var(--r-lg);
  padding: 1.5rem 1.2rem; text-align: center;
  border: 1px solid var(--ink-100); transition: all .25s var(--ease);
}
.ing:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ing__icon {
  width: 84px; height: 84px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--brand-100);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 700;
  color: var(--brand-700);
  transition: transform .3s var(--ease);
}
.ing__icon img { width: 100%; height: 100%; object-fit: cover; }
.ing:hover .ing__icon { transform: scale(1.06); }
.ing h4 { margin-bottom: .4rem; }
.ing p { font-size: .82rem; color: var(--ink-500); }

/* ---- Testimonials ------------------------------------------------------- */
.tcard {
  background: #fff; border-radius: var(--r-lg);
  padding: 1.7rem; border: 1px solid var(--ink-100);
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  transition: all .25s var(--ease);
}
.tcard:hover { box-shadow: var(--shadow-lg); }
.tcard__quote {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-600);
  display: grid; place-items: center; margin-bottom: .9rem;
}
.tcard__quote svg { width: 16px; height: 16px; }
.tcard p { font-size: .92rem; color: var(--ink-700); margin: .7rem 0 1.2rem; flex: 1; }
.tcard__who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.tcard__av {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand-500); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  flex-shrink: 0;
}
.tcard__who b { display: block; font-size: .875rem; color: var(--ink-900); font-family: var(--font-head); }
.tcard__who span { font-size: .74rem; color: var(--ink-400); }

/* ---- Blog cards --------------------------------------------------------- */
.bcard {
  background: #fff; border: 1px solid var(--ink-100);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; transition: all .25s var(--ease);
}
.bcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.bcard__media { aspect-ratio: 16/10; overflow: hidden; background: var(--brand-50); position: relative; }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.bcard:hover .bcard__media img { transform: scale(1.05); }
.bcard__body { padding: 1.2rem; display: flex; flex-direction: column; flex: 1; }
.bcard__meta {
  font-family: var(--font-head);
  font-size: .7rem; color: var(--brand-600); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem;
}
.bcard h3 { font-size: 1rem; margin-bottom: .5rem; line-height: 1.4; }
.bcard:hover h3 { color: var(--brand-700); }
.bcard p { font-size: .85rem; color: var(--ink-500); flex: 1; }
.bcard__more {
  margin-top: .9rem; font-size: .82rem; font-weight: 600;
  color: var(--brand-600); display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-head);
}

/* ---- FAQ ---------------------------------------------------------------- */
.faq { max-width: 800px; margin-inline: auto; }
.faq details {
  background: #fff; border: 1px solid var(--ink-100);
  border-radius: var(--r-md); margin-bottom: .7rem;
  transition: all .22s var(--ease); overflow: hidden;
}
.faq details[open] { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.faq summary {
  padding: 1.05rem 1.3rem; cursor: pointer; list-style: none;
  font-family: var(--font-head);
  font-weight: 500; color: var(--ink-900); font-size: .95rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid var(--brand-500); border-bottom: 2px solid var(--brand-500);
  transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq__a { padding: 0 1.3rem 1.15rem; color: var(--ink-500); font-size: .89rem; }

/* ---- Media strip -------------------------------------------------------- */
.media-strip { display: flex; gap: 2.6rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.media-strip span {
  font-family: var(--font-head); font-size: 1rem; font-weight: 600;
  color: var(--ink-300); transition: color .25s;
}
.media-strip span:hover { color: var(--brand-600); }

/* ---- Newsletter --------------------------------------------------------- */
.news {
  background: var(--brand-500);
  border-radius: var(--r-xl); padding: clamp(2rem, 5vw, 3.4rem);
  text-align: center; color: #fff;
  position: relative; overflow: hidden;
}
.news::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.2), transparent 46%),
              radial-gradient(circle at 84% 88%, rgba(0,0,0,.12), transparent 46%);
}
.news > * { position: relative; z-index: 2; }
.news h2 { color: #fff; margin-bottom: .6rem; }
.news p { max-width: 46ch; margin: 0 auto 1.8rem; opacity: .92; font-size: .96rem; }
.news__form { display: flex; gap: .6rem; max-width: 470px; margin-inline: auto; flex-wrap: wrap; }
.news__form input {
  flex: 1; min-width: 210px; padding: .82rem 1.2rem;
  border-radius: var(--r-pill); border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.16); color: #fff; font-size: .92rem;
}
.news__form input::placeholder { color: rgba(255,255,255,.72); }
.news__form input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.24); }

/* ---- Footer: dark charcoal, like the reference -------------------------- */
.ftr { background: var(--foot-bg); color: rgba(255,255,255,.62); padding-top: 3.6rem; }
.ftr__grid {
  display: grid; grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 2.5rem; padding-bottom: 2.6rem;
}
.ftr__brand .logo__txt b { color: #fff; }
.ftr__brand p { font-size: .86rem; margin: 1rem 0 1.3rem; max-width: 34ch; }
.ftr h5 {
  font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: 1.1rem;
}
.ftr__links li { margin-bottom: .55rem; }
.ftr__links a {
  font-size: .86rem; transition: all .18s;
  display: inline-flex; align-items: center; gap: .5rem;
}
.ftr__links a:hover { color: var(--brand-400); }
.ftr__links a svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .65; }
.ftr__links a:hover svg { opacity: 1; }

.socials { display: flex; gap: .55rem; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: grid; place-items: center;
  transition: all .22s var(--ease);
}
.socials a:hover { background: var(--brand-500); color: #fff; transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

.ftr__contact li { display: flex; gap: .6rem; margin-bottom: .8rem; font-size: .85rem; align-items: flex-start; }
.ftr__contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--brand-400); }

.ftr__bot {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 1.4rem 0; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .8rem;
}
.ftr__pay { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.ftr__pay span {
  background: rgba(255,255,255,.1); padding: .3rem .62rem;
  border-radius: 5px; font-size: .66rem; font-weight: 600; letter-spacing: .04em;
}
.ftr__disc { font-size: .73rem; opacity: .48; padding-bottom: 1.6rem; line-height: 1.65; }

/* ---- Page head ---------------------------------------------------------- */
.phead {
  background: var(--brand-50);
  padding: 2.4rem 0; border-bottom: 1px solid var(--ink-100);
}
.crumb { display: flex; gap: .45rem; align-items: center; font-size: .8rem; color: var(--ink-400); margin-bottom: .55rem; flex-wrap: wrap; }
.crumb a:hover { color: var(--brand-600); }
.crumb i { font-style: normal; opacity: .5; }

/* ---- Forms -------------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-family: var(--font-head);
  font-size: .82rem; font-weight: 500; color: var(--ink-900); margin-bottom: .4rem;
}
.field label .req { color: var(--red-600); }
.inp, .field input, .field select, .field textarea {
  width: 100%; padding: .74rem .95rem;
  border: 1.5px solid var(--ink-200); border-radius: var(--r-sm);
  background: #fff; font-size: .92rem;
  transition: all .18s var(--ease);
}
.inp:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: .76rem; color: var(--ink-400); margin-top: .3rem; }
.field .err { font-size: .78rem; color: var(--red-600); margin-top: .3rem; }
.password-control { position:relative; }
.field .password-control input { padding-right:4.4rem; }
.password-control__toggle { position:absolute; top:50%; right:.85rem; transform:translateY(-50%); border:0; padding:.2rem; background:transparent; color:var(--brand-700); font-size:.78rem; font-weight:700; cursor:pointer; }
.password-control__toggle:hover { color:var(--logo-red); }
.password-control__toggle:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; border-radius:4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.card {
  background: #fff; border: 1px solid var(--ink-100);
  border-radius: var(--r-lg); padding: 1.6rem;
}
.card--pad { padding: 2rem; }

/* ---- Alerts ------------------------------------------------------------- */
.alert {
  padding: .85rem 1.1rem; border-radius: var(--r-sm);
  font-size: .88rem; margin-bottom: 1rem;
  display: flex; gap: .6rem; align-items: flex-start;
  border-left: 3px solid;
}
.alert-success { background: var(--leaf-50);  color: var(--leaf-800); border-color: var(--leaf-600); }
.alert-error   { background: #fdf0ee;         color: #8f2c1f;         border-color: var(--red-600); }
.alert-info    { background: #eef4fb;         color: #1d4d80;         border-color: var(--blue-600); }
.alert-warning { background: var(--brand-100); color: var(--brand-800); border-color: var(--brand-500); }

/* ---- Toast -------------------------------------------------------------- */
.toasts { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 900; display: flex; flex-direction: column; gap: .6rem; }

.chat-widget { position:fixed;left:1.35rem;bottom:1.35rem;z-index:880 }
.chat-float { margin-right:auto;display:flex;align-items:center;gap:.65rem;padding:.72rem 1rem .72rem .78rem;border:0;border-radius:999px;background:var(--brand-700);color:#fff;font:600 .82rem var(--font-head);box-shadow:0 12px 30px rgba(0,93,98,.28);transition:transform .2s,box-shadow .2s;cursor:pointer }
.chat-float:hover { transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,93,98,.35) }.chat-float svg{width:27px;height:27px;flex:none}
.chat-panel { width:min(370px,calc(100vw - 2rem));margin-bottom:.8rem;border-radius:20px;background:#fff;box-shadow:0 22px 60px rgba(25,35,27,.25);overflow:hidden;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .2s,transform .2s;transform-origin:bottom left }.chat-panel.open{opacity:1;transform:none}
.chat-panel__head{display:flex;justify-content:space-between;align-items:flex-start;padding:1.1rem 1.2rem;background:var(--brand-700);color:#fff}.chat-panel__head>div{position:relative;padding-left:17px}.chat-panel__head strong,.chat-panel__head small{display:block}.chat-panel__head small{font-size:.7rem;opacity:.8;margin-top:.15rem}.chat-panel__head button{border:0;background:none;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}.chat-panel__status{position:absolute;left:0;top:.35rem;width:9px;height:9px;border-radius:50%;background:#56e08b;box-shadow:0 0 0 3px rgba(86,224,139,.2)}
.chat-panel__body{padding:1rem}.chat-bubble{max-width:88%;padding:.75rem .85rem;border-radius:4px 15px 15px 15px;background:var(--brand-50);font-size:.83rem;color:var(--ink-800);margin-bottom:1rem}.chat-panel label{display:block;margin-bottom:.7rem}.chat-panel label span{display:block;font-size:.7rem;font-weight:600;margin-bottom:.25rem;color:var(--ink-700)}.chat-panel input,.chat-panel textarea{width:100%;padding:.65rem .7rem;border:1px solid var(--ink-200);border-radius:9px;font:inherit}.chat-panel textarea{min-height:78px;resize:vertical}.chat-panel__result{min-height:1.1rem;margin-top:.55rem;text-align:center;color:var(--green-600);font-size:.72rem}.chat-panel__result.err{color:var(--red-600)}.chat-whatsapp{display:block;text-align:center;margin-top:.55rem;font-size:.75rem;color:#168447;font-weight:600}
/* Clear the product page's sticky buy bar so the chat button never sits
   on top of Add to Cart. */
@media(max-width:780px){body.has-mobile-buy .chat-widget{bottom:5.5rem}}
@media(max-width:520px){.chat-widget{left:1rem;bottom:1rem}body.has-mobile-buy .chat-widget{bottom:5.5rem}.chat-float{width:54px;height:54px;padding:0;justify-content:center}.chat-float span{display:none}.chat-float svg{width:29px;height:29px}.chat-panel{max-height:calc(100vh - 90px);overflow:auto}}
.toast {
  background: var(--ink-900); color: #fff;
  padding: .85rem 1.2rem; border-radius: var(--r-md);
  font-size: .88rem; box-shadow: var(--shadow-xl);
  display: flex; align-items: center; gap: .6rem;
  animation: slideIn .32s var(--ease);
  max-width: 340px;
}
.toast.err { background: var(--red-600); }
@keyframes slideIn { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Product detail ----------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.pdp__gallery { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.pdp__main {
  background: #fff; border: 1px solid var(--ink-100);
  border-radius: var(--r-lg); aspect-ratio: 1/1; overflow: hidden;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.pdp__thumbs button {
  width: 68px; height: 68px; border-radius: var(--r-sm);
  border: 2px solid var(--ink-100); background: #fff;
  overflow: hidden; transition: all .2s; padding: 0;
}
.pdp__thumbs button.on, .pdp__thumbs button:hover { border-color: var(--brand-500); }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp__price { display: flex; align-items: baseline; gap: .7rem; margin: 1rem 0 1.3rem; flex-wrap: wrap; }
.pdp__price b { font-size: 1.95rem; font-family: var(--font-head); color: var(--ink-900); font-weight: 700; }
.pdp__price s { font-size: 1.05rem; color: var(--ink-400); }
.pdp__price em {
  font-style: normal; font-size: .8rem; font-weight: 600;
  background: var(--brand-100); color: var(--brand-800);
  padding: .24rem .62rem; border-radius: var(--r-sm);
}

/* ---- PDP quality marks (infographic) ------------------------------------
   Each badge leads with the figure, backed by a tinted panel keyed to its
   own accent, with the icon as a watermark rather than a competing circle. */
.pdp__usps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .6rem; margin-top: 1.15rem; padding: 0; list-style: none;
}
.usp {
  --usp: var(--brand-500);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .85rem .8rem .8rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-top: 3px solid var(--usp);
  border-radius: var(--r-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.usp:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Tinted wash, strongest at the top where the accent rule sits. */
.usp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(170deg, color-mix(in srgb, var(--usp) 13%, transparent), transparent 60%);
}
.usp > :not(.usp__icon) { position: relative; z-index: 1; }

/* Watermark icon, top-right, deliberately low-contrast. */
.usp__icon {
  position: absolute; z-index: 0; top: .45rem; right: .45rem;
  width: 30px; height: 30px; color: var(--usp); opacity: .22;
}
.usp__icon svg { width: 100%; height: 100%; }

.usp__stat {
  font-family: var(--font-head); font-size: 1.3rem; font-weight: 800;
  line-height: 1; color: var(--usp); letter-spacing: -.01em;
}
.usp__title {
  font-family: var(--font-head); font-size: .76rem; font-weight: 700;
  line-height: 1.3; color: var(--ink-900); margin-top: .35rem;
}
/* margin-top:auto keeps the notes on a common baseline even when one
   title wraps to a second line. */
.usp__note {
  font-size: .66rem; line-height: 1.35; color: var(--ink-400);
  margin-top: auto; padding-top: .2rem;
}

/* Per-badge accents */
.usp--natural { --usp: var(--leaf-600); }
.usp--sugar   { --usp: var(--brand-600); }
.usp--gmp     { --usp: var(--blue-600); }
.usp--lab     { --usp: #5b3f96; }

@media (prefers-reduced-motion: reduce) {
  .usp { transition: none; }
  .usp:hover { transform: none; }
}
/* ---- Regulatory marks (FSSAI licence + country of origin) ---------------
   Two rounded pills sitting side by side, each stacking its mark above a
   caption. Official artwork is never tinted or recoloured. */
.pdp__marks {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: 2rem;
}
.pmark {
  flex: 1 1 220px; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  /* .prose sets a tall body line-height that would otherwise pad the pill. */
  line-height: 1;
  padding: 1rem 1.4rem;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  background: var(--cream, #fffdf8);
}
/* Sized by width so the wordmark reads at the same weight as the flag
   badge beside it; height follows the artwork's own ratio. */
/* aspect-ratio pins the box from the width alone, so the intrinsic
   height="123" attribute cannot inflate the row it sits in. */
.pmark__logo { display: block; width: 96px; height: auto; aspect-ratio: 250 / 123; object-fit: contain; }
.pmark__flag {
  display: block; height: 31px; width: auto;
  /* Hairline keeps the white middle band legible on a cream ground. */
  border: 1px solid rgba(0,0,0,.12); border-radius: 2px;
}
.pmark__wordmark {
  color: var(--brand-700); font: italic 700 1.5rem/1 var(--font-head);
  text-transform: lowercase; letter-spacing: .01em;
}
.pmark__label {
  font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-700); text-align: center; line-height: 1.3;
}
.pdp__help { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin:1rem 0; padding:1rem; border:1px solid var(--brand-200); border-radius:var(--r-md); background:#fff; box-shadow:var(--shadow-sm); }
.pdp__help-copy,.pdp__help-actions { display:flex; align-items:center; gap:.65rem; min-width:0; }
/* Narrow screens: stack the copy above full-width actions rather than
   letting two fixed-width buttons push the row past the viewport. */
@media (max-width:520px) {
  .pdp__help { flex-direction:column; align-items:stretch; gap:.85rem; }
  .pdp__help-actions { width:100%; }
  .pdp__help-actions > * { flex:1 1 0; justify-content:center; }
}
.pdp__help-copy b,.pdp__help-copy small { display:block; }
.pdp__help-copy small { color:var(--ink-500); font-size:.72rem; margin-top:.1rem; }
.pdp__help-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--brand-600); }
.btn-whatsapp { color:#fff; background:#22a85a; border-color:#22a85a; }
.btn-whatsapp:hover { color:#fff; background:#198b49; border-color:#198b49; }
.pdp__service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin-top:1rem; }
.pdp__service-grid > div { min-width:0; padding:.85rem .55rem; border:1px solid var(--ink-100); border-radius:var(--r-sm); text-align:center; background:#fff; }
.pdp__service-grid span,.pdp__service-grid b,.pdp__service-grid small { display:block; }
.pdp__service-grid span { font-size:1.2rem; margin-bottom:.25rem; }
.pdp__service-grid b { color:var(--ink-800); font-size:.76rem; }
.pdp__service-grid small { color:var(--ink-400); font-size:.66rem; margin-top:.12rem; }
/* Sticky quick-buy bar: hidden on desktop, pinned to the foot on mobile so
   the price and Add to Cart stay reachable without scrolling back up. */
.pdp__mobile-buy { display:none; }
@media (max-width: 780px) {
  .pdp__mobile-buy {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
    border-top:1px solid var(--ink-200);
    box-shadow:0 -6px 22px rgba(43,44,16,.1);
  }
  .pdp__mobile-buy small { display:block; color:var(--ink-500); font-size:.7rem; line-height:1.2; }
  .pdp__mobile-buy b { display:block; font-family:var(--font-head); font-size:1.05rem; color:var(--ink-900); }
  .pdp__mobile-buy .btn { flex:0 0 auto; min-height:44px; padding-inline:1.4rem; }
  /* Keep the bar from covering the end of the page. */
  body.has-mobile-buy { padding-bottom:76px; }
}
/* Stacked full-width pills: lay the mark beside its caption instead of
   above it, so a 999px radius does not balloon the pill's height. */
@media (max-width:480px) {
  .pdp__marks { flex-direction:column; }
  /* The parent is now a column, so flex-basis would size the HEIGHT —
     reset it to auto or each pill inherits the 220px basis as its height. */
  .pmark { flex:0 0 auto; max-width:none; flex-direction:row; align-items:center; justify-content:center; gap:.7rem; padding:.7rem 1rem; }
  /* Smaller marks so the caption stays on one line at 375px. */
  .pmark__logo { width:68px; }
  .pmark__flag { height:24px; }
  .pmark__label { text-align:left; font-size:.72rem; letter-spacing:.04em; }
}

.variants { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.variant {
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1rem; border: 1.5px solid var(--ink-200);
  border-radius: var(--r-md); cursor: pointer; transition: all .2s var(--ease);
  background: #fff;
}
.variant:hover { border-color: var(--brand-300); }
.variant.on { border-color: var(--brand-500); background: var(--brand-50); }
.variant input { display: none; }
.variant__radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--ink-200); flex-shrink: 0; position: relative;
  transition: all .2s;
}
.variant.on .variant__radio { border-color: var(--brand-500); }
.variant.on .variant__radio::after {
  content: ''; position: absolute; inset: 3px;
  background: var(--brand-500); border-radius: 50%;
}
.variant__lbl { flex: 1; font-size: .89rem; font-weight: 500; color: var(--ink-900); font-family: var(--font-head); }
.variant__pr { text-align: right; }
.variant__pr b { display: block; font-size: .95rem; color: var(--ink-900); font-family: var(--font-head); }
.variant__pr s { font-size: .76rem; color: var(--ink-400); }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--ink-200); border-radius: var(--r-pill); overflow: hidden; }
.qty button { width: 38px; height: 44px; font-size: 1.1rem; color: var(--ink-700); transition: background .18s; }
.qty button:hover { background: var(--brand-50); color: var(--brand-700); }
.qty input { width: 46px; text-align: center; border: none; font-weight: 600; background: transparent; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.tabs { display: flex; gap: .3rem; border-bottom: 1.5px solid var(--ink-100); margin-bottom: 1.5rem; overflow-x: auto; }
.tabs button {
  padding: .8rem 1.15rem; font-size: .89rem; font-weight: 500;
  font-family: var(--font-head);
  color: var(--ink-500); border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px; white-space: nowrap; transition: all .2s;
}
.tabs button.on { color: var(--brand-700); border-color: var(--brand-500); }
.tabs button:hover { color: var(--brand-700); }
.tabpane { display: none; }
.tabpane.on { display: block; animation: fadeIn .3s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.prose { color: var(--ink-700); line-height: 1.8; }
.prose p { margin-bottom: 1rem; }
.prose h3 { margin: 1.6rem 0 .7rem; font-size: 1.15rem; }
.prose ul { list-style: none; }
.prose ul li { padding-left: 1.6rem; position: relative; margin-bottom: .55rem; }
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500);
}
.prose ol { list-style: decimal; padding-left: 1.3rem; }
.prose ol li { margin-bottom: .55rem; }
.prose a { color: var(--brand-700); text-decoration: underline; }
.prose blockquote {
  border-left: 3px solid var(--brand-400); padding-left: 1.2rem;
  color: var(--ink-500); font-style: italic; margin: 1.2rem 0;
}

.home-custom__card { padding: clamp(2rem, 5vw, 4rem); border-radius: var(--r-lg); background: var(--green-50); text-align: center; overflow: hidden; }
.home-custom__card--image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; text-align: left; align-items: stretch; }
.home-custom__card--image > img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.home-custom__copy { padding: clamp(2rem, 5vw, 4rem); align-self: center; }
.home-custom__copy p { margin: .8rem 0 1.4rem; color: var(--ink-600); }
.home-custom--promotion .home-custom__card { background: var(--green-800); color: #fff; }
.home-custom--promotion .home-custom__copy p { color: rgba(255,255,255,.8); }
.home-custom--subscription .home-custom__card { background: var(--gold-100); }
@media (max-width: 700px) { .home-custom__card--image { grid-template-columns: 1fr; } .home-custom__card--image > img { min-height: 220px; } }
.prose img { border-radius: var(--r-md); margin: 1.2rem 0; }

/* ---- Cart --------------------------------------------------------------- */
.cartrow {
  display: grid; grid-template-columns: 96px 1fr auto;
  gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--ink-100);
  align-items: center;
}
.cartrow:last-child { border-bottom: none; }
.cartrow__img {
  width: 96px; height: 96px; border-radius: var(--r-sm);
  background: var(--brand-50); object-fit: cover;
}
.cartrow__name { font-family: var(--font-head); font-size: .95rem; font-weight: 600; color: var(--ink-900); }
.cartrow__var { font-size: .78rem; color: var(--ink-400); margin: .15rem 0 .5rem; }

.summary { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.sumline { display: flex; justify-content: space-between; padding: .55rem 0; font-size: .9rem; }
.sumline--total {
  border-top: 1.5px solid var(--ink-100); margin-top: .6rem; padding-top: 1rem;
  font-size: 1.12rem; font-weight: 700; color: var(--ink-900);
  font-family: var(--font-head);
}
.sumline .save { color: var(--leaf-600); font-weight: 600; }

/* ---- Filters ------------------------------------------------------------ */
.filters { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.fgroup { border-bottom: 1px solid var(--ink-100); padding-bottom: 1.1rem; margin-bottom: 1.1rem; }
.fgroup:last-child { border: none; margin: 0; padding: 0; }
.fgroup h5 {
  font-family: var(--font-head);
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-900); margin-bottom: .8rem;
}
.fcheck { display: flex; align-items: center; gap: .55rem; padding: .32rem 0; min-height: 40px; font-size: .875rem; cursor: pointer; color: var(--ink-700); }
.fcheck:hover { color: var(--brand-700); }
.fcheck input { width: 16px; height: 16px; accent-color: var(--brand-500); cursor: pointer; }
.fcheck span.count { margin-left: auto; font-size: .74rem; color: var(--ink-400); }

/* ---- Pagination --------------------------------------------------------- */
.pager { display: flex; gap: .35rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 38px; height: 38px; padding: 0 .7rem;
  display: grid; place-items: center; border-radius: var(--r-sm);
  border: 1px solid var(--ink-200); font-size: .875rem; font-weight: 500;
  background: #fff; transition: all .18s;
}
.pager a:hover { border-color: var(--brand-500); color: var(--brand-700); }
.pager .on { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.pager .off { opacity: .4; pointer-events: none; }

/* ---- Steps -------------------------------------------------------------- */
.steps { display: flex; gap: .5rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--ink-400); }
.step i {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink-100); color: var(--ink-400);
  display: grid; place-items: center; font-size: .76rem; font-weight: 600; font-style: normal;
}
.step.on { color: var(--brand-800); font-weight: 600; }
.step.on i { background: var(--brand-500); color: #fff; }
.step.done i { background: var(--brand-100); color: var(--brand-700); }
.step::after { content: ''; width: 30px; height: 1.5px; background: var(--ink-200); margin-left: .3rem; }
.step:last-child::after { display: none; }

/* ---- Empty state -------------------------------------------------------- */
.empty { text-align: center; padding: 4rem 1rem; }
.empty__icon {
  width: 78px; height: 78px; margin: 0 auto 1.3rem; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-500);
  display: grid; place-items: center;
}
.empty__icon svg { width: 34px; height: 34px; }
.empty h3 { margin-bottom: .5rem; }
.empty p { color: var(--ink-500); margin-bottom: 1.5rem; }

/* ---- Order status chips ------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 600; text-transform: capitalize;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-pending    { background: var(--brand-100); color: #8a5008; }
.chip-confirmed  { background: #eaf1fa; color: #1d4d80; }
.chip-processing { background: #f3eefb; color: #5b3f96; }
.chip-shipped    { background: #e6f5f7; color: #186a76; }
.chip-delivered  { background: var(--leaf-100); color: var(--leaf-800); }
.chip-cancelled  { background: #fdeceb; color: #8f2c1f; }
.chip-paid       { background: var(--leaf-100); color: var(--leaf-800); }
.chip-failed     { background: #fdeceb; color: #8f2c1f; }
.chip-refunded   { background: var(--ink-100); color: var(--ink-500); }

/* ---- Tables ------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th {
  text-align: left; padding: .8rem 1rem; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400);
  font-weight: 600; border-bottom: 1.5px solid var(--ink-100); white-space: nowrap;
}
.tbl td { padding: .9rem 1rem; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--brand-50); }
.tbl tbody tr:last-child td { border-bottom: none; }

/* ---- Account nav -------------------------------------------------------- */
.anav { display: flex; flex-direction: column; gap: .2rem; }
.anav a {
  padding: .7rem .9rem; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 500; color: var(--ink-700);
  display: flex; align-items: center; gap: .6rem; transition: all .18s;
  font-family: var(--font-head);
}
.anav a:hover { background: var(--brand-50); color: var(--brand-700); }
.anav a.on { background: var(--brand-500); color: #fff; }
.anav svg { width: 17px; height: 17px; }

/* ---- Carousel ----------------------------------------------------------- */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 1.4rem) / 5);
  gap: 1.4rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .3rem .2rem 1.2rem;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__btn {
  position: absolute; top: 38%; transform: translateY(-50%);
  z-index: 6; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid var(--ink-200);
  display: grid; place-items: center; color: var(--ink-900);
  box-shadow: var(--shadow-md); transition: all .2s var(--ease);
}
.carousel__btn:hover { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.carousel__btn svg { width: 19px; height: 19px; }
.carousel__btn--prev { left: -18px; }
.carousel__btn--next { right: -18px; }
.carousel__btn[hidden] { display: none; }
.carousel__dots { display: flex; gap: .4rem; justify-content: center; margin-top: .2rem; }
.carousel__dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-200); transition: all .25s var(--ease);
}
.carousel__dots button.on { background: var(--brand-500); width: 22px; border-radius: 4px; }

@media (max-width: 1240px) {
  .carousel__btn--prev { left: 4px; }
  .carousel__btn--next { right: 4px; }
}
@media (max-width: 1080px) { .carousel__track { grid-auto-columns: calc((100% - 3 * 1.4rem) / 4); } }
@media (max-width: 880px)  { .carousel__track { grid-auto-columns: calc((100% - 2 * 1.4rem) / 3); } }
@media (max-width: 640px)  { .carousel__track { grid-auto-columns: calc((100% - 1rem) / 2); gap: 1rem; } }
@media (max-width: 420px)  { .carousel__track { grid-auto-columns: 78%; } }

/* Bestsellers: exactly four complete product cards per desktop view. */
.carousel__track--bestsellers { grid-auto-columns: calc((100% - 3 * 1.4rem) / 4); }
@media (max-width: 880px) { .carousel__track--bestsellers { grid-auto-columns: calc((100% - 2 * 1.4rem) / 3); } }
@media (max-width: 640px) { .carousel__track--bestsellers { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (max-width: 420px) { .carousel__track--bestsellers { grid-auto-columns: 78%; } }

/* ---- Creative showcase -------------------------------------------------- */
.showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.showcase__item {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  background: var(--brand-50);
}
.showcase__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.showcase__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.showcase__item:hover img { transform: scale(1.03); }
.showcase__item--wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .showcase { grid-template-columns: 1fr; gap: 1rem; } }

/* ---- Utility ------------------------------------------------------------ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.divider { height: 1px; background: var(--ink-100); margin: 1.5rem 0; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .pdp { grid-template-columns: 1fr; gap: 2rem; }
  .pdp__gallery { position: static; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  /* Two per row: the connector only spans the pair on each line. */
  .trust__flow { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.4rem; }
  /* Needs the sibling combinator to outrank `.tstep + .tstep::before`. */
  .tstep + .tstep:nth-child(odd)::before { display: none; }
  .filters, .summary { position: static; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: grid; }
  /* Nav is hidden, so drop the 3-column grid: logo left, actions right.
     minmax(0,auto) lets the logo shrink instead of pushing the action
     buttons off the right edge. */
  .hdr__inner { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
  .logo { justify-self: start; min-width: 0; }
  .logo img { height: 38px; }
  .logo__txt b { font-size: 1.05rem; }
  .hdr__acts { justify-self: end; gap: .3rem; flex-shrink: 0; }
  .hdr__track { display: none; }
  .hdr__search { display: none; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn svg { width: 17px; height: 17px; }
}

@media (max-width: 640px) {
  :root { --nav-h: 62px; }
  .wrap { width: calc(100% - 2rem); }
  .field-row { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; }
  /* Single column: drop the horizontal connector entirely. */
  .trust__flow { grid-template-columns: 1fr; gap: 2rem; }
  .tstep + .tstep::before { display: none; }
  .tstep__desc { max-width: 34ch; }
  .cartrow { grid-template-columns: 72px 1fr; }
  .cartrow__img { width: 72px; height: 72px; }
  .cartrow > div:last-child { grid-column: 1 / -1; text-align: right; }
  .g-4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
  .concerns { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 1rem .8rem; }
  .pcard__body { padding: .8rem; }
  .pdp__usps { grid-template-columns: repeat(2, 1fr); }
  .toasts { left: 1rem; right: 1rem; bottom: 1rem; }
  .toast { max-width: none; }
  .section { padding: 2.6rem 0; }
  .heroslide__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Reference-specific components
   ========================================================================== */

/* ---- Full-bleed 3-up collection band ------------------------------------ */
.collband {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--leaf-800);
}
.collband__item {
  position: relative; display: block;
  min-height: clamp(320px, 30vw, 460px);
  overflow: hidden;
}
.collband__item img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.collband__item:hover img { transform: scale(1.05); }
.collband__item::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,20,8,.62) 0%, rgba(20,20,8,.20) 45%, rgba(20,20,8,.40) 100%);
}
.collband__txt {
  position: relative; z-index: 2;
  padding: 2.4rem 1.6rem; text-align: center; color: #fff;
}
.collband__txt h3 {
  color: #fff; font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  text-transform: uppercase; letter-spacing: .02em; margin-bottom: .5rem;
}
.collband__txt p { font-size: .85rem; opacity: .9; max-width: 30ch; margin-inline: auto; }
@media (max-width: 820px) {
  .collband { grid-template-columns: 1fr; }
  .collband__item { min-height: 260px; }
}

/* ---- Olive circular stat badges ----------------------------------------- */
.olivestats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.6rem; text-align: center;
}
.olivestat i {
  width: 92px; height: 92px; margin: 0 auto .9rem;
  border-radius: 50%; background: var(--leaf-100);
  color: var(--leaf-700);
  display: grid; place-items: center; font-style: normal;
  transition: transform .28s var(--ease);
}
.olivestat:hover i { transform: translateY(-4px); }
.olivestat i svg { width: 40px; height: 40px; }
.olivestat b {
  display: block; font-family: var(--font-head);
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-900); line-height: 1.5;
}

/* ---- Contact strip above the footer ------------------------------------- */
.contactstrip { background: var(--leaf-800); color: #fff; }
.contactstrip__row {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.contactstrip__item {
  padding: 2rem 1.4rem; text-align: center;
  border-right: 1px solid rgba(255,255,255,.14);
}
.contactstrip__item:last-child { border-right: none; }
.contactstrip__item i {
  width: 42px; height: 42px; margin: 0 auto .7rem;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  display: grid; place-items: center; font-style: normal;
}
.contactstrip__item i svg { width: 19px; height: 19px; }
.contactstrip__map-icon { display:block; width:42px; margin:0 auto .7rem; color:#fff !important; text-decoration:none !important; }
.contactstrip__map-icon i { margin:0; transition:transform .2s ease,background .2s ease; }
.contactstrip__map-icon:hover i { transform:translateY(-2px); background:rgba(255,255,255,.1); }
.contactstrip__item b {
  display: block; font-family: var(--font-head);
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: .35rem;
}
.contactstrip__item a, .contactstrip__item span {
  font-size: .78rem; color: rgba(255,255,255,.78);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Contact map ------------------------------------------------------- */
.contact-map { padding:0 0 clamp(3rem,6vw,5rem); background:var(--cream,#fffdf8); }
.contact-map__head { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:1.25rem; }
.contact-map__head h2 { margin:.35rem 0; font-size:clamp(1.45rem,3vw,2rem); }
.contact-map__head p { max-width:68ch; color:var(--ink-500); font-size:.9rem; }
.contact-map__frame { overflow:hidden; height:420px; border:1px solid var(--ink-100); border-radius:var(--r-lg); background:var(--brand-50); box-shadow:var(--shadow-sm); }
.contact-map__frame iframe { display:block; width:100%; height:100%; border:0; }
@media (max-width:640px) {
  .contact-map__head { align-items:flex-start; flex-direction:column; }
  .contact-map__frame { height:340px; }
}
@media (max-width: 760px) {
  .contactstrip__row { grid-template-columns: 1fr; }
  .contactstrip__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.14); }
}

/* ---- Footer headings are orange in the reference ------------------------ */
.ftr h5 { color: var(--brand-400); }

/* ---- Two-column FAQ block ----------------------------------------------- */
.faqsplit {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.faqsplit__intro h2 { color: var(--brand-500); }
.faqsplit__intro p { color: var(--ink-500); margin-top: .7rem; }
/* Reference FAQ rows are underlined, not boxed */
.faqsplit .faq details {
  background: transparent; border: none;
  border-bottom: 1px solid var(--ink-200);
  border-radius: 0; margin-bottom: 0;
}
.faqsplit .faq details[open] { box-shadow: none; border-color: var(--ink-200); }
.faqsplit .faq summary { padding: 1.05rem .2rem; font-weight: 600; }
.faqsplit .faq__a { padding: 0 .2rem 1.1rem; }
@media (max-width: 860px) { .faqsplit { grid-template-columns: 1fr; } }

/* 2026 storefront refresh — modern botanical editorial direction */
.hero--editorial { position:relative;overflow:hidden;background:radial-gradient(circle at 8% 82%,rgba(223,174,78,.15),transparent 22%),linear-gradient(115deg,#f8f1dd 0%,#fdfaf1 56%,#edf1df 100%);border-bottom:1px solid rgba(61,62,22,.08) }
.hero--editorial::before { content:'';position:absolute;left:-90px;bottom:-120px;width:330px;height:330px;border:1px solid rgba(122,127,60,.18);border-radius:50%;box-shadow:0 0 0 35px rgba(122,127,60,.035),0 0 0 70px rgba(122,127,60,.025) }
.heroedit { min-height:clamp(620px,74vh,790px);display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(2rem,6vw,6rem) }
.heroedit__copy { position:relative;z-index:4;padding:5rem 0 }
.heroedit__kicker { display:inline-flex;align-items:center;gap:.7rem;color:var(--leaf-700);font:700 .75rem/1 var(--font-head);letter-spacing:.14em;text-transform:uppercase }
.heroedit__kicker i { width:34px;height:1px;background:var(--brand-500);position:relative }.heroedit__kicker i::after { content:'';position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--brand-500) }
.heroedit h1 { font-size:clamp(3rem,5.9vw,5.8rem);line-height:.98;margin:1.3rem 0 1.45rem;max-width:9ch;font-weight:600;color:var(--leaf-900) }.heroedit h1 em { color:var(--brand-500);font-style:italic;font-weight:500 }
.heroedit__copy>p { font-size:clamp(1rem,1.5vw,1.15rem);max-width:49ch;color:var(--ink-500);line-height:1.75 }
.heroedit__actions { display:flex;align-items:center;gap:1.5rem;margin-top:2rem;flex-wrap:wrap }.heroedit__actions .btn { box-shadow:0 12px 25px rgba(194,104,6,.2) }.heroedit__actions svg { width:18px;height:18px }
.heroedit__link { font-family:var(--font-head);color:var(--leaf-800);font-weight:600;border-bottom:1px solid rgba(61,62,22,.35);padding-bottom:.15rem }.heroedit__link span { color:var(--brand-500) }
.heroedit__proof { display:flex;align-items:center;gap:1rem;margin-top:2.4rem }.heroedit__faces { display:flex;padding-left:10px }.heroedit__faces span { width:35px;height:35px;margin-left:-10px;border:2px solid #faf6e8;border-radius:50%;display:grid;place-items:center;background:var(--leaf-700);color:#fff;font:600 .68rem var(--font-head) }.heroedit__faces span:nth-child(2){background:#b77942}.heroedit__faces span:nth-child(3){background:#d79b3c}
.heroedit__proof b { display:block;color:var(--leaf-900);font:600 .82rem var(--font-head) }.heroedit__proof b span { color:var(--brand-500);letter-spacing:.04em }.heroedit__proof small { display:block;color:var(--ink-500);font-size:.72rem;margin-top:.12rem }
.heroedit__visual { position:relative;min-height:610px;align-self:end }.heroedit__sun { position:absolute;width:410px;height:410px;border-radius:50%;background:#e5a536;opacity:.9;top:9%;left:12% }
.heroedit__arch { position:absolute;width:min(440px,72%);height:82%;right:4%;bottom:0;border-radius:220px 220px 28px 28px;padding:10px;background:rgba(255,255,255,.6);box-shadow:0 30px 70px rgba(43,44,16,.16) }.heroedit__arch img { width:100%;height:100%;object-fit:cover;border-radius:inherit;filter:saturate(.88) contrast(1.02) }
.heroedit__product { position:absolute;width:clamp(210px,30vw,350px);height:auto;left:-4%;bottom:-2%;z-index:3;filter:drop-shadow(0 28px 24px rgba(36,38,13,.28)) }
.heroedit__badge { position:absolute;z-index:5;display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 35px rgba(42,43,17,.14);backdrop-filter:blur(12px);border-radius:14px }.heroedit__badge i { width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--leaf-100);color:var(--leaf-800) }.heroedit__badge svg { width:18px }.heroedit__badge b,.heroedit__badge small { display:block;line-height:1.25 }.heroedit__badge b { color:var(--leaf-900);font:600 .76rem var(--font-head) }.heroedit__badge small { color:var(--ink-500);font-size:.66rem;margin-top:.18rem }.heroedit__badge--top { right:-1%;top:22% }.heroedit__badge--bottom { right:6%;bottom:9% }
.hdr { background:rgba(251,248,239,.88);backdrop-filter:blur(16px);border-color:rgba(61,62,22,.1) }.hdr.scrolled { box-shadow:0 8px 30px rgba(43,44,16,.08) }.section--tint,.section--alt { background:#f4f1e6 }.section--cream { background:#f1efdc }
.shead h2 { max-width:18ch }.shead--center h2,.shead--center p { margin-inline:auto }.shead--center { max-width:720px }.shead p { max-width:58ch }
.pcard { border-color:rgba(61,62,22,.1);border-radius:24px;box-shadow:0 6px 20px rgba(43,44,16,.035) }.pcard:hover { transform:translateY(-7px);box-shadow:0 20px 45px rgba(43,44,16,.12) }.pcard__media { background:linear-gradient(145deg,#f7f4e9,#eeead9) }
.concern i { box-shadow:inset 0 0 0 1px rgba(61,62,22,.07),0 9px 25px rgba(43,44,16,.06) }.concern:hover i { box-shadow:0 15px 34px rgba(61,62,22,.14) }
.collband { gap:10px;padding:10px;background:var(--paper) }.collband__item { border-radius:26px }.collband__item::after { background:linear-gradient(180deg,rgba(20,20,8,.48),rgba(20,20,8,.08) 50%,rgba(20,20,8,.58)) }.collband__txt { position:absolute;left:0;right:0;bottom:0;text-align:left }.collband__txt p { margin-inline:0 }
.ing { background:rgba(255,255,255,.56);border:1px solid rgba(61,62,22,.08);border-radius:22px;padding:1.3rem }.tcard,.bcard { border-radius:24px;border-color:rgba(61,62,22,.1);box-shadow:0 8px 30px rgba(43,44,16,.05) }.bcard__media { overflow:hidden }.bcard__media img { transition:transform .6s var(--ease) }.bcard:hover .bcard__media img { transform:scale(1.045) }
.faqsplit { background:#f1efdc;border-radius:30px;padding:clamp(1.5rem,4vw,4rem) }.news { border-radius:32px;background:linear-gradient(115deg,#3d3e16,#5c5e26);overflow:hidden;position:relative }.news::after { content:'';position:absolute;width:280px;height:280px;border:55px solid rgba(255,255,255,.05);border-radius:50%;right:-80px;top:-100px;pointer-events:none }
@media (max-width:980px){.heroedit{grid-template-columns:1fr 1fr;gap:1rem}.heroedit__visual{min-height:530px}.heroedit__product{left:-8%}.heroedit__badge--top,.heroedit__badge--bottom{right:0}}
@media (max-width:760px){.heroedit{grid-template-columns:1fr;padding-top:1.5rem}.heroedit__copy{padding:3.3rem 0 1rem}.heroedit h1{font-size:clamp(3rem,14vw,4.5rem)}.heroedit__visual{min-height:500px;width:min(100%,550px);margin-inline:auto}.heroedit__arch{width:72%;right:2%}.heroedit__sun{width:330px;height:330px;left:18%}.heroedit__product{width:min(58vw,280px);left:0}.heroedit__badge--top{top:16%}.heroedit__badge--bottom{bottom:8%}.collband{grid-template-columns:1fr}}
@media (max-width:440px){.heroedit__visual{min-height:430px}.heroedit__arch{height:88%}.heroedit__sun{width:260px;height:260px}.heroedit__badge{padding:.6rem .7rem}.heroedit__badge--top{right:-4%}.heroedit__badge--bottom{right:-4%;bottom:4%}.heroedit__product{left:-7%;bottom:-3%}.heroedit__proof{margin-top:1.8rem}}

/* Health-concern icon cards */
.concerns { grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;align-items:stretch }
.concern { position:relative;min-height:186px;height:100%;display:grid;grid-template-columns:58px 1fr;grid-template-rows:1fr;align-items:stretch;gap:.9rem;padding:1.15rem 1.1rem;text-align:left;background:rgba(255,255,255,.72);border:1px solid rgba(61,62,22,.09);border-radius:20px;box-shadow:0 7px 24px rgba(43,44,16,.045);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease) }
/* Tinted wash keyed to each card's own accent, so the ten concerns read as
   a colour-coded set rather than ten identical white boxes. */
.concern::after { content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--tint) 0%,transparent 62%);opacity:.5;pointer-events:none;transition:opacity .25s var(--ease) }
.concern:hover::after { opacity:.85 }
.concern > :not(.concern__idx) { position:relative;z-index:1 }
.concern:hover { transform:translateY(-5px);box-shadow:0 18px 38px rgba(43,44,16,.12);border-color:color-mix(in srgb,var(--ink) 30%,transparent) }
.concern i { width:58px;height:58px;align-self:start;aspect-ratio:1;border-radius:18px;margin:0;display:grid;place-items:center;background:var(--tint,var(--brand-100));color:var(--ink,var(--brand-700));box-shadow:none!important;border:0;overflow:visible }
.concern i svg { width:29px;height:29px;stroke-width:1.75;transition:transform .25s var(--ease) }.concern:hover i svg { transform:scale(1.12) rotate(-3deg) }
.concern__body { min-width:0;display:flex;flex-direction:column }
/* Right padding keeps long names clear of the watermarked index number. */
.concern__name { display:block;font-size:.9rem;font-weight:700;line-height:1.25;color:var(--leaf-900);padding-right:1.9rem }
.concern__desc { display:block;color:var(--ink-500);font-size:.72rem;line-height:1.45;margin-top:.3rem }
/* Count + arrow pinned to the card foot so every card's baseline aligns. */
.concern__meta { display:flex;align-items:baseline;gap:.3rem;margin-top:auto;padding-top:.7rem }
.concern__count { font-family:var(--font-head);font-size:1.35rem;font-weight:800;line-height:1;color:var(--ink,var(--brand-700)) }
.concern__unit { font-size:.68rem;color:var(--ink-400);letter-spacing:.02em }
.concern__go { margin-left:auto;align-self:center;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:var(--ink,var(--brand-700));background:color-mix(in srgb,var(--tint) 65%,white);transition:transform .25s var(--ease),background .25s var(--ease) }
.concern__go svg { width:13px;height:13px }
.concern:hover .concern__go { transform:translateX(3px);background:var(--tint) }
/* Big translucent step number, watermarked into the card corner. */
.concern__idx { position:absolute;z-index:1;top:.55rem;right:.8rem;font-family:var(--font-head);font-size:1.5rem;font-weight:800;line-height:1;color:var(--ink,var(--brand-700));opacity:.16;pointer-events:none;transition:opacity .25s var(--ease) }
.concern:hover .concern__idx { opacity:.3 }
@media (max-width:1100px){.concerns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.concerns{grid-template-columns:1fr;gap:.75rem}.concern{min-height:0;padding:.9rem;grid-template-columns:54px 1fr}.concern i{width:54px;height:54px;border-radius:16px}.concern__name{font-size:.92rem}.concern__idx{font-size:1.3rem}.concern__meta{padding-top:.55rem}}

/* Real product photography in bestseller cards */
.pcard__media { min-height:270px;display:grid;place-items:center;overflow:hidden }
.pcard__media>img { width:100%;height:100%;min-height:270px;object-fit:contain;padding:1rem;transition:transform .45s var(--ease);filter:drop-shadow(0 12px 13px rgba(43,44,16,.12)) }
.pcard:hover .pcard__media>img { transform:scale(1.045) }
.pcard--photo .pcard__media>img { padding:0;object-fit:cover;filter:none }
.pcard--photo .pcard__media { aspect-ratio:4/5;min-height:0 }
.pcard--photo:hover .pcard__media>img { transform:scale(1.06) }
@media (max-width:640px){.pcard__media,.pcard__media>img{min-height:220px}.pcard__media>img{padding:.65rem}}

/* Real-herb editorial story */
.herbstory { display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);gap:clamp(1.5rem,4vw,4rem);align-items:stretch }
.herbstory__photo { min-height:610px;position:relative;overflow:hidden;border-radius:30px;box-shadow:0 24px 55px rgba(43,44,16,.14);background:#dfe5bf }
.herbstory__photo img { width:100%;height:100%;object-fit:cover }
.herbstory__photo::after { content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(24,28,10,.65)) }
.herbstory__photo figcaption { position:absolute;z-index:2;left:1.5rem;right:1.5rem;bottom:1.4rem;display:flex;align-items:center;gap:.85rem;color:#fff;font:500 .86rem/1.45 var(--font-head) }
.herbstory__photo figcaption span { flex:0 0 48px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--brand-500);color:#fff;font-size:1.15rem;font-weight:700 }
.herbstory__list { display:grid;grid-template-columns:1fr 1fr;gap:.85rem }
.herbitem { display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem;background:rgba(255,255,255,.68);border:1px solid rgba(61,62,22,.09);border-radius:18px;transition:transform .25s var(--ease),box-shadow .25s var(--ease) }
.herbitem:hover { transform:translateY(-3px);box-shadow:0 13px 28px rgba(43,44,16,.09) }
.herbitem__number { flex:0 0 auto;color:var(--brand-500);font:700 .67rem/1 var(--font-head);letter-spacing:.08em;padding-top:.25rem }
.herbitem h4 { font-size:.94rem;margin-bottom:.35rem }.herbitem p { font-size:.73rem;line-height:1.55;color:var(--ink-500) }
@media (max-width:980px){.herbstory{grid-template-columns:1fr}.herbstory__photo{min-height:460px}.herbstory__list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.herbstory__photo{min-height:360px;border-radius:22px}.herbstory__list{grid-template-columns:1fr}.herbitem{padding:.95rem}.herbstory__photo figcaption{left:1rem;right:1rem;bottom:1rem}}

/* Image-led wellness journal */
.bcard__media { position:relative;aspect-ratio:4/3;min-height:0;background:#e9eadb }
.bcard__media img { width:100%;height:100%;object-fit:cover }
.bcard__readtime { position:absolute;right:.85rem;bottom:.85rem;padding:.38rem .7rem;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--leaf-900);font:600 .66rem/1 var(--font-head);box-shadow:0 5px 16px rgba(23,25,10,.12) }
.bcard__body { padding:1.35rem 1.35rem 1.5rem }.bcard__body h3 { font-size:1.15rem;line-height:1.35 }.bcard__meta { color:var(--brand-700);font-weight:650 }
@media (min-width:880px){.bcard__media{aspect-ratio:16/11}.bcard__body{min-height:250px;display:flex;flex-direction:column}.bcard__more{margin-top:auto;padding-top:1rem}}

/* Primic logo palette: teal + medical red + deep herbal brown */
.announce { background:var(--leaf-800) }.announce b,.announce strong,.announce em { color:#6ed6d3 }
.btn-primary,.btn-gold { background:var(--logo-red);color:#fff }.btn-primary:hover,.btn-gold:hover { background:var(--logo-red-dark) }
.btn-outline { border-color:var(--brand-500);color:var(--brand-800) }.btn-outline:hover { background:var(--brand-500);border-color:var(--brand-500) }
.hero--editorial { background:radial-gradient(circle at 8% 82%,rgba(0,166,166,.12),transparent 22%),linear-gradient(115deg,#f8f2ea 0%,#fffdf8 56%,#e9f6f3 100%) }
.heroedit__sun { background:var(--brand-200) }.heroedit h1 em { color:var(--brand-600) }.heroedit__actions .btn { box-shadow:0 12px 25px rgba(243,19,27,.2) }
.heroedit__kicker i,.heroedit__kicker i::after { background:var(--logo-red) }
.eyebrow,.faqsplit__intro h2,.bcard__meta,.bcard__more { color:var(--brand-700) }.eyebrow::before { background:var(--logo-red) }
.tag--best,.tag--off { background:var(--logo-red);color:#fff }.pcard__price em { color:var(--brand-800) }
.section--green,.contactstrip { background:var(--leaf-800) }.news { background:linear-gradient(115deg,var(--leaf-800),#57301e) }
.ftr h5 { color:#62cfcc }.herbstory__photo figcaption span { background:var(--logo-red) }.herbitem__number { color:var(--logo-red) }
.carousel__dots button.on { background:var(--logo-red) }.carousel__btn:hover { background:var(--brand-600);border-color:var(--brand-600) }
::selection { background:var(--brand-200);color:var(--brand-900) }

/* Product-range feature using the customer's real uploaded images */
.productfeature { background:#fffdf8 }.productfeature__card { display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.55fr);gap:clamp(1.2rem,3vw,2.5rem);padding:clamp(1.2rem,3vw,2.2rem);border-radius:32px;background:linear-gradient(135deg,#e9f7f4,#f8f4eb);border:1px solid rgba(0,132,138,.12);box-shadow:0 18px 48px rgba(53,21,3,.09) }
.productfeature__copy { display:flex;flex-direction:column;justify-content:center;padding:clamp(.7rem,2vw,2rem) }.productfeature__copy>span { color:var(--brand-700);font:700 .72rem/1 var(--font-head);letter-spacing:.14em;text-transform:uppercase }.productfeature__copy h2 { margin:.9rem 0 1rem;color:var(--leaf-800);font-size:clamp(2rem,3.6vw,3.35rem);line-height:1.06 }.productfeature__copy p { max-width:38ch;color:var(--ink-500);font-size:.94rem }.productfeature__copy .btn { align-self:flex-start;margin-top:1.6rem }.productfeature__copy .btn span { transition:transform .2s }.productfeature__copy .btn:hover span { transform:translateX(4px) }
.productfeature__products { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem }.productfeature__product { position:relative;min-height:430px;overflow:hidden;border-radius:22px;background:#f2eadf;box-shadow:0 8px 24px rgba(53,21,3,.08);transition:transform .3s var(--ease),box-shadow .3s var(--ease) }.productfeature__product img { width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease) }.productfeature__product::after { content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(25,12,4,.72)) }.productfeature__product>span { position:absolute;z-index:2;left:1rem;right:1rem;bottom:1rem;color:#fff }.productfeature__product small,.productfeature__product b { display:block }.productfeature__product small { margin-bottom:.2rem;color:#8fe1dd;font:650 .65rem var(--font-head);letter-spacing:.09em;text-transform:uppercase }.productfeature__product b { font:600 .9rem/1.25 var(--font-head) }.productfeature__product:hover { transform:translateY(-6px);box-shadow:0 18px 36px rgba(53,21,3,.15) }.productfeature__product:hover img { transform:scale(1.045) }
@media (max-width:1050px){.productfeature__card{grid-template-columns:1fr}.productfeature__copy{padding:1rem .4rem}.productfeature__products{grid-template-columns:repeat(4,1fr)}.productfeature__product{min-height:380px}}
@media (max-width:700px){.productfeature__card{padding:1rem;border-radius:24px}.productfeature__products{grid-template-columns:repeat(2,1fr)}.productfeature__product{min-height:330px}.productfeature__copy h2{font-size:2.2rem}}

/* Editorial homepage slider */
.hero--slider .heroslide { aspect-ratio:auto;min-height:clamp(650px,76vh,790px);background:#f8f3e9 }
.hero--slider .heroslide__item { min-height:clamp(650px,76vh,790px) }
.heroeditor { overflow:hidden }.hero-tone--cream { background:linear-gradient(115deg,#faf3e7,#fffdf8 52%,#e7f4f1) }.hero-tone--teal { background:linear-gradient(115deg,#e6f5f1,#fffdf8 55%,#d6eee8) }.hero-tone--rose { background:linear-gradient(115deg,#f6ede8,#fffaf6 55%,#f1dedb) }
.heroeditor::before { content:'';position:absolute;width:360px;height:360px;border:1px solid rgba(0,132,138,.12);border-radius:50%;left:-180px;bottom:-170px;box-shadow:0 0 0 50px rgba(0,166,166,.025),0 0 0 100px rgba(0,166,166,.018) }
.heroeditor__inner { min-height:clamp(650px,76vh,790px);display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(2rem,6vw,6rem);align-items:center }
.heroeditor__copy { position:relative;z-index:3;padding:5rem 0 }.heroeditor__kicker { display:inline-flex;align-items:center;gap:.65rem;color:var(--brand-700);font:700 .72rem/1 var(--font-head);letter-spacing:.14em;text-transform:uppercase }.heroeditor__kicker::before { content:'';width:30px;height:2px;background:var(--logo-red) }
.heroeditor h1 { max-width:11ch;margin:1.15rem 0 1.2rem;font-size:clamp(2.7rem,4.7vw,4.7rem);line-height:1;font-weight:600;color:var(--leaf-900);letter-spacing:-.045em }.heroeditor__copy>p { max-width:49ch;color:var(--ink-500);font-size:clamp(1rem,1.4vw,1.13rem);line-height:1.7 }
.heroeditor__actions { display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2rem }.heroeditor__actions .btn span { transition:transform .2s }.heroeditor__actions .btn:hover span { transform:translateX(4px) }.heroeditor__story { color:var(--leaf-800);font:600 .86rem var(--font-head);border-bottom:1px solid rgba(53,21,3,.3);padding-bottom:.18rem }
.heroeditor__meta { display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:2.3rem;color:var(--ink-500);font-size:.72rem }.heroeditor__meta b { color:var(--leaf-800);font-family:var(--font-head) }.heroeditor__meta i { width:4px;height:4px;border-radius:50%;background:var(--brand-500) }
.heroeditor__visual { position:relative;align-self:stretch;min-height:620px }.heroeditor__orb { position:absolute;width:min(34vw,480px);height:min(34vw,480px);border-radius:50%;background:var(--brand-200);right:4%;top:12%;opacity:.8 }.hero-tone--rose .heroeditor__orb { background:#ebc8bf }.hero-tone--cream .heroeditor__orb { background:#d8ece7 }
.heroeditor__frame { position:absolute;right:5%;bottom:0;width:min(39vw,500px);height:89%;overflow:hidden;border-radius:250px 250px 26px 26px;background:#efe8dc;box-shadow:0 28px 65px rgba(53,21,3,.16);border:8px solid rgba(255,255,255,.64) }.heroeditor__frame img { width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 7s linear }.heroslide__item.on .heroeditor__frame img { transform:scale(1.035) }
.heroeditor__note { position:absolute;z-index:3;right:0;bottom:9%;min-width:140px;padding:.8rem 1rem;border-radius:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(53,21,3,.13) }.heroeditor__note small,.heroeditor__note b { display:block }.heroeditor__note small { color:var(--ink-400);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em }.heroeditor__note b { margin-top:.18rem;color:var(--brand-800);font:650 .78rem var(--font-head) }
.hero--slider .heroslide__arrow { width:46px;height:46px;background:rgba(255,255,255,.88);border:1px solid rgba(53,21,3,.09) }.hero--slider .heroslide__arrow--prev { left:max(1rem,calc((100% - var(--wrap))/2 - 62px)) }.hero--slider .heroslide__arrow--next { right:max(1rem,calc((100% - var(--wrap))/2 - 62px)) }.hero--slider .heroslide__dots { bottom:1.4rem }.hero--slider .heroslide__dots button { width:26px;height:4px;background:rgba(53,21,3,.2) }.hero--slider .heroslide__dots button.on { width:48px;background:var(--logo-red) }
@media (max-width:860px){.hero--slider .heroslide,.hero--slider .heroslide__item,.heroeditor__inner{min-height:1000px}.heroeditor__inner{grid-template-columns:1fr}.heroeditor__copy{padding:4rem 0 0}.heroeditor h1{font-size:clamp(2.65rem,9vw,4.1rem)}.heroeditor__visual{min-height:550px}.heroeditor__frame{width:min(78vw,500px);height:520px;right:50%;transform:translateX(50%)}.heroeditor__orb{width:400px;height:400px;right:50%;transform:translateX(50%)}.heroeditor__note{right:5%;bottom:7%}.hero--slider .heroslide__arrow{display:none}}
@media (max-width:540px){.hero--slider .heroslide,.hero--slider .heroslide__item,.heroeditor__inner{min-height:920px}.heroeditor__copy{padding-top:3rem}.heroeditor h1{font-size:2.85rem}.heroeditor__actions{gap:1rem}.heroeditor__story{font-size:.78rem}.heroeditor__meta{margin-top:1.5rem}.heroeditor__visual{min-height:470px}.heroeditor__frame{width:88vw;height:450px}.heroeditor__orb{width:310px;height:310px}.heroeditor__note{right:0;bottom:6%}.hero--slider .heroslide__dots{bottom:.8rem}}

/* Curated promotional showcase */
.showcasehead { display:grid;grid-template-columns:1fr minmax(280px,480px);gap:2rem;align-items:end;margin-bottom:1.7rem }.showcasehead h2 { max-width:14ch }.showcasehead p { color:var(--ink-500);font-size:.94rem;line-height:1.7;padding-bottom:.35rem }
.showcase { grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem }.showcase__item { border-radius:24px;border:1px solid rgba(53,21,3,.08);box-shadow:0 10px 32px rgba(53,21,3,.08);aspect-ratio:1.94/1 }.showcase__item--wide { aspect-ratio:2.25/1 }.showcase__item img { object-fit:cover;object-position:center }
.showcase__open { position:absolute;z-index:2;right:1rem;top:1rem;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--leaf-800);font:600 1rem var(--font-head);box-shadow:0 8px 22px rgba(20,10,4,.15);opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s }.showcase__item:hover .showcase__open { opacity:1;transform:none }
.showcasefoot { text-align:center;margin-top:1.6rem }.showcasefoot .btn span { transition:transform .2s }.showcasefoot .btn:hover span { transform:translateX(4px) }
@media (max-width:760px){.showcasehead{grid-template-columns:1fr;gap:.7rem}.showcase{grid-template-columns:1fr}.showcase__item,.showcase__item--wide{grid-column:auto;aspect-ratio:1.7/1}.showcase__open{opacity:1;transform:none;width:34px;height:34px}.showcasehead p{padding:0}}

/* Color-rich storefront rhythm */
.section--concerns { position:relative;overflow:hidden;background:linear-gradient(135deg,#e8f8f4 0%,#fff8e8 52%,#fbe9e4 100%) }.section--concerns::before,.section--concerns::after { content:'';position:absolute;border-radius:50%;pointer-events:none }.section--concerns::before { width:260px;height:260px;background:rgba(0,166,166,.08);left:-100px;top:-90px }.section--concerns::after { width:210px;height:210px;background:rgba(243,19,27,.06);right:-70px;bottom:-90px }
.section--concerns .concern { background:rgba(255,255,255,.82);border-top:3px solid var(--ink,var(--brand-500)) }.section--concerns .concern:nth-child(3n+1){transform:rotate(-.4deg)}.section--concerns .concern:nth-child(3n+2){transform:rotate(.35deg)}.section--concerns .concern:hover{transform:translateY(-6px) rotate(0)}
.section--bestsellers { position:relative;background:linear-gradient(180deg,#fff3dc 0%,#fffaf0 100%) }.section--bestsellers::before { content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 15%,rgba(255,184,55,.18),transparent 20%);pointer-events:none }.section--bestsellers .pcard:nth-of-type(4n+1){--card-accent:#00a6a6}.section--bestsellers .pcard:nth-of-type(4n+2){--card-accent:#f3131b}.section--bestsellers .pcard:nth-of-type(4n+3){--card-accent:#e39b16}.section--bestsellers .pcard:nth-of-type(4n){--card-accent:#7c5ab8}.section--bestsellers .pcard { border-bottom:4px solid var(--card-accent,var(--brand-500)) }
.hero--slider .heroeditor { background:linear-gradient(180deg,#fff3dc 0%,#fffaf0 100%) }
.hero--slider .heroslide::before { content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 90% 15%,rgba(255,184,55,.18),transparent 20%);pointer-events:none }
.brandstatement { position:relative;overflow:hidden;background:linear-gradient(110deg,#006f74,#00a6a6 58%,#007b80);padding-block:clamp(3.5rem,6vw,6rem) }.brandstatement::before { content:'✦';position:absolute;left:8%;top:5%;font-size:9rem;color:rgba(255,255,255,.07) }.brandstatement::after { content:'';position:absolute;width:260px;height:260px;border:55px solid rgba(255,255,255,.07);border-radius:50%;right:-50px;bottom:-120px }.brandstatement h2 { position:relative;z-index:1;color:#fff;font-size:clamp(2rem,4.5vw,4rem);letter-spacing:-.04em }.brandstatement h2 em { color:#ffd166 }
.statssection { background:#fffdf8 }.olivestats { gap:1rem }.olivestat { padding:1.3rem .8rem;border-radius:20px;background:var(--stat-bg,#e8f7f4);border:1px solid rgba(53,21,3,.07) }.olivestat:nth-child(2){--stat-bg:#fff0d3}.olivestat:nth-child(3){--stat-bg:#f7e8f1}.olivestat:nth-child(4){--stat-bg:#e8eefb}.olivestat:nth-child(5){--stat-bg:#fce7e4}.olivestat i { width:76px;height:76px;background:rgba(255,255,255,.75);color:var(--brand-700) }.olivestat:nth-child(2) i{color:#b87300}.olivestat:nth-child(3) i{color:#9a4674}.olivestat:nth-child(4) i{color:#4568a8}.olivestat:nth-child(5) i{color:#c53e38}
.section--cream { background:linear-gradient(135deg,#eef6dc,#fff6dc 48%,#e2f4ee) }.herbstory__list .herbitem:nth-child(4n+1){background:#e6f6ef}.herbstory__list .herbitem:nth-child(4n+2){background:#fff0ce}.herbstory__list .herbitem:nth-child(4n+3){background:#f7e6ec}.herbstory__list .herbitem:nth-child(4n){background:#e8eef8}
.section--testimonials { position:relative;background:linear-gradient(135deg,#dff4f0,#f8eee8 55%,#f8dedc) }.section--testimonials .tcard { background:rgba(255,255,255,.86);border-top:4px solid var(--brand-500) }.section--testimonials .tcard:nth-child(2n){border-top-color:var(--logo-red)}.section--testimonials .tcard:nth-child(3n){border-top-color:#e5a11c}.section--testimonials .tcard__quote { color:var(--brand-500) }
.section--journal { background:linear-gradient(180deg,#fff7e7,#fffdf8) }.section--journal .bcard:nth-child(1){--journal:#00a6a6}.section--journal .bcard:nth-child(2){--journal:#e2a22d}.section--journal .bcard:nth-child(3){--journal:#c64d68}.section--journal .bcard { border-bottom:5px solid var(--journal,var(--brand-500)) }.section--journal .bcard__readtime { color:var(--journal,var(--brand-700)) }
.section--faqcolor { background:linear-gradient(140deg,#e5f4f5,#f0eafa 52%,#ffece8) }.section--faqcolor .faqsplit { background:rgba(255,255,255,.68);border:1px solid rgba(0,132,138,.12);box-shadow:0 18px 48px rgba(53,21,3,.07) }.section--faqcolor .faqsplit__intro h2 { color:var(--brand-800) }.section--faqcolor .faq summary::after { color:var(--logo-red) }
.news { background:linear-gradient(115deg,#006d72,#009da0 60%,#e04b51) }
@media (max-width:640px){.section--concerns .concern:nth-child(n){transform:none}.brandstatement::before{font-size:6rem;left:-1rem}.olivestat{padding:1rem .7rem}}

/* Final mobile QA refinements */
@media (max-width:540px){
  .icon-btn { width:42px;height:42px }
  .hdr__acts { gap:.15rem }
  .hero--slider .heroslide,.hero--slider .heroslide__item,.heroeditor__inner { min-height:860px }
  .heroeditor__copy { padding-top:2.4rem }
  .heroeditor h1 { font-size:2.55rem;line-height:1.02;margin:.9rem 0 1rem }
  .heroeditor__copy>p { font-size:.94rem;line-height:1.6 }
  .heroeditor__actions { margin-top:1.4rem }
  .heroeditor__meta { margin-top:1.2rem }
  .heroeditor__visual { min-height:390px }
  .heroeditor__frame { height:370px;width:min(88vw,350px) }
  .heroeditor__orb { width:270px;height:270px }
  .productfeature__products { grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;padding:.15rem .1rem .8rem;scrollbar-width:none }
  .productfeature__products::-webkit-scrollbar { display:none }
  .productfeature__product { min-height:390px;scroll-snap-align:start }
}

/* ---- Section title utility (left caps, like the reference) -------------- */
.shead--plain .eyebrow::before { display: none; }

/* ---- Logo assets -------------------------------------------------------- */
/* Footer logo is the white-ink variant so it reads on the olive panel. */
.ftr__logo { height: 72px; width: auto; margin-bottom: .4rem; }
.mnav__logo { height: 42px; width: auto; }
@media (max-width: 860px) { .logo img { height: 48px; } }
@media (max-width: 420px) { .logo img { height: 42px; } }

/* Buy Now is the secondary purchase action, highlighted with the brand red. */
[data-buy-now] { color: var(--logo-red) !important; }
[data-buy-now]:hover { color: #fff !important; border-color: var(--logo-red); background: var(--logo-red); }

/* Journal listing cover, sourced from the latest published article. */
.journal-cover { margin-top:1.5rem; overflow:hidden; border-radius:var(--r-lg); aspect-ratio:16/5; background:var(--brand-50); box-shadow:var(--shadow-sm); }
.journal-cover img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 640px) { .journal-cover { aspect-ratio:16/8; } }
.blog-popular { display:grid; grid-template-columns:64px minmax(0,1fr); gap:.7rem; align-items:center; padding:.65rem 0; border-bottom:1px solid var(--ink-100); }
.blog-popular img { width:64px; height:52px; display:block; object-fit:cover; border-radius:8px; background:var(--brand-50); }
.blog-popular__copy { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.4rem; align-items:start; min-width:0; }
.blog-popular__copy b { color:var(--brand-500); font-family:var(--font-head); }
.blog-popular__copy span { color:var(--ink-700); font-size:.75rem; line-height:1.35; }
@media (max-width: 540px) {
  .pdp__buyrow { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; }
  .pdp__buyrow [data-add-cart] { min-width:0!important;width:100%; }
  .pdp__buyrow [data-buy-now] { grid-column:1/-1;min-width:0!important;width:100%; }
}

/* ==========================================================================
   Infographics — tabbed panel
   One topic at a time: a topic rail on the left, a detail panel on the right.
   Keeps the section compact and on-palette (olive + orange) instead of the
   multi-coloured card grid it replaced.
   ========================================================================== */
.infosec { background: var(--cream); }

.infotabs {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 1.4rem;
  align-items: start;
}

/* ---- Topic rail ---- */
.infotabs__rail {
  display: flex; flex-direction: column; gap: .35rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: .5rem;
  position: sticky; top: calc(var(--nav-h) + 1.2rem);
}
.infotab {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left;
  padding: .62rem .7rem;
  border-radius: var(--r-md);
  color: var(--ink-700);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.infotab:hover { background: var(--brand-50); }
.infotab.on { background: var(--leaf-800); color: #fff; }

.infotab__icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--brand-100); color: var(--brand-700);
  display: grid; place-items: center;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.infotab__icon svg { width: 17px; height: 17px; }
.infotab.on .infotab__icon { background: rgba(255,255,255,.16); color: #fff; }

.infotab__txt { min-width: 0; }
.infotab__txt b {
  display: block;
  font-family: var(--font-head);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  line-height: 1.3;
}
.infotab__txt small {
  display: block;
  font-size: .72rem; opacity: .72;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Detail panel ---- */
.infotabs__panes {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 420px;
}
.infopane {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
}
.infopane[hidden] { display: none; }
.infopane.on { animation: infoIn .3s var(--ease); }
@keyframes infoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.infopane__body { padding: 2rem 2rem 2.1rem; }
.infopane__kicker {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .68rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand-600);
  margin-bottom: .5rem;
}
.infopane h3 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  text-transform: none; letter-spacing: -.01em;
  margin-bottom: .3rem;
}
.infopane__sub { font-size: .88rem; color: var(--ink-500); margin-bottom: .9rem; }
.infopane__desc {
  font-size: .9rem; color: var(--ink-700);
  margin-bottom: 1.1rem; max-width: 56ch;
}

/* Points: two columns on wide panels so long lists stay short */
.infopane__points {
  display: grid; gap: .55rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.infopane__points li { display: flex; gap: .6rem; align-items: flex-start; }
.infopane__points i {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: .12rem;
  border-radius: 50%;
  background: var(--brand-100); color: var(--brand-800);
  display: grid; place-items: center;
  font-style: normal; font-size: .68rem; font-weight: 700;
  font-family: var(--font-head);
}
/* Bullet variant: a small dot instead of a number */
.infopane__points:not(.is-steps) i {
  width: 7px; height: 7px; margin-top: .55rem;
  background: var(--brand-500);
}
.infopane__points.is-steps i { background: var(--leaf-800); color: #fff; }
.infopane__points span { font-size: .865rem; color: var(--ink-700); line-height: 1.55; }

.infopane__cta { margin-top: 1.3rem; }
.infopane__cta svg { width: 14px; height: 14px; }

/* ---- Aside: stat + artwork ---- */
.infopane__aside {
  background: linear-gradient(180deg, var(--brand-50), #fff);
  border-left: 1px solid var(--ink-100);
  padding: 1.6rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.infopane__stat {
  background: var(--leaf-800); color: #fff;
  border-radius: var(--r-md);
  padding: 1rem; text-align: center;
}
.infopane__stat b {
  display: block; font-family: var(--font-head);
  font-size: 2rem; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
}
.infopane__stat span {
  display: block; margin-top: .3rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; opacity: .82;
}
.infopane__art {
  flex: 1; min-height: 170px;
  border-radius: var(--r-md); overflow: hidden;
  background: #fff;
  border: 1px solid var(--ink-100);
}
.infopane__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .infotabs { grid-template-columns: 1fr; }
  .infotabs__rail {
    position: static;
    flex-direction: row; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .infotabs__rail::-webkit-scrollbar { display: none; }
  .infotab { width: auto; flex-shrink: 0; }
  .infotab__txt small { display: none; }
  .infopane { grid-template-columns: 1fr; }
  .infopane__aside {
    border-left: none;
    border-top: 1px solid var(--ink-100);
    flex-direction: row; align-items: center;
  }
  .infopane__stat { flex: 0 0 40%; }
  .infopane__art { min-height: 130px; }
}
@media (max-width: 560px) {
  .infopane__body { padding: 1.4rem; }
  .infopane__aside { flex-direction: column; padding: 1.2rem; }
  .infopane__stat { flex: none; width: 100%; }
  .infotab__icon { width: 30px; height: 30px; }
}
/* ==========================================================================
   Scroll-to-top button
   ========================================================================== */
.totop {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 500;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px -6px rgba(23,21,18,.35);
  /* Hidden state: kept in the DOM so the transition can run both ways */
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s;
}
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--brand-600); }
.totop:active { transform: translateY(1px); }
.totop svg { width: 21px; height: 21px; }

/* Sits above the toast stack, so nudge toasts up when it is visible */
.totop.on ~ .toasts { bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + 60px); }

@media (max-width: 640px) {
  .totop { width: 44px; height: 44px; right: 1rem; bottom: 1rem; }
  /* Lift clear of the sticky buy bar on product pages. */
  body.has-mobile-buy .totop { bottom: 88px; }
  .totop svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .totop { transition: opacity .15s linear; transform: none; }
  .totop.on { transform: none; }
}

/* ---- Read more / less --------------------------------------------------
   Collapses long copy to a fixed height with a fade, revealing the rest on
   click. Content stays in the DOM so it remains searchable and accessible. */
.readmore { position: relative; }
.readmore__body { overflow: hidden; }
.readmore.is-clamped .readmore__body {
  max-height: 9.5em;
}
/* Fade only while collapsed, so the last visible line hints at more text.
   --readmore-bg lets a section pass in its own background; without it the
   gradient would band against anything that is not cream. */
.readmore.is-clamped .readmore__body::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 6.5em; height: 3em; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--readmore-bg, var(--cream, #fff9e3)));
}
.readmore.is-open .readmore__body { max-height: none; }
.readmore.is-open .readmore__body::after { display: none; }

.readmore__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .9rem; padding: .5rem .95rem;
  background: transparent; border: 1.5px solid var(--brand-500);
  border-radius: 999px; cursor: pointer;
  font-family: var(--font-head); font-size: .82rem; font-weight: 700;
  color: var(--brand-700); letter-spacing: .01em;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.readmore__btn:hover { background: var(--brand-500); color: #fff; }
.readmore__btn svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.readmore.is-open .readmore__btn svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .readmore__btn svg, .readmore__btn { transition: none; }
}

/* ---- How to Use: numbered step list ------------------------------------- */
/* `.prose ol` sets list-style:decimal, which would double up with the
   counter badge — so this override is scoped to match its specificity. */
.prose ol.how-to-use-list,
.how-to-use-list {
  list-style: none; counter-reset: htu; margin: 0; padding: 0;
  display: grid; gap: .7rem;
}
.prose ol.how-to-use-list > li { list-style: none; margin-bottom: 0; }
.how-to-use-list li {
  counter-increment: htu; position: relative;
  padding: .85rem 1rem .85rem 3.2rem;
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: 14px; line-height: 1.6;
  box-shadow: 0 4px 14px rgba(43,44,16,.04);
}
.how-to-use-list li::before {
  content: counter(htu); position: absolute;
  left: .9rem; top: .8rem;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-500); color: #fff;
  font-family: var(--font-head); font-size: .8rem; font-weight: 700;
  display: grid; place-items: center;
}

/* Tinted sections hand the read-more fade their own background colour. */
.section--tint, .section--alt { --readmore-bg: #f4f1e6; }
.section--cream { --readmore-bg: #f1efdc; }