/* ============================================================================
   KRUSH ORGANICS — PLATINUM PDP — COMPONENTS
   ----------------------------------------------------------------------------
   Component primitives for the entire 19-section PDP build.
   Import order: tokens.css → typography.css → THIS FILE → motion.css

   Every component spec includes ALL interaction states:
   default / hover / focus-visible / active / disabled (where applicable).

   Naming convention: BEM-ish but pragmatic.
     .c-componentname               -> base
     .c-componentname--variant      -> variant
     .c-componentname__part         -> internal element
     .is-* / .has-*                 -> state modifiers
   ============================================================================ */


/* ============================================================================
   1. BUTTON SYSTEM
   ----------------------------------------------------------------------------
   Variants: primary | secondary | tertiary | dark | platinum
   Sizes:    sm | md (default) | lg | xl
   The primary CTA on a Krush PDP is BRAND GREEN. Always. The "dark" variant
   exists for hero overlays on cream surfaces only — not as a default.
   ============================================================================ */

.c-btn {
  /* base */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);       /* 600 — brand-verified for .btn */
  font-size: var(--text-body);
  line-height: 1;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 16px 28px;                         /* default md size — 48px tall, mobile-tap-safe */
  min-height: 48px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-default);
  /* prevent iOS double-tap zoom */
  touch-action: manipulation;
}

