/*
Theme Name: Elara Health
Theme URI: https://www.elarahealthandwellness.com
Author: JTE Medical, LLC
Author URI: https://www.elarahealthandwellness.com
Description: Custom theme for Elara Health and Wellness. Physician-guided GLP-1 weight loss programs. Built for performance, SEO, and conversions.
Version: 2.0.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://www.elarahealthandwellness.com/terms-of-service/
Text Domain: elara-health

v2.0.1 KLAVIYO MOBILE GUARD (June 2026):
  - Klaviyo floating onsite forms (popup/flyout + their post-close teaser)
    suppressed on mobile widths (<=899px). They dock to the bottom of the
    viewport and collided with the theme's sticky mobile CTAs
    (.supps-sticky-cta etc.). Targets direct body children injected by
    klaviyo.js only — the footer embed (.klaviyo-form-UucCLf, nested in
    footer markup) is unaffected. Desktop behavior unchanged. To re-enable
    mobile popups later, remove the guard block at the end of this file
    AND configure device targeting inside Klaviyo's form editor.

v2.0.0 EDITORIAL REBUILD (April 2026):
  DESIGN SYSTEM:
  - Unified editorial design tokens (--v3-cream, --v3-black, --v3-muted, etc.)
    now live at :root, eliminating duplication across page templates.
  - Three-tone minimalism: black (primary action), cream (surface), teal
    (accent only — italic em, link hover, small icons). Teal demoted from
    primary-everything to voice-not-backdrop.
  - Hairline-first design: drop shadows dramatically reduced, hairline borders
    used for separation instead. Shadows reserved for true elevation moments.

  BUTTONS:
  - .btn-primary ? black pill sitewide. Every legacy page that uses .btn-primary
    instantly feels editorial (pricing, FAQ, supplements, pack pages, quiz, etc.).
  - .nav-cta ? black pill matching .btn-primary.
  - .btn-secondary, .btn-gold, .btn-lg, .btn-sm updated to editorial system.

  HEADER:
  - Added .nav-cart-count and .nav-cart CSS (header.php v2.0.0 replaced inline
    styles with these classes).
  - Sticky header gets border-bottom transition + subtle elevation on scroll.
  - Mobile menu toggle animation refined.

  PROMO BAR:
  - Dropped teal-on-dark-teal. Now warm-white editorial treatment with serif
    sentence, black underlined link.

  TYPOGRAPHY:
  - Display sizes with tighter letter-spacing and lighter weight (400-500
    instead of 600+). More italic usage in headlines via .accent class.
  - Body stays clear and functional (DM Sans 400-600).

  REMOVED:
  - .testimonials block CSS (dead code — testimonials removed from content per
    regulatory cleanup).
  - .hero hardcoded Unsplash URL (home-v3 and all new pages have their own
    hero treatments; generic fallback only).
  - Heavy gradients on .final-cta-inner, .program-card, .step-number.

  PRESERVED AS-IS:
  - Entire mobile nav drawer architecture (sophisticated, battle-tested).
  - WooCommerce form/table/button overrides (hard-won).
  - Safe-area iPhone support.
  - Base reset and layout primitives.
*/


/* ============================================
   DESIGN SYSTEM — CSS VARIABLES
   ============================================ */

