/** Shopify CDN: Minification failed

Line 2459:13 Expected identifier but found whitespace
Line 2459:14 Unexpected "linear-gradient("

**/
/* ============================================================
   wd-marketing.css — Shared stylesheet for Wisdom Dream
   custom marketing sections. Uses Horizon theme CSS custom
   properties throughout. Do not hardcode colors.

   Design system:
   - 8pt spacing grid (0.5rem increments)
   - 3-tier opacity: 1.0 (primary), 0.7 (muted), 0.45 (subtle)
   - 3-layer shadow system for card elevation
   - Fluid typography via clamp()
   - Scroll-triggered entrance animations
   - All colors via CSS custom properties: store-owned Horizon
     scheme variables (--color-*) where the scheme cascade is
     reliable, the wd brand tokens below everywhere else
   ============================================================ */

/* ============================================================
   0. WD BRAND COLOR TOKENS (multibrand Phase 1, chunk 10b-ii)
   ------------------------------------------------------------
   The single source of the Wisdom Dream brand palette for the
   wd-* / astro-* layer in this file AND in birth-data-form.css
   (which mirrors these values as per-usage var() fallbacks; the
   mirror is pinned equal by tests/wd-css-tokens.test.mjs).

   REBRANDING A STORE (no code fork): override the 27 CANONICAL
   tokens from store-owned CSS at higher specificity than :root,
   e.g. the theme editor's Custom CSS box:
     html:root { --wd-color-primary-rgb: 46 163 163; }
   `html:root` outranks this block regardless of stylesheet
   order. The five *-rgb/solid pairs are derived one-way: always
   override the -rgb triplet (space-separated); the solid alias
   follows automatically and must NOT be overridden on its own.
   The full per-brand restyle contract (Horizon schemes, these
   tokens, store-owned header custom CSS, Liquid debts) is in
   docs/architecture.md "Brand palette tokens".

   -rgb triplets are consumed as rgb(var(--…-rgb) / A) — never
   rgba(var(…), A), which is invalid CSS after substitution
   (see BUG-T2, the 44 byte-frozen dead declarations below).

   Deliberately NOT tokens: glass/shadow neutrals
   (rgba(255,255,255,…)/rgba(0,0,0,…)), color-mix(... white)
   lighteners, transparent/currentColor, the map tile invert
   filter (birth-data-form.css), the YouTube-red pill icon
   (#ff0033, platform color), and the select-chevron data-URI
   stroke (override that background-image property per brand).
   The palette assumes a dark background; a light-background
   brand is outside the token layer's supported space.
   ============================================================ */

:root {
  /* accent (gold) — canonical: the -rgb triplet */
  --wd-color-primary-rgb: 221 167 79;
  --wd-color-primary: rgb(var(--wd-color-primary-rgb)); /* derived, do not override */
  --wd-color-primary-up-1: #e6b562;   /* hover/focus lift (majority) */
  --wd-color-primary-up-2: #e8b768;   /* sample-modal focus lift */
  /* lightest lift; policy-page --color-primary-hover(-rgb); map-toggle hover */
  --wd-color-primary-up-3-rgb: 232 188 113;
  --wd-color-primary-up-3: rgb(var(--wd-color-primary-up-3-rgb)); /* derived, do not override */
  --wd-color-primary-down-1: #c9953f; /* form submit hover */
  --wd-color-primary-down-2: #b8872f; /* form submit active */
  --wd-color-primary-down-3: #a67722; /* PDP excerpt ornament on cream */
  --wd-color-primary-down-4: #9c741f; /* cookie-prefs link on light */
  --wd-color-primary-down-5: #8a6414; /* PDP excerpt meta on cream */
  /* background (indigo) — canonical: the -rgb triplet */
  --wd-color-bg-rgb: 19 17 39;
  --wd-color-bg: rgb(var(--wd-color-bg-rgb)); /* derived, do not override */
  --wd-color-bg-down-1: #16142b;      /* sample-modal panel */
  --wd-color-bg-down-2: #0e0c1f;      /* sample-modal body (deepest) */
  --wd-color-scrim-rgb: 8 6 22;       /* sample-modal backdrop */
  --wd-color-bg-up-1: #1a1834;        /* sample-modal page holder */
  --wd-color-bg-up-2: #1b1836;        /* cookie banner */
  --wd-color-bg-up-3: #1d1b3a;        /* announcement bar */
  --wd-color-bg-up-4: #1e1b33;        /* form inputs / dropdown / map */
  --wd-color-bg-up-5: #2a2547;        /* scrollbar thumb; map zoom hover */
  --wd-color-bg-up-6: #3a3560;        /* scrollbar thumb hover */
  /* ink on paper — canonical: the -rgb triplet */
  --wd-color-ink-rgb: 35 32 56;
  --wd-color-ink: rgb(var(--wd-color-ink-rgb)); /* derived, do not override */
  /* foreground / paper — canonical: the -rgb triplet */
  --wd-color-fg-rgb: 244 244 246;
  --wd-color-fg: rgb(var(--wd-color-fg-rgb)); /* derived, do not override */
  --wd-color-paper-1: #f7f2e6;        /* PDP excerpt paper gradient top */
  --wd-color-paper-2: #efe8d6;        /* PDP excerpt paper gradient bottom + fade */
  --wd-color-paper-3: #ece7da;        /* map zoom-control glyphs */
  /* feedback / atmosphere */
  --wd-color-alert-soft: #ffb4a8;     /* form field-error text */
  --wd-color-alert-rgb: 224 122 95;   /* terracotta error/guard accents */
  --wd-color-glow-rgb: 106 90 205;    /* hero secondary radial glow */
}

/* ============================================================
   GLOBAL: Force dark background on body and kill stray borders.
   The default Horizon color scheme has an empty background
   value, causing white to bleed through section seams.
   ============================================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 80px);
  scrollbar-gutter: stable;
}

body {
  background-color: var(--wd-color-bg) !important;
}

/* CLS defense: isolate layout of large below-the-fold custom sections
   so late-hydrating siblings (product-info morph, font swap) don't reflow
   the full document. `contain: layout` creates a layout boundary; the
   browser cannot let inner layout changes push outer siblings. */
.wd-pdp-details,
.wd-method-content,
.wd-faq-content {
  contain: layout;
}

/* Subtle noise grain texture overlay for depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Alternating section tint: even sections get a slightly lighter bg */
.content-for-layout > .shopify-section:nth-child(even) > .section-background {
  background-color: rgba(255, 255, 255, 0.012) !important;
}

/* Subtle gradient transition between sections */
.content-for-layout > .shopify-section {
  position: relative;
}

.section-background {
  border: none !important;
  outline: none !important;
}

.content-for-layout > .shopify-section > *,
.content-for-layout > .shopify-section {
  border: none !important;
  outline: none !important;
}

/* ============================================================
   TYPOGRAPHY: Premium serif heading overrides
   Uses Horizon's --font-heading--family (Cormorant)
   paired with body font (Inter) for the premium luxury feel.
   ============================================================ */

.wd-tier-selector__header h2,
.wd-trust-strip h2,
.wd-cta-banner h2,
.wd-sample-preview h2,
.wd-section-title,
.wd-faq__title,
.wd-method-section h2,
.wd-social-proof__stat,
.wd-tier-card__name,
.wd-tier-card__price,
.wd-diff-block h3 {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
}

/* Hero heading override — Horizon hero uses its own text system */
.hero .text-block h2,
.hero .text-block [data-type-preset="h2"] {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-weight: 700;
}

/* ============================================================
   HEADER: Announcement bar distinction
   ============================================================ */

#header-group > .shopify-section:first-child {
  background: color-mix(in srgb, var(--color-background, var(--wd-color-bg)) 85%, white);
  border-bottom: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
}

#header-group > .shopify-section:first-child a {
  color: var(--color-primary);
}

/* ============================================================
   HERO: Premium depth treatment for report mockup
   ============================================================ */

.hero__media img,
.hero__media picture img {
  filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 60px rgb(var(--wd-color-primary-rgb) / 0.08));
  transition: filter 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero:hover .hero__media img,
.hero:hover .hero__media picture img {
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 80px rgb(var(--wd-color-primary-rgb) / 0.12));
}

/* Hero headline: increase size for impact + text shadow for readability */
.hero .text-block [data-type-preset="h2"] p,
.hero .text-block h2 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.3);
}

/* Hero subheadline: soften for contrast + shadow for readability */
.hero .text-block [data-type-preset="rte"] p {
  opacity: 0.85;
  font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
  line-height: 1.7 !important;
  max-width: 520px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Hero CTA button: premium gold with glow */
.hero .button {
  background: var(--color-primary-button-background) !important;
  color: var(--color-primary-button-text) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 1rem 2.5rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgb(var(--wd-color-primary-rgb) / 0.25);
  transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.hero .button:hover {
  background: var(--color-primary-button-hover-background) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgb(var(--wd-color-primary-rgb) / 0.35);
}

/* ============================================================
   0. ENTRANCE TRANSITION SYSTEM
   Section containers fade in via CSS transition.
   Child stagger is handled by JS (adding .wd-child-visible
   with setTimeout delays) so hover transforms work cleanly.
   ============================================================ */

/* Section container: starts hidden, transitions in */
/* Hidden state applies ONLY when JS is confirmed running (html.wd-js is set
   by an inline script in theme.liquid <head>). No-JS/blocked-JS visitors see
   everything immediately instead of a blank page. */
html.wd-js .wd-animate {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

html.wd-js .wd-animate--visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Staggered children: start hidden, JS adds .wd-child-visible */
.wd-stagger-child {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Respect OS-level reduced motion preference — no fades, no slides */
@media (prefers-reduced-motion: reduce) {
  .wd-animate,
  .wd-stagger-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.wd-child-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   0b. SECTION VISUAL DISTINCTION
   Subtle alternating tints and gradient glows to break up
   the monotone dark background.
   ============================================================ */

.wd-tier-selector,
.wd-cta-banner {
  position: relative;
  z-index: 1;
}

/* Ambient gold glow — applied at the .shopify-section level so it can
   extend past the section's own bounds and bleed into adjacent sections.
   The gradient fades to transparent well outside the section, so the
   transition across the section boundary is smooth (no visible cutoff).
   z-index 2 on the section lifts it above its neighbors so the overflowing
   parts of the glow actually paint across the boundary. The pseudo
   sits behind the section content via z-index: -1. */
.shopify-section:has(.wd-tier-selector),
.shopify-section:has(.wd-cta-banner) {
  position: relative;
  z-index: 2;
}

.shopify-section:has(.wd-tier-selector)::after,
.shopify-section:has(.wd-cta-banner)::after {
  content: "";
  position: absolute;
  top: -220px;
  bottom: -220px;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: -1;
}

/* Centered ambient glow that fills the section and bleeds smoothly into
   the sections above and below. The cards/buttons themselves are made
   opaque (below) so the glow can't shine through them — it stays a
   true background bloom, not a tint laid over the foreground. */
.shopify-section:has(.wd-tier-selector)::after {
  background: radial-gradient(
    ellipse 60% 45% at 50% 50%,
    rgb(var(--wd-color-primary-rgb) / 0.12),
    rgb(var(--wd-color-primary-rgb) / 0.05) 35%,
    transparent 75%
  );
}

.shopify-section:has(.wd-cta-banner)::after {
  background: radial-gradient(
    ellipse 60% 60% at 50% 50%,
    rgb(var(--wd-color-primary-rgb) / 0.11),
    rgb(var(--wd-color-primary-rgb) / 0.04) 35%,
    transparent 75%
  );
}

/* Subtle divider line between sections */
.wd-trust-strip::before,
.wd-social-proof::before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.4;
  margin: 0 auto 2.5rem;
}


/* ============================================================
   1. TIER SELECTOR
   ============================================================ */

.wd-tier-selector {
  text-align: center;
}

.wd-tier-selector__header {
  margin-block-end: 2.5rem;
}

.wd-tier-selector__header h2 {
  color: var(--color-foreground-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.wd-tier-selector__question {
  margin-block-end: 2rem;
}

.wd-tier-selector__question h3 {
  color: var(--color-foreground-heading);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  margin-block-end: 0.75rem;
}

.wd-tier-selector__question p {
  color: var(--color-foreground);
  opacity: 0.7;
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.7;
}

/* Fork buttons */
.wd-tier-selector__fork {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-block-end: 3rem;
}

.wd-tier-fork-btn {
  padding: 1.125rem 2.5rem;
  border: 2px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.25);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-foreground);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

.wd-tier-fork-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgb(var(--wd-color-primary-rgb) / 0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgb(var(--wd-color-primary-rgb) / 0.08);
}

.wd-tier-fork-btn.active {
  background: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  border-color: var(--color-primary-button-background);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(var(--color-foreground-rgb, 244, 244, 246), 0.04);
}

/* Tier cards grid — stretch makes all cards equal height */
.wd-tier-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  align-items: stretch;
  max-width: 880px;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .wd-tier-cards {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

/* Individual tier card — flex column pins CTA to bottom */
.wd-tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--color-background, var(--wd-color-bg)) 96%, white);
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.1);
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  text-align: left;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.wd-tier-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--color-foreground-rgb, 244, 244, 246), 0.2);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.25),
    0 12px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Subhead under the section header */
.wd-tier-selector__sub {
  color: var(--color-foreground);
  opacity: 0.65;
  font-size: 1rem;
  margin-block-start: 0.75rem;
  max-width: 540px;
  margin-inline: auto;
}

/* Badge — refined premium feel */
.wd-tier-card__badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-background, var(--wd-color-bg));
  color: var(--color-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--color-primary);
  border-radius: 99px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Card content */
.wd-tier-card__name {
  color: var(--color-foreground-heading);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-block-end: 0.5rem;
}

.wd-tier-card__price {
  color: var(--color-foreground-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block-end: 0.5rem;
  line-height: 1.1;
}

.wd-tier-card__tagline {
  color: var(--color-foreground);
  opacity: 0.7;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-block-end: 1.5rem;
}

.wd-tier-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wd-tier-card__features li {
  color: var(--color-foreground);
  opacity: 0.7;
  font-size: 0.875rem;
  line-height: 1.6;
  padding-inline-start: 1.5rem;
  position: relative;
}

.wd-tier-card__features li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-foreground);
  opacity: 0.8;
  font-weight: 700;
}

.wd-tier-card__delivery {
  color: var(--color-foreground);
  opacity: 0.45;
  font-size: 0.8125rem;
  margin-block-end: 2rem;
}

/* Delivery line surfaced under the price — italic, small, closer to top */
.wd-tier-card__delivery--top {
  color: var(--color-primary);
  opacity: 0.85;
  font-style: italic;
  font-size: 0.8125rem;
  margin-block-start: -0.25rem;
  margin-block-end: 1.25rem;
}

/* Price anchor — small, muted comparison line under the price on tier cards */
.wd-tier-card__anchor {
  color: var(--color-foreground);
  opacity: 0.6;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-block-start: -0.25rem;
  margin-block-end: 1.25rem;
}