.c-btn:focus { outline: none; }
.c-btn:focus-visible { box-shadow: var(--shadow-focus); }
.c-btn:disabled, .c-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.c-btn > svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- primary (default — brand green) ---------- */
.c-btn--primary {
  background: var(--color-brand-green);
  color: var(--color-surface-white);
}
.c-btn--primary:hover {
  background: var(--color-brand-green-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.c-btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* ---------- secondary (outline) ---------- */
.c-btn--secondary {
  background: transparent;
  color: var(--color-text-high);
  border-color: var(--color-text-high);
}
.c-btn--secondary:hover {
  background: var(--color-text-high);
  color: var(--color-surface-white);
}
.c-btn--secondary:active {
  transform: translateY(0);
}

/* ---------- tertiary (text-only, with underline reveal) ---------- */
.c-btn--tertiary {
  background: transparent;
  color: var(--color-text-high);
  padding: 12px 8px;
  min-height: 0;
  border-radius: 0;
  position: relative;
}
.c-btn--tertiary::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}
.c-btn--tertiary:hover::after {
  transform: scaleX(0);
  transform-origin: right center;
}

/* ---------- dark (deep ink) — used in hero or platinum tier-3 CTA ---------- */
.c-btn--dark {
  background: var(--color-neutral-900);
  color: var(--color-surface-white);
}
.c-btn--dark:hover {
  background: var(--color-neutral-800);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ---------- platinum — reserved for tier-3 (3-bottle) CTA + guarantee ----- */
.c-btn--platinum {
  background: var(--gradient-platinum);
  color: var(--color-neutral-900);
  border: 1px solid var(--color-platinum-300);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.c-btn--platinum::before {
  /* shimmer pass — re-armed on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-platinum-shimmer);
  background-size: 200% 100%;
  background-position: 200% 0;
  z-index: -1;
  pointer-events: none;
  transition: background-position 1.2s var(--ease-glide);
}
.c-btn--platinum:hover { transform: translateY(-1px); box-shadow: var(--shadow-premium); }
.c-btn--platinum:hover::before { background-position: -100% 0; }

/* ---------- size modifiers ---------- */
.c-btn--sm  { padding: 10px 16px; min-height: 36px; font-size: var(--text-small); }
.c-btn--lg  { padding: 18px 32px; min-height: 56px; font-size: var(--text-lead); }
.c-btn--xl  { padding: 22px 40px; min-height: 64px; font-size: var(--text-lead); border-radius: var(--radius-lg); }

/* ---------- block (full-width) ---------- */
.c-btn--block { display: flex; width: 100%; }

/* ---------- icon-only ---------- */
.c-btn--icon {
  padding: 0;
  width: 44px; height: 44px;
  min-height: 0;
}


/* ============================================================================
   2. PILL / BADGE
   ----------------------------------------------------------------------------
   Variants: default | green | platinum | dark | success | warning | inverse
   ============================================================================ */

.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-micro);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.c-badge > svg { width: 12px; height: 12px; }

.c-badge--default  { background: var(--color-neutral-100); color: var(--color-text-high); }
.c-badge--green    { background: var(--color-green-100);  color: var(--color-green-800); }
.c-badge--green-solid { background: var(--color-brand-green); color: var(--color-surface-white); }
.c-badge--platinum {
  background: var(--gradient-platinum);
  color: var(--color-neutral-900);
  border-color: rgba(0,0,0,0.05);
}
.c-badge--dark     { background: var(--color-neutral-900); color: var(--color-surface-white); }
.c-badge--success  { background: var(--color-success-bg); color: var(--color-success); }
.c-badge--warning  { background: var(--color-warning-bg); color: var(--color-warning); }
.c-badge--inverse  {
  background: rgba(248, 245, 240, 0.1);
  color: var(--color-text-inverse);
  border-color: rgba(248, 245, 240, 0.24);
  backdrop-filter: blur(4px);
}

/* Best-value badge with dot indicator (for tier card) */
.c-badge--with-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Trust pill — for under-hero attribute row (Organic / Lab-Tested / etc.) */
.c-pill-trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  color: var(--color-text-high);
  line-height: 1;
  white-space: nowrap;
}
.c-pill-trust > svg {
  width: 16px; height: 16px;
  color: var(--color-brand-green);
  flex: 0 0 auto;
}


/* ============================================================================
   3. CARD SYSTEM
   ----------------------------------------------------------------------------
   Variants: basic | elevated | premium-platinum | flat (no border) | feature
   ============================================================================ */

.c-card {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition:
    transform var(--duration-base) var(--ease-glide),
    box-shadow var(--duration-base) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.c-card--elevated {
  border: none;
  box-shadow: var(--shadow-md);
}
.c-card--elevated:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.c-card--flat {
  background: transparent;
  border: none;
  padding: 0;
}

/* Feature card — used in benefits grids, ingredient micro-cards */
.c-card--feature {
  padding: var(--space-8);
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-lg);
}

/* Premium platinum card — for the §13 guarantee + §16 ingredient cards */
.c-card--premium-platinum {
  position: relative;
  background: var(--color-surface-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-premium);
  overflow: hidden;
  isolation: isolate;
}
/* The platinum edge — 1px gradient hairline using mask trick */
.c-card--premium-platinum::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;                              /* border width */
  border-radius: inherit;
  background: var(--gradient-platinum-edge);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* Card on cream — slightly warmer background */
.c-card--on-cream {
  background: var(--color-surface-white);
}


/* ============================================================================
   4. FORM CONTROLS
   ----------------------------------------------------------------------------
   Inputs, selects, radios, checkboxes — all need ALL states.
   Min height: 48px for touch targets.
   ============================================================================ */

.c-input,
.c-select,
.c-textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--color-text-high);
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  min-height: 48px;
  transition:
    border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default);
  appearance: none;
  -webkit-appearance: none;
}
.c-input::placeholder,
.c-textarea::placeholder { color: var(--color-text-low); }

.c-input:hover,
.c-select:hover,
.c-textarea:hover { border-color: var(--color-border-strong); }

.c-input:focus-visible,
.c-select:focus-visible,
.c-textarea:focus-visible {
  outline: none;
  border-color: var(--color-brand-green);
  box-shadow: var(--shadow-focus);
}

.c-input:disabled,
.c-select:disabled,
.c-textarea:disabled {
  background: var(--color-neutral-100);
  color: var(--color-text-low);
  cursor: not-allowed;
}