:root {
  /* Brand — teal kept for accent use (italic em, link hover, small icons) */
  --color-primary: #1A5C5E;
  --color-primary-dark: #0F3D3F;
  --color-primary-light: #2A7D80;
  --color-secondary: #C8965A;
  --color-secondary-dark: #A67842;
  --color-secondary-light: #D4AC7A;

  /* Legacy surface tokens — kept for WooCommerce, forms, legacy pages */
  --color-bg: #FDFCF9;
  --color-bg-alt: #F8F5EF;
  --color-surface: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-secondary: #2C2C2C;
  --color-text-light: #8A8680;
  --color-border: rgba(26, 26, 26, 0.08);

  /* CTA tokens — now resolve to editorial black */
  --color-cta: #1A1A1A;
  --color-cta-hover: #000000;
  --color-cta-secondary: #C8965A;

  /* Status */
  --color-success: #2D8B5F;
  --color-error: #C4453C;
  --color-info: #3A7FBF;

  /* Editorial design tokens — used by home-v3, tirzepatide, semaglutide,
     how-it-works, about, and all future pages. Available globally so page
     templates can stop duplicating them. */
  --v3-cream: #F8F5EF;
  --v3-warm-white: #FDFCF9;
  --v3-paper: #F4EDE1;
  --v3-black: #1A1A1A;
  --v3-charcoal: #2C2C2C;
  --v3-muted: #8A8680;
  --v3-hairline: rgba(26, 26, 26, 0.08);
  --v3-hairline-strong: rgba(26, 26, 26, 0.16);

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --v3-serif: var(--font-display);
  --v3-sans: var(--font-body);

  /* Type scale — editorial tightening */
  --h1-size: clamp(2.5rem, 5vw, 3.75rem);
  --h2-size: clamp(1.875rem, 3.5vw, 2.5rem);
  --h3-size: clamp(1.375rem, 2.5vw, 1.75rem);
  --h4-size: 1.25rem;
  --body-size: 1.0625rem;
  --small-size: 0.9375rem;
  --caption-size: 0.8125rem;

  /* Layout */
  --container-max: 1200px;
  --section-padding: clamp(4rem, 8vw, 7rem) 0;

  /* Radius — reduced for editorial (was 8/12/20, now 2/4/8) */
  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 8px;

  /* Shadows — kept for elevation moments only */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 4px 16px rgba(26, 26, 26, 0.06);
  --shadow-lg: 0 12px 40px rgba(26, 26, 26, 0.08);
  --shadow-glow: 0 24px 60px rgba(26, 26, 26, 0.12);
}


/* ============================================
   RESET & BASE
   ============================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color 0.2s; }
ul, ol { list-style: none; }


/* ============================================
   TYPOGRAPHY — Editorial tightening
   ============================================ */

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-text);
  font-weight: 400;
}
h1 {
  font-size: var(--h1-size);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
h2 {
  font-size: var(--h2-size);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3 {
  font-size: var(--h3-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h4 {
  font-size: var(--h4-size);
  font-weight: 600;
  line-height: 1.35;
  font-family: var(--font-body);
}
h5 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  font-family: var(--font-body);
}
h6 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  font-family: var(--font-body);
}

/* Italic em in headlines — the editorial accent pattern */
h1 em, h2 em, h3 em,
.hero h1 em, .hero h2 em {
  font-style: italic;
  color: var(--color-primary);
  font-weight: inherit;
}

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }


/* ============================================
   LAYOUT
   ============================================ */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2rem);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--v3-muted);
  margin-bottom: 20px;
}
.section-header h2 {
  margin-bottom: 16px;
}
.section-header p {
  font-size: var(--body-size);
  color: var(--color-text-secondary);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}


/* ============================================
   BUTTONS — Editorial black pill system
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 16px 32px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
.btn:hover svg {
  transform: translateX(3px);
}

.btn-sm {
  padding: 12px 24px;
  font-size: 0.875rem;
}
.btn-lg {
  padding: 18px 36px;
  font-size: 1rem;
}

/* Primary — black pill (sitewide standard) */
.btn-primary {
  background: var(--v3-black);
  color: #fff;
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.15);
}
.btn-primary:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.25);
}

/* Secondary — outlined black */
.btn-secondary {
  background: transparent;
  color: var(--v3-black);
  border: 1.5px solid var(--v3-black);
}
.btn-secondary:hover {
  background: var(--v3-black);
  color: #fff;
}

/* Light — white pill (for dark backgrounds) */
.btn-light {
  background: #fff;
  color: var(--v3-black);
}
.btn-light:hover {
  background: var(--v3-cream);
  color: var(--v3-black);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Ghost light (for overlaying hero images) */
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--v3-black);
  border-color: #fff;
}