.wd-tier-card__cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: auto;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

.wd-tier-card__cta:active {
  transform: translateY(0) scale(0.98);
}

/* Primary CTA (gold) */
.wd-tier-card__cta--primary {
  background: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  border: 2px solid var(--color-primary-button-background);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 0 20px rgba(0, 0, 0, 0.1);
}

.wd-tier-card__cta--primary:hover {
  background: var(--color-primary-button-hover-background);
  border-color: var(--color-primary-button-hover-background);
  color: var(--color-primary-button-text);
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(0, 0, 0, 0.15);
}

/* Secondary CTA (gold outline) — used on Essential card */
.wd-tier-card__cta--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

.wd-tier-card__cta--secondary:hover {
  background: var(--color-primary);
  color: var(--color-primary-button-text);
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 30px rgb(var(--wd-color-primary-rgb) / 0.15);
}

/* Tertiary "or preview sample" link under each tier card's primary
   CTA. Tiny italic-serif text link in the brand pattern (matches the
   hero artifact caption). Keeps the buy CTA dominant — this exists
   only to remove the "I want to verify before buying" scroll friction. */
.wd-tier-card__sample-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.65rem;
  font-family: var(--font-heading--family);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--color-foreground);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 200ms ease;
  align-self: center;
}

.wd-tier-card__sample-link em {
  font-style: italic;
  font-weight: 400;
}

.wd-tier-card__sample-link-arrow {
  display: inline-block;
  font-style: normal;
  font-size: 0.92em;
  transition: transform 200ms ease;
}

.wd-tier-card__sample-link:hover,
.wd-tier-card__sample-link:focus-visible {
  opacity: 0.92;
}

.wd-tier-card__sample-link:hover .wd-tier-card__sample-link-arrow,
.wd-tier-card__sample-link:focus-visible .wd-tier-card__sample-link-arrow {
  transform: translateX(3px);
}

/* ============================================================
   2. TRUST STRIP
   ============================================================ */

.wd-trust-strip {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.wd-trust-strip h2 {
  color: var(--color-foreground-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  letter-spacing: -0.01em;
  margin-block-end: 1.5rem;
}

.wd-trust-strip p {
  color: var(--color-foreground);
  opacity: 0.85;
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-block-end: 1rem;
}

.wd-trust-strip p:last-child {
  margin-block-end: 0;
}

.wd-trust-strip p strong {
  color: var(--color-foreground-heading);
  opacity: 1;
}

.wd-trust-strip__pullquote {
  margin-block-start: 2rem;
  padding-block: 1.5rem;
  border-block-start: 1px solid rgb(var(--wd-color-primary-rgb) / 0.2);
  border-block-end: 1px solid rgb(var(--wd-color-primary-rgb) / 0.2);
}

.wd-trust-strip__pullquote p {
  color: var(--color-foreground);
  opacity: 0.9;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   3. DIFFERENTIATOR BLOCKS
   ============================================================ */

.wd-differentiators {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}

@media (max-width: 1024px) {
  .wd-differentiators {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .wd-differentiators {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
}

.wd-diff-block {
  padding: 2rem 1.5rem;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-diff-block:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(var(--color-foreground-rgb, 244, 244, 246), 0.15);
  transform: translateY(-3px);
}

.wd-diff-block__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.25rem;
  border-radius: 12px;
  background: rgb(var(--wd-color-primary-rgb) / 0.1);
  color: var(--color-primary);
  transition: background 0.3s ease;
}

.wd-diff-block:hover .wd-diff-block__icon {
  background: rgb(var(--wd-color-primary-rgb) / 0.18);
}

.wd-diff-block__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
}

.wd-diff-block h3 {
  color: var(--color-primary);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  margin-block-end: 1rem;
}

.wd-diff-block p {
  color: var(--color-foreground);
  opacity: 0.7;
  font-size: 0.875rem;
  line-height: 1.7;
}

/* ============================================================
   4. SOCIAL PROOF
   ============================================================ */

.wd-social-proof {
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
  padding: 3rem 2rem;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: inherit;
}

.wd-social-proof__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: rgb(var(--wd-color-primary-rgb) / 0.1);
}

.wd-social-proof__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--color-primary);
}

.wd-social-proof__stat {
  color: var(--color-primary);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-block-end: 0.5rem;
}

.wd-social-proof__label {
  color: var(--color-foreground);
  opacity: 0.7;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  margin-block-end: 0;
}

.wd-testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: left;
}

@media (max-width: 640px) {
  .wd-testimonials {
    grid-template-columns: 1fr;
  }
}

.wd-testimonial {
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.1);
  border-radius: 16px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}

.wd-testimonial:hover {
  border-color: rgba(var(--color-foreground-rgb, 244, 244, 246), 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.wd-testimonial__text {
  color: var(--color-foreground);
  opacity: 0.7;
  margin-block-end: 1rem;
  font-style: italic;
  line-height: 1.7;
  font-size: 0.9375rem;
}

.wd-testimonials--empty {
  display: none;
}

.wd-testimonial__author {
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================================
   5. SAMPLE PREVIEW
   ============================================================ */

.wd-sample-preview {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}

.wd-sample-preview h2 {
  color: var(--color-foreground-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  letter-spacing: -0.01em;
  margin-block-end: 1rem;
}

.wd-sample-preview > p {
  color: var(--color-foreground);
  opacity: 0.7;
  margin-block-end: 3rem;
  line-height: 1.7;
}

.wd-sample-preview__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  /* Separate the primary "Read my chart this way" CTA above from this
     secondary "preview a sample" card row, so they read as two distinct
     actions rather than one cramped cluster. */
  margin-block-start: 3rem;
  margin-block-end: 2rem;
  max-width: 720px;
  margin-inline: auto;
}

.wd-sample-preview__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.1);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.wd-sample-preview__card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-foreground-rgb, 244, 244, 246), 0.2);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.25),
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.wd-sample-preview__cover {
  width: 100%;
  max-width: 180px;
  margin: 0 auto 1rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 40px rgb(var(--wd-color-primary-rgb) / 0.06);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-sample-preview__card:hover .wd-sample-preview__cover {
  transform: scale(1.03);
}

.wd-sample-preview__cover img {
  display: block;
  width: 100%;
  height: auto;
}

.wd-sample-preview__tier {
  color: var(--color-foreground-heading);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wd-sample-preview__desc {
  color: var(--color-foreground);
  opacity: 0.7;
  font-size: 0.8125rem;
  margin-block-end: 0.5rem;
  line-height: 1.5;
}

.wd-sample-preview__btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
  background: transparent;
  color: var(--color-foreground);
  border: 2px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.2);
}

.wd-sample-preview__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-1px);
}

.wd-sample-preview__btn--primary {
  background: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  border-color: var(--color-primary-button-background);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.wd-sample-preview__btn--primary:hover {
  background: var(--color-primary-button-hover-background);
  border-color: var(--color-primary-button-hover-background);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.wd-sample-preview__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Mobile: keep both cards side-by-side so the picker stays a single-
   glance comparison surface. min-width: 0 forces grid columns to honor
   1fr 1fr instead of stretching to min-content (which would make the
   card with the longer button text wider, breaking alignment). */
@media (max-width: 640px) {
  .wd-sample-preview__cards {
    grid-template-columns: 1fr 1fr;
    max-width: none;
    gap: 0.75rem;
  }

  .wd-sample-preview__card {
    padding: 1.1rem 0.65rem;
    gap: 0.55rem;
    border-radius: 12px;
    min-width: 0;
  }

  .wd-sample-preview__cover {
    max-width: 108px;
    margin-block-end: 0.4rem;
    border-radius: 6px;
  }

  .wd-sample-preview__tier {
    font-size: 1rem;
  }

  .wd-sample-preview__desc {
    font-size: 0.75rem;
    margin-block-end: 0.25rem;
  }

  .wd-sample-preview__btn {
    display: block;
    width: 100%;
    padding: 0.55rem 0.5rem;
    font-size: 0.8125rem;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
  }
}

.wd-sample-preview__note {
  color: var(--color-foreground);
  opacity: 0.45;
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.5;
}

.wd-sample-preview__excerpt {
  text-align: left;
  margin-block: 0 0.75rem;
}

/* The "Read my chart this way" CTA is the primary conversion action of
   this block. It is a centered, prominent primary button — its colours come
   wholly from .wd-sample-preview__btn--primary, so do NOT set color/background
   here (an earlier text-link override forced gold text onto the gold button
   background, making the label invisible until hover). */
/* This <p> WRAPS the primary CTA button, so it must NOT inherit the muted
   0.7 opacity that ".wd-sample-preview > p" applies to body copy. At 0.7 the
   gold button rendered at 70% over the dark page and read as a darker/"different"
   gold than the hero CTA. The selector below outranks ".wd-sample-preview > p"
   (0,2,1 vs 0,1,1) so opacity AND margin win. */
.wd-sample-preview > p.wd-sample-preview__order-cta {
  opacity: 1;
  margin: 0.5rem auto 1rem;
  text-align: center;
}

.wd-sample-preview__order-cta .wd-sample-preview__btn--primary {
  padding: 0.85rem 2rem;
  font-size: 0.9375rem;
  /* Match the hero "Read a real sample" CTA's warm gold glow so this button
     reads as the exact same gold, not a flat-with-dark-shadow variant. */
  box-shadow:
    rgb(var(--wd-color-primary-rgb) / 0.2) 0 4px 16px 0,
    rgb(var(--wd-color-primary-rgb) / 0.1) 0 0 28px 0;
}

/* ============================================================
   5b. METHOD STRIP (homepage)
   ============================================================ */

.wd-method-strip {
  text-align: center;
  max-width: 1080px;
  margin-inline: auto;
}

.wd-method-strip__subhead {
  font-family: var(--font-body--family);
  font-size: clamp(1rem, 1.25vw, 1.0625rem);
  line-height: 1.6;
  color: var(--color-foreground);
  opacity: 0.7;
  max-width: 580px;
  margin: 0.75rem auto 1.5rem;
  text-align: center;
}

.wd-method-strip__closer {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-foreground);
  opacity: 0.7;
  max-width: 640px;
  margin: 0 auto 1.75rem;
  text-align: center;
  letter-spacing: 0.01em;
}

.wd-method-strip__attribution {
  margin: 0 auto 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.wd-method-strip__attribution img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgb(var(--wd-color-primary-rgb) / 0.18);
}

.wd-method-strip__attribution figcaption {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--color-foreground);
  opacity: 0.7;
  letter-spacing: 0.01em;
}

.wd-method-strip__stages {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: left;
  position: relative;
}

.wd-method-strip__stages li {
  position: relative;
  padding-block-start: 0.5rem;
}

.wd-method-strip__num {
  display: block;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
  margin-block-end: 0.875rem;
  position: relative;
}

@media (min-width: 900px) {
  .wd-method-strip__stages li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.4rem;
    right: -1.25rem;
    width: 0.5rem;
    height: 1px;
    background: var(--color-primary);
    opacity: 0.3;
  }
}

.wd-method-strip__stages h3 {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-foreground-heading);
  letter-spacing: -0.005em;
  margin: 0 0 0.5rem;
}

.wd-method-strip__stages p {
  font-family: var(--font-body--family);
  font-size: 0.9375rem;
  color: var(--color-foreground);
  opacity: 0.75;
  line-height: 1.55;
  margin: 0;
}

.wd-method-strip__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body--family);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-block-end: 2px;
  transition: border-color 0.2s ease;
}

.wd-method-strip__more:hover,
.wd-method-strip__more:focus-visible {
  border-bottom-color: var(--color-primary);
}

.wd-method-strip__anchor {
  font-family: var(--font-body--family);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-foreground);
  opacity: 0.85;
  max-width: 560px;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.wd-method-strip__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}

@media (max-width: 899px) {
  .wd-method-strip__stages {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    max-width: 480px;
    margin-inline: auto;
  }
  .wd-method-strip__num {
    font-size: 2rem;
  }
}

/* ============================================================
   6. CTA BANNER
   ============================================================ */

.wd-cta-banner {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.wd-cta-banner h2 {
  color: var(--color-foreground-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  margin-block-end: 1rem;
}

.wd-cta-banner p {
  color: var(--color-foreground);
  opacity: 0.7;
  margin-block-end: 2rem;
  line-height: 1.7;
}

.wd-cta-banner__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.wd-cta-banner__btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

.wd-cta-banner__btn:active {
  transform: translateY(0) scale(0.98);
}

.wd-cta-banner__btn--primary {
  background: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  border: 2px solid var(--color-primary-button-background);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 0 20px rgba(0, 0, 0, 0.1);
}

.wd-cta-banner__btn--primary:hover {
  background: var(--color-primary-button-hover-background);
  border-color: var(--color-primary-button-hover-background);
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(0, 0, 0, 0.15);
}

.wd-cta-banner__btn--secondary {
  background: color-mix(in srgb, var(--color-background, var(--wd-color-bg)) 94%, white);
  color: var(--color-foreground);
  border: 2px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.35);
}

.wd-cta-banner__btn--secondary:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-1px);
}

/* ============================================================
   7. METHOD PAGE
   ============================================================ */

.wd-method {
  max-width: 720px;
  margin-inline: auto;
}

.wd-method-section {
  margin-block-end: 2.5rem;
  padding-block-end: 2.5rem;
  border-block-end: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.06);
}

.wd-method-section:last-child {
  margin-block-end: 0;
  padding-block-end: 0;
  border-block-end: none;
}

@media (max-width: 640px) {
  .wd-method-section {
    margin-block-end: 1.75rem;
    padding-block-end: 1.75rem;
  }
}

.wd-method-section h2 {
  color: var(--color-foreground-heading);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  margin-block-end: 1rem;
}

.wd-method-section p {
  color: var(--color-foreground);
  opacity: 0.7;
  margin-block-end: 1rem;
  line-height: 1.75;
}

.wd-method-section p:last-child {
  margin-block-end: 0;
}

.wd-method-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wd-method-section ul li {
  color: var(--color-foreground);
  opacity: 0.7;
  font-size: 0.9375rem;
  line-height: 1.7;
  padding-inline-start: 1.5rem;
  position: relative;
}

.wd-method-section ul li::before {
  content: "\2013";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-primary);
}

.wd-method-section ul li strong {
  color: var(--color-primary);
  font-weight: 700;
  opacity: 1;
}

/* Method section header with icon */
.wd-method-section__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1.25rem;
}

.wd-method-section__header h2 {
  margin-block-end: 0;
}

.wd-method-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: rgb(var(--wd-color-primary-rgb) / 0.1);
  color: var(--color-primary);
}

.wd-method-section__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Method page cards — process steps and features */
.wd-method-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-block: 1.5rem;
}

@media (max-width: 640px) {
  .wd-method-cards {
    grid-template-columns: 1fr;
  }
}

.wd-method-card {
  padding: 1.5rem;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}

.wd-method-card:hover {
  border-color: rgba(var(--color-foreground-rgb, 244, 244, 246), 0.15);
  background: rgba(255, 255, 255, 0.045);
}