.c-input.is-invalid,
.c-select.is-invalid,
.c-textarea.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(184, 54, 42, 0.18);
}

.c-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select — custom caret */
.c-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='%23353329' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

/* Label */
.c-label {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  color: var(--color-text-high);
  margin-bottom: var(--space-2);
  letter-spacing: 0.005em;
}

/* Field help / error text */
.c-help {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-mid);
}
.c-help.is-error { color: var(--color-error); }

/* ---------- Radio (custom) ---------- */
.c-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  color: var(--color-text-body);
}
.c-radio__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.c-radio__indicator {
  width: 22px; height: 22px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface-white);
  position: relative;
  transition: border-color var(--duration-fast) var(--ease-default);
  flex: 0 0 auto;
}
.c-radio__indicator::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-brand-green);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.c-radio__input:checked + .c-radio__indicator { border-color: var(--color-brand-green); }
.c-radio__input:checked + .c-radio__indicator::after { transform: scale(1); }
.c-radio__input:focus-visible + .c-radio__indicator {
  box-shadow: var(--shadow-focus);
}

/* ---------- Checkbox (custom) ---------- */
.c-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  color: var(--color-text-body);
}
.c-checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.c-checkbox__indicator {
  width: 22px; height: 22px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface-white);
  position: relative;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
  flex: 0 0 auto;
  margin-top: 1px;
}
.c-checkbox__indicator::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-surface-white);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6 11 3.5 3.5L17 7'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6 11 3.5 3.5L17 7'/></svg>") center/contain no-repeat;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.c-checkbox__input:checked + .c-checkbox__indicator {
  background: var(--color-brand-green);
  border-color: var(--color-brand-green);
}
.c-checkbox__input:checked + .c-checkbox__indicator::after { opacity: 1; }
.c-checkbox__input:focus-visible + .c-checkbox__indicator {
  box-shadow: var(--shadow-focus);
}


/* ============================================================================
   5. SEGMENTED CONTROL (One-Time vs Subscribe & Save)
   ----------------------------------------------------------------------------
   The single most important conversion component on the page after the CTA.
   Two equal-weight tabs, active tab gets a clean white pill with shadow.
   ============================================================================ */

.c-segmented {
  display: inline-grid;
  grid-template-columns: repeat(var(--segs, 2), 1fr);
  width: 100%;
  background: var(--color-neutral-100);
  padding: 4px;
  border-radius: var(--radius-md);
  position: relative;
}
.c-segmented__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 16px;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  letter-spacing: 0.01em;
  color: var(--color-text-mid);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-default),
    color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default);
}
.c-segmented__option:hover { color: var(--color-text-high); }
.c-segmented__option.is-active {
  background: var(--color-surface-white);
  color: var(--color-text-high);
  box-shadow: var(--shadow-sm);
}
.c-segmented__option:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.c-segmented__option .c-badge {
  margin-left: var(--space-1);
  padding: 3px 8px;
  font-size: 10px;
}


/* ============================================================================
   6. TABS (for tab-driven hero info: Overview / Description / Ingredients)
   ============================================================================ */