/* Gold — accent CTA (rarely used, kept for legacy) */
.btn-gold {
  background: var(--color-secondary);
  color: #fff;
}
.btn-gold:hover {
  background: var(--color-secondary-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* On-image button — for hero contexts */
.btn-on-image {
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.25);
}


/* ============================================
   TACTILE PRESS FEEDBACK (v3.4.0)
   ============================================
   Per the design taste skill's Rule 5: every CTA button family gets a 1px
   downward translate on :active to simulate a physical push. Sits below
   all :hover rules in source order so it cleanly overrides any hover
   transform during click (e.g. .btn-primary:hover translateY(-2px) becomes
   translateY(+1px) on press, reading as a satisfying 3px drop).

   Arrow nudge on hover (.btn:hover svg) is already shipping from the .btn
   base class at line 280 above, and every per-page scoped CTA family
   (.v3-btn, .sm-btn, .tz-btn, .pr-btn, .ab-btn, .gs-btn, .hiw-btn) has
   its own equivalent rule in its respective template -- no duplication
   needed.

   Reduced motion: handled globally by the universal selector at line 1868
   (transition-duration: 0.01ms) which neutralises the press transition.
   ============================================ */
.btn:active,
.v3-btn:active,
.sm-btn:active,
.tz-btn:active,
.pr-btn:active,
.ab-btn:active,
.gs-btn:active,
.hiw-btn:active,
.nav-cta:active {
  transform: translateY(1px);
}


/* ============================================
   GRAIN OVERLAY (v3.4.0)
   ============================================
   Subtle film-grain texture across the entire viewport. Matches the
   medium-format photography aesthetic of the hero + week photos
   (Kodak Portra 400 grain emulation).

   Implementation notes per the design taste skill's perf guardrails:
     - position: fixed ? avoids continuous GPU repaints on scroll
     - pointer-events: none ? never blocks clicks or hover
     - SVG noise as data URI ? no extra HTTP request, self-contained, tileable
     - 5% opacity with multiply blend ? subtle, like printed-paper texture

   z-index 9999 keeps the grain above all page content (header, sticky
   CTAs, modals) but below the WordPress admin bar (which uses 99999+).
   Print + forced-colors modes disable the overlay so it doesn't interfere
   with high-contrast or hardcopy output.
   ============================================ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='1'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.05;
  mix-blend-mode: multiply;
}

@media print {
  body::after { display: none; }
}

@media (forced-colors: active) {
  body::after { display: none; }
}


/* ============================================
   ANIMATIONS — Reduced, used sparingly
   ============================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-up {
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}
.animate-up.d1 { animation-delay: 0.08s; }
.animate-up.d2 { animation-delay: 0.16s; }
.animate-up.d3 { animation-delay: 0.24s; }
.animate-up.d4 { animation-delay: 0.32s; }
.animate-up.d5 { animation-delay: 0.4s; }


/* ============================================
   PROMO BAR — Editorial treatment
   ============================================ */

.promo-bar {
  background: var(--v3-cream);
  color: var(--v3-charcoal);
  text-align: center;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  border-bottom: 1px solid var(--v3-hairline);
}
.promo-bar .promo-msg {
  display: inline;
}
.promo-bar a {
  color: var(--v3-black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  margin-left: 6px;
  transition: color 0.2s ease;
}
.promo-bar a:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}


/* ============================================
   HEADER — Editorial polish
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 252, 249, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--v3-hairline);
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.03);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2rem);
  height: 72px;
}

/* Logo — serif, editorial */
.logo {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--v3-black);
  letter-spacing: -0.03em;
  line-height: 1;
  transition: color 0.2s ease;
}
.logo:hover {
  color: var(--color-primary);
}
.logo span {
  color: var(--color-primary);
  font-style: italic;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--v3-charcoal);
  position: relative;
  transition: color 0.2s ease;
}
.nav a:hover {
  color: var(--v3-black);
}
.nav a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--v3-black);
  transition: width 0.3s ease;
}
.nav a:hover::after {
  width: 100%;
}

/* Nav CTA — black pill matching .btn-primary */
.nav-cta {
  background: var(--v3-black) !important;
  color: #fff !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.12);
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease !important;
}
.nav-cta::after {
  display: none !important;
}
.nav-cta:hover {
  background: #000 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.22);
}

/* Nav cart — styled via class now (header.php v2.0.0 removed inline styles) */
.nav-cart {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--v3-charcoal);
  transition: color 0.2s ease;
}
.nav-cart:hover {
  color: var(--v3-black);
}
.nav-cart::after {
  display: none !important;
}
.nav-cart svg {
  width: 20px;
  height: 20px;
}
.nav-cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--color-secondary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mobile toggle — refined animation */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin: -10px;
  -webkit-tap-highlight-color: transparent;
}
.mobile-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--v3-black);
  margin: 5px 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  transform-origin: center;
  border-radius: 1px;
}


/* ============================================
   BREADCRUMBS — Editorial treatment
   ============================================ */

.breadcrumbs {
  padding: 14px 0;
  border-bottom: 1px solid var(--v3-hairline);
  background: var(--color-bg);
}
.breadcrumbs .container {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--v3-muted);
  letter-spacing: 0.02em;
}
.breadcrumbs a {
  color: var(--v3-charcoal);
  transition: color 0.2s ease;
}
.breadcrumbs a:hover {
  color: var(--color-primary);
}
.breadcrumbs .sep,
.breadcrumbs-separator {
  margin: 0 10px;
  opacity: 0.5;
}