.wd-method-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: rgb(var(--wd-color-primary-rgb) / 0.1);
  color: var(--color-primary);
  margin-block-end: 0.875rem;
}

.wd-method-card__icon svg {
  width: 1rem;
  height: 1rem;
}

.wd-method-card h3 {
  color: var(--color-primary);
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  margin-block-end: 0.5rem;
}

.wd-method-card p {
  color: var(--color-foreground);
  opacity: 0.7;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

/* Method page callout — "We don't do that" emphasis */
.wd-method-callout {
  border-inline-start: 3px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.4);
  padding: 1.25rem 1.5rem;
  margin-block: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 12px 12px 0;
}

.wd-method-callout p {
  color: var(--color-primary) !important;
  opacity: 1 !important;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
  margin: 0;
}

/* Method page mid-page CTA */
.wd-method-midcta {
  text-align: center;
  margin-block-start: 2.5rem;
  padding-block-start: 2.5rem;
  border-block-start: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
}

.wd-method-midcta__text {
  color: var(--color-foreground);
  opacity: 0.85;
  font-size: 1.0625rem;
  margin-block-end: 1.25rem;
  font-weight: 500;
}

/* Product details: sample preview link */
.wd-method-section .wd-sample-link {
  display: inline-block;
  margin-block-start: 1.5rem;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.wd-method-section .wd-sample-link:hover {
  opacity: 0.8;
}

/* Product details: personal reading callout */
.wd-personal-reading-callout {
  border-inline-start: 3px solid var(--color-primary);
  padding-inline-start: 1.5rem;
  margin-block: 1.5rem;
}

/* ============================================================
   8. FAQ PAGE
   ============================================================ */

.wd-faq {
  max-width: 720px;
  margin-inline: auto;
}

.wd-faq__title {
  color: var(--color-foreground-heading);
  text-align: center;
  margin-block-end: 3rem;
}

/* Remove excessive dead space after FAQ list */
.wd-faq {
  padding-block-end: 0;
}

.wd-faq-item {
  border-block-end: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.1);
}

.wd-faq-item__question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 1.5rem 3rem 1.5rem 0;
  color: var(--color-foreground-heading);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
  transition: color 0.2s ease;
}

.wd-faq-item__question:hover {
  color: var(--color-primary);
}

.wd-faq-item__question::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--color-primary);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-faq-item.open .wd-faq-item__question::after {
  content: "\2212";
  transform: translateY(-50%) rotate(180deg);
}

/* Grid-based accordion transition for natural timing */
.wd-faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-faq-item.open .wd-faq-item__answer {
  grid-template-rows: 1fr;
}

.wd-faq-item__answer > * {
  overflow: hidden;
  min-height: 0;
}

.wd-faq-item__answer-inner {
  padding-block-end: 0;
}

.wd-faq-item.open .wd-faq-item__answer-inner {
  padding-block-end: 1.5rem;
}

.wd-faq-item__answer p {
  color: var(--color-foreground);
  opacity: 0.7;
  font-size: 0.9375rem;
  line-height: 1.75;
  margin: 0;
}

.wd-faq-item__answer a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.wd-faq-item__answer a:hover {
  opacity: 0.8;
}

/* ============================================================
   GLOBAL: Focus states for accessibility
   ============================================================ */

.wd-tier-fork-btn:focus-visible,
.wd-tier-card__cta:focus-visible,
.wd-faq-item__question:focus-visible,
.wd-cta-banner__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ============================================================
   PRODUCT PAGE: Hide empty media gallery on mobile
   When no product images are uploaded, the gallery column is
   empty but still takes up space on mobile.
   ============================================================ */

@media (max-width: 1024px) {
  .product-information__media-gallery:empty,
  .product-information__media-gallery:not(:has(img)) {
    display: none;
  }
}

/* Mobile product page vertical rhythm — keep title/price above the fold while
   giving each section enough breathing room to read as a distinct block. */
@media (max-width: 640px) {
  .product-information .product-information__column {
    padding-block: 24px !important;
  }

  /* Clear gap between gallery and details column instead of flush-to-zero.
     IMPORTANT: only set row-gap. The grid has 3 columns (16px gutter | content | 16px gutter)
     and setting `gap` (shorthand) adds column-gap too, which pushes the grid 40px wider
     than the viewport (causes horizontal overflow / forced zoom-out on mobile). */
  .product-information {
    row-gap: 20px !important;
    column-gap: 0 !important;
  }

  /* Constrain product image height so title/price appear above the fold.
     Scope to the inline gallery only — must NOT apply inside the zoom dialog,
     where the image needs to fill the full viewport. */
  .product-information .product-information__media-gallery .product-media-container {
    max-height: 44vh !important;
  }

  .product-information .product-information__media-gallery .product-media__image {
    max-height: 44vh !important;
    object-fit: contain;
    object-position: top center;
  }

  /* Comfortable spacing between the title/price/description blocks. */
  .product-details .group-block-content {
    gap: 24px !important;
  }

  .product-details .group-block {
    padding-block: 20px !important;
  }

}

/* ============================================================
   PRODUCT PAGE: Vertical rhythm of the buy-box right column
   ============================================================
   Each block (value card, form heading, submit area, reassurance)
   needs clear breathing room so the column reads as discrete blocks
   rather than one wall of text. */

/* Separate the value enhancements card from the form below it. */
.wd-pdp-enhancements {
  margin-bottom: 32px !important;
}

/* Form heading "Your birth details" — comfortable air on both sides. */
.astro-form-header {
  margin-top: 8px !important;
  margin-bottom: 20px !important;
}

/* Inside the value card: clear separation between badge / highlights /
   sample-link rows so each reads on its own. */
.wd-pdp-enhancements {
  gap: 1.25rem !important;
}

/* Submit button area — clear visual break before/after the CTA. */
.astro-form .astro-submit {
  margin-block-start: 1rem !important;
}

.astro-form .astro-submit-hint {
  margin-top: 0.5rem !important;
}

/* Reassurance line ("Birth data deleted automatically · …") — needs breathing room
   (NOTE: copy must never say "encrypted"; at-rest encryption is not wired up)
   above (away from the CTA hint) and below (away from the next section). */
.astro-form .astro-reassurance {
  margin-top: 1rem !important;
  margin-bottom: 2.5rem !important;
}

/* Reassurance icons — nudge SVGs up 1px so they sit on the cap-height
   of the text instead of the x-height. */
.astro-reassurance__item svg {
  transform: translateY(-0.5px);
}

/* Reassurance strip under the form CTA: items wrap as whole units with a
   clean gap; the "·" separators dangled at line ends in narrow columns
   (operator-flagged), so they're hidden everywhere. */
.astro-form .astro-reassurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
}

.astro-reassurance__sep {
  display: none;
}

.astro-reassurance__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

/* ============================================================
   SITE-WIDE POLISH BATCH (visual sweep, 2026-07-08)
   ============================================================ */

/* Never break these tokens across lines (dangling separators, split
   brand names, lonely arrows were flagged across the sweep). */
.wd-nowrap {
  white-space: nowrap;
}

/* Footer legal line: each "· item" wraps as a unit, so a separator can
   never dangle at a line end. */
.wd-footer-legal .wd-legal-item {
  white-space: nowrap;
}

/* Footer payment icons: fit all eight on one mobile row instead of
   orphaning Apple Pay on its own line. */
@media (max-width: 480px) {
  .payment-icon,
  .footer-utilities svg.icon.icon--full-color,
  .footer-utilities .payment-icon {
    width: 34px !important;
    height: 22px !important;
  }
}

/* Footer nav links stay single-line ("Our Method" was wrapping). */
footer .menu-list__item a,
footer nav a {
  white-space: nowrap;
}

/* One button voice: Horizon set some buttons (cart, CTA banners) in the
   serif display face while the hero/tier CTAs use the sans; identical
   labels rendered in two typefaces across pages. The sans carries all
   generic buttons; the birth-form CTA + sticky bar keep their serif as
   the deliberate signature of the purchase moment. */
.button,
.button--secondary,
button.button {
  font-family: var(--font-body--family) !important;
  font-weight: 600;
}

/* Method page: the closing statement was the only big centered line in
   the sans face; align it with the serif display voice. */
.wd-method-midcta__text {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
}

/* Method "why it feels personal" cards: 3-across squeezed to 2-4 words
   per line at tablet widths. */
@media (max-width: 860px) {
  .wd-method-cards--three {
    grid-template-columns: 1fr;
  }
}

/* Method "We don't do that." callout read as a mostly-empty band. */
.wd-method-callout {
  text-align: center;
}

.wd-method-callout p {
  margin: 0;
}

/* Contact form: the default resize grip clashed with the dark theme. */
textarea {
  resize: vertical;
}

/* Policy pages: admin-entered tables wider than a phone gave the WHOLE
   page horizontal scroll; they now scroll inside their own container. */
@media (max-width: 749px) {
  .shopify-policy__container table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* PDP compare cards: variable intro length knocked the feature rows
   off-grid between the side-by-side cards. */
@media (min-width: 750px) {
  .wd-pdp-compare__justify {
    min-height: 4.6em;
  }
}

/* PDP desktop: the gallery ended high while the buy column ran on,
   leaving the left half of the page blank beside the form. The gallery
   now follows the reader down. */
@media (min-width: 990px) {
  .product-information__media {
    position: sticky;
    top: 84px;
    align-self: flex-start;
  }
}

/* Product pages: Horizon reserves 88px of main bottom padding for its
   sticky add-to-cart bar. Ours auto-hides whenever the closing CTA is on
   screen (see product-information.liquid), so at the page bottom the
   reservation is pure void above the footer (operator-flagged twice).
   The homepage runs ~64px into the footer; this brings the PDP to parity. */
main[data-template="product"] {
  padding-block-end: 0 !important;
}

/* Horizon applies the same 88px sticky-bar reservation on the LAST
   section wrapper too (measured: .section bottom 7048 vs wrapper 7136).
   The intended rhythm comes from the section's own padding instead. */
main[data-template="product"] > .shopify-section:last-child {
  padding-block-end: 0 !important;
  margin-block-end: 0 !important;
}

.wd-pdp-section--closing {
  padding-block-end: 0 !important;
  margin-block-end: 0 !important;
}

.wd-pdp-final-cta {
  padding-block-end: 10px !important;
}

.wd-pdp-final-cta__trust {
  margin-bottom: 0;
}

/* 404 product grid: two cards sat hard left with phantom carousel
   arrows over them. */
main[data-template*="404"] .resource-list {
  justify-content: center;
}

main[data-template*="404"] .slideshow-controls,
main[data-template*="404"] [class*="carousel-controls"] {
  display: none !important;
}

/* Footer signup promise: the theme-editor text block drops custom size and
   rgba color settings, so the muting lives here. The attribute selector
   keys on the stable block id (text_signup_promise in footer-group.json). */
footer [class*="__text_signup_promise"] p {
  font-size: 0.875rem;
  color: rgb(var(--wd-color-fg-rgb) / 0.65);
}

/* Footer transition: a gold hairline marks where the page ends and the
   footer begins, so the vertical whitespace above it reads intentional
   instead of like a rendering gap (operator-flagged on short pages). */
footer > .shopify-section:first-child {
  border-top: 1px solid rgb(var(--wd-color-primary-rgb) / 0.16);
}

/* Empty cart: Horizon centers the short content in a tall region, leaving
   a large void above the footer. Collapse to content height with calm
   padding instead. */
.cart-page--empty {
  min-height: 0;
  padding-block: 72px;
}

@media (max-width: 640px) {
  .wd-pdp-enhancements {
    margin-top: 24px !important;
    margin-bottom: 36px !important;
    gap: 1rem !important;
  }

  .astro-form-header {
    margin-top: 16px !important;
    margin-bottom: 20px !important;
  }

  .astro-form .astro-submit {
    margin-block-start: 0.875rem !important;
  }

  .astro-form .astro-reassurance {
    margin-top: 0.875rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* ============================================================
   PRODUCT PAGE: Sticky add-to-cart bar — dark theme + mobile polish
   ============================================================ */

.sticky-add-to-cart__bar {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.sticky-add-to-cart__button {
  background: var(--color-primary-button-background) !important;
  color: var(--color-primary-button-text) !important;
  border-radius: 12px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.3s ease, transform 0.2s ease;
}

.sticky-add-to-cart__button:hover {
  background: var(--color-primary-button-hover-background) !important;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .sticky-add-to-cart__bar[data-stuck="true"] {
    padding: 0.75rem 1rem;
  }

  .sticky-add-to-cart__button {
    min-height: 48px;
    font-size: 1rem;
  }
}

/* ============================================================
   PRODUCT PAGE: Trust guarantee line
   ============================================================ */

.wd-trust-guarantee {
  opacity: 0.7;
  font-size: 0.8125rem;
  text-align: center;
  margin-block-start: 0.5rem;
  line-height: 1.5;
}

/* Value proposition on product pages — slightly more prominent than body text */
.product-information .rte[style*="0.9375rem"] p {
  opacity: 0.8;
  line-height: 1.7;
}

/* Trust guarantee on product pages — security text visible, not whispered */
.product-information .rte[style*="0.8125rem"] p {
  opacity: 0.6;
}

/* PDP value-prop trust line: de-emphasize the second paragraph
   so the intro carries the visual weight. The selector
   text-block--value_prop is stable because value_prop is a hand-authored
   block key in templates/product.json. */
.text-block--value_prop p + p {
  font-size: 0.8125rem;
  opacity: 0.75;
  margin-block-start: 0.75rem;
}

.text-block--value_prop p + p a {
  opacity: 1;
}

/* ============================================================
   GENERIC: Section title (used on FAQ + Method h1)
   ============================================================ */

.wd-section-title,
.wd-faq__title {
  color: var(--color-foreground-heading);
  text-align: center;
  margin-block-end: 3rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ============================================================
   9. PRODUCT PAGE: Hero with cover image + delivery badge
   ============================================================ */

.wd-product-hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-block-end: 3rem;
  padding-block-end: 3rem;
  border-block-end: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
}

@media (max-width: 640px) {
  .wd-product-hero {
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    margin-block-end: 2rem;
    padding-block-end: 2rem;
  }
}

.wd-product-hero__cover {
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 40px rgb(var(--wd-color-primary-rgb) / 0.08);
}

.wd-product-hero__cover img {
  display: block;
  width: 100%;
  height: auto;
}

.wd-product-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgb(var(--wd-color-primary-rgb) / 0.12);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 99px;
  margin-block-end: 1.25rem;
}

.wd-product-hero__badge svg {
  flex-shrink: 0;
}

.wd-product-hero__highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wd-product-hero__highlights li {
  color: var(--color-foreground);
  opacity: 0.75;
  font-size: 0.9375rem;
  line-height: 1.6;
  padding-inline-start: 1.5rem;
  position: relative;
}

.wd-product-hero__highlights li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* ============================================================
   10. PRODUCT PAGE: Cross-sell strip
   ============================================================ */

.wd-cross-sell {
  border-block-end: none !important;
}

.wd-cross-sell__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-block-start: 1.5rem;
}

@media (max-width: 640px) {
  .wd-cross-sell__grid {
    grid-template-columns: 1fr;
  }
}

.wd-cross-sell__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-cross-sell__card:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
}

.wd-cross-sell__card--recommended {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.05);
}