.c-tabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: 1px solid var(--color-border-hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.c-tabs::-webkit-scrollbar { display: none; }
.c-tabs__btn {
  position: relative;
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  letter-spacing: 0.02em;
  color: var(--color-text-mid);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-default);
}
.c-tabs__btn:hover { color: var(--color-text-high); }
.c-tabs__btn.is-active { color: var(--color-text-high); }
.c-tabs__btn.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-brand-green);
  border-radius: 2px;
}
.c-tabs__btn:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ============================================================================
   7. ACCORDION (FAQ §15)
   ----------------------------------------------------------------------------
   Minimal — hairline dividers only, no card containers (per ref #07).
   Built on native <details><summary> for accessibility + zero-JS fallback.
   ============================================================================ */

.c-accordion {
  border-top: 1px solid var(--color-border-hairline);
}
.c-accordion__item {
  border-bottom: 1px solid var(--color-border-hairline);
  list-style: none;
}
.c-accordion__item > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h4);
  line-height: 1.35;
  color: var(--color-text-high);
  text-align: left;
  transition: color var(--duration-fast) var(--ease-default);
}
.c-accordion__item > summary::-webkit-details-marker { display: none; }
.c-accordion__item > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 24px; height: 24px;
  background-color: var(--color-brand-green);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
  transition: transform var(--duration-base) var(--ease-spring);
}
.c-accordion__item[open] > summary::after { transform: rotate(180deg); }
.c-accordion__item > summary:hover { color: var(--color-brand-green); }
.c-accordion__item > summary:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 4px;
  border-radius: 2px;
}
.c-accordion__body {
  padding: 0 0 var(--space-6);
  max-width: var(--container-prose);
  color: var(--color-text-body);
  font-weight: var(--weight-light);
  line-height: var(--leading-body);
}


/* ============================================================================
   8. QUANTITY STEPPER
   ----------------------------------------------------------------------------
   Custom — brand-feel, not generic input + buttons. Used in cart and tier-card.
   ============================================================================ */
.c-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 48px;
}
.c-stepper__btn {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-high);
  cursor: pointer;
  font-size: 20px;
  font-weight: var(--weight-light);
  transition: background-color var(--duration-fast) var(--ease-default);
}
.c-stepper__btn:hover { background: var(--color-neutral-100); }
.c-stepper__btn:active { background: var(--color-neutral-200); }
.c-stepper__btn:disabled {
  color: var(--color-text-low);
  cursor: not-allowed;
}
.c-stepper__btn:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: -2px;
}
.c-stepper__value {
  width: 48px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--color-text-high);
  font-variant-numeric: tabular-nums;
  border: none;
  background: transparent;
  padding: 0;
}
.c-stepper__value:focus { outline: none; }


/* ============================================================================
   9. TIER CARD — 1 / 2 / 3 BOTTLE PRICING SELECTOR
   ----------------------------------------------------------------------------
   This is THE highest-stakes component on the page. Must feel premium AND
   make the savings math unmissable. Tier-3 (3-bottle) gets the platinum edge
   treatment + "BEST VALUE" platinum badge. Reads like a Hyro subscription
   card, not a Shopify radio list.
   ============================================================================ */

.c-tier-group {
  display: grid;
  gap: var(--space-3);
}
.c-tier {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  background: var(--color-surface-white);
  border: 1.5px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    border-color var(--duration-base) var(--ease-default),
    box-shadow var(--duration-base) var(--ease-default),
    background-color var(--duration-base) var(--ease-default);
  isolation: isolate;
}
.c-tier:hover { border-color: var(--color-border-strong); }

.c-tier__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.c-tier__indicator {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface-white);
  position: relative;
  flex: 0 0 auto;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.c-tier__indicator::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-brand-green);
  transform: scale(0);
  transition: transform var(--duration-base) var(--ease-spring);
}

.c-tier__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.c-tier__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h4);
  line-height: 1.2;
  color: var(--color-text-high);
}
.c-tier__sub {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-small);
  color: var(--color-text-mid);
}

.c-tier__price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.c-tier__price-now {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-high);
  font-variant-numeric: tabular-nums;
}
.c-tier__price-was {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-small);
  color: var(--color-text-low);
  text-decoration: line-through;
}
.c-tier__price-per {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-micro);
  color: var(--color-text-mid);
  letter-spacing: 0.02em;
}

/* Save badge floating top-right */
.c-tier__save {
  position: absolute;
  top: -10px;
  right: var(--space-5);
  padding: 4px 10px;
  background: var(--color-brand-green);
  color: var(--color-surface-white);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  line-height: 1;
}