/* ============================================
   HERO — Legacy fallback only
   (home-v3, tirzepatide, semaglutide, about all have their own)
   ============================================ */

.hero {
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}
.hero-inner {
  max-width: 860px;
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--v3-muted);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-secondary);
}
.hero h1 {
  font-size: clamp(2.75rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 28px;
}
.hero h1 .accent {
  color: var(--color-primary);
  font-style: italic;
  font-weight: 400;
}
.hero-sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 640px;
}
.hero-price {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  font-size: var(--small-size);
  color: var(--color-text-secondary);
}
.hero-price .strike {
  text-decoration: line-through;
  opacity: 0.6;
}
.hero-price .elara-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--v3-black);
  letter-spacing: -0.02em;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  align-items: center;
}
.hero-assurance {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--v3-muted);
  letter-spacing: 0.02em;
}
.hero-assurance span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-assurance svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
  flex-shrink: 0;
}


/* ============================================
   TRUST BAR — Editorial
   ============================================ */

.trust-bar {
  background: var(--color-bg);
  border-top: 1px solid var(--v3-hairline);
  border-bottom: 1px solid var(--v3-hairline);
  padding: 28px 0;
}
.trust-bar-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--v3-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}


/* ============================================
   STEPS / HOW IT WORKS (legacy) — Editorial
   ============================================ */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}
.step-card {
  background: var(--v3-warm-white);
  border: 1px solid var(--v3-hairline);
  border-radius: var(--radius);
  padding: clamp(2rem, 3.5vw, 2.5rem);
  transition: border-color 0.2s ease;
}
.step-card:hover {
  border-color: var(--v3-hairline-strong);
}
.step-number {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--v3-hairline);
  width: auto;
  height: auto;
  background: none;
  display: block;
  box-shadow: none;
}
.step-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--v3-black);
  letter-spacing: -0.015em;
}
.step-card p {
  font-size: var(--small-size);
  color: var(--v3-charcoal);
  line-height: 1.7;
}


/* ============================================
   PROGRAM CARDS (supplement packs, etc.) — Editorial
   ============================================ */

.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 2.5rem;
}
.program-card {
  background: var(--v3-warm-white);
  border: 1px solid var(--v3-hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.program-card:hover {
  border-color: var(--v3-hairline-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.program-card.featured {
  border: 1px solid var(--v3-black);
  position: relative;
}
.program-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--v3-black);
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  z-index: 1;
}
.program-card-img {
  height: 200px;
  overflow: hidden;
  background: var(--v3-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.program-card-img .icon-placeholder {
  width: 72px;
  height: 72px;
  background: rgba(26, 92, 94, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.program-card-img .icon-placeholder svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}
.program-card-body {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.program-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--v3-black);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.program-card-body p {
  font-size: var(--small-size);
  color: var(--v3-charcoal);
  line-height: 1.65;
  margin-bottom: 20px;
  flex: 1;
}
.program-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--v3-hairline);
  gap: 12px;
}
.program-card-footer .price {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--v3-black);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.program-card-footer .price span {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--v3-muted);
  font-family: var(--font-body);
}
.program-card-footer a {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--v3-black);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}
.program-card-footer a:hover {
  gap: 10px;
  color: var(--color-primary);
}
.program-card-footer a svg {
  width: 14px;
  height: 14px;
}


/* ============================================
   WHY ELARA / FEATURES — Editorial
   ============================================ */

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.why-content h2 {
  margin-bottom: 24px;
}
.why-content > p {
  font-size: var(--body-size);
  color: var(--v3-charcoal);
  margin-bottom: 32px;
  max-width: 520px;
  line-height: 1.75;
}
.why-features li {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--v3-hairline);
}
.why-features li:last-child {
  border-bottom: none;
}
.why-icon {
  width: 40px;
  height: 40px;
  background: var(--v3-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.why-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}
.why-features h4 {
  margin-bottom: 6px;
  font-size: 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--v3-black);
}
.why-features p {
  font-size: var(--small-size);
  color: var(--v3-charcoal);
  line-height: 1.65;
}


/* ============================================
   COMPARISON TABLE — Editorial
   ============================================ */