.wd-cross-sell__badge {
  position: absolute;
  top: -0.625rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-primary-button-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  white-space: nowrap;
}

.wd-cross-sell__name {
  color: var(--color-foreground-heading);
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
}

.wd-cross-sell__price {
  color: var(--color-primary);
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.375rem;
  font-weight: 700;
}

.wd-cross-sell__desc {
  color: var(--color-foreground);
  opacity: 0.6;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.wd-cross-sell__link {
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-block-start: 0.5rem;
  transition: opacity 0.2s ease;
}

.wd-cross-sell__card:hover .wd-cross-sell__link {
  opacity: 0.8;
}

/* ============================================================
   GLOBAL: Reduced motion preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* .wd-animate / .wd-stagger-child reduced-motion safety lives in the
     !important block near the top of this file; duplicates removed here
     (they lost to the html.wd-js gate on specificity and were dead). */
  .wd-tier-card,
  .wd-tier-card__cta,
  .wd-tier-card__cta--primary,
  .wd-tier-card__cta--secondary,
  .wd-tier-fork-btn,
  .wd-sample-preview__card,
  .wd-sample-preview__btn,
  .wd-cta-banner__btn,
  .wd-cta-banner__btn--primary,
  .wd-cta-banner__btn--secondary,
  .wd-diff-block,
  .wd-testimonial,
  .wd-faq-item__question::after,
  .wd-faq-item__answer {
    transition: none;
  }

  .wd-tier-card:hover,
  .wd-sample-preview__card:hover,
  .wd-tier-card__cta--primary:hover,
  .wd-tier-card__cta--secondary:hover,
  .wd-sample-preview__btn:hover,
  .wd-cta-banner__btn--primary:hover,
  .wd-cta-banner__btn--secondary:hover,
  .wd-diff-block:hover,
  .wd-cross-sell__card:hover {
    transform: none;
  }
}

/* ============================================================
   GLOBAL: Mobile section spacing tightening
   On dark backgrounds, large gaps look like dead space.
   Cap section padding on mobile so content flows continuously.
   ============================================================ */

@media (max-width: 640px) {
  .content-for-layout > .shopify-section > .section.spacing-style {
    padding-block-start: 36px !important;
    padding-block-end: 32px !important;
  }
}

/* ============================================================
   GLOBAL: Mobile typography bump + touch targets
   ============================================================ */

@media (max-width: 640px) {
  .wd-tier-card__features li,
  .wd-tier-card__tagline,
  .wd-diff-block p,
  .wd-testimonial__text,
  .wd-faq-item__answer p,
  .wd-method-section p,
  .wd-method-section ul li,
  .wd-trust-strip p,
  .wd-cta-banner p,
  .wd-sample-preview > p,
  .wd-sample-preview__desc {
    font-size: 0.9375rem;
  }

  .wd-tier-fork-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 48px;
  }

  .wd-cta-banner__btn {
    width: 100%;
    text-align: center;
    min-height: 48px;
  }

  .wd-faq-item__question {
    min-height: 48px;
  }

}

/* ============================================================
   11. PRODUCT PAGE: Buy Box Enhancements (PDP)
   ============================================================ */

/* Social proof stat — promoted, hero-of-buybox. Now an anchor to YouTube. */
.wd-pdp-social-stat {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid rgb(var(--wd-color-primary-rgb) / 0.18);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.wd-pdp-social-stat:hover,
.wd-pdp-social-stat:focus-visible {
  border-color: rgb(var(--wd-color-primary-rgb) / 0.36);
  background: linear-gradient(135deg, rgb(var(--wd-color-primary-rgb) / 0.14) 0%, rgb(var(--wd-color-primary-rgb) / 0.04) 100%);
  transform: translateY(-1px);
}
  background: linear-gradient(
    135deg,
    rgb(var(--wd-color-primary-rgb) / 0.08) 0%,
    rgb(var(--wd-color-primary-rgb) / 0.02) 100%
  );
}

.wd-pdp-social-stat__icon {
  flex-shrink: 0;
  color: var(--color-primary);
  opacity: 0.95;
}

.wd-pdp-social-stat__body {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.wd-pdp-social-stat__number {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-foreground-heading);
  line-height: 1.2;
  letter-spacing: 0.005em;
}

.wd-pdp-social-stat__label {
  font-size: 0.75rem;
  color: var(--color-foreground);
  opacity: 0.6;
  letter-spacing: 0.01em;
}

/* Tier badge — "Most Popular" / "Personal Reading Included" */
.wd-pdp-badge {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-primary-button-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3125rem 0.875rem;
  border-radius: 99px;
  margin: 0;
  line-height: 1.4;
  align-self: flex-start;
}

.wd-pdp-badge--essential {
  background: rgb(var(--wd-color-primary-rgb) / 0.15);
  color: var(--color-primary);
  border: 1px solid rgb(var(--wd-color-primary-rgb) / 0.3);
}

/* Value bullet highlights — inline number + text on a single flow line so
   the bullets share the same left edge as the social-stat card, the badge,
   and the trust strip above/below them. */
.wd-pdp-highlights {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.wd-pdp-highlights li {
  /* Flex row so wrapped text keeps a hanging indent beside the number
     instead of sliding underneath it (broke in narrow columns). */
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--color-foreground);
  font-size: 0.9375rem;
  line-height: 1.55;
  opacity: 0.9;
  padding: 0;
  position: static;
}

@media (max-width: 480px) {
  .wd-pdp-highlights li {
    font-size: 0.9rem;
  }
}

.wd-pdp-highlights li::before {
  content: none;
}

.wd-pdp-highlights__num {
  flex: 0 0 auto;
  min-width: 1.6rem;
  white-space: nowrap;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 700;
  font-style: italic;
  color: var(--color-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-inline-end: 0.4em;
}

.wd-pdp-highlights__text {
  display: inline;
}

/* Wrapper for buy box enhancements (moved into right column via JS) */
.wd-pdp-enhancements {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 0.5rem;
  width: 100%;
}

/* ── Sticky mobile buy bar ─────────────────────────────────────── */
/* Note: sticky CTA lives outside any section color-scheme wrapper, so
   colors ride the wd brand tokens (section 0) — Horizon scheme
   variables do not reach here. */
.wd-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  padding: 0.625rem max(0.875rem, env(safe-area-inset-left)) calc(0.625rem + env(safe-area-inset-bottom)) max(0.875rem, env(safe-area-inset-right));
  background: rgb(var(--wd-color-bg-rgb) / 0.94);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid rgb(var(--wd-color-primary-rgb) / 0.28);
  transform: translateY(calc(100% + 20px));
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  color: var(--wd-color-fg);
}

.wd-sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.wd-sticky-cta[hidden] {
  display: none;
}

.wd-sticky-cta__inner {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  max-width: 720px;
  margin-inline: auto;
}

.wd-sticky-cta__info {
  flex: 1 1 auto;
  min-width: 0;
}

.wd-sticky-cta__title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-weight: 700;
  color: var(--wd-color-fg);
  font-size: 0.9375rem;
  line-height: 1.2;
}

.wd-sticky-cta__price {
  color: var(--wd-color-primary);
  font-size: 1rem;
}

.wd-sticky-cta__sub {
  font-size: 0.6875rem;
  color: rgb(var(--wd-color-fg-rgb) / 0.55);
  margin-top: 0.125rem;
  letter-spacing: 0.02em;
}

.wd-sticky-cta__btn {
  flex-shrink: 0;
  padding: 0.75rem 1.125rem;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--wd-color-bg);
  background: var(--wd-color-primary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgb(var(--wd-color-primary-rgb) / 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}

.wd-sticky-cta__btn:hover,
.wd-sticky-cta__btn:focus-visible {
  background: var(--wd-color-primary-up-1);
  transform: translateY(-1px);
}

.wd-sticky-cta__btn:active {
  transform: translateY(0);
}

@media (min-width: 900px) {
  /* Desktop: keep the bar (the PDP is ~6500px tall and the form sits at
     the top; without a persistent CTA a reader deep in reviews/FAQ has no
     path to buy). Present it as a centred floating pill, not a full bar. */
  .wd-sticky-cta {
    left: 50%;
    right: auto;
    transform: translate(-50%, calc(100% + 36px));
    width: min(560px, calc(100% - 48px));
    border-radius: 14px;
    margin-bottom: 16px;
    border: 1px solid rgb(var(--wd-color-primary-rgb) / 0.25);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  }
  .wd-sticky-cta.is-visible {
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wd-sticky-cta { transition: none; }
}

/* Reserve extra scroll room at the bottom of PDP so the sticky
   CTA never overlaps the last compare card / footer content. */
body:has(.wd-sticky-cta) main .shopify-section:last-child,
body:has(.wd-sticky-cta) main {
  padding-bottom: 88px;
}

/* Force product details column to vertical flow when form is inside */
.product-details {
  flex-direction: column !important;
}

/* Form + enhancements: ensure they fill the column width */
.product-details .wd-pdp-enhancements,
.product-details .astro-form-header,
.product-details #astro-birth-form,
.product-details .astro-widget {
  width: 100% !important;
  max-width: 100% !important;
}

/* On mobile, add card styling for visual separation */
@media (max-width: 640px) {
  .wd-pdp-enhancements {
    padding: 1.25rem;
    border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
  }
}

/* ============================================================
   12. PRODUCT PAGE: Details area (below buy box)
   ============================================================ */

.wd-pdp-details {
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
}

.wd-pdp-section {
  padding-block: 3rem;
  border-block-end: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.06);
}

.wd-pdp-section:first-child {
  padding-block-start: 0;
}

.wd-pdp-section:last-child {
  border-block-end: none;
  padding-block-end: 0.5rem;
}

@media (max-width: 640px) {
  .wd-pdp-section {
    padding-block: 2.25rem;
  }
}

/* Section eyebrow + heading + hairline */
.wd-pdp-eyebrow {
  display: block;
  font-family: var(--font-body--family);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.95;
  margin-block-end: 0.625rem;
  text-align: center;
}

.wd-pdp-h2 {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 700;
  color: var(--color-foreground-heading);
  line-height: 1.15;
  margin: 0 0 0.875rem;
  text-align: center;
  letter-spacing: -0.005em;
}

.wd-pdp-h3 {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-foreground-heading);
  margin: 0 0 0.625rem;
  line-height: 1.2;
}

.wd-pdp-rule {
  width: 48px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.75;
  margin: 0 auto 2rem;
}

.wd-pdp-lead {
  color: var(--color-foreground);
  opacity: 0.8;
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 1.75rem;
}

/* ── What's Inside list — gold glyph grid ───────────────────── */
.wd-pdp-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  row-gap: 0.875rem;
}

@media (max-width: 720px) {
  .wd-pdp-toc {
    grid-template-columns: 1fr;
  }
}

.wd-pdp-toc li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 0.625rem;
  padding-block: 0.375rem;
  border-block-start: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.05);
}

.wd-pdp-toc li:first-child,
.wd-pdp-toc li:nth-child(2) {
  border-block-start: none;
}

@media (max-width: 720px) {
  .wd-pdp-toc li:nth-child(2) {
    border-block-start: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.05);
  }
}

.wd-pdp-toc__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: "Noto Sans", "Segoe UI Symbol", "Apple Symbols", sans-serif;
  font-size: 1.0625rem;
  color: var(--color-primary);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.wd-pdp-toc li strong {
  display: block;
  color: var(--color-foreground-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  margin-bottom: 0.0625rem;
}

.wd-pdp-toc li span {
  display: block;
  color: var(--color-foreground);
  opacity: 0.7;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.wd-pdp-toc__not-in {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  opacity: 0.7;
  font-style: italic;
  text-align: center;
}

/* ── Sample preview excerpt (highest-converting element) ───── */
/* The excerpt is styled as a physical page from the PRINT edition: a cream
   sheet floating on the navy. It breaks the long dark rhythm of the page and
   makes "a beautifully designed document" something you can see, not just read. */
.wd-pdp-excerpt {
  position: relative;
  margin: 0 auto 1.5rem;
  max-width: 720px;
  padding: 2.25rem 2.25rem 3rem;
  border: 1px solid rgb(var(--wd-color-ink-rgb) / 0.14);
  border-radius: 6px;
  background: linear-gradient(to bottom, var(--wd-color-paper-1), var(--wd-color-paper-2));
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.wd-pdp-excerpt::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  left: 1.25rem;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 5rem;
  color: var(--wd-color-primary-down-3);
  opacity: 0.3;
  line-height: 1;
}

.wd-pdp-excerpt__meta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wd-color-primary-down-5);
  margin-block-end: 0.875rem;
}

.wd-pdp-excerpt blockquote {
  margin: 0;
  color: var(--wd-color-ink);
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  font-style: italic;
}

.wd-pdp-excerpt blockquote p {
  margin: 0 0 1rem;
}

.wd-pdp-excerpt blockquote p:last-child {
  margin-block-end: 0;
}

.wd-pdp-excerpt__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--wd-color-paper-2));
  pointer-events: none;
}

@media (max-width: 640px) {
  .wd-pdp-excerpt {
    padding: 1.5rem 1.25rem 2.25rem;
    border-radius: 6px;
  }
  .wd-pdp-excerpt::before {
    font-size: 3.5rem;
    left: 0.875rem;
  }
  .wd-pdp-excerpt blockquote {
    font-size: 1rem;
  }
}

.wd-pdp-sample-actions {
  text-align: center;
}

.wd-pdp-sample-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-button-text, var(--wd-color-bg));
  background: var(--color-primary, var(--wd-color-primary));
  border: none;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 20px rgb(var(--wd-color-primary-rgb) / 0.2);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.wd-pdp-sample-btn:hover,
.wd-pdp-sample-btn:focus-visible {
  background: var(--wd-color-primary-up-1);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgb(var(--wd-color-primary-rgb) / 0.28);
}

.wd-pdp-sample-btn svg {
  transition: transform 0.2s ease;
}

.wd-pdp-sample-btn:hover svg {
  transform: translateX(3px);
}

.wd-pdp-sample-note {
  font-size: 0.8125rem;
  color: var(--color-foreground);
  opacity: 0.5;
  margin: 1rem auto 0;
  max-width: 520px;
  line-height: 1.6;
  font-style: italic;
}

/* ── What you'll need + delivery grid ──────────────────────── */
.wd-pdp-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* Each fact is a proper card, matching the section language of the rest
   of the PDP (tier compare, sample excerpt). Previously bare text floated
   without a container and read unfinished (operator-flagged). */
.wd-pdp-fact {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgb(var(--wd-color-primary-rgb) / 0.18);
  border-radius: 14px;
  padding: 1.5rem 1.625rem;
}