/* Selected state */
.c-tier__radio:checked ~ .c-tier__indicator,
.c-tier.is-selected .c-tier__indicator {
  border-color: var(--color-brand-green);
}
.c-tier__radio:checked ~ .c-tier__indicator::after,
.c-tier.is-selected .c-tier__indicator::after {
  transform: scale(1);
}
.c-tier:has(.c-tier__radio:checked),
.c-tier.is-selected {
  border-color: var(--color-brand-green);
  background: var(--color-surface-tint-mint);
  box-shadow: 0 0 0 1px var(--color-brand-green);
}

/* Tier — PLATINUM treatment for the best-value tier */
.c-tier--platinum {
  position: relative;
  background: var(--color-surface-white);
  border-color: transparent;
}
.c-tier--platinum::before {
  /* gradient hairline border */
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--gradient-platinum-edge);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.c-tier--platinum .c-tier__save {
  background: var(--gradient-platinum);
  color: var(--color-neutral-900);
  border: 1px solid rgba(0,0,0,0.06);
}
.c-tier--platinum:has(.c-tier__radio:checked),
.c-tier--platinum.is-selected {
  background: linear-gradient(180deg, var(--color-platinum-50) 0%, var(--color-surface-white) 60%);
  box-shadow: var(--shadow-premium);
}

.c-tier:focus-within {
  box-shadow: var(--shadow-focus);
}


/* ============================================================================
   10. TOOLTIP
   ----------------------------------------------------------------------------
   CSS-only on hover/focus. JS can replace for click-toggle if needed.
   ============================================================================ */
.c-tooltip {
  position: relative;
  display: inline-flex;
}
.c-tooltip__trigger {
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-neutral-200);
  color: var(--color-text-mid);
  font-size: 11px;
  font-weight: var(--weight-bold);
  border: none;
}
.c-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-neutral-900);
  color: var(--color-surface-white);
  font-size: var(--text-small);
  font-weight: var(--weight-light);
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  white-space: normal;
  width: max-content;
  max-width: 240px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
  z-index: var(--z-tooltip);
}
.c-tooltip__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-neutral-900);
}
.c-tooltip:hover .c-tooltip__bubble,
.c-tooltip:focus-within .c-tooltip__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ============================================================================
   11. STAR RATING DISPLAY
   ----------------------------------------------------------------------------
   For Yotpo bind position + section headers. CSS-only display (Yotpo replaces
   with its widget where interactive). Uses SVG mask for crisp stars.
   ============================================================================ */
.c-stars {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.c-stars__icons {
  --pct: 100%;
  display: inline-block;
  position: relative;
  width: 100px; height: 18px;
  background-image:
    /* gold layer (clipped by --pct) */
    linear-gradient(to right, var(--color-brand-green) var(--pct), var(--color-neutral-200) var(--pct));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'><g fill='%23fff'><path d='M10 0l2.47 6.4 6.83.36-5.25 4.39 1.75 6.62L10 13.93l-5.8 3.84 1.75-6.62L.7 6.76l6.83-.36z'/><path d='M30 0l2.47 6.4 6.83.36-5.25 4.39 1.75 6.62L30 13.93l-5.8 3.84 1.75-6.62-5.25-4.39 6.83-.36z'/><path d='M50 0l2.47 6.4 6.83.36-5.25 4.39 1.75 6.62L50 13.93l-5.8 3.84 1.75-6.62-5.25-4.39 6.83-.36z'/><path d='M70 0l2.47 6.4 6.83.36-5.25 4.39 1.75 6.62L70 13.93l-5.8 3.84 1.75-6.62-5.25-4.39 6.83-.36z'/><path d='M90 0l2.47 6.4 6.83.36-5.25 4.39 1.75 6.62L90 13.93l-5.8 3.84 1.75-6.62-5.25-4.39 6.83-.36z'/></g></svg>") left center / 100px 18px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'><g fill='%23fff'><path d='M10 0l2.47 6.4 6.83.36-5.25 4.39 1.75 6.62L10 13.93l-5.8 3.84 1.75-6.62L.7 6.76l6.83-.36z'/><path d='M30 0l2.47 6.4 6.83.36-5.25 4.39 1.75 6.62L30 13.93l-5.8 3.84 1.75-6.62-5.25-4.39 6.83-.36z'/><path d='M50 0l2.47 6.4 6.83.36-5.25 4.39 1.75 6.62L50 13.93l-5.8 3.84 1.75-6.62-5.25-4.39 6.83-.36z'/><path d='M70 0l2.47 6.4 6.83.36-5.25 4.39 1.75 6.62L70 13.93l-5.8 3.84 1.75-6.62-5.25-4.39 6.83-.36z'/><path d='M90 0l2.47 6.4 6.83.36-5.25 4.39 1.75 6.62L90 13.93l-5.8 3.84 1.75-6.62-5.25-4.39 6.83-.36z'/></g></svg>") left center / 100px 18px no-repeat;
}
.c-stars__label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  color: var(--color-text-high);
  font-variant-numeric: tabular-nums;
}
.c-stars__count {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-small);
  color: var(--color-text-mid);
}