.comparison-table {
  background: var(--v3-warm-white);
  border: 1px solid var(--v3-hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--small-size);
  font-family: var(--font-body);
}
.comparison-table thead th {
  padding: 18px 20px;
  text-align: left;
  font-weight: 600;
  background: var(--v3-cream);
  border-bottom: 1px solid var(--v3-hairline);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--v3-muted);
}
.comparison-table thead th:last-child {
  background: var(--v3-black);
  color: #fff;
}
.comparison-table tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--v3-hairline);
  vertical-align: top;
  color: var(--v3-charcoal);
}
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.comparison-table tbody td:last-child {
  font-weight: 600;
  color: var(--v3-black);
}
.comparison-table .check {
  color: var(--color-success);
  font-weight: 700;
}
.comparison-table .x {
  color: var(--v3-muted);
}


/* ============================================
   FAQ — Editorial treatment (used site-wide)
   ============================================ */

.faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--v3-hairline);
}
.faq-item:first-child {
  border-top: 1px solid var(--v3-hairline);
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  font-weight: 400;
  color: var(--v3-black);
  text-align: left;
  letter-spacing: -0.01em;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.faq-question:hover {
  color: var(--color-primary);
}
.faq-question svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--v3-muted);
}
.faq-item.open .faq-question svg {
  transform: rotate(45deg);
  color: var(--color-primary);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.open .faq-answer {
  max-height: 800px;
}
.faq-answer-inner {
  font-family: var(--font-body);
  padding: 0 0 30px;
  font-size: 1rem;
  color: var(--v3-charcoal);
  line-height: 1.75;
  max-width: 700px;
}
.faq-more {
  text-align: center;
  margin-top: 2.5rem;
}


/* ============================================
   FINAL CTA (legacy) — Editorial black block
   ============================================ */

.final-cta {
  padding: var(--section-padding);
  background: var(--color-bg);
}
.final-cta-inner {
  background: var(--v3-black);
  border-radius: var(--radius);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem);
  color: #fff;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
.final-cta-inner h2 {
  color: #fff;
  margin-bottom: 20px;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.final-cta-inner h2 em {
  font-style: italic;
  color: #fff;
}
.final-cta-inner p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--body-size);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
.final-cta .btn-primary,
.final-cta .btn {
  background: #fff;
  color: var(--v3-black);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.final-cta .btn-primary:hover,
.final-cta .btn:hover {
  background: var(--v3-cream);
  color: var(--v3-black);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
.cta-friction-killer,
.cta-friction-killer-light {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 20px;
  letter-spacing: 0.02em;
}


/* ============================================
   FOOTER — Editorial dark
   ============================================ */

.site-footer {
  background: var(--v3-black);
  color: rgba(255, 255, 255, 0.7);
  padding: clamp(4rem, 7vw, 5.5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 3rem;
}
.footer-brand .logo {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  display: block;
}
.footer-brand .logo span {
  color: var(--color-secondary-light);
  font-style: italic;
}
.footer-brand p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  max-width: 320px;
  margin-bottom: 22px;
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.footer-contact-item svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 22px;
}
.footer-col a {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 5px 0;
  transition: color 0.2s ease;
}
.footer-col a:hover {
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2rem;
}
.footer-legal {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.75;
  max-width: 900px;
}
.footer-legal p {
  margin-bottom: 8px;
}
.footer-copyright {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 18px;
}


/* ============================================
   STICKY MOBILE CTA
   ============================================ */

.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  padding: 14px 16px 18px; /* v3.4.0 audit pass: more bottom for breathing room above home indicator */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 90;
  border-top: 1px solid var(--v3-hairline);
}
.mobile-sticky-cta .btn {
  width: 100%;
  justify-content: center;
}


/* ============================================
   BLOG / SINGLE POST — Editorial
   ============================================ */

.entry-content {
  max-width: 740px;
  margin: 0 auto;
  font-size: var(--body-size);
  line-height: 1.8;
  color: var(--v3-charcoal);
}
.entry-content h2 {
  margin: 2.5rem 0 1rem;
  color: var(--v3-black);
}
.entry-content h3 {
  margin: 2rem 0 0.75rem;
  color: var(--v3-black);
}
.entry-content p {
  margin-bottom: 1.25rem;
}
.entry-content ul,
.entry-content ol {
  margin: 1rem 0 1.5rem 1.5rem;
  list-style: disc;
}
.entry-content li {
  margin-bottom: 0.5rem;
}
.entry-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.entry-content a:hover {
  color: var(--color-primary-dark);
}
.entry-content img {
  border-radius: var(--radius);
  margin: 1.5rem 0;
}
.entry-content blockquote {
  border-left: 2px solid var(--color-secondary);
  padding: 1rem 0 1rem 1.75rem;
  margin: 1.75rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--v3-black);
}


/* ============================================
   WORDPRESS / WOOCOMMERCE OVERRIDES
   Preserved from previous version with editorial
   token swaps (cream backgrounds, hairline borders,
   editorial button inheritance).
   ============================================ */

body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

.woocommerce .products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.woocommerce .product {
  background: var(--v3-warm-white);
  border: 1px solid var(--v3-hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.woocommerce .product:hover {
  border-color: var(--v3-hairline-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* WooCommerce buttons — inherit editorial black pill */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--v3-black) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer;
  letter-spacing: 0.01em !important;
  transition: all 0.25s ease !important;
  text-transform: none !important;
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.12) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: #000 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.22) !important;
}

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 3vw, 2rem);
}