@media (max-width: 900px) {
  /* Stack earlier: at half-screen widths two columns cram to ~320px each
     and the note paragraphs turn ragged (operator-flagged). */
  .wd-pdp-facts {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.wd-pdp-fact .wd-pdp-eyebrow {
  text-align: left;
  margin-block-end: 0.5rem;
}

.wd-pdp-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.wd-pdp-checklist li {
  position: relative;
  padding-inline-start: 1.375rem;
  color: var(--color-foreground);
  opacity: 0.85;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.wd-pdp-checklist li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.wd-pdp-fact__note {
  color: var(--color-foreground);
  opacity: 0.65;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

.wd-pdp-fact__note a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── FAQ accordion ──────────────────────────────────────────── */
.wd-pdp-faq {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  border-block-start: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
}

.wd-pdp-faq__item {
  border-block-end: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
}

.wd-pdp-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.125rem;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-foreground-heading);
  cursor: pointer;
  list-style: none;
  letter-spacing: 0.005em;
}

.wd-pdp-faq__item summary::-webkit-details-marker {
  display: none;
}

.wd-pdp-faq__item summary svg {
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.wd-pdp-faq__item[open] > summary svg {
  transform: rotate(180deg);
}

.wd-pdp-faq__body {
  padding: 0 0 1.25rem;
}

.wd-pdp-faq__body p {
  color: var(--color-foreground);
  opacity: 0.8;
  line-height: 1.75;
  margin: 0;
  font-size: 0.9375rem;
}

.wd-pdp-faq__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Compare 3 reports — table/card hybrid ─────────────────── */
.wd-pdp-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 720px;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .wd-pdp-compare {
    grid-template-columns: 1fr;
  }
}

.wd-pdp-compare__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-pdp-compare__col:hover {
  border-color: rgb(var(--wd-color-primary-rgb) / 0.5);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
}

/* Whole-card link variant — entire card is clickable */
a.wd-pdp-compare__col--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.wd-pdp-compare__col--link:hover {
  border-color: rgb(var(--wd-color-primary-rgb) / 0.65);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

a.wd-pdp-compare__col--link:hover .wd-pdp-compare__link {
  opacity: 0.85;
}

a.wd-pdp-compare__col--link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.wd-pdp-compare__col.is-current {
  border-color: var(--color-primary);
  background: rgb(var(--wd-color-primary-rgb) / 0.06);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.wd-pdp-compare__name {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-foreground-heading);
  margin-block-start: 0.25rem;
}

.wd-pdp-compare__price {
  color: var(--color-primary);
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.wd-pdp-compare__tagline {
  color: var(--color-foreground);
  opacity: 0.65;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-block-end: 0.25rem;
}

.wd-pdp-compare__justify {
  margin: 0.5rem 0 1rem;
  font-size: 0.875rem;
  opacity: 0.78;
  line-height: 1.45;
}

.wd-pdp-compare__col ul {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-block-start: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
  padding-block-start: 0.75rem;
}

.wd-pdp-compare__col ul li {
  color: var(--color-foreground);
  opacity: 0.82;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.wd-pdp-compare__col ul li strong {
  color: var(--color-primary);
  font-weight: 700;
  opacity: 1;
}

.wd-pdp-compare__link {
  margin-block-start: auto;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.wd-pdp-compare__link:hover {
  opacity: 0.8;
}

.wd-pdp-compare__current {
  margin-block-start: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-foreground);
  opacity: 0.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   13. SHARED LUXURY TYPE SYSTEM (used across Method / FAQ / Home)
   ============================================================ */

.wd-luxe-eyebrow {
  display: block;
  font-family: var(--font-body--family);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.95;
  margin-block-end: 0.625rem;
  text-align: center;
}

.wd-luxe-eyebrow--left { text-align: left; }

.wd-luxe-h1 {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--color-foreground-heading);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  text-align: center;
}

.wd-luxe-h2 {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 700;
  color: var(--color-foreground-heading);
  line-height: 1.15;
  margin: 0 0 0.875rem;
  text-align: center;
  letter-spacing: -0.005em;
}

.wd-luxe-h2--left { text-align: left; }

.wd-luxe-sub {
  color: var(--color-foreground);
  opacity: 0.75;
  font-size: 1.0625rem;
  line-height: 1.6;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 1.75rem;
  font-family: var(--font-body--family);
}

.wd-luxe-rule {
  width: 48px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.75;
  margin: 0 auto 2rem;
  border: 0;
}

.wd-luxe-rule--left { margin-inline: 0 auto 0 0; }

.wd-luxe-pullquote {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  color: var(--color-primary);
  text-align: center;
  margin: 2rem auto;
  max-width: 720px;
  padding-inline: 1rem;
}

/* ============================================================
   14. CART PAGE — luxury treatment
   ============================================================ */

/* Empty cart: center + brand-voice copy */
.cart-page--empty {
  padding-block: clamp(3rem, 8vh, 5rem) !important;
}

.cart-page--empty .cart-title {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif !important;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  color: var(--color-foreground-heading) !important;
  line-height: 1.1;
  margin-bottom: 0.75rem !important;
}

/* Add a gold hairline under the empty-cart title */
.cart-page--empty .cart-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.8;
  margin: 1.25rem auto 0;
}

/* Style the "Continue shopping" / "Choose your report" button */
.cart-page--empty .button,
.cart-page--empty [role="link"],
.cart-page--empty a.button,
.cart-page--empty .empty-state__button {
  background: var(--color-primary) !important;
  color: var(--color-primary-button-text, var(--wd-color-bg)) !important;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.875rem 1.75rem !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 18px rgb(var(--wd-color-primary-rgb) / 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}

.cart-page--empty .button:hover {
  background: var(--wd-color-primary-up-1) !important;
  transform: translateY(-1px);
}

/* Cart line-item properties (Birth Date, Birth Time, Birth Place, etc) */
.cart-product .product__properties,
.cart-product .product-properties,
[class*="cart-item"] [class*="properties"],
.line-item-property__field,
dl.product__properties {
  font-family: var(--font-body--family);
  font-size: 0.75rem;
  color: var(--color-foreground);
  opacity: 0.7;
  margin-block-start: 0.5rem !important;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

.cart-product dt,
.line-item-property__field dt {
  font-weight: 600;
  color: var(--color-primary) !important;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
}

.cart-product dd,
.line-item-property__field dd {
  margin-inline-start: 0.5rem;
  color: var(--color-foreground);
  opacity: 0.85;
}

/* Summary / checkout button gold primary */
.cart-summary .button--primary,
.cart-page__summary .button--primary,
.cart-summary [type="submit"] {
  background: var(--color-primary) !important;
  color: var(--color-primary-button-text, var(--wd-color-bg)) !important;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgb(var(--wd-color-primary-rgb) / 0.22);
}

.cart-summary .button--primary:hover {
  background: var(--wd-color-primary-up-1) !important;
}

/* ============================================================
   15. METHOD PAGE — hero, numbered sections, luxe cards, tail
   ============================================================ */

.wd-method-hero {
  text-align: center;
  margin-block-end: 3rem;
  padding-block-end: 3rem;
}

@media (max-width: 640px) {
  .wd-method-hero {
    margin-block-end: 2rem;
    padding-block-end: 2rem;
  }
}

.wd-method-hero .wd-luxe-sub {
  color: var(--color-foreground);
  opacity: 0.7;
  font-size: 1.0625rem;
  margin-block-end: 1.5rem;
}

/* Numbered section eyebrow (01, 02...) */
.wd-method-num {
  display: inline-block;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-primary);
  opacity: 0.85;
  line-height: 1;
  letter-spacing: 0.02em;
  padding-inline-end: 0.75rem;
  border-inline-end: 1px solid rgb(var(--wd-color-primary-rgb) / 0.25);
  margin-inline-end: 0.875rem;
}

/* Override old icon-based header — new layout: number + heading */
.wd-method-section__header {
  display: flex !important;
  align-items: center;
  gap: 0;
  margin-block-end: 1.25rem;
}

.wd-method-section__header h2,
.wd-method-section__header .wd-luxe-h2 {
  margin: 0 !important;
}

/* Method cards upgrade: numbered prefix, left-align */
.wd-method-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-block: 1.5rem 2rem;
}

@media (max-width: 640px) {
  .wd-method-cards {
    grid-template-columns: 1fr;
  }
}

.wd-method-card {
  position: relative;
  padding: 1.5rem;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-method-card:hover {
  border-color: rgb(var(--wd-color-primary-rgb) / 0.4);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

.wd-method-card__num {
  display: inline-block;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--color-primary);
  opacity: 0.8;
  margin-block-end: 0.5rem;
  letter-spacing: 0.02em;
}

.wd-method-card h3 {
  color: var(--color-foreground-heading) !important;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.125rem !important;
  font-weight: 700;
  margin: 0 0 0.5rem !important;
}

.wd-method-card p {
  color: var(--color-foreground);
  opacity: 0.72;
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

/* Method tail CTA — match FAQ tail rhythm */
.wd-method-section:has(+ .wd-method-tail) {
  margin-block-end: 0;
  padding-block-end: 0;
  border-block-end: none;
}

.wd-method-tail {
  text-align: center;
  margin-block-start: 5rem;
  padding-block-start: 2.5rem;
  border-block-start: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
}

@media (max-width: 640px) {
  .wd-method-tail {
    margin-block-start: 4rem;
  }
}

.wd-method-tail__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

.wd-method-tail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 0.015em;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.wd-method-tail__btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-button-text, var(--wd-color-bg));
  box-shadow: 0 4px 18px rgb(var(--wd-color-primary-rgb) / 0.22);
}

.wd-method-tail__btn--primary:hover {
  background: var(--wd-color-primary-up-1);
  transform: translateY(-1px);
}

.wd-method-tail__btn--ghost {
  background: transparent;
  color: var(--color-foreground);
  border: 1px solid rgb(var(--wd-color-primary-rgb) / 0.35);
}

.wd-method-tail__btn--ghost:hover {
  border-color: var(--color-primary);
  background: rgb(var(--wd-color-primary-rgb) / 0.05);
}

@media (min-width: 768px) {
  .wd-method-cards--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tighten the gap between the last method section and the credit footer. */
.wd-method-section:has(+ .wd-method-credit) {
  margin-bottom: 0;
  padding-bottom: 0.5rem;
}

.wd-method-section:has(+ .wd-method-credit) .wd-method-cards {
  margin-block-end: 0.5rem;
}

/* ============================================================
   ANNOUNCEMENT BAR ROTATION
   ============================================================
   Shopify owns the announcement blocks. wd-announcement-rotator.js owns
   the settled/entering/exiting slide states; CSS owns the clipped ticker
   motion.
   ============================================================ */
/* Bar background: a small lift from the header's #131127 navy so the
   trust strip reads as its own surface above the nav, without breaking
   the calm dark-navy palette. */
.announcement-bar,
.shopify-section.shopify-section-group-header-group:has(> .announcement-bar) {
  background-color: var(--wd-color-bg-up-3) !important;
}

.announcement-bar {
  padding-block: 4px !important;
}

.announcement-bar__slider {
  min-height: 36px;
}

.announcement-bar__slides {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  height: 36px !important;
  width: 100% !important;
  max-width: 720px !important;
  margin-inline: auto !important;
}

.announcement-bar__slide {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(112%);
  visibility: hidden !important;
  will-change: opacity, transform;
}

.announcement-bar__slide:first-child {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible !important;
}

.announcement-bar__text {
  line-height: 1.2;
  padding-inline: 1rem;
  text-wrap: balance;
}

announcement-bar-component.wd-announcement-rotator-ready .announcement-bar__slide:first-child:not(.wd-announcement-slide--active):not(.wd-announcement-slide--entering):not(.wd-announcement-slide--exiting) {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(112%);
  visibility: hidden !important;
}

announcement-bar-component.wd-announcement-rotator-ready .announcement-bar__slide.wd-announcement-slide--active {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible !important;
  z-index: 1;
}

announcement-bar-component.wd-announcement-rotator-ready .announcement-bar__slide.wd-announcement-slide--entering {
  animation: wd-announcement-enter-up 640ms cubic-bezier(0.42, 0, 0.2, 1) both;
  opacity: 1 !important;
  pointer-events: none;
  visibility: visible !important;
  z-index: 2;
}

announcement-bar-component.wd-announcement-rotator-ready .announcement-bar__slide.wd-announcement-slide--exiting {
  animation: wd-announcement-exit-up 640ms cubic-bezier(0.42, 0, 0.2, 1) both;
  opacity: 1 !important;
  pointer-events: none;
  visibility: visible !important;
  z-index: 3;
}

announcement-bar-component button[ref='previous'],
announcement-bar-component button[ref='next'],
.announcement-bar__previous,
.announcement-bar__next {
  display: none !important;
}

@keyframes wd-announcement-enter-up {
  0% {
    transform: translateY(112%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes wd-announcement-exit-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-112%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-bar__slide {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.wd-method-aside {
  text-align: center;
  margin: 0 auto 1.25rem;
  max-width: 640px;
  font-family: var(--font-body--family);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-foreground);
  opacity: 0.6;
}

.wd-method-credit {
  text-align: center;
  margin: 0 auto;
  padding-block-start: 0;
  font-size: 0.8125rem;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--color-foreground);
  opacity: 0.65;
  position: relative;
  max-width: 560px;
}

.wd-method-credit::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.5;
  margin: 0 auto 1rem;
}

/* ============================================================
   16. FAQ PAGE — grouped sections, luxe hero, tail
   ============================================================ */

.wd-faq-v2 {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

.wd-faq-v2__hero {
  text-align: center;
  margin-block-end: 2rem;
  padding-block-end: 1rem;
}

.wd-faq-v2__group {
  margin-block: 2.25rem;
}

.wd-faq-v2__group:first-of-type {
  margin-block-start: 0;
}

.wd-faq-v2__group-head {
  margin-block-end: 0.75rem;
  padding-block-end: 0.625rem;
  border-block-end: 1px solid rgb(var(--wd-color-primary-rgb) / 0.2);
}

/* Reuse the .wd-pdp-faq__item styling for consistency, but adjust spacing */
.wd-faq-v2 .wd-pdp-faq__item {
  border-block-end: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
}

.wd-faq-v2 .wd-pdp-faq__item:last-of-type {
  border-block-end: none;
}

/* FAQ tail */
.wd-faq-v2__tail {
  text-align: center;
  margin-block-start: 3rem;
  padding-block-start: 2.5rem;
  border-block-start: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
}

.wd-faq-v2__tail-copy {
  color: var(--color-foreground);
  opacity: 0.75;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto 1.5rem;
}

.wd-faq-v2__tail-copy a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wd-faq-v2__tail-actions {
  display: flex;
  justify-content: center;
}

/* ============================================================
   17. TESTIMONIALS — customer quote cards
   ============================================================ */

.wd-testi {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}

.wd-testi__head {
  text-align: center;
  margin-block-end: 2.5rem;
}

.wd-testi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .wd-testi__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .wd-testi__grid {
    grid-template-columns: 1fr;
  }
}

.wd-testi__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem 1.5rem;
  margin: 0;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}

.wd-testi__card:hover {
  border-color: rgb(var(--wd-color-primary-rgb) / 0.35);
  transform: translateY(-2px);
}

.wd-testi__card::before {
  content: "\201C";
  position: absolute;
  top: -0.75rem;
  left: 1.25rem;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 3.5rem;
  color: var(--color-primary);
  opacity: 0.35;
  line-height: 1;
}

.wd-testi__stars {
  display: inline-flex;
  gap: 0.125rem;
  color: var(--color-primary);
  opacity: 0.9;
}

.wd-testi__quote {
  color: var(--color-foreground);
  opacity: 0.9;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.wd-testi__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.08);
}

.wd-testi__name {
  font-family: var(--font-body--family);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-foreground-heading);
  letter-spacing: 0.005em;
}

.wd-testi__context {
  font-size: 0.6875rem;
  color: var(--color-foreground);
  opacity: 0.55;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   PRODUCT MEDIA: Fix zoom click reliability on desktop + mobile
   ============================================================ */

/* In grid mode the <li> only has .product-media-container + --image,
   not --zoomable. Target the zoom button directly. */
li.product-media-container {
  position: relative;
}
.product-media-container__zoom-button {
  z-index: 4 !important;
  cursor: zoom-in !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
}
/* Let clicks go through the image and hit the zoom button sitting on top */
.product-media-container .product-media,
.product-media-container .product-media__image,
.product-media-container picture,
.product-media-container picture img {
  pointer-events: none;
}
/* But the wrapper still accepts scrolling / touch gestures */
.product-media-container {
  touch-action: manipulation;
}

/* ============================================================
   PRODUCT BUY-BUTTONS: Hide default Shopify buy controls instantly
   (prevent flash before birth-data-form.js hides them)
   We render our own CTA via the astro widget. These selectors match
   the real DOM under .product-details (not .product-information).

   LOAD-BEARING CONSTRAINT: this file must stay render-blocking in
   theme.liquid (a plain stylesheet_tag in <head>). If it is ever
   deferred/async-loaded as a "performance optimization", native buy
   buttons flash before suppression and a fast tap can bypass the
   birth-data form entirely, producing paid orders the backend must
   reject. Selectors are page-global by design (only the two report
   products exist); scope them if non-report buy buttons ever appear
   on these pages.
   ============================================================ */
.product-details .product-form-buttons,
.product-details .buy-buttons-block,
.product-details product-form-component,
.product-details add-to-cart-component,
.product-details accelerated-checkout-component,
.product-details shop-pay-button,
.product-details .shopify-payment-button,
.product-details .quantity-selector,
.product-details [is="quantity-input"],
.product-details .product-form__quantity {
  display: none !important;
}
/* However, we DO need the form tag itself to stay in DOM so the
   birth-data-form.js widget can attach inside it. Keep only the <form>
   visible but without its native children. */
.product-details .shopify-product-form {
  display: block !important;
}

/* ============================================================
   18. MOBILE STICKY HEADER — slim reveal on scroll-up
   ============================================================ */

/* ============================================================
   WD HERO — split layout, navy + gold, PDF artifact, no avatar.
   Replaces the legacy Shopify hero block on the homepage.
   ============================================================ */

.wd-hero-section {
  position: relative;
  overflow: hidden;
}

/* Tighten the default 96px section padding — too much empty space
   between the header and the first content line wastes prime
   above-the-fold real estate.

   Selector specificity must beat Horizon's mobile rule
   `.content-for-layout > .shopify-section > .section.spacing-style`
   (specificity 0,4,0 with !important), so we mirror that chain plus
   `.wd-hero-section` for 0,5,0. */
.content-for-layout > .shopify-section > .section.spacing-style.wd-hero-section {
  padding-block-start: 48px !important;
}

@media (max-width: 768px) {
  .content-for-layout > .shopify-section > .section.spacing-style.wd-hero-section {
    padding-block-start: 28px !important;
  }
}

.wd-hero-section::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgb(var(--wd-color-primary-rgb) / 0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.wd-hero-section::after {
  content: "";
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 50%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgb(var(--wd-color-glow-rgb) / 0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.wd-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: clamp(520px, 70vh, 720px);
}

@media (max-width: 900px) {
  .wd-hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: left;
    min-height: 0;
  }
}

.wd-hero__copy {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wd-hero__eyebrow {
  display: block;
  font-family: var(--font-body--family);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.95;
  margin-block-end: 1.25rem;
}

.wd-hero__h1 {
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-weight: 700;
  color: var(--color-foreground-heading);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0 0 1.5rem;
  max-width: 18ch;
}

.wd-hero__h1-em {
  font-style: italic;
  color: var(--color-primary);
  font-weight: 600;
  opacity: 0.92;
}

.wd-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body--family);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-foreground);
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.14);
  border-radius: 100px;
  padding: 0.5rem 0.95rem;
  margin-block-end: 1.5rem;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.wd-hero__pill-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  margin-inline-end: 0.4rem;
}

.wd-hero__pill-icon {
  width: 18px;
  height: 18px;
  color: #ff0033; /* YouTube brand red — platform color, deliberately not a wd token */
  opacity: 0.92;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .wd-hero__pill-avatar {
    width: 32px;
    height: 32px;
  }
  .wd-hero__pill-text-full {
    display: none;
  }
}

/* Half-screen desktop (hero is two-column but the copy column is narrow):
   compact pill text so it never wraps mid-sentence. The mid label keeps
   "YouTube" as the count's referent in the compact form. */
.wd-hero__pill-text-mid {
  display: none;
}

@media (min-width: 769px) and (max-width: 1099px) {
  .wd-hero__pill-text-full {
    display: none;
  }
  .wd-hero__pill-text-mid {
    display: inline;
  }
}

.wd-hero__pill-sep {
  opacity: 0.55;
  margin-inline: 0.1rem;
}

.wd-hero__sub {
  font-family: var(--font-body--family);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  /* Dim via color, NOT opacity: element opacity composites onto children,
     which muddied the gold <em> words to ~74% strength (operator flagged
     them as bland/dark). Text stays softened; the gold runs at full power. */
  color: rgb(var(--wd-color-fg-rgb) / 0.78);
  margin: 0 0 2rem;
  max-width: 540px;
}

.wd-hero__sub em {
  font-style: italic;
  color: var(--color-primary);
}

.wd-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  /* 2rem: the trust meta-line sits directly below the buttons now (the
     price-chips row between them was removed), so this margin alone
     carries the buttons-to-trust rhythm. */
  margin-block-end: 2rem;
}

.wd-hero__btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 1rem 1.65rem;
  border-radius: 12px;
  font-family: var(--font-body--family);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
  white-space: nowrap;
}