/* ============================================================================
   12. DIVIDER
   ============================================================================ */
.c-divider {
  border: none;
  height: 1px;
  background: var(--color-border-hairline);
  margin: var(--space-8) 0;
}
.c-divider--platinum {
  height: 1px;
  background: var(--gradient-platinum-edge);
  opacity: 0.6;
}


/* ============================================================================
   13. ICON BUTTON / CIRCULAR
   ============================================================================ */
.c-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-hairline);
  color: var(--color-text-high);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-spring);
}
.c-icon-btn:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.c-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.c-icon-btn > svg { width: 18px; height: 18px; }


/* ============================================================================
   14. STICKY ADD-TO-CART BAR (mobile)
   ----------------------------------------------------------------------------
   Used from §3 onwards on mobile. Becomes visible when user scrolls past the
   buy-box. JS adds .is-visible.
   ============================================================================ */
.c-sticky-cart {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  background: var(--color-surface-white);
  border-top: 1px solid var(--color-border-hairline);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-out);
  box-shadow: 0 -12px 28px rgba(31, 30, 25, 0.08);
}
.c-sticky-cart.is-visible { transform: translateY(0); }
.c-sticky-cart__price {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h4);
  color: var(--color-text-high);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.c-sticky-cart__cta {
  flex: 1;
}

@media (min-width: 1024px) {
  .c-sticky-cart { display: none; }   /* mobile-only by default */
}


/* ============================================================================
   15. COMPARISON TABLE (§9 us vs them)
   ----------------------------------------------------------------------------
   Highlight column treatment (Seed-style — spotlight tint, no red Xs).
   ============================================================================ */