.woocommerce table.shop_table {
  border: 1px solid var(--v3-hairline) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  font-family: var(--font-body) !important;
}
.woocommerce table.shop_table th {
  background: var(--v3-cream) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--v3-muted) !important;
  padding: 16px !important;
}
.woocommerce table.shop_table td {
  padding: 18px 16px !important;
  border-top: 1px solid var(--v3-hairline) !important;
  font-family: var(--font-body) !important;
  vertical-align: middle !important;
  color: var(--v3-charcoal) !important;
}

.woocommerce .cart-collaterals {
  margin-top: 2rem;
}
.woocommerce .cart_totals {
  background: var(--v3-warm-white);
  border: 1px solid var(--v3-hairline);
  border-radius: var(--radius);
  padding: 2rem;
}

.woocommerce form .form-row label {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--v3-charcoal) !important;
  margin-bottom: 8px !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  padding: 14px 16px !important;
  border: 1px solid var(--v3-hairline-strong) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  background: var(--v3-warm-white) !important;
  color: var(--v3-black) !important;
  transition: border-color 0.2s ease !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--v3-black) !important;
  outline: none !important;
}

.woocommerce-message {
  background: var(--v3-cream) !important;
  border-top: 2px solid var(--color-success) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--v3-charcoal) !important;
}
.woocommerce-error {
  border-top: 2px solid var(--color-error) !important;
}


/* ============================================
   SUPPLEMENT CART BUTTONS
   ============================================ */

.program-card-footer .elara-btn-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--v3-black) !important;
  color: #fff !important;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.12);
}
.program-card-footer .elara-btn-cart:hover {
  background: #000 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.22);
}

.elara-btn-add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px 32px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff !important;
  background: var(--v3-black) !important;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
  box-shadow: 0 2px 14px rgba(26, 26, 26, 0.15);
}
.elara-btn-add-to-cart:hover {
  background: #000 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.25);
}
.elara-btn-add-to-cart svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}
.elara-btn-add-to-cart:hover svg {
  transform: translateX(3px);
}

.purchase-option {
  transition: border-color 0.2s ease, background 0.2s ease;
}
.purchase-option.selected {
  border-color: var(--v3-black) !important;
  background: var(--v3-cream) !important;
}
.purchase-option:not(.selected) {
  border-color: var(--v3-hairline-strong) !important;
  background: transparent !important;
}
.purchase-option:not(.selected):hover {
  border-color: var(--v3-black) !important;
}


/* ============================================
   RESPONSIVE — TABLET (1024px)
   ============================================ */

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    display: none;
  }
  .why-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .steps-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 720px;
    margin: 0 auto;
  }

  /* Supplement pack detail page — stack hero grid */
  .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Unstick the right column on tablet */
  div[style*="position: sticky; top: 100px"] {
    position: static !important;
  }
}


/* ============================================
   RESPONSIVE — MOBILE (768px)
   Mobile nav drawer preserved as-is from v1.0.2
   v3.4.0 audit pass: breakpoint bumped 768->900px so narrow desktops / large tablets
   get the drawer instead of a cramped horizontal nav; paired with tablet rule below.
   ============================================ */

/* Tablet desktop nav (901-1100px): tighten gap and font before drawer kicks in */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav {
    gap: 22px;
  }
  .nav a {
    font-size: 0.875rem;
  }
}