.wd-hero__btn:active {
  transform: translateY(0) scale(0.98);
}

.wd-hero__btn--primary {
  background: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  border: 1.5px solid var(--color-primary-button-background);
  box-shadow:
    0 4px 16px rgb(var(--wd-color-primary-rgb) / 0.20),
    0 0 28px rgb(var(--wd-color-primary-rgb) / 0.10);
}

.wd-hero__btn--primary:hover {
  background: var(--color-primary-button-hover-background);
  border-color: var(--color-primary-button-hover-background);
  transform: translateY(-2px);
  box-shadow:
    0 6px 22px rgb(var(--wd-color-primary-rgb) / 0.30),
    0 0 36px rgb(var(--wd-color-primary-rgb) / 0.18);
}

.wd-hero__btn--secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-foreground);
  border: 1.5px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.30);
}

.wd-hero__btn--secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgb(var(--wd-color-primary-rgb) / 0.06);
  transform: translateY(-2px);
}

.wd-hero__sample-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 1px;
  min-height: 44px;
  transition: color 0.2s ease, gap 0.2s ease;
}

.wd-hero__sample-link:hover,
.wd-hero__sample-link:focus-visible {
  color: var(--color-primary-button-hover-background, var(--color-primary));
  gap: 0.75rem;
}

.wd-hero__sample-link svg {
  transition: transform 0.2s ease;
}

.wd-hero__sample-link:hover svg {
  transform: translateX(2px);
}

/* Trust meta-line: short product/policy signals as a flex row that
   wraps by item on narrow screens, reading as a deliberate meta-line
   below the CTAs rather than dropped-in body text. The flex gap
   carries the rhythm (no separator glyphs). */
.wd-hero__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.45rem 1.25rem;
  font-family: var(--font-body--family);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--color-foreground);
  opacity: 0.7;
}

.wd-hero__trust li {
  position: relative;
  white-space: nowrap;
}

/* Separator dots removed: they were absolutely positioned and dangled in
   front of items that wrapped to a new line at half-screen widths. The
   flex gap carries the rhythm on its own. */

/* Mobile: center-align the meta-line so it sits visually beneath the
   centered CTA buttons. Tighter gap so it reads as one line of meta. */
@media (max-width: 640px) {
  .wd-hero__trust {
    /* Centered with the full-width CTAs above
       (operator direction: the whole mobile group reads centered). */
    justify-content: center;
    gap: 0.35rem 1.1rem;
  }
}

/* Hero artifact: a fanned-pages image stacked above an editorial
   caption that clicks through to the sample preview. Image carries
   its own gold halo so no separate glow element is needed. Caption
   echoes the headline's italic-serif emphasis pattern so the hero
   reads as one typographic family. */
.wd-hero__artifact {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.wd-hero__stack {
  position: relative;
  width: 100%;
  pointer-events: none;
}

.wd-hero__stack img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.55));
}

/* Editorial caption: italic-serif kicker + roman-serif explanation +
   arrow. Soft warm-white at low opacity so it reads as a designed
   caption, not a CTA — the gold underlined "Or read a sample first →"
   in the copy column carries the primary sample-CTA role. */
.wd-hero__artifact-caption {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-heading--family);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--color-foreground);
  opacity: 0.62;
  text-decoration: none;
  transition: opacity 220ms ease;
}

.wd-hero__artifact-caption:hover,
.wd-hero__artifact-caption:focus-visible {
  opacity: 0.92;
}

.wd-hero__artifact-caption-em {
  font-style: italic;
  font-weight: 400;
}

.wd-hero__artifact-caption-rest {
  font-weight: 400;
}

.wd-hero__artifact-caption-arrow {
  display: inline-block;
  margin-left: 0.05em;
  font-size: 0.92em;
  font-style: normal;
  transition: transform 220ms ease;
}

.wd-hero__artifact-caption:hover .wd-hero__artifact-caption-arrow,
.wd-hero__artifact-caption:focus-visible .wd-hero__artifact-caption-arrow {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .wd-hero__artifact {
    max-width: 480px;
    gap: 0.7rem;
  }

  .wd-hero__artifact-caption {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .wd-hero__cta-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .wd-hero__btn {
    justify-content: center;
  }
  /* Tighter mobile type so eyebrow + headline + subline + primary CTA all
     land in the first viewport (375x812) instead of headline-only. */
  .wd-hero__h1 {
    max-width: none;
    font-size: 2.35rem;
    line-height: 1.08;
    margin-bottom: 1rem;
  }
  .wd-hero__pill {
    margin-bottom: 0.9rem;
  }
  .wd-hero__sub {
    font-size: 0.9375rem;
    margin-bottom: 1.25rem;
  }
}

/* Birth Time — three-dropdown layout (12h + AM/PM) */
.astro-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

.astro-time-row select {
  width: 100%;
  padding: 0.875rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgb(var(--wd-color-fg-rgb) / 0.18);
  border-radius: 8px;
  color: var(--wd-color-fg);
  font-size: 1rem;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  /* var() cannot reach inside url(): the chevron stroke (%23dda74f = gold)
     stays literal by design; a brand overrides this background-image
     property wholesale from store-owned CSS (see section 0). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23dda74f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-inline-end: 2rem;
}

.astro-time-row select:focus {
  outline: none;
  border-color: var(--wd-color-primary);
  box-shadow: 0 0 0 2px rgb(var(--wd-color-primary-rgb) / 0.2);
}

.astro-time-row select option {
  background: var(--wd-color-bg);
  color: var(--wd-color-fg);
}

/* Anchor scroll offset — html has scroll-padding-top: 80px globally, AND the
   section adds 56px of internal padding above its heading. Both stack on top
   of any positive scroll-margin, pushing the heading way down the viewport.
   Sticky header hides on scroll-down, so we don't need to clear it. We use a
   negative scroll-margin to cancel out the scroll-padding and land the heading
   ~70px from the top of the viewport (section.top ≈ 14px, +56px padding). */
#tier-selector,
#sample-preview {
  scroll-margin-top: -66px;
}

@media (max-width: 749px) {
  #tier-selector,
  #sample-preview {
    scroll-margin-top: -28px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   WD Sample Modal — inline page-by-page preview triggered from sample
   buttons across the site. First page paints in <500ms; subsequent
   pages lazy-load on scroll.
   ──────────────────────────────────────────────────────────────────── */
.wd-sample-modal[hidden] { display: none; }

.wd-sample-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wd-sample-modal.is-open { opacity: 1; }

.wd-sample-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(var(--wd-color-scrim-rgb) / 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.wd-sample-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(960px, 100%);
  max-height: 100%;
  margin: clamp(16px, 4vh, 56px) auto;
  background: var(--wd-color-bg-down-1);
  border: 1px solid rgb(var(--wd-color-fg-rgb) / 0.1);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 0.22s ease;
}

.wd-sample-modal.is-open .wd-sample-modal__panel { transform: translateY(0); }

.wd-sample-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  border-bottom: 1px solid rgb(var(--wd-color-fg-rgb) / 0.06);
}

.wd-sample-modal__head-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.wd-sample-modal__eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wd-color-primary);
}

.wd-sample-modal__title {
  margin: 0;
  font-family: var(--font-secondary--family, "Cormorant Garamond", serif);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 500;
  color: var(--wd-color-fg);
  line-height: 1.15;
}

.wd-sample-modal__close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(var(--wd-color-fg-rgb) / 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--wd-color-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wd-sample-modal__close:hover,
.wd-sample-modal__close:focus-visible {
  border-color: var(--wd-color-primary);
  color: var(--wd-color-primary);
  outline: none;
}

.wd-sample-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--wd-color-bg-down-2);
  padding: 1.25rem clamp(0.5rem, 2vw, 1.5rem);
}

.wd-sample-modal__pages {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 820px;
  margin: 0 auto;
}

