/** Shopify CDN: Minification failed

Line 199:0 Expected "*/" to terminate multi-line comment

**/
/* offer-4-brand.css
 * Honey Gummies DS v2 settings layer — scoped to /offer-4 only.
 *
 * Pulled verbatim from the design handoff's settings layer:
 *   - Full token tree (primitives → semantic)
 *   - Base typography defaults
 *   - Atoms: .hl, .kicker, .btn (+ modifiers), section.dark/elevated/subtle, .urgency-band
 *
 * Section content (.offer-hero, .offer-5050, .offer-faq, .offer-buybox, etc.)
 * keeps its existing structure — this file only rewires the typography +
 * emphasis + button atoms. Maps offer-section class names onto the new tokens.
 *
 * Everything is scoped under body[data-original-template^="page.offer-pdp"] so
 * the original /offer page stays untouched.
 */

/* ============================================================
 * TOKENS — Honey Gummies DS v2
 * ============================================================ */

body[data-original-template^="page.offer-pdp"] {
  --c-amber-50:  #FDF8EE;
  --c-amber-100: #F8EACB;
  --c-amber-300: #F0C674;
  --c-amber-500: #FFC106;
  --c-amber-700: #B0741C;
  --c-amber-900: #5B3A0D;

  --c-neutral-0:   #FFFFFF;
  --c-neutral-50:  #FEFFFF;
  --c-neutral-100: #F7F5F0;
  --c-neutral-200: #E8E5DE;
  --c-neutral-400: #8A8A82;
  --c-neutral-500: #6B6B65;
  --c-neutral-700: #2E2E2A;
  --c-neutral-900: #1A1A1A;

  --c-clinical-blue: #1E5A8C;
  --c-state-error:   #B3261E;
  --c-state-success: #2C7A4D;

  /* semantic */
  --color-brand-primary:    var(--c-amber-500);
  --color-brand-on-primary: var(--c-neutral-900);
  --color-text-primary:     var(--c-neutral-900);
  --color-text-secondary:   var(--c-neutral-700);
  --color-text-muted:       var(--c-neutral-500);
  --color-text-on-dark:     var(--c-neutral-0);
  --color-surface-page:     var(--c-neutral-50);
  --color-surface-elevated: var(--c-amber-50);
  --color-surface-subtle:   var(--c-neutral-100);
  --color-surface-dark:     var(--c-neutral-900);
  --color-border-default:   var(--c-neutral-200);
  --color-border-strong:    var(--c-neutral-400);
  --color-medical-accent:   var(--c-clinical-blue);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: 3.5rem;

  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --leading-tight: 1.1;
  --leading-body:  1.55;
  --leading-loose: 1.65;
  --tracking-tight: -0.02em;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.75rem;

  --border-thin: 0.0625rem solid var(--color-border-default);
  --border-bold: 0.125rem solid var(--color-text-primary);

  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
 * BASE — apply the body + heading defaults inside the scope
 * ============================================================ */

/* Universal font-family hammer.
 *
 * 2026-06 audit removed 3 dead blocks (proven dominated by the surviving
 * blocks below via specificity math). The surviving blocks are:
 *
 *   Block A — :has() chain at (0,0,2,3) covers all descendants of body[attr].
 *   Block B — :has() + .wgl-shell.wgl-shell at (0,0,4,3) covers buybox subtree.
 *
 * Block A dominates the old `body[attr] *` (0,0,1,1) and `html body[attr] *`
 * (0,0,1,2) — both never won cascade. Block B dominates the old `.wgl-shell *`
 * (0,0,2,1) — same dead code.
 */

/* Block A — universal hammer via :has() chain to push specificity above any
   class- or attribute-based rule the theme injects later. */
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"],
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] *,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] *::before,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] *::after {
  font-family: 'Inter', system-ui, sans-serif;
}

/* EXEMPT — the cart drawer manages its own typography (Inter + JBM).
   Match same (0,0,2,3) specificity chain as Block A, scoped to hg-cart-drawer
   subtree, declared LATER so source order wins among equal-specificity. */
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] hg-cart-drawer,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] hg-cart-drawer *,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] hg-cart-drawer *::before,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] hg-cart-drawer *::after {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Re-establish mono on the same (0,2,5) tier so it isn't reset by the universal */
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .kicker,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .offer-hero__eyebrow,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .offer-5050__eyebrow,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .offer-5050__number,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .article__subject,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .article__num,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .article__cit,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .urgency-band,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .offer-faq__heading::before {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* offer.css targets .cta etc. via `body[data-template="page.offer"] .wgl-shell .cta`
   at specificity 31. Beat it by doubling .wgl-shell (each class counts separately)
   on top of the :has() + body[attr] chain → specificity ~43. */
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .wgl-shell.wgl-shell,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .wgl-shell.wgl-shell *,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .wgl-shell.wgl-shell *::before,
html:has(body[data-original-template^="page.offer-pdp"]) body[data-original-template^="page.offer-pdp"] .wgl-shell.wgl-shell *::after {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Mono override consolidated above — the `:has()` chain version at lines 114-123
   has specificity (0,0,3,3) and always wins over this `body[attr] .X` version
   at (0,0,2,1). The earlier block was the only one ever applying; deleted the
   shadow that contained another `[class*="mono"]` substring matcher to boot. */

body[data-original-template^="page.offer-pdp"] {
  /* Removed -webkit-font-smoothing: antialiased — it made Inter strokes
     too thin on macOS/iOS, compounding the "16px looks small" feeling.
     Default subpixel-antialiased keeps strokes at full weight. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  color: var(--color-text-primary);
}

/* Form controls don't inherit font-family from user-agent styles — force them */
body[data-original-template^="page.offer-pdp"] button,
body[data-original-template^="page.offer-pdp"] input,
body[data-original-template^="page.offer-pdp"] select,
body[data-original-template^="page.offer-pdp"] textarea,
body[data-original-template^="page.offer-pdp"] [role="button"],
body[data-original-template^="page.offer-pdp"] [type="button"],
body[data-original-template^="page.offer-pdp"] [type="submit"],
body[data-original-template^="page.offer-pdp"] [class*="cta"],
body[data-original-template^="page.offer-pdp"] [class*="btn"],
body[data-original-template^="page.offer-pdp"] a.offer-hero__cta,
body[data-original-template^="page.offer-pdp"] .offer-hero__cta,
body[data-original-template^="page.offer-pdp"] .offer-sticky-cta__btn,
body[data-original-template^="page.offer-pdp"] .offer-buybox__cta,
body[data-original-template^="page.offer-pdp"] .offer-buybox button,
body[data-original-template^="page.offer-pdp"] .offer-buybox__plan,
body[data-original-template^="page.offer-pdp"] .offer-buybox__qty button {
  font-family: var(--font-body);
}

body[data-original-template^="page.offer-pdp"] h1,
body[data-original-template^="page.offer-pdp"] h2,
body[data-original-template^="page.offer-pdp"] h3,
body[data-original-template^="page.offer-pdp"] h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* ============================================================