.c-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
}
.c-compare th,
.c-compare td {
  padding: var(--space-5) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-hairline);
  vertical-align: top;
}
.c-compare thead th {
  font-weight: var(--weight-semibold);
  font-size: var(--text-h4);
  color: var(--color-text-high);
  border-bottom: 1px solid var(--color-border-soft);
}
.c-compare__row-feat {
  font-weight: var(--weight-semibold);
  color: var(--color-text-high);
}
.c-compare__row-feat small {
  display: block;
  font-weight: var(--weight-light);
  color: var(--color-text-mid);
  font-size: var(--text-small);
  margin-top: 2px;
}
.c-compare__cell--ours {
  background: var(--color-surface-tint-mint);
  position: relative;
}
.c-compare thead th.c-compare__cell--ours,
.c-compare tbody td.c-compare__cell--ours {
  background: var(--color-surface-tint-mint);
}
.c-compare tbody tr:first-child td.c-compare__cell--ours {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.c-compare tbody tr:last-child td.c-compare__cell--ours {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.c-compare__icon-yes,
.c-compare__icon-no {
  display: inline-block;
  width: 18px; height: 18px;
  vertical-align: middle;
}
.c-compare__icon-yes { color: var(--color-brand-green); }
.c-compare__icon-no  { color: var(--color-text-low); }


/* ============================================================================
   16. STAT RING (for §7 efficacy stats)
   ----------------------------------------------------------------------------
   Circular progress with animated stroke-dashoffset. JS or @keyframes triggered.
   ============================================================================ */
.c-stat-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.c-stat-ring__svg {
  width: 180px; height: 180px;
  position: relative;
}
.c-stat-ring__track,
.c-stat-ring__fill {
  fill: none;
  cx: 90;
  cy: 90;
  r: 78;
  stroke-width: 8;
}
.c-stat-ring__track { stroke: var(--color-neutral-200); }
.c-stat-ring__fill {
  stroke: var(--color-brand-green);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-dasharray: 490;          /* 2 * π * 78 ≈ 490 */
  stroke-dashoffset: 490;          /* start fully empty */
  transition: stroke-dashoffset 1.6s var(--ease-glide);
}
.c-stat-ring.is-revealed .c-stat-ring__fill {
  /* JS or in-view observer sets --pct (0..1) and toggles is-revealed */
  stroke-dashoffset: calc(490 * (1 - var(--pct, 0.95)));
}
.c-stat-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
}
.c-stat-ring__pct {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  color: var(--color-text-high);
  line-height: 1;
}
.c-stat-ring__label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  color: var(--color-text-high);
  text-align: center;
  letter-spacing: 0.01em;
  max-width: 18ch;
}


/* ============================================================================
   17. PROMO BAR (header) + utility helpers
   ============================================================================ */
.c-promo-bar {
  background: var(--color-neutral-900);
  color: var(--color-text-inverse);
  padding: 10px var(--gutter);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  letter-spacing: 0.02em;
  text-align: center;
}
.c-promo-bar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================================
   18. GUARANTEE MEDALLION
   ----------------------------------------------------------------------------
   The 30-day stamp. Embossed feel via layered gradients + shadow. SVG inside
   provides the actual visual. CSS provides the disc + shadow.
   ============================================================================ */
.c-medallion {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--gradient-platinum);
  box-shadow: var(--shadow-premium);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--font-display);
  color: var(--color-neutral-900);
  text-align: center;
  isolation: isolate;
}
.c-medallion::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18);
  z-index: 1;
}
.c-medallion::after {
  /* inner highlight */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5) 0%, transparent 50%);
  pointer-events: none;
  z-index: 2;
}
.c-medallion__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.c-medallion__big {
  font-weight: var(--weight-bold);
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.c-medallion__small {
  font-weight: var(--weight-bold);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ============================================================================
   19. UTILITIES (light layout helpers — not Tailwind, just enough)
   ============================================================================ */
.u-container        { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.u-container--lg    { max-width: var(--container-lg); }
.u-container--prose { max-width: var(--container-prose); }

.u-section          { padding-block: var(--section-py-md); }
.u-section--sm      { padding-block: var(--section-py-sm); }
.u-section--lg      { padding-block: var(--section-py-lg); }
.u-section--xl      { padding-block: var(--section-py-xl); }

.u-stack > * + *    { margin-top: var(--space-6); }
.u-stack-sm > * + * { margin-top: var(--space-3); }
.u-stack-lg > * + * { margin-top: var(--space-10); }

.u-flex             { display: flex; }
.u-flex-center      { display: flex; align-items: center; justify-content: center; }
.u-flex-between     { display: flex; align-items: center; justify-content: space-between; }
.u-grid             { display: grid; }
.u-grid-2           { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.u-grid-3           { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.u-grid-4           { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 768px) {
  .u-grid-2, .u-grid-3, .u-grid-4 { grid-template-columns: 1fr; }
}

.u-hidden-mobile { display: initial; }
.u-hidden-desktop { display: none; }
@media (max-width: 768px) {
  .u-hidden-mobile { display: none; }
  .u-hidden-desktop { display: initial; }
}

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