@media (max-width: 900px) {

  /* Hamburger button */
  .mobile-toggle {
    display: block;
    position: relative;
    z-index: 10000;
  }
  .mobile-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mobile-toggle.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .mobile-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Backdrop */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 9998;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
  }

  /* Drawer */
  .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(85vw, 340px) !important;
    max-width: 340px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--v3-warm-white) !important;
    padding: 24px 24px max(32px, env(safe-area-inset-bottom, 32px)) !important;
    padding-top: max(80px, calc(env(safe-area-inset-top, 0px) + 80px)) !important;
    box-shadow: -16px 0 48px rgba(26, 26, 26, 0.15) !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    will-change: transform !important;
    margin: 0 !important;
  }
  .nav.is-open {
    transform: translate3d(0, 0, 0) !important;
  }

  .nav a {
    display: block;
    width: 100%;
    padding: 20px 4px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--v3-black);
    border-bottom: 1px solid var(--v3-hairline);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, padding-left 0.2s ease;
  }
  .nav a:active,
  .nav a:hover {
    color: var(--color-primary);
    padding-left: 8px;
  }
  .nav a::after {
    display: none !important;
  }

  .nav .nav-cart {
    border-bottom: 1px solid var(--v3-hairline);
    padding: 20px 4px !important;
    color: var(--v3-black);
  }
  .nav .nav-cart svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Mobile nav CTA — full-width black pill */
  .nav .nav-cta {
    margin-top: 24px;
    padding: 18px 24px !important;
    text-align: center;
    border-bottom: none;
    border-radius: 999px !important;
    background: var(--v3-black) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(26, 26, 26, 0.2);
    transition: background 0.2s ease, transform 0.2s ease !important;
  }
  .nav .nav-cta:active,
  .nav .nav-cta:hover {
    background: #000 !important;
    color: #fff !important;
    padding-left: 24px !important;
  }

  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
  body.menu-open .site-header {
    z-index: 10000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--v3-warm-white) !important;
  }

  /* Existing mobile rules */
  .steps-grid { grid-template-columns: 1fr; }
  .programs-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .comparison-table { overflow-x: auto; }
  .mobile-sticky-cta { display: block; }
  body { padding-bottom: 70px; }

  .elara-btn-add-to-cart {
    font-size: 0.9375rem;
    padding: 16px 24px;
  }

  .animate-up[style*="max-width: 380px"],
  .animate-up[style*="max-width: 400px"] {
    max-width: 280px !important;
  }

  .purchase-option { padding: 14px !important; }
  .trust-bar-inner { gap: 14px; }
  .quiz-options { grid-template-columns: 1fr !important; }

  .woocommerce table.shop_table { font-size: 0.8125rem; }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td { padding: 12px 14px !important; }

  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
  }

  .final-cta-inner .btn {
    width: 100%;
    justify-content: center;
  }

  .legal-content { font-size: var(--small-size); }
}


/* ============================================
   RESPONSIVE — SMALL MOBILE (480px)
   ============================================ */

@media (max-width: 480px) {
  .trust-bar-inner {
    flex-direction: column;
    gap: 14px;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-price {
    flex-direction: column;
    gap: 4px;
  }
  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
  }
  .btn-lg { padding: 16px 28px; }
  .btn-sm { padding: 11px 20px; }

  h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }

  .program-card-img { height: 180px; }
  .program-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .container { padding: 0 16px; }

  .purchase-option { gap: 12px !important; }

  :root { --section-padding: clamp(3rem, 6vw, 5rem) 0; }

  .site-footer { padding: 3rem 0 1.5rem; }

  .header-inner { height: 64px; }
  .logo { font-size: 1.375rem; }
  .promo-bar { font-size: 0.75rem; }
}


/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) {
  .program-card:hover { transform: none; }
  .step-card:hover { transform: none; border-color: var(--v3-hairline); }
  .btn-primary:hover { transform: none; }
  .btn-gold:hover { transform: none; }
  .elara-btn-cart:hover { transform: none; }
  .elara-btn-add-to-cart:hover { transform: none; }
  .nav-cta:hover { transform: none; }

  .quiz-option-box { padding: 20px; min-height: 56px; }
  .faq-question { padding: 26px 0; min-height: 56px; }
  .nav-cart { padding: 12px; }

  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select {
    min-height: 48px !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
}


/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-up {
    opacity: 1;
    animation: none;
  }
}


