/** Shopify CDN: Minification failed

Line 2171:13 Expected identifier but found whitespace
Line 2171: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 Horizon CSS custom properties
   ============================================================ */

/* ============================================================
   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: #131127 !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, #131127) 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 rgba(221, 167, 79, 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 rgba(221, 167, 79, 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 rgba(221, 167, 79, 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 rgba(221, 167, 79, 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 */
.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;
}

.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%,
    rgba(221, 167, 79, 0.12),
    rgba(221, 167, 79, 0.05) 35%,
    transparent 75%
  );
}

.shopify-section:has(.wd-cta-banner)::after {
  background: radial-gradient(
    ellipse 60% 60% at 50% 50%,
    rgba(221, 167, 79, 0.11),
    rgba(221, 167, 79, 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: rgba(221, 167, 79, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(221, 167, 79, 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, #131127) 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, #131127);
  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;
}

.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 rgba(221, 167, 79, 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 rgba(221, 167, 79, 0.2);
  border-block-end: 1px solid rgba(221, 167, 79, 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: rgba(221, 167, 79, 0.1);
  color: var(--color-primary);
  transition: background 0.3s ease;
}

.wd-diff-block:hover .wd-diff-block__icon {
  background: rgba(221, 167, 79, 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: rgba(221, 167, 79, 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;
  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 rgba(221, 167, 79, 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;
}

.wd-sample-preview__excerpt-attr {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--color-foreground);
  opacity: 0.6;
  font-style: italic;
  line-height: 1.5;
}

.wd-sample-preview__order-cta {
  margin: 0 auto 1rem;
  font-size: 0.9375rem;
  color: var(--color-foreground);
  opacity: 0.85;
}

.wd-sample-preview__order-cta a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.wd-sample-preview__order-cta a:hover,
.wd-sample-preview__order-cta a:focus-visible {
  border-bottom-color: var(--color-primary);
}

/* ============================================================
   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 rgba(221, 167, 79, 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);
}

@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, #131127) 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: rgba(221, 167, 79, 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: rgba(221, 167, 79, 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 (trust 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 trust/value enhancements card from the form below it. */
.wd-pdp-enhancements {
  margin-bottom: 32px !important;
}

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

/* Inside the trust card: clear separation between social-stat / badge /
   highlights / trust-pill 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 ("Encrypted & auto-deleted · …") — needs breathing room
   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;
}

/* Trust-pill icons in the trust card — nudge SVGs up 1px so they
   sit on the cap-height of the text instead of the x-height. */
.wd-pdp-trust li svg,
.astro-reassurance__item svg {
  transform: translateY(-0.5px);
}

@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 rgba(221, 167, 79, 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: rgba(221, 167, 79, 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 {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wd-stagger-child {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .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 rgba(221, 167, 79, 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: rgba(221, 167, 79, 0.36);
  background: linear-gradient(135deg, rgba(221, 167, 79, 0.14) 0%, rgba(221, 167, 79, 0.04) 100%);
  transform: translateY(-1px);
}
  background: linear-gradient(
    135deg,
    rgba(221, 167, 79, 0.08) 0%,
    rgba(221, 167, 79, 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: rgba(221, 167, 79, 0.15);
  color: var(--color-primary);
  border: 1px solid rgba(221, 167, 79, 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 {
  display: block;
  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 {
  display: inline;
  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;
}

/* Trust strip — horizontal row of trust signals with SVG icons */
.wd-pdp-trust {
  list-style: none !important;
  padding: 0.75rem 1rem !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  background: rgba(221, 167, 79, 0.05);
  border: 1px solid rgba(221, 167, 79, 0.12);
  border-radius: 10px;
}

.wd-pdp-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
}

.wd-pdp-trust li svg {
  flex-shrink: 0;
  color: var(--color-primary);
  opacity: 0.95;
}

/* 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 are hardcoded to the Wisdom Dream dark-luxury palette. */
.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: rgba(19, 17, 39, 0.94);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid rgba(221, 167, 79, 0.28);
  transform: translateY(calc(100% + 20px));
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  color: #f4f4f6;
}

.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: #f4f4f6;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.wd-sticky-cta__price {
  color: #dda74f;
  font-size: 1rem;
}

.wd-sticky-cta__sub {
  font-size: 0.6875rem;
  color: rgba(244, 244, 246, 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: #131127;
  background: #dda74f;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(221, 167, 79, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}

.wd-sticky-cta__btn:hover,
.wd-sticky-cta__btn:focus-visible {
  background: #e6b562;
  transform: translateY(-1px);
}

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

@media (min-width: 900px) {
  /* On desktop the form is always in-column; sticky bar adds noise */
  .wd-sticky-cta { display: none; }
}

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

/* On mobile, reserve extra scroll room at the bottom of PDP so the sticky
   CTA never overlaps the last compare card / footer content. */
@media (max-width: 899px) {
  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);
  }
}

@media (max-width: 640px) {
  .wd-pdp-trust {
    flex-direction: column;
    gap: 0.25rem;
  }
}

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

.wd-pdp-details {
  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) ───── */
.wd-pdp-excerpt {
  position: relative;
  margin: 0 auto 1.5rem;
  max-width: 720px;
  padding: 2rem 2rem 3rem;
  border: 1px solid rgba(var(--color-foreground-rgb, 244, 244, 246), 0.1);
  border-radius: 16px;
  background:
    linear-gradient(to bottom, rgba(255,255,255, 0.03), rgba(255,255,255, 0.01));
  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(--color-primary);
  opacity: 0.25;
  line-height: 1;
}

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

.wd-pdp-excerpt blockquote {
  margin: 0;
  color: var(--color-foreground);
  opacity: 0.95;
  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(--color-background, #131127));
  pointer-events: none;
}

@media (max-width: 640px) {
  .wd-pdp-excerpt {
    padding: 1.5rem 1.25rem 2.25rem;
    border-radius: 14px;
  }
  .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, #131127);
  background: var(--color-primary, #dda74f);
  border: none;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 20px rgba(221, 167, 79, 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: #e6b562;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(221, 167, 79, 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: 2rem;
}

@media (max-width: 640px) {
  .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: rgba(221, 167, 79, 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: rgba(221, 167, 79, 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: rgba(221, 167, 79, 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, #131127) !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 rgba(221, 167, 79, 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}

.cart-page--empty .button:hover {
  background: #e6b562 !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, #131127) !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 rgba(221, 167, 79, 0.22);
}

.cart-summary .button--primary:hover {
  background: #e6b562 !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 rgba(221, 167, 79, 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: rgba(221, 167, 79, 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, #131127);
  box-shadow: 0 4px 18px rgba(221, 167, 79, 0.22);
}

.wd-method-tail__btn--primary:hover {
  background: #e6b562;
  transform: translateY(-1px);
}

.wd-method-tail__btn--ghost {
  background: transparent;
  color: var(--color-foreground);
  border: 1px solid rgba(221, 167, 79, 0.35);
}

.wd-method-tail__btn--ghost:hover {
  border-color: var(--color-primary);
  background: rgba(221, 167, 79, 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: #1d1b3a !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-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 rgba(221, 167, 79, 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 {
  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: rgba(221, 167, 79, 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).
   ============================================================ */
.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, rgba(221, 167, 79, 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, rgba(106, 90, 205, 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:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(var(--color-foreground-rgb, 244, 244, 246), 0.22);
  opacity: 1;
}

.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;
  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;
  }
}

.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;
  color: var(--color-foreground);
  opacity: 0.78;
  margin: 0 0 2rem;
  max-width: 540px;
}

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

.wd-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-block-end: 1rem;
}

.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 rgba(221, 167, 79, 0.20),
    0 0 28px rgba(221, 167, 79, 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 rgba(221, 167, 79, 0.30),
    0 0 36px rgba(221, 167, 79, 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: rgba(221, 167, 79, 0.06);
  transform: translateY(-2px);
}

.wd-hero__btn-arrow {
  display: inline-block;
  margin-inline-start: 0.15rem;
  opacity: 0.7;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.wd-hero__btn:hover .wd-hero__btn-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.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 one centered row.
   On mobile this stays a row (not a stacked list) — the items are
   short enough to fit at 320px and the horizontal layout reads as a
   deliberate meta-line below the CTAs rather than dropped-in body
   text. Items separated by middot pseudo-elements between them. */
.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;
}

.wd-hero__trust li + li::before {
  content: "·";
  position: absolute;
  left: -0.75rem;
  color: var(--color-foreground);
  opacity: 0.7;
}

/* 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 {
    justify-content: center;
    gap: 0.35rem 1.1rem;
  }
}

/* When smooth-scrolling lands on the sample picker, leave room above
   so the sticky announcement bar + header don't cover the buttons. */
#sample-preview-picker {
  scroll-margin-top: 130px;
}

/* 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;
  }
  .wd-hero__h1 {
    max-width: none;
  }
}

/* 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 rgba(244, 244, 246, 0.18);
  border-radius: 8px;
  color: #f4f4f6;
  font-size: 1rem;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  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: #dda74f;
  box-shadow: 0 0 0 2px rgba(221, 167, 79, 0.2);
}

.astro-time-row select option {
  background: #131127;
  color: #f4f4f6;
}

/* 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: rgba(8, 6, 22, 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: #16142b;
  border: 1px solid rgba(244, 244, 246, 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 rgba(244, 244, 246, 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: #dda74f;
}

.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: #f4f4f6;
  line-height: 1.15;
}

.wd-sample-modal__close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244, 244, 246, 0.18);
  border-radius: 999px;
  background: transparent;
  color: #f4f4f6;
  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: #dda74f;
  color: #dda74f;
  outline: none;
}

.wd-sample-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #0e0c1f;
  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: #1a1834;
  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: #1a1834;
}

.wd-sample-modal__end {
  margin: 1.5rem auto 0.5rem;
  text-align: center;
  color: rgba(244, 244, 246, 0.5);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.wd-sample-modal__inline-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 2.5rem auto;
  padding: 1.75rem 1.5rem;
  max-width: 520px;
  border-top: 1px solid rgba(var(--color-foreground-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.08);
  text-align: center;
}

.wd-sample-modal__inline-cta-text {
  margin: 0;
  font-size: 0.9375rem;
  opacity: 0.78;
  font-style: italic;
}

.wd-sample-modal__inline-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  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 {
  background: var(--color-primary-button-hover-background, var(--color-primary-button-background));
  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 rgba(244, 244, 246, 0.06);
}

.wd-sample-modal__foot-label {
  color: rgba(244, 244, 246, 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: #dda74f;
  color: #131127;
  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: #e8b768;
  color: #131127;
  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;
}

/* ─────────────────────────────────────────────────────────────
   Hero "skip-ahead" price chips
   Sit below the primary "Read a real sample" CTA. Editorial
   serif italic prefix + two low-weight tier links with prices.
   Visually unmistakable as secondary affordances, not parallel
   primary CTAs. Existing buy buttons in tier-selector below the
   fold do the close.
   ───────────────────────────────────────────────────────────── */
.wd-hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.4rem;
  margin-block-start: 1rem;
  margin-block-end: 1.25rem;
  font-family: var(--font-heading--family);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.wd-hero__chips-prefix {
  font-style: italic;
  opacity: 0.55;
  margin-inline-end: 0.05rem;
  letter-spacing: 0.005em;
}

.wd-hero__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--color-foreground);
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 220ms ease, color 220ms ease, gap 220ms ease;
  position: relative;
  padding-block: 0.15rem;
}

.wd-hero__chip-name {
  font-weight: 500;
  letter-spacing: 0.005em;
}

.wd-hero__chip-price {
  opacity: 0.62;
  font-weight: 400;
  font-variant-numeric: lining-nums;
}

.wd-hero__chip::after {
  content: '→';
  display: inline-block;
  margin-inline-start: 0.05em;
  font-size: 0.92em;
  opacity: 0.7;
  transition: transform 220ms ease, opacity 220ms ease;
}

.wd-hero__chip:hover,
.wd-hero__chip:focus-visible {
  opacity: 1;
  color: var(--color-primary);
  outline: none;
}

.wd-hero__chip:hover::after,
.wd-hero__chip:focus-visible::after {
  transform: translateX(4px);
  opacity: 1;
}

@media (max-width: 640px) {
  .wd-hero__chips {
    font-size: 1rem;
    gap: 0.4rem 1.1rem;
  }
  .wd-hero__chips-prefix {
    flex-basis: 100%;
    margin-block-end: 0.1rem;
  }
}

/* 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.

   Hex values mirror color-scheme-3067b223-ff26-4778-97f1-c6472b9386ee
   (dark indigo + cream + gold). If Lucas re-themes later, update the
   hex values here in one place. */

.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: rgb(19 17 39 / 1);
  --color-background-rgb: 19 17 39;
  --color-foreground: rgb(244 244 246 / 1);
  --color-foreground-rgb: 244 244 246;
  --color-foreground-heading: rgb(244 244 246 / 1);
  --color-foreground-heading-rgb: 244 244 246;
  --color-primary: rgb(221 167 79 / 1);
  --color-primary-rgb: 221 167 79;
  --color-primary-hover: rgb(232 188 113 / 1);
  --color-primary-hover-rgb: 232 188 113;
  --color-border: rgb(244 244 246 / 0.18);
  --color-border-rgb: 244 244 246;

  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(244 244 246 / 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(244 244 246 / 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);
}