.wd-sample-modal__page-holder {
  background: var(--wd-color-bg-up-1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  aspect-ratio: 1100 / 1557;
}

.wd-sample-modal__page {
  display: block;
  width: 100%;
  height: auto;
  background: var(--wd-color-bg-up-1);
}

.wd-sample-modal__end {
  margin: 1.5rem auto 0.5rem;
  text-align: center;
  color: rgb(var(--wd-color-fg-rgb) / 0.5);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* The modal lives at body level, OUTSIDE any color-scheme wrapper, so scheme
   CSS variables do not resolve here. Colors ride the wd brand tokens
   (section 0) instead (same rule as the sticky CTA and the rest of the
   modal). */
.wd-sample-modal__inline-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin: 2.5rem auto;
  padding: 1.75rem 1.5rem;
  max-width: 520px;
  border-top: 1px solid rgb(var(--wd-color-fg-rgb) / 0.1);
  border-bottom: 1px solid rgb(var(--wd-color-fg-rgb) / 0.1);
  text-align: center;
}

.wd-sample-modal__inline-cta-text {
  margin: 0;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.125rem;
  font-style: italic;
  color: rgb(var(--wd-color-fg-rgb) / 0.88);
}

.wd-sample-modal__inline-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--wd-color-primary);
  color: var(--wd-color-bg);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background 0.2s ease, gap 0.2s ease;
}

.wd-sample-modal__inline-cta-btn:hover,
.wd-sample-modal__inline-cta-btn:focus-visible {
  background: var(--wd-color-primary-up-2);
  color: var(--wd-color-bg);
  gap: 0.75rem;
}

.wd-sample-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.04), transparent);
  border-top: 1px solid rgb(var(--wd-color-fg-rgb) / 0.06);
}

.wd-sample-modal__foot-label {
  color: rgb(var(--wd-color-fg-rgb) / 0.66);
  font-size: 0.85rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-sample-modal__foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--wd-color-primary);
  color: var(--wd-color-bg);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.wd-sample-modal__foot-cta:hover,
.wd-sample-modal__foot-cta:focus-visible {
  background: var(--wd-color-primary-up-2);
  color: var(--wd-color-bg);
  outline: none;
}

body.wd-sample-modal-open {
  overflow: hidden;
}

@media (max-width: 749px) {
  .wd-sample-modal__panel {
    margin: 0;
    width: 100%;
    border-radius: 0;
    border: 0;
    max-height: 100%;
    height: 100%;
  }

  .wd-sample-modal__head {
    padding: 0.75rem 0.875rem;
  }

  .wd-sample-modal__title {
    font-size: 1.1rem;
  }

  .wd-sample-modal__body {
    padding: 0.75rem 0.5rem;
  }

  .wd-sample-modal__pages {
    gap: 0.625rem;
  }

  .wd-sample-modal__foot {
    padding: 0.65rem 0.875rem;
    justify-content: center;
  }

  .wd-sample-modal__foot-label {
    display: none;
  }

  .wd-sample-modal__foot-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wd-sample-modal,
  .wd-sample-modal__panel { transition: none; }
}

/* ============================================================
   PDP INLINE TESTIMONIAL (tier-matched, single quote)
   ============================================================ */

.wd-pdp-section--testimonial {
  max-width: 720px;
  margin-inline: auto;
}

.wd-pdp-testimonial {
  margin: 0;
  padding: 1.75rem 2rem;
  border-left: 2px solid var(--color-primary);
  background: rgba(var(--color-foreground-rgb), 0.03);
}

.wd-pdp-testimonial__quote {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--color-foreground);
}

.wd-pdp-testimonial__meta {
  display: block;
  font-size: 0.875rem;
  opacity: 0.7;
  font-style: normal;
}

.footer__payment-methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
}

.footer__payment-methods svg {
  height: 22px;
  width: auto;
  opacity: 0.7;
  border-radius: 3px;
}

/* ============================================================
   UNIFIED STICKY GROUP (driven by wd-sticky-header.js)
   ============================================================
   <html data-wd-sticky="top|visible|hidden"> is set by JS based on
   scroll position. CSS positions BOTH the announcement-bar and header
   .shopify-section wrappers from that single attribute.

     top     -> natural document position (no fixed, no transform)
     visible -> fixed at top of viewport, translateY(0)
     hidden  -> fixed at top of viewport, translateY(-bar/header height)

   Both sections share the same fixed-positioning rules but with
   different `top` values so they stack: bar on top, header below.
   ============================================================ */

html[data-wd-sticky='visible'] .shopify-section.shopify-section-group-header-group:has(> .announcement-bar),
html[data-wd-sticky='visible'] .shopify-section.shopify-section-group-header-group.header-section,
html[data-wd-sticky='hidden'] .shopify-section.shopify-section-group-header-group:has(> .announcement-bar),
html[data-wd-sticky='hidden'] .shopify-section.shopify-section-group-header-group.header-section {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform 280ms ease-out;
  will-change: transform;
}

html[data-wd-sticky='visible'] .shopify-section.shopify-section-group-header-group:has(> .announcement-bar),
html[data-wd-sticky='hidden'] .shopify-section.shopify-section-group-header-group:has(> .announcement-bar) {
  top: 0;
}

html[data-wd-sticky='visible'] .shopify-section.shopify-section-group-header-group.header-section,
html[data-wd-sticky='hidden'] .shopify-section.shopify-section-group-header-group.header-section {
  top: var(--wd-bar-height, 44px);
}

html[data-wd-sticky='visible'] .shopify-section.shopify-section-group-header-group:has(> .announcement-bar),
html[data-wd-sticky='visible'] .shopify-section.shopify-section-group-header-group.header-section {
  transform: translateY(0);
}

html[data-wd-sticky='hidden'] .shopify-section.shopify-section-group-header-group:has(> .announcement-bar) {
  transform: translateY(calc(-1 * var(--wd-bar-height, 44px)));
}

html[data-wd-sticky='hidden'] .shopify-section.shopify-section-group-header-group.header-section {
  transform: translateY(calc(-1 * (var(--wd-bar-height, 44px) + var(--wd-header-height, 80px))));
}

/* When entering fixed mode from natural mode, skip the transform
   transition for one frame so the bar+header don't pop in at the top
   and animate out — they should just be invisible immediately. */
html[data-wd-sticky-instant='true'] .shopify-section.shopify-section-group-header-group:has(> .announcement-bar),
html[data-wd-sticky-instant='true'] .shopify-section.shopify-section-group-header-group.header-section {
  transition: none !important;
}

/* Quieter caption under the hero artifact — attribution, not a CTA. */
.wd-hero__artifact-caption.wd-hero__artifact-caption--meta {
  font-family: var(--font-heading--family);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  opacity: 0.5;
  letter-spacing: 0.01em;
  pointer-events: none;
  text-decoration: none;
  margin-block-start: 0.65rem;
}

.wd-hero__artifact-caption.wd-hero__artifact-caption--meta .wd-hero__artifact-caption-em {
  font-style: italic;
  font-weight: 400;
}

/* === wd-policy-pages (revised 2026-05-06) ===
   Shopify auto-rendered policy pages (/policies/privacy-policy etc.)
   render inside <main class="content-for-layout"> which inherits the
   default light "color-scheme-1" — i.e. --color-foreground resolves to
   rgb(0 0 0 / 0.81) (BLACK) and --color-foreground-heading to
   rgb(21 21 51 / 1) (purple-ish). On our dark indigo body background
   that text is invisible / "purple".

   Fix: re-bind the Horizon scheme variables on the policy/page wrappers
   to the dark-theme values, so every descendant rule that uses
   var(--color-foreground), var(--color-foreground-heading),
   var(--color-primary), etc. resolves correctly. This means we don't
   need to override every single tag — child elements just inherit the
   right values via the existing Horizon CSS.

   Values ride the wd brand tokens (section 0 above), which mirror
   color-scheme-3067b223-ff26-4778-97f1-c6472b9386ee (dark indigo +
   cream + gold) on the EN store — EXCEPT --color-primary-hover, which
   deliberately stays the bright-gold lift (up-3), not the scheme's
   white. A brand override of the tokens reaches these pages
   automatically. */

.shopify-policy__container,
.shopify-policy__body,
main.content-for-layout > rte-formatter,
main.content-for-layout > .rte,
/* Custom pages (templates/page.json + variants like page.contact, page.faq).
   The "page-content" section renders the page body inside a wrapper that
   defaults to color-scheme-1 (light). Re-bind vars here too so all custom
   pages render readably on the dark body BG. */
main#MainContent .section.page-width-content,
main.content-for-layout .section.page-width-content {
  --color-background: var(--wd-color-bg);
  --color-background-rgb: var(--wd-color-bg-rgb);
  --color-foreground: var(--wd-color-fg);
  --color-foreground-rgb: var(--wd-color-fg-rgb);
  --color-foreground-heading: var(--wd-color-fg);
  --color-foreground-heading-rgb: var(--wd-color-fg-rgb);
  --color-primary: var(--wd-color-primary);
  --color-primary-rgb: var(--wd-color-primary-rgb);
  --color-primary-hover: var(--wd-color-primary-up-3);
  --color-primary-hover-rgb: var(--wd-color-primary-up-3-rgb);
  --color-border: rgb(var(--wd-color-fg-rgb) / 0.18);
  --color-border-rgb: var(--wd-color-fg-rgb);

  color: var(--color-foreground);
  line-height: 1.7;
}

/* Belt-and-braces: explicitly recolor the common tags inside policy/page
   bodies in case Shopify or Horizon hard-codes a color further down. */
.shopify-policy__container,
.shopify-policy__container p,
.shopify-policy__container li,
.shopify-policy__container span,
.shopify-policy__container strong,
.shopify-policy__container em,
.shopify-policy__container blockquote,
.shopify-policy__body,
.shopify-policy__body p,
.shopify-policy__body li,
.shopify-policy__body span,
.shopify-policy__body strong,
.shopify-policy__body em,
.shopify-policy__body blockquote {
  color: var(--color-foreground);
}

.shopify-policy__container h1,
.shopify-policy__container h2,
.shopify-policy__container h3,
.shopify-policy__container h4,
.shopify-policy__container h5,
.shopify-policy__container h6,
.shopify-policy__title h1,
.shopify-policy__title h2,
.shopify-policy__body h1,
.shopify-policy__body h2,
.shopify-policy__body h3,
.shopify-policy__body h4,
.shopify-policy__body h5,
.shopify-policy__body h6 {
  color: var(--color-foreground-heading);
  margin-block-start: 2rem;
  margin-block-end: 0.75rem;
}

.shopify-policy__container a,
.shopify-policy__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.shopify-policy__container a:hover,
.shopify-policy__body a:hover {
  color: var(--color-primary-hover);
  text-decoration: none;
}

/* Tables (Privacy Policy "What we collect" + sub-processors) */
.shopify-policy__container table,
.shopify-policy__body table {
  border-collapse: collapse;
  margin: 1.5rem 0;
  width: 100%;
  font-size: 0.95rem;
}

.shopify-policy__container th,
.shopify-policy__container td,
.shopify-policy__body th,
.shopify-policy__body td {
  border: 1px solid rgb(var(--wd-color-fg-rgb) / 0.18);
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  color: var(--color-foreground);
}

.shopify-policy__container th,
.shopify-policy__body th {
  background-color: rgb(var(--wd-color-fg-rgb) / 0.05);
  font-weight: 600;
  color: var(--color-foreground-heading);
}

/* Lists */
.shopify-policy__container ul,
.shopify-policy__container ol,
.shopify-policy__body ul,
.shopify-policy__body ol {
  margin: 1rem 0 1rem 1.5rem;
  padding-inline-start: 1rem;
}

.shopify-policy__container li,
.shopify-policy__body li {
  margin-block-end: 0.5rem;
  line-height: 1.7;
  color: var(--color-foreground);
}

/* Centered, readable column for policy pages */
.shopify-policy__container,
.shopify-policy__body {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Title block on Shopify policy pages (renders the page H1) */
.shopify-policy__title {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
}
.shopify-policy__title h1 {
  color: var(--color-foreground-heading);
}

/* ============================================================
   9. NATIVE PRODUCT REVIEWS (snippets/wd-reviews.liquid)
   Star summary (buy box) + review cards (PDP + homepage).
   Matches the calm/premium brand: navy surfaces, gold stars.
   ============================================================ */

/* Gold star row, shared by the summary widget and each card.
   Decorative SVGs are aria-hidden; the rating is announced via
   the role="img" + aria-label on the wrapping element. */
.wd-review-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--color-primary);
  line-height: 1;
}

.wd-review-stars__star {
  display: block;
}

.wd-review-stars__star.is-empty {
  opacity: 0.35;
}

/* Partial (fractional) star, used by the 4.8 summary widget.
   An empty outline sits underneath; a filled copy is overlaid and
   clipped to --wd-star-fill width so the last star reads as ~80%. */
.wd-review-stars__partial {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 0;
}

.wd-review-stars__partial .wd-review-stars__star {
  position: absolute;
  inset: 0;
}

.wd-review-stars__clip {
  position: absolute;
  inset: 0;
  width: var(--wd-star-fill, 100%);
  overflow: hidden;
  line-height: 0;
}

.wd-review-stars__clip .wd-review-stars__star {
  /* keep the overlaid filled star at full size; the clip wrapper trims it */
  width: 16px;
  height: 16px;
  max-width: none;
}

/* ---- Star summary widget (buy box, mode: 'stars') ---- */
.wd-review-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
}

.wd-review-summary__text {
  color: var(--color-foreground);
  opacity: 0.85;
  font-size: 0.875rem;
  line-height: 1.4;
}

.wd-review-summary__text strong {
  color: var(--color-foreground-heading);
  opacity: 1;
  font-weight: 700;
}

/* ---- Reviews block: intro + grid (mode: 'cards' / 'homepage') ---- */
.wd-reviews__intro {
  text-align: center;
  margin-block-end: 2.5rem;
}

.wd-reviews__disclosure {
  color: var(--color-foreground);
  opacity: 0.6;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.6;
  margin: 1rem auto 0;
  max-width: 520px;
}

/* ---- Reviews carousel (manual swipe, peek next card, no auto-rotate) ---- */
/* CRITICAL: the carousel's grid/flex-item ancestors default to min-width:auto,
   which makes them grow to the track's intrinsic width and blow the page out
   horizontally on mobile. Force them to shrink to their cell so the horizontal
   scroll stays INSIDE the track. */
.wd-testi,
.wd-pdp-details,
.wd-reviews,
.wd-reviews__carousel,
.wd-reviews__track {
  min-width: 0;
}

.wd-reviews__carousel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wd-reviews__track {
  flex: 1 1 auto;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.25rem 0.85rem;
  /* Hide the native scrollbar; navigation is by swipe + arrow buttons */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wd-reviews__track::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.wd-reviews__track > .wd-review-card {
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
}

.wd-reviews__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-foreground);
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.wd-reviews__arrow:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--color-foreground-rgb, 244, 244, 246), 0.35);
}

.wd-reviews__arrow[disabled] {
  opacity: 0.3;
  cursor: default;
}

/* When all cards already fit, center them and hide the arrows */
.wd-reviews__carousel.is-static {
  justify-content: center;
}
.wd-reviews__carousel.is-static .wd-reviews__arrow {
  display: none;
}
.wd-reviews__carousel.is-static .wd-reviews__track {
  justify-content: center;
}