/* ============================================
   SAFE AREA (iPhone notch/home indicator)
   ============================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-sticky-cta {
    padding-bottom: max(18px, calc(18px + env(safe-area-inset-bottom))); /* v3.4.0 audit pass: never less than 18px even when env() is 0 */
  }
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
  @media (max-width: 900px) {
    .nav {
      padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ============================================
   FOOTER EMAIL SIGNUP (v3.4.0 audit pass)
   SME feedback: full-width Klaviyo form felt unbalanced.
   Constrain to a form-field-appropriate width, centered.
   ============================================ */
.footer-email-signup {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.footer-email-signup .klaviyo-form-UucCLf {
  width: 100%;
}

/* ============================================
   TRUST PAGE ? VERIFICATION GRID (v3.5.0)
   "Don't trust us. Verify us." card grid that
   surfaces every public-record verification
   path on /trust/. Borrowing trust from state
   filings, pharmacy boards, federal statutes,
   and credentialing databases.
   ============================================ */
.trust-verify-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--v3-cream);
  border-top: 1px solid var(--v3-hairline);
  border-bottom: 1px solid var(--v3-hairline);
  margin: clamp(2rem, 4vw, 3rem) 0;
}
.trust-verify-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.trust-verify-header {
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.trust-verify-eyebrow {
  font-family: var(--v3-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--v3-muted);
  margin-bottom: 1rem;
}
.trust-verify-h2 {
  font-family: var(--v3-serif);
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 400;
  color: var(--v3-black);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.trust-verify-h2 em {
  font-style: italic;
}
.trust-verify-lead {
  font-family: var(--v3-serif);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--v3-charcoal);
  line-height: 1.6;
  margin: 0;
}
.trust-verify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid var(--v3-hairline);
  border-left: 1px solid var(--v3-hairline);
  background: var(--v3-hairline);
}
.trust-verify-card {
  background: #fff;
  padding: clamp(1.5rem, 2.5vw, 1.875rem);
  border-right: 1px solid var(--v3-hairline);
  border-bottom: 1px solid var(--v3-hairline);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 190px;
}
.trust-verify-card-meta {
  font-family: var(--v3-sans);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--v3-muted);
}
.trust-verify-card-claim {
  font-family: var(--v3-serif);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--v3-black);
  flex: 1;
  margin: 0;
}
.trust-verify-card-claim strong {
  font-weight: 600;
}
.trust-verify-card-link {
  font-family: var(--v3-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--v3-black);
  text-decoration: none;
  border-bottom: 1px solid var(--v3-black);
  padding-bottom: 3px;
  display: inline-block;
  align-self: flex-start;
  transition: opacity 0.2s ease;
}
.trust-verify-card-link:hover {
  opacity: 0.6;
}
.trust-verify-card-pending {
  font-family: var(--v3-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--v3-muted);
  align-self: flex-start;
  border-bottom: 1px solid var(--v3-hairline-strong);
  padding-bottom: 3px;
}
.trust-verify-footnote {
  margin: clamp(2rem, 4vw, 2.5rem) auto 0;
  max-width: 720px;
  text-align: center;
  font-family: var(--v3-serif);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--v3-muted);
  line-height: 1.55;
}
@media (max-width: 600px) {
  .trust-verify-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MOBILE STICKY CTA (v2.0.2, June 2026 — restored)
   Markup lives in footer.php (global). Styles were lost in the v2.0.0
   stylesheet consolidation while the markup survived, leaving an
   unstyled stray button in the page flow. Restored per the May 2026
   audit spec (incl. 2.14 safe-area padding fix), aligned to the
   theme's 899px mobile convention. Pages that render their own
   bottom sticky (.pack-sticky-cta, .supps-sticky-cta) suppress the
   global bar via :has() to avoid double-stacking.
   ============================================ */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 12px rgba(26, 26, 26, 0.08);
  padding: 14px 16px 18px;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-sticky-cta {
    padding-bottom: max(18px, calc(14px + env(safe-area-inset-bottom)));
  }
}
.mobile-sticky-cta .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 899px) {
  .mobile-sticky-cta { display: block; }
  body { padding-bottom: 84px; }
  body:has(.pack-sticky-cta) .mobile-sticky-cta,
  body:has(.supps-sticky-cta) .mobile-sticky-cta {
    display: none;
  }
  body:has(.pack-sticky-cta),
  body:has(.supps-sticky-cta) {
    padding-bottom: 0;
  }
}

/* ============================================
   KLAVIYO MOBILE GUARD (v2.0.1, June 2026)
   klaviyo.js appends floating onsite forms (popups, flyouts, and the
   minimized teaser left behind after a visitor closes one) as direct
   children of <body> using its kl-private-reset-css-* class. The teaser
   docks to the bottom edge and was overlapping the theme's sticky mobile
   CTAs. On mobile widths we suppress all floating Klaviyo containers.
   The footer newsletter embed (.klaviyo-form-UucCLf) is NOT a direct
   body child, so it is untouched. Desktop behavior is unchanged.
   ============================================ */
@media (max-width: 899px) {
  body > div[class*="kl-private-reset-css"] {
    display: none !important;
  }
}