@media (max-width: 900px) {
  .wd-reviews__track > .wd-review-card {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
}

@media (max-width: 640px) {
  .wd-reviews__arrow {
    display: none;
  }
  .wd-reviews__track > .wd-review-card {
    flex-basis: 84%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wd-reviews__track {
    scroll-behavior: auto;
  }
}

/* ---- Individual review card ---- */
.wd-review-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.75rem;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wd-review-card:hover {
  border-color: rgba(var(--color-foreground-rgb, 244, 244, 246), 0.18);
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-3px);
}

.wd-review-card__stars {
  margin-block-end: 1rem;
}

.wd-review-card__quote {
  color: var(--color-foreground);
  opacity: 0.88;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

/* Attribution follows the quote instead of pinning to the bottom of a
   height-stretched card: equal-height cards left a hollow dead zone
   between short quotes and their attribution. */
.wd-review-card__caption {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wd-reviews__track {
  align-items: flex-start;
}

.wd-review-card__meta {
  color: var(--color-foreground);
  opacity: 0.75;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.wd-review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wd-review-card__verified svg {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .wd-review-card {
    padding: 1.5rem;
  }
}

/* ============================================================
   SAMPLE SYNTHESIS COPY (homepage + PDP shared)
   annotation line, bridge line, paired-review block
   ============================================================ */

.wd-sample-annotation {
  max-width: 720px;
  min-width: 0;
  margin: 0 auto 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-foreground);
  opacity: 0.65;
}

.wd-sample-bridge {
  max-width: 640px;
  min-width: 0;
  margin: 0 auto 1.75rem;
  text-align: center;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-primary);
}

.wd-sample-review {
  max-width: 640px;
  min-width: 0;
  margin: 0 auto 1.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.1);
  border-left: 2px solid var(--color-primary);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}

.wd-sample-review__label {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.85;
}

.wd-sample-review__quote {
  margin: 0 0 0.875rem;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-foreground);
  opacity: 0.95;
}

.wd-sample-review__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  min-width: 0;
}

.wd-sample-review__meta {
  font-size: 0.8125rem;
  color: var(--color-foreground);
  opacity: 0.7;
  min-width: 0;
}

@media (max-width: 640px) {
  .wd-sample-review {
    padding: 1.125rem 1.25rem;
  }
  .wd-sample-review__quote {
    font-size: 1rem;
  }
}

/* ───────────────────────── WD Mission (homepage "Why we built this") ───────────────────────── */

.wd-mission {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.wd-mission__body {
  display: grid;
  gap: 1.1rem;
  margin-block-start: 1.5rem;
}

.wd-mission__body p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-foreground);
  opacity: 0.92;
}

@media (max-width: 640px) {
  .wd-mission__body p {
    font-size: 1rem;
    text-align: left;
  }
}

/* Mission ornament: the small gold star the report PDFs use as a divider */
.wd-mission__ornament {
  display: block;
  color: var(--wd-color-primary);
  font-size: 1.35rem;
  opacity: 0.85;
  margin-block-end: 10px;
}

/* ── Signature details ──────────────────────────────────────────── */

::selection {
  background: rgb(var(--wd-color-primary-rgb) / 0.9);
  color: var(--wd-color-bg);
}

.wd-hero__btn:focus-visible,
.wd-cta-banner__btn:focus-visible,
.wd-tier-card__cta:focus-visible,
.wd-pdp-final-cta__btn:focus-visible,
.wd-sticky-cta__btn:focus-visible,
.wd-sample-preview__btn:focus-visible,
.wd-method-tail__btn:focus-visible,
.wd-sample-modal__foot-cta:focus-visible,
.astro-submit:focus-visible {
  outline: 2px solid var(--wd-color-primary);
  outline-offset: 3px;
}

html {
  scrollbar-color: var(--wd-color-bg-up-5) var(--wd-color-bg);
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--wd-color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--wd-color-bg-up-5);
  border-radius: 6px;
  border: 2px solid var(--wd-color-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--wd-color-bg-up-6);
}

/* Footer legal identity line (EU shop-identity requirement) */
.wd-footer-legal {
  display: block;
  margin-block-start: 4px;
  white-space: normal;
  text-wrap: wrap;
  opacity: 0.8;
}

/* Tier cross-link, demoted below the highlights so it can't outrank the pitch */
.wd-pdp-tier-switch {
  display: block;
  margin: 6px 0 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--wd-color-primary);
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wd-pdp-tier-switch:hover {
  color: var(--wd-color-primary-up-3);
  opacity: 1;
}

/* Verified pull-quote under the PDP price (replaces the small-N aggregate) */
.wd-review-pullquote {
  display: block;
  margin: 6px 0 4px;
  text-decoration: none;
  color: var(--color-foreground);
}

.wd-review-pullquote .wd-review-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--wd-color-primary);
  vertical-align: middle;
}

.wd-review-pullquote__quote {
  display: block;
  margin-top: 4px;
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.55;
  opacity: 0.88;
  max-width: 46ch;
}

.wd-review-pullquote__meta {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--wd-color-primary);
}

.wd-review-pullquote:hover .wd-review-pullquote__meta {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The hero YouTube pill is now a real link to the channel */
a.wd-hero__pill {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.wd-hero__pill:hover {
  border-color: rgb(var(--wd-color-primary-rgb) / 0.55);
}

/* PDP closing CTA (the order form sits at the top of a very long page) */
.wd-pdp-final-cta {
  text-align: center;
  padding: 8px 0 24px;
}

.wd-pdp-final-cta__sub {
  max-width: 52ch;
  margin: 10px auto 22px;
  color: var(--color-foreground);
  opacity: 0.75;
  font-size: 1rem;
  line-height: 1.65;
}

.wd-pdp-final-cta__btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-family: var(--font-heading--family), "Cormorant", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wd-color-bg);
  background: var(--wd-color-primary);
  border-radius: 12px;
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgb(var(--wd-color-primary-rgb) / 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}

.wd-pdp-final-cta__btn:hover {
  background: var(--wd-color-primary-up-1);
  transform: translateY(-2px);
}

.wd-pdp-final-cta__trust {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--color-foreground);
  opacity: 0.55;
}

/* Method page mid-CTA: quiet secondary link next to the sample button */
.wd-method-midcta__secondary {
  display: inline-block;
  margin-inline-start: 14px;
  font-size: 0.9rem;
  color: var(--color-foreground);
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wd-method-midcta__secondary:hover {
  opacity: 1;
  color: var(--color-primary);
}

/* ============================================================
   IN-PAGE ANCHORS: keep targets clear of the announcement/header
   when jumped to from links like the price pullquote (#wd-reviews)
   ============================================================ */
#wd-reviews,
#astro-birth-details,
#faq-delivery,
#faq-refund {
  scroll-margin-top: 90px;
}

/* ============================================================
   PDP BUY BOX: quiet sample link under the highlights
   ============================================================ */
.wd-pdp-sample-peek {
  display: inline-block;
  margin-block: 2px 14px;
  font-size: 0.875rem;
  color: var(--color-foreground);
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wd-pdp-sample-peek:hover {
  opacity: 1;
  color: var(--color-primary);
}

/* ============================================================
   SAMPLE PREVIEW: full-sample access from the homepage section.
   Everything in this section is center-aligned (annotation, bridge,
   final CTA), so the actions stack centers too. The button is a quiet
   outline so "Get my reading" stays the only solid CTA here.
   ============================================================ */
.wd-sample-preview__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-block: 22px 20px;
}

.wd-sample-preview__sample-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border: 1px solid rgb(var(--wd-color-primary-rgb) / 0.55);
  border-radius: 12px;
  color: var(--color-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.wd-sample-preview__sample-btn:hover {
  border-color: var(--color-primary);
  background: rgb(var(--wd-color-primary-rgb) / 0.08);
}

.wd-sample-preview__essential-link {
  font-size: 0.875rem;
  color: var(--color-foreground);
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wd-sample-preview__essential-link:hover {
  opacity: 1;
  color: var(--color-primary);
}

/* ============================================================
   CART GUARD (report-line safety)
   Shown by cart-summary.liquid while a report line is invalid
   (missing birth details or quantity above 1); the checkout
   button is disabled and wallets suppressed in the same state.
   ============================================================ */
.wd-cart-guard-note {
  background: rgb(var(--wd-color-alert-rgb) / 0.1);
  border: 1px solid rgb(var(--wd-color-alert-rgb) / 0.55);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-foreground);
}

.wd-cart-qty-fixed {
  display: inline-block;
  font-size: 0.875rem;
  opacity: 0.7;
  padding: 0.25rem 0;
  cursor: default;
}

/* ============================================================
   SHOPIFY COOKIE-CONSENT BANNER: brand restyle
   Shopify injects section#shopify-pc__banner with its own styles;
   the default is a white sheet covering most of the mobile
   viewport, with off-brand typography. These overrides re-skin it
   (dark navy, gold accent, compact bottom sheet) without touching
   its behavior. Banner TEXT and region targeting live in Shopify
   admin (Settings -> Customer privacy), not in the theme.
   !important is required: Shopify ships inline/injected styles.
   ============================================================ */
html body #shopify-pc__banner.shopify-pc__banner__dialog,
html body #shopify-pc__banner {
  background: var(--wd-color-bg-up-2) !important;
  color: var(--wd-color-fg) !important;
  border: none !important;
  border-top: 1px solid rgb(var(--wd-color-primary-rgb) / 0.4) !important;
  border-radius: 14px 14px 0 0 !important;
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.5) !important;
  padding: 16px 18px !important;
  font-family: inherit !important;
  position: fixed !important;
  z-index: 9999 !important;
  /* Mobile: flush bottom sheet, edge to edge, so it reads native
     instead of a floating card taking half the screen. Explicit 100vw:
     Shopify's own stylesheet otherwise sneaks a right-side gap in. */
  inset: auto auto 0 0 !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 750px) {
  html body #shopify-pc__banner.shopify-pc__banner__dialog,
  html body #shopify-pc__banner {
    /* Desktop: compact card in the bottom-left corner. */
    inset: auto auto 20px 20px !important;
    max-width: 360px !important;
    border: 1px solid rgb(var(--wd-color-primary-rgb) / 0.4) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  }
}

/* Take over the INTERNAL layout completely: Shopify's own banner
   stylesheet stacks and centers the buttons with large gaps, which
   made the card tall and oddly composed. */
html body #shopify-pc__banner .shopify-pc__banner__wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

html body #shopify-pc__banner .shopify-pc__banner__body {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body #shopify-pc__banner h2,
html body #shopify-pc__banner #shopify-pc__banner__body-title {
  color: var(--wd-color-primary) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
}

html body #shopify-pc__banner p {
  color: rgb(var(--wd-color-fg-rgb) / 0.82) !important;
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

html body #shopify-pc__banner a,
html body #shopify-pc__banner #shopify-pc__banner__body-policy-link {
  color: var(--wd-color-primary) !important;
  text-decoration: underline !important;
}

html body #shopify-pc__banner .shopify-pc__banner__btns,
html body #shopify-pc__banner .shopify-pc__banner__btns-granular {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #shopify-pc__banner .shopify-pc__banner__btns button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

html body #shopify-pc__banner #shopify-pc__banner__btn-accept {
  order: 1;
}

html body #shopify-pc__banner #shopify-pc__banner__btn-decline {
  order: 2;
}

html body #shopify-pc__banner #shopify-pc__banner__btn-accept {
  background: var(--wd-color-primary) !important;
  color: var(--wd-color-bg) !important;
  border: 1px solid var(--wd-color-primary) !important;
}

html body #shopify-pc__banner #shopify-pc__banner__btn-decline {
  background: transparent !important;
  color: var(--wd-color-fg) !important;
  border: 1px solid rgb(var(--wd-color-fg-rgb) / 0.35) !important;
}

html body #shopify-pc__banner #shopify-pc__banner__btn-manage-prefs {
  background: transparent !important;
  color: rgb(var(--wd-color-fg-rgb) / 0.7) !important;
  border: none !important;
  text-decoration: underline !important;
  padding: 9px 4px !important;
  order: 3;
}

/* The "Manage preferences" dialog (#shopify-pc__prefs) deliberately stays a
   LIGHT surface: Shopify hardcodes near-black icon fills inside it, so a dark
   conversion risks invisible checkboxes after a platform update. We align
   type, radius, and accents so it reads as intentional. */
#shopify-pc__prefs {
  font-family: inherit !important;
}

#shopify-pc__prefs .shopify-pc__prefs__dialog,
#shopify-pc__prefs [role="dialog"] {
  border-radius: 14px !important;
}

#shopify-pc__prefs a {
  color: var(--wd-color-primary-down-4) !important;
}

#shopify-pc__prefs button {
  border-radius: 10px !important;
  font-family: inherit !important;
}

/* ============================================================
   PRODUCT GALLERY CAROUSEL: the zoom-opening overlay button we
   render inside each image slide (snippets/
   product-media-gallery-content.liquid) must not cover the
   slideshow arrows (slideshow-arrows, z-index 4). The legacy
   "zoom click reliability" block above forces z-index 4
   !important on the shared button class, which ties the arrows
   and wins by DOM order, swallowing their clicks; !important +
   higher specificity here drops the slide button below them.
   ============================================================ */
slideshow-slide .product-media-container__zoom-button {
  z-index: auto !important;
}

/* ============================================================
   PRODUCT GALLERY ZOOM DIALOG (desktop): stock Horizon renders
   each zoomed image at full viewport WIDTH, so a square image is
   taller than the screen and opens "super zoomed in" with no way
   to zoom out (drag-zoom-wrapper only activates on mobile).
   Fit each image to the viewport instead, one per screen, with
   scroll-snap so scrolling flips image by image. Mobile keeps the
   stock horizontal swiper untouched.
   ============================================================ */
@media screen and (min-width: 750px) {
  .dialog-zoomed-gallery__dialog {
    scroll-snap-type: y mandatory;
  }

  /* Every media item gets a snap position (a mandatory snap container with
     unsnappable children would settle on a neighbour instead), even though
     only images get the fit-to-screen sizing below. */
  .dialog-zoomed-gallery > .product-media-container {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .dialog-zoomed-gallery .product-media-container--image {
    box-sizing: border-box;
    height: 100dvh;
    padding: 28px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
  }

  /* <drag-zoom-wrapper> is a custom element (display:inline by default,
     height:auto) sitting between the flex item and .product-media; give it
     a definite height so the percentage heights below can resolve. */
  .dialog-zoomed-gallery .product-media-container--image .product-media__drag-zoom-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 100%;
  }

  /* Reserve 110px per side so the dialog's fixed right-hand thumbnail rail
     (~100px: 64px thumbnails + padding + margin) never overlaps the image on
     tall narrow viewports like portrait tablets; symmetric so the image stays
     centered. On landscape desktop the image is height-limited and unaffected. */
  .dialog-zoomed-gallery .product-media-container--image .product-media {
    height: 100%;
    max-width: min(100%, calc(100vw - 220px));
    aspect-ratio: var(--ratio, 1);
  }

  .dialog-zoomed-gallery .product-media-container--image .product-media__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}