/** Shopify CDN: Minification failed

Line 2728:0 Expected "}" to go with "{"

**/
  /* Override veluna-section padding for hero section */
  .recovery-cream-hero.veluna-section {
    padding-block: 0 !important;
    padding-inline: 0 !important;
  }
  
  .recovery-cream-hero {
    padding: 0;
    background: var(--background-1, #fff);
    --border-subtle: #ffffff;
    overflow: visible !important; /* CRITICAL: Allow sticky to work */
  }
  
  /* VELUNA_PROOF_TILE6_CSS_PARITY 2026-01-01T03:00:00Z */
  .recovery-cream-hero .veluna-max-width {
    padding-inline: 32px;
    background: #ffffff !important;
    overflow: visible !important; /* CRITICAL: Allow sticky to work */
  }

  .recovery-cream-hero__container,
  .recovery-cream-hero__images,
  .recovery-cream-hero__info,
  .recovery-cream-hero__velunasub,
  .recovery-cream-hero__purchase-type,
  .recovery-cream-hero__schedule,
  .recovery-cream-hero__form,
  .recovery-cream-hero__form-card {
    background: #ffffff !important;
    border-color: #ffffff !important;
  }
  
  /* Desktop: Two column grid layout - ONLY on desktop (≥769px) */
  @media (min-width: 769px) {
    .recovery-cream-hero__container {
      display: grid !important;
      grid-template-columns: 1fr 680px !important; /* Default desktop: keep existing for 769-989px */
      grid-template-areas: "media info" !important;
      gap: 80px; /* Default desktop gap */
      align-items: start !important; /* Start alignment - let each column use its natural height */
      width: 100%;
      max-width: 1680px;
      margin-inline: auto;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      padding-block: var(--space-8, 2rem);
      position: static !important; /* ARRAE PATTERN: Use static (not relative) to match Arrae */
      overflow: visible !important; /* PHASE 2 FIX: Explicit overflow visible for sticky */
      overflow-y: visible !important;
      clip-path: inset(0 0 0 0); /* CRITICAL: Clips carousel to hero section bounds */
    }
    
    /* LEFT GRID ITEM: JavaScript handles sticky - CSS must not override */
    .recovery-cream-hero__images {
      position: static !important; /* JavaScript will set to fixed when needed - CSS must not interfere */
      align-self: start !important; /* Start alignment */
      display: flex !important;
      flex-direction: column !important;
      height: auto !important; /* Natural content height */
      min-height: 0 !important;
      max-height: none !important; /* JavaScript will handle clipping */
      overflow: hidden !important; /* CRITICAL: Clip carousel at section boundaries */
      clip-path: inset(0); /* CRITICAL: Ensures carousel stays within hero section */
      z-index: 0 !important; /* Always behind other sections - prevents flashing */
      transition: none !important; /* Disable transitions to prevent flashing */
    }
    
    /* Desktop Carousel - Show on desktop, hide on mobile */
    .recovery-cream-hero__images-desktop-carousel {
      display: block !important;
      width: 100% !important;
      position: relative !important;
      visibility: visible !important;
    }
    
    /* Hide old mosaic on desktop - carousel replaces it */
    .recovery-cream-hero__images-desktop {
      display: none !important;
      visibility: hidden !important;
    }
    
    .recovery-cream-hero__carousel-desktop {
      position: relative !important;
      width: 100% !important;
      overflow: hidden !important;
      background: #fff !important;
      border-radius: 24px !important;
      min-height: 0 !important;
      height: auto !important;
    }
    
    .recovery-cream-hero__carousel-track-desktop {
      display: flex !important;
      transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
      will-change: transform !important;
      position: relative !important;
      height: auto !important;
      min-height: 0 !important;
    }
    
    .recovery-cream-hero__carousel-slide-desktop {
      flex: 0 0 auto !important;
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
      /* Width will be set by JavaScript to carousel width */
      min-width: 0 !important;
      max-width: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;
    }
    
    .recovery-cream-hero__carousel-slide-desktop img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      border-radius: 24px !important;
      object-fit: contain !important;
      object-position: center !important;
      max-width: 100% !important;
      flex-shrink: 0 !important;
    }
    
    .recovery-cream-hero__carousel-controls-desktop {
      position: absolute !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 100% !important;
      display: flex !important;
      justify-content: space-between !important;
      pointer-events: none !important;
      padding: 0 16px !important;
      z-index: 2 !important;
    }
    
    .recovery-cream-hero__carousel-btn-desktop {
      background: rgba(255, 255, 255, 0.9) !important;
      border: none !important;
      width: 48px !important;
      height: 48px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      pointer-events: auto !important;
      transition: all 0.2s ease !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    .recovery-cream-hero__carousel-btn-desktop:hover {
      background: rgba(255, 255, 255, 1) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }
    
    .recovery-cream-hero__carousel-btn-desktop svg {
      width: 24px !important;
      height: 24px !important;
      stroke-width: 2 !important;
    }
    
    .recovery-cream-hero__carousel-dots-desktop {
      display: flex !important;
      justify-content: center !important;
      gap: 8px !important;
      margin-top: 16px !important;
      z-index: 2 !important;
    }
    
    .recovery-cream-hero__carousel-dot-desktop {
      width: 8px !important;
      height: 8px !important;
      border-radius: 50% !important;
      border: none !important;
      background: rgba(0, 0, 0, 0.3) !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      padding: 0 !important;
    }
    
    .recovery-cream-hero__carousel-dot-desktop.is-active {
      background: rgba(0, 0, 0, 0.8) !important;
      width: 24px !important;
      border-radius: 4px !important;
    }
    
    /* INNER CONTAINER: Natural height based on content - 1-2-2 layout, no overlap */
    .recovery-cream-hero__images-desktop {
      display: flex !important;
      visibility: visible !important;
      position: relative !important;
      top: auto !important;
      height: auto !important; /* Natural height - sum of image heights + gaps */
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
      left: auto !important;
      flex-direction: column !important;
      gap: 0.75rem !important; /* Gap between rows */
      justify-content: flex-start !important; /* Stack images from top */
      align-items: stretch !important;
    }
    
    /* 1-2-2 Mosaic: ARRAE PATTERN - Natural heights, no flex ratios, images stack vertically */
    .recovery-cream-hero__image-row--single {
      width: 100% !important;
      min-height: 0 !important;
      display: flex !important;
      align-items: stretch !important;
      flex-shrink: 0 !important; /* ARRAE: Don't shrink - maintain natural image height */
      /* ARRAE: No flex ratio - first image is naturally larger, determines its own height */
    }
    
    .recovery-cream-hero__image-row--double {
      width: 100% !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 0.75rem !important;
      align-items: stretch !important;
      flex-shrink: 0 !important; /* ARRAE: Don't shrink - maintain natural image heights */
      /* ARRAE: No flex ratio or height: 100% - images determine their own heights */
    }
    
    /* Image Items: ARRAE PATTERN - Natural aspect ratios, no stretching */
    .recovery-cream-hero__image-item--full {
      width: 100% !important;
      min-height: 0 !important;
      display: block !important; /* ARRAE: Block display for natural flow */
      /* ARRAE: No height constraint - image determines height */
    }
    
    .recovery-cream-hero__image-item--half {
      width: 100% !important;
      min-height: 0 !important;
      display: block !important; /* ARRAE: Block display for natural flow */
      /* ARRAE: No height constraint - image determines height */
    }
    
    .recovery-cream-hero__image-item img {
      width: 100% !important;
      height: auto !important; /* ARRAE PATTERN: Natural aspect ratio - prevents overlap and stretching */
      min-height: 0 !important;
      object-fit: cover !important; /* ARRAE: Cover maintains aspect ratio */
      display: block !important;
      /* ARRAE: Images stack naturally - no height: 100% to avoid stretching */
    }
  }
  
  /* Arrae/AG1-style: Larger media column at >=990px */
  @media (min-width: 990px) {
    .recovery-cream-hero__container {
      grid-template-columns: minmax(520px, 48vw) minmax(520px, 1fr) !important; /* Arrae/AG1-like: larger media, balanced columns */
      gap: clamp(32px, 4vw, 64px) !important; /* Responsive gap: scales with viewport */
      align-items: start !important; /* Start alignment - let each column use its natural height */
    }
    
    /* ARRAE/AG1: Larger media at >=990px - JavaScript handles sticky */
    .recovery-cream-hero__images {
      position: static !important; /* JavaScript will set to fixed when needed */
      align-self: start !important; /* Start alignment */
      display: flex !important; /* Keep flex for vertical stacking */
      height: auto !important; /* Natural content height */
      min-height: 0 !important;
      max-height: none !important; /* JavaScript will handle clipping */
      overflow: visible !important; /* Allow natural scrolling */
    }
    
    .recovery-cream-hero__images-desktop {
      position: relative !important;
      top: auto !important;
      height: auto !important; /* Natural height - no flex stretching */
      min-height: 0 !important;
      max-height: none !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 0.75rem !important; /* Gap between rows */
      justify-content: flex-start !important;
      align-items: stretch !important;
    }
    
    .recovery-cream-hero__image-row--single {
      width: 100% !important;
      min-height: 0 !important;
      display: flex !important;
      align-items: stretch !important;
    }
    
    .recovery-cream-hero__image-row--double {
      width: 100% !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 0.75rem !important; /* Gap between two images in double row */
      align-items: stretch !important;
    }
    
    .recovery-cream-hero__image-item--full,
    .recovery-cream-hero__image-item--half {
      width: 100% !important;
      min-height: 0 !important;
      display: block !important; /* Block for natural flow */
    }
    
    .recovery-cream-hero__image-item img {
      width: 100% !important;
      height: auto !important; /* Natural aspect ratio - no overlap */
      min-height: 0 !important;
      object-fit: cover !important;
      display: block !important;
    }
  }

  /* Keep two columns inside theme editor (design mode), even when viewport is narrow from sidebars */
  .shopify-design-mode .recovery-cream-hero__container {
    display: grid !important;
    grid-template-columns: minmax(320px, 1fr) minmax(420px, 1fr) !important;
    grid-template-areas: "media info" !important;
    gap: var(--space-12, 3rem);
  }
  
  /* Shopify editor safety: Disable sticky in design mode to prevent flaky behavior */
  @media (min-width: 769px) {
    .shopify-design-mode .recovery-cream-hero__images-desktop {
      position: relative !important;
      top: auto !important;
    }
  }

  /* In editor, keep two columns even when preview pane is narrow (but not on mobile) */
  @media (min-width: 821px) and (max-width: 900px) {
    .shopify-design-mode .recovery-cream-hero__container {
      grid-template-columns: minmax(320px, 1fr) minmax(420px, 1fr) !important;
      grid-template-areas: "media info" !important;
      gap: var(--space-8, 2rem);
    }
  }

  .recovery-cream-hero__container > * {
    min-width: 0;
  }

  /* Force layout: images left, all content (toggles, cross-sell, testimonials) right */
  .recovery-cream-hero__images {
    grid-area: media;
    /* Base: Ensure no conflicting position/alignment/top set here */
    /* Sticky positioning and Arrae-style mosaic applied in @media (min-width: 769px) */
    /* DO NOT set position or top here - let media query handle it */
  }
  
  /* Base: Ensure container allows sticky (no align-items stretch without media query) */
  .recovery-cream-hero__container {
    /* Grid and sticky rules applied in @media (min-width: 769px) */
    /* Do NOT set align-items here - let media query handle it */
  }
  
  /* Base: Ensure desktop mosaic container is visible (will be styled at 769px+) */
  .recovery-cream-hero__images-desktop {
    /* Display and layout rules applied in @media (min-width: 769px) */
  }
  .recovery-cream-hero__info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: var(--space-10, 2.5rem);
    font-size: 16px;
    line-height: 1.6 !important;
    font-weight: 400;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 0.5rem;
  }

  .recovery-cream-hero__form-card {
    border: 1px solid #ffffff;
    border-radius: 24px;
    padding: 32px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: var(--space-8, 2rem);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .recovery-cream-hero__form-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #ffffff;
  }
  
  /* AG1/Arrae-style: Sticky left images, scrolling right content - FORCE ALL STYLES */
  @media (min-width: 769px) {
    /* PHASE 2 FIX: Ensure ancestors don't break sticky - template-scoped overrides */
    .recovery-cream-hero .veluna-max-width {
      overflow: visible !important; /* Prevent any overflow from breaking sticky */
      overflow-y: visible !important;
    }
    
    .recovery-cream-hero {
      overflow: visible !important; /* Prevent section overflow from breaking sticky */
      overflow-y: visible !important;
    }
    
    /* NOTE: .recovery-cream-hero__images and .recovery-cream-hero__images-desktop rules
       are now defined in the first @media (min-width: 769px) block above (line ~2560)
       to use Arrae-style flex: 1 / height: 100% instead of 100vh.
       This removes the blank runway in editor preview (769-989px). */
    
    /* NOTE: Image row and item rules are now defined in the first @media (min-width: 769px) block
       above (line ~2560) to use Arrae-style flex ratios instead of fixed 50vh/25vh heights.
       This ensures the mosaic fills the full left column height at 769-989px. */
  }

  .recovery-cream-hero__images-mobile {
    display: none;
  }
  
  /* Mobile: Simple gallery layout (NO sticky, NO 2-column grid) - ONLY on mobile */
  @media (max-width: 768px) {
    /* Mobile container: Simple vertical stack, NOT a grid */
    .recovery-cream-hero__container {
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: none !important;
      grid-template-areas: none !important;
      gap: var(--space-8, 2rem) !important;
    }
    
    /* Mobile images: NOT sticky, simple gallery */
    .recovery-cream-hero__images {
      position: static !important; /* NOT sticky on mobile */
      top: auto !important;
      width: 100% !important;
      grid-area: auto !important; /* Remove grid-area */
    }
    
    /* Hide desktop carousel and mosaic on mobile */
    .recovery-cream-hero__images-desktop-carousel {
      display: none !important;
    }
    
    .recovery-cream-hero__images-desktop {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    
    /* Show mobile carousel on mobile */
    .recovery-cream-hero__images-mobile {
      display: block !important;
    }
    
    /* Show mobile carousel gallery on mobile */
    .recovery-cream-hero__images-mobile {
      display: block !important;
      width: 100% !important;
      position: static !important;
    }
    
    .recovery-cream-hero__image-row {
      display: none !important;
    }
    
    .recovery-cream-hero__image-row--single,
    .recovery-cream-hero__image-row--double {
      display: none !important;
    }
    
    /* Mobile info: Full width, below gallery */
    .recovery-cream-hero__info {
      width: 100% !important;
      grid-area: auto !important; /* Remove grid-area */
    }
  }

  /* HARDENED: Force rounded corners - but don't override our layout - DESKTOP ONLY */
  @media (min-width: 769px) {
    .recovery-cream-hero__image-item,
    .recovery-cream-hero__image-item--full,
    .recovery-cream-hero__images-desktop .recovery-cream-hero__image-item,
    .recovery-cream-hero__images-desktop .recovery-cream-hero__image-item--full,
    .recovery-cream-hero__images .recovery-cream-hero__image-item {
      border-radius: 24px !important;
      -webkit-border-radius: 24px !important;
      -moz-border-radius: 24px !important;
      overflow: hidden !important;
      background: #ffffff !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      clip-path: inset(0 round 24px) !important; /* HARDENED: Alternative method for rounded corners */
      /* Layout properties are handled by the sticky layout CSS above */
    }
  }
  
  .recovery-cream-hero__image-item--full {
    width: 100%;
  }
  
  /* Image rows are now used for 1-2-2 layout on desktop */
  @media (max-width: 768px) {
    .recovery-cream-hero__image-row {
      display: none; /* Hide grid rows on mobile */
    }
  }
  
  .recovery-cream-hero__image-item:hover {
    transform: translateY(-2px); /* HARDENED: Subtle hover lift */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* HARDENED: Subtle hover elevation */
  }
  
  /* HARDENED: Force rounded corners on images - highest specificity - override everything - DESKTOP ONLY */
  @media (min-width: 769px) {
    .recovery-cream-hero__image-item img,
    .recovery-cream-hero__images-desktop img,
    .recovery-cream-hero__image-item--full img,
    .recovery-cream-hero__images-desktop .recovery-cream-hero__image-item img,
    .recovery-cream-hero__images-desktop .recovery-cream-hero__image-item--full img,
    .recovery-cream-hero__images .recovery-cream-hero__image-item img,
    .recovery-cream-hero__images-desktop .recovery-cream-hero__image-item--full img,
    img[src*="recovery"],
    .recovery-cream-hero img {
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important;
      object-position: center !important;
      display: block !important;
      background: #ffffff !important;
      min-height: 100% !important;
      border-radius: 24px !important;
      -webkit-border-radius: 24px !important;
      -moz-border-radius: 24px !important;
      border: none !important;
      clip-path: inset(0 round 24px) !important; /* HARDENED: Alternative method for rounded corners */
    }
  }
  
  /* Mobile Carousel Styles - Arrae-style - ONLY on mobile */
  @media (max-width: 768px) {
    .recovery-cream-hero__carousel {
      position: relative;
      width: 100%;
      overflow: hidden;
      background: #fff;
      touch-action: pan-y pinch-zoom;
      min-height: 0;
      height: auto;
      margin: 0;
      padding: 0;
    }
    
    .recovery-cream-hero__carousel-track {
      display: flex;
      transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
      position: relative;
      height: auto;
      min-height: 0;
    }
    
    .recovery-cream-hero__carousel-slide {
      flex: 0 0 auto;
      flex-shrink: 0;
      flex-grow: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: #fff;
      padding: 0;
      margin: 0;
      min-height: 0;
      height: auto;
      box-sizing: border-box;
      overflow: hidden;
      /* Prevent click/touch from causing page scroll */
      touch-action: pan-y pinch-zoom;
      -webkit-tap-highlight-color: transparent;
    }
    
    .recovery-cream-hero__carousel-slide img {
      width: 100%;
      height: auto;
      max-height: 50vh;
      object-fit: contain;
      object-position: center;
      display: block;
      visibility: visible;
      opacity: 1;
      margin: 0;
      padding: 0;
    }
    
    @media (max-width: 480px) {
      .recovery-cream-hero__carousel-slide img {
        max-height: 45vh;
      }
    }
  }
  
  /* Mobile-only carousel controls and thumbnails */
  @media (max-width: 768px) {
    .recovery-cream-hero__carousel-controls {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      display: flex;
      justify-content: space-between;
      padding: 0 16px;
      pointer-events: none;
      z-index: 2;
    }
    
    .recovery-cream-hero__carousel-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: all;
      color: #131313;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
      transition: all 0.2s ease;
      opacity: 0.8;
    }
    
    .recovery-cream-hero__carousel-btn:hover {
      opacity: 1;
      background: rgba(255, 255, 255, 1);
    }
    
    .recovery-cream-hero__carousel-btn:active {
      transform: scale(0.92);
    }
    
    .recovery-cream-hero__carousel-btn svg {
      width: 18px;
      height: 18px;
    }
    
    .recovery-cream-hero__carousel-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 12px 0 16px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
    }
    
    .recovery-cream-hero__carousel-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, 0.25);
      cursor: pointer;
      padding: 0;
      transition: all 0.25s ease;
      /* Prevent tap highlight and page scroll on mobile */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select: none;
    }
    
    .recovery-cream-hero__carousel-dot.is-active {
      background: rgba(0, 0, 0, 0.85);
      width: 20px;
      border-radius: 10px;
    }
    
    /* Thumbnail gallery preview */
    .recovery-cream-hero__thumbnail-gallery {
      display: flex;
      gap: 8px;
      padding: 8px 16px;
      margin: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      background: #fff;
    }
    
    .recovery-cream-hero__thumbnail-gallery::-webkit-scrollbar {
      display: none;
    }
    
    .recovery-cream-hero__thumbnail {
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border: 2px solid transparent;
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      cursor: pointer;
      padding: 0;
      transition: all 0.2s ease;
      position: relative;
      /* Prevent tap highlight and page scroll on mobile */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select: none;
    }
    
    .recovery-cream-hero__thumbnail.is-active {
      border-color: #131313;
    }
    
    .recovery-cream-hero__thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    .recovery-cream-hero__thumbnail:hover {
      opacity: 0.8;
    }
  }
  
  .recovery-cream-hero__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-eyebrow, #7A746A);
    font-size: var(--font-size-base, 1rem);
  }
  
  /* VELUNA_PROOF_TILE12_TYPOGRAPHY 2026-01-01T06:10:00Z - Base typography reset to match Arrae */
  .recovery-cream-hero__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 1.5rem);
    background: #ffffff !important;
    font-size: 16px; /* Matches Arrae canon (base 16px) */
    line-height: normal !important; /* Override global line-height: 1.6 to match Arrae */
    font-weight: 400; /* Matches Arrae canon (base 400) */
  }
  
  .recovery-cream-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    color: var(--text-heading, #131313);
    font-family: var(--font-serif);
    line-height: 1.2;
    margin: 0 0 var(--space-4, 1rem) 0;
    text-align: center !important;
  }
  
  /* VELUNA_PROOF_TILE12_TYPOGRAPHY 2026-01-01T06:10:00Z - Typography aligned to Arrae scale */
  .recovery-cream-hero__subheadline {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--text-body, #333333);
    line-height: normal !important; /* Matches Arrae canon (normal, not 1.6) */
    margin-bottom: var(--space-6, 1.5rem);
    text-align: center !important;
  }

  .pdp-inline-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
  }

  .pdp-inline-rating__stars {
    display: inline-flex;
    gap: 0.2rem;
  }

  .pdp-inline-rating__star {
    font-size: 1.1rem;
    line-height: 1;
    color: #2f2f2f;
  }

  .pdp-inline-rating__star--filled {
    color: #C8A27B;
  }

  .pdp-inline-rating__score {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1f1f1f;
  }

  .pdp-inline-rating__count {
    font-size: 0.8125rem;
    color: #555;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .pdp-founding-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin: 0 0 0.85rem;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(90deg, rgba(200,162,123,0.10), rgba(200,162,123,0.18), rgba(200,162,123,0.10));
    border: 1px solid rgba(200,162,123,0.38);
    border-radius: 14px;
    color: #1f1f1f;
    text-align: left;
  }

  .pdp-founding-bar__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.35;
  }

  .pdp-founding-bar__lead {
    font-size: 0.82rem;
    letter-spacing: 0.005em;
    color: #1f1f1f;
  }

  .pdp-founding-bar__sub {
    font-size: 0.74rem;
    color: #5a4a36;
    letter-spacing: 0.005em;
  }

  .pdp-founding-bar strong {
    color: #8a5a2a;
    font-weight: 700;
  }

  .pdp-founding-bar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C8A27B;
    box-shadow: 0 0 0 0 rgba(200,162,123,0.6);
    animation: pdp-founding-pulse 1.8s infinite;
    flex-shrink: 0;
    margin-top: 0.35rem;
    align-self: flex-start;
  }

  @media (max-width: 640px) {
    .pdp-founding-bar { padding: 0.55rem 0.75rem; gap: 0.5rem; }
    .pdp-founding-bar__lead { font-size: 0.78rem; }
    .pdp-founding-bar__sub { font-size: 0.7rem; }
  }

  @keyframes pdp-founding-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(200,162,123,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(200,162,123,0); }
    100% { box-shadow: 0 0 0 0 rgba(200,162,123,0); }
  }

  .pdp-authority-strip {
    list-style: none;
    margin: 0 0 var(--space-6, 1.5rem);
    padding: 0.75rem 0.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  .pdp-authority-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #2a2a2a;
    text-transform: uppercase;
  }

  .pdp-authority-strip__item svg {
    width: 22px;
    height: 22px;
    color: #C8A27B;
  }

  @media (max-width: 480px) {
    .pdp-authority-strip { padding: 0.6rem 0.25rem; gap: 0.35rem; }
    .pdp-authority-strip__item { font-size: 0.62rem; }
    .pdp-authority-strip__item svg { width: 20px; height: 20px; }
  }

  .pdp-social-proof-live {
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #444444;
  }

  .pdp-per-night {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 var(--space-6, 1.5rem);
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.3;
    color: #555;
    width: 100%;
    justify-content: center;
  }

  .pdp-per-night strong {
    color: #C8A27B;
    font-weight: 700;
  }

  .pdp-per-night__moon {
    color: #C8A27B;
    flex-shrink: 0;
  }
  
  .recovery-cream-hero__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6, 1.5rem) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
  }
  
  .recovery-cream-hero__benefits li {
    font-size: 16px !important; /* Matches Arrae canon (16px base) */
    color: var(--text-body, #333333);
    line-height: normal !important; /* Matches Arrae canon (normal, not 1.6) */
    padding-left: var(--space-6, 1.5rem);
    position: relative;
  }
  
  .recovery-cream-hero__benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--veluna-ember, #c97d60);
    font-weight: 600;
  }
  
  /* VelunaSub - Arrae-style Subscription Selector */
  /* VELUNA_PROOF_CRITICAL_FIX_2026-01-01T08:45:00Z - Ensure subscription selector is visible */
  .recovery-cream-hero__velunasub {
    margin-bottom: var(--space-6, 1.5rem);
    display: block !important; /* Force visibility - critical for purchase type selection */
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .recovery-cream-hero__purchase-type {
    margin-bottom: var(--space-5, 1.25rem);
  }
  
  .recovery-cream-hero__purchase-type-title {
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--text-heading, #131313);
    margin: 0 0 var(--space-3, 0.75rem) 0;
  }
  
  .recovery-cream-hero__purchase-type-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: #ffffff !important;
  }
  
  /* Match product side cart purchase type styling */
  [data-veluna-purchase-type] .recovery-cream-hero__purchase-type-option {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #131313;
    min-width: 0;
    margin-top: 0;
  }
  
  [data-veluna-purchase-type] .recovery-cream-hero__purchase-type-option:hover {
    border-color: rgba(0, 0, 0, 0.15);
  }
  
  [data-veluna-purchase-type] .recovery-cream-hero__purchase-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    width: 0;
    height: 0;
  }
  
  /* Selected state: black background with white text - match product side cart */
  [data-veluna-purchase-type] .recovery-cream-hero__purchase-type-option:has(input[type="radio"]:checked),
  [data-veluna-purchase-type] .recovery-cream-hero__purchase-type-option.selected {
    border-color: #131313;
    background: #131313;
    color: #ffffff;
  }
  
  [data-veluna-purchase-type] .recovery-cream-hero__purchase-type-option input[type="radio"]:checked ~ span {
    color: inherit;
  }
  
  /* Badge styling - match product side cart */
  .recovery-cream-hero__savings-badge {
    background: rgba(201, 125, 96, 0.15);
    color: #c97d60;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  
  [data-veluna-purchase-type] .recovery-cream-hero__purchase-type-option:has(input[type="radio"]:checked) .recovery-cream-hero__savings-badge,
  [data-veluna-purchase-type] .recovery-cream-hero__purchase-type-option.selected .recovery-cream-hero__savings-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }
  
  .recovery-cream-hero__schedule {
    margin-bottom: var(--space-5, 1.25rem);
  }
  
  .recovery-cream-hero__schedule-header {
    display: flex !important; /* HARDENED: Layout locked */
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: var(--space-3, 0.75rem) !important;
    gap: var(--space-4, 1rem) !important;
    flex-wrap: wrap !important;
  }
  
  .recovery-cream-hero__schedule-title {
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--text-heading, #131313);
    margin: 0;
    flex-shrink: 0;
  }
  
  .recovery-cream-hero__schedule-note {
    font-size: var(--font-size-sm, 0.875rem) !important; /* HARDENED: Prevent font-size changes */
    color: var(--text-body, #6c757d) !important;
    opacity: 0.7 !important;
    text-align: right !important;
    line-height: 1.4 !important;
    flex: 1;
    min-width: 200px;
    /* HARDENED: Content locked - "Free Shipping in US with +$50 order or with Subscription." */
  }
  
  .recovery-cream-hero__schedule-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
  }
  
  /* Arrae-style: Schedule cards with save pill inline and price on right */
  [data-veluna-plan-card],
  .recovery-cream-hero__schedule-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem; /* HARDENED: Increased gap for better spacing */
    padding: 1.25rem 1.5rem; /* HARDENED: More generous padding */
    border: 1px solid #ffffff;
    border-radius: 18px !important; /* HARDENED: Smoother border-radius for better UX */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* HARDENED: Premium easing */
    background: var(--background-1, #fff);
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); /* HARDENED: Subtle shadow for depth */
  }
  
  [data-veluna-plan-card]:hover,
  .recovery-cream-hero__schedule-option:hover {
    border-color: #ffffff;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* HARDENED: Enhanced shadow on hover */
    transform: translateY(-1px); /* HARDENED: Subtle lift on hover */
  }
  
  [data-veluna-plan-card] input[type="radio"],
  .recovery-cream-hero__schedule-option input[type="radio"] {
    margin: 0;
    margin-right: 0.75rem;
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  
  [data-veluna-plan-card] .recovery-cream-hero__schedule-option-content,
  .recovery-cream-hero__schedule-option-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
  }
  
  .recovery-cream-hero__schedule-option-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-heading, #131313);
    line-height: 1.3;
  }
  
  .recovery-cream-hero__schedule-option-desc {
    font-size: 0.8125rem;
    color: var(--text-body, #6c757d);
    line-height: 1.4;
  }
  
  /* Save pill inline - clean chip style */
  [data-veluna-plan-save],
  .recovery-cream-hero__schedule-option-save {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--veluna-ember, #c97d60);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--veluna-ember, #c97d60);
    white-space: nowrap;
    margin-top: 0.25rem;
    width: fit-content;
  }
  
  /* Price display on right side */
  [data-veluna-plan-price],
  .recovery-cream-hero__schedule-option-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
    text-align: right;
  }
  
  .recovery-cream-hero__schedule-price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-heading, #131313);
    line-height: 1.2;
  }
  
  .recovery-cream-hero__schedule-compare-price {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-body, #6c757d);
    text-decoration: line-through;
    line-height: 1.2;
  }
  
  /* VELUNA_PROOF_TILE7_BUYBOX 2026-01-01T03:35:00Z - Price block styling */
  /* VELUNA_PROOF_TILE10_ARRAE_ALIGNMENT 2026-01-01T05:20:00Z - Price block aligned to match Arrae mechanics exactly */
  /* VELUNA_PROOF_TILE10_CSS_SPECIFICITY_FIX 2026-01-01T05:45:00Z - Increased specificity to override global line-height */
  .recovery-cream-hero__price-block {
    margin-top: 0;
    margin-bottom: 0 !important; /* Matches Arrae canon (0px margin-bottom) - !important to override any global styles */
    padding: 0;
  }
  
  /* VELUNA_PROOF_FINAL_PRICE_BLOCK_FIX 2026-01-01T07:45:00Z - Price block width changed to auto (content-based) to match Arrae */
  .recovery-cream-hero__price {
    font-size: 16px !important; /* Matches Arrae canon - !important to override any global styles */
    font-weight: 700 !important; /* Matches Arrae canon - !important to override any global styles */
    line-height: normal !important; /* Matches Arrae canon (not 25.6px) - !important to override global line-height: 1.6 */
    color: var(--text-heading, #000000); /* Keep Veluna's color variable */
    display: inline-block !important; /* Matches Arrae canon (content-based width, not full-width block) */
    width: auto !important; /* Matches Arrae canon (narrow, content-based width, not 562px full-width) */
  }
  
  /* Arrae-style: Prominent savings badge - 25% OFF */
  [data-veluna-subscribe-pill],
  .recovery-cream-hero .recovery-cream-hero__savings-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    background: rgba(201, 125, 96, 0.12) !important;
    border: 1.5px solid rgba(201, 125, 96, 0.4) !important;
    border-radius: 20px !important; /* HARDENED: Smoother, more modern border-radius */
    color: #C97D60 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin-left: 0.5rem !important;
    white-space: nowrap !important;
    height: auto !important;
    width: auto !important;
    letter-spacing: 0.01em !important;
  }
  
  
  /* BEST DEAL badge styling */
  .recovery-cream-hero__best-deal-badge {
    position: absolute;
    top: -8px;
    left: 1rem;
    background: var(--accent-gold, #C8A27B);
    color: #000;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 1;
  }
  
  /* Selected state: subtle + confident */
  [data-veluna-plan-card]:has(input[type="radio"]:checked),
  .recovery-cream-hero__schedule-option:has(input[type="radio"]:checked),
  .recovery-cream-hero__schedule-option.selected {
    border-color: #ffffff;
    background: #ffffff;
  }
  
  .recovery-cream-hero__schedule-option--best-deal:has(input[type="radio"]:checked),
  .recovery-cream-hero__schedule-option--best-deal.selected {
    border-color: #ffffff;
    background: #ffffff;
  }
  
  .recovery-cream-hero__cta--subscription {
    background: linear-gradient(135deg, var(--veluna-ember, #c97d60) 0%, var(--veluna-ember-soft, #e5b5a3) 100%);
  }
  
  .recovery-cream-hero__cta--subscription:hover {
    filter: brightness(1.05);
    transform: translateY(-1px); /* HARDENED: Subtle lift on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* HARDENED: Enhanced shadow on hover */
  }
  
  .recovery-cream-hero .recovery-cream-hero__cta:hover {
    transform: translateY(-1px) !important; /* HARDENED: Subtle lift on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* HARDENED: Enhanced shadow on hover */
  }
  
  .recovery-cream-hero .recovery-cream-hero__cta:active {
    transform: translateY(0) !important; /* HARDENED: Pressed state */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  }
  
  
  .recovery-cream-hero__form {
    margin-bottom: var(--space-6, 1.5rem);
  }
  
  /* Premium Trust Badges - 100M ARR Quality (Arrae-style) */
  /* VELUNA_PROOF_TILE13_TRUST_BADGES 2026-01-01T06:30:00Z - Layout aligned to match Arrae exactly */
  .recovery-cream-hero__trust-badges {
    display: block !important; /* Matches Arrae canon (block, not flex) */
    width: 534px !important; /* Matches Arrae canon (534px, not 600px/buyBox width) */
    margin-top: 16px !important; /* Matches Arrae canon (16px, not var(--space-5)) */
    margin-bottom: 0px !important; /* Matches Arrae canon (0px) */
    padding: var(--space-4, 1rem); /* Keep Veluna padding */
    background: var(--background-1, #fff);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-subtle, #E0DED8);
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* VELUNA_PROOF_TILE12_TYPOGRAPHY 2026-01-01T06:10:00Z - Updated to match Arrae typography scale */
  /* VELUNA_PROOF_TILE13_TRUST_BADGES 2026-01-01T06:30:00Z - Layout: block container with margin-bottom spacing, flex badge content */
  .recovery-cream-hero__trust-badge {
    display: flex; /* Badge content (icon + text) uses flex for alignment */
    align-items: center;
    gap: var(--space-3, 0.75rem); /* Icon-text gap within badge */
    margin-bottom: 8px !important; /* Creates 8px gap between badges (matches Arrae canon) */
    font-size: 16px !important; /* Matches Arrae canon (16px, not 0.875rem/14px) */
    font-weight: 400 !important; /* Matches Arrae canon (400) */
    line-height: normal !important; /* Matches Arrae canon (normal, not 1.5/24px) */
    color: var(--text-body, #333333);
  }
  
  .recovery-cream-hero__trust-badge:last-child {
    margin-bottom: 0 !important; /* No margin on last item */
  }
  
  .recovery-cream-hero__trust-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--veluna-ember, #c97d60);
  }
  
  .recovery-cream-hero__trust-text {
    font-weight: 500;
    color: var(--text-body, #333333);
  }
  
  /* VELUNA_PROOF_TILE13_TRUST_BADGES 2026-01-01T06:30:00Z - Desktop layout matches Arrae (block display) */
  @media (min-width: 769px) {
    .recovery-cream-hero__trust-badges {
      display: block !important; /* Matches Arrae canon (block, not flex row) */
      width: 534px !important; /* Matches Arrae canon (534px) */
    }
  }
  
  /* VELUNA_PROOF_TILE6_CSS_PARITY 2026-01-01T03:00:00Z */
  /* VELUNA_PROOF_TILE7_BUYBOX 2026-01-01T03:35:00Z - CTA font size increased to 24px, flex layout for price display */
  /* VELUNA_PROOF_TILE9_ARRAE_ALIGNMENT 2026-01-01T05:15:00Z - CTA button aligned to match Arrae mechanics exactly */
  /* VELUNA_PROOF_TILE9_CSS_SPECIFICITY_FIX 2026-01-01T05:45:00Z - Increased specificity to override media queries */
  .recovery-cream-hero .recovery-cream-hero__cta {
    width: 534px !important; /* Matches Arrae canon (534px) - !important to override mobile queries */
    height: 56px !important; /* HARDENED: Slightly taller for better touch target and premium feel */
    max-width: 100%; /* Ensure responsive on smaller screens */
    padding: 0px !important; /* Matches Arrae canon - no padding, uses explicit height - !important to override mobile queries */
    background: var(--text-heading, #131313); /* Keep Veluna's brand color variable */
    color: var(--background-1, #fff);
    border: none;
    border-radius: 16px !important; /* HARDENED: Smoother, more modern border-radius */
    font-size: 24px !important; /* Matches Arrae canon (24px) - !important to override mobile queries */
    font-weight: 600; /* Matches Arrae canon */
    line-height: normal; /* Matches Arrae canon */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* HARDENED: Premium easing */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* HARDENED: Subtle shadow for depth */
    letter-spacing: 0.01em;
    /* TEMPORARY DIAGNOSTICS: Force clickability */
    pointer-events: auto !important;
    z-index: 9999 !important;
    position: relative !important;
    display: flex !important; /* Matches Arrae canon - !important to override mobile queries */
    align-items: center;
    justify-content: center;
    gap: 8px !important; /* Matches Arrae canon (8px, not 0.5rem) - !important to override mobile queries */
    box-sizing: border-box; /* Ensure height includes borders if any */
  }
  
  /* Desktop-only: Ensure these styles only apply above mobile breakpoint */
  @media (min-width: 821px) {
    .recovery-cream-hero .recovery-cream-hero__cta {
      width: 534px !important;
      height: 50px !important;
      padding: 0px !important;
      display: flex !important;
      gap: 8px !important;
      font-size: 24px !important; /* HARDENED: Desktop ATC font-size locked at 24px */
    }
    
    /* HARDENED: Desktop ATC child elements font-size locked at 24px */
    .recovery-cream-hero .recovery-cream-hero__cta-text,
    .recovery-cream-hero .recovery-cream-hero__cta-price,
    .recovery-cream-hero .recovery-cream-hero__cta-separator,
    .recovery-cream-hero .recovery-cream-hero__cta-compare-price {
      font-size: 24px !important; /* HARDENED: Desktop ATC font-size locked at 24px */
      line-height: normal !important;
    }
  }
  
  /* HARDENED: Desktop ATC font-size locked at 24px */
  .recovery-cream-hero__cta-text,
  .recovery-cream-hero__cta-price,
  .recovery-cream-hero__cta-separator {
    font-size: 24px !important; /* HARDENED: Desktop ATC font-size locked at 24px */
    line-height: normal !important;
  }
  
  .recovery-cream-hero__cta-separator {
    opacity: 0.7;
  }
  
  .recovery-cream-hero__cta-price {
    font-weight: 600;
  }
  
  .recovery-cream-hero__cta-compare-price {
    text-decoration: line-through;
    opacity: 0.6;
    margin-left: 0.5rem;
    font-weight: 400;
    font-size: 24px !important; /* HARDENED: Desktop ATC font-size locked at 24px */
    line-height: normal !important;
  }
  
  .recovery-cream-hero__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--veluna-ember, #c97d60);
  }
  
  .recovery-cream-hero__cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Why Subscribe? - Immediately after ATC button with premium spacing */
  .recovery-cream-hero__why-subscribe {
    margin-top: var(--space-5, 1.25rem);
    margin-bottom: 0;
  }

  /* ───────────────────────────────────────────────────────
     Subscriber bonus stack (reciprocity + exclusivity)
     IM8 lever 4+5 — visible free-gift list when subscribing.
     ─────────────────────────────────────────────────────── */
  .recovery-cream-hero__sub-bonus {
    margin-top: var(--space-5, 1.25rem);
    padding: var(--space-6, 1.5rem);
    background: #ffffff;
    border: 1.5px solid #131313;
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }
  .recovery-cream-hero__sub-bonus[hidden] { display: none !important; }

  .recovery-cream-hero__sub-bonus-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 0.75rem);
    padding-bottom: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .recovery-cream-hero__sub-bonus-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: #131313;
  }

  .recovery-cream-hero__sub-bonus-value {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #131313;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 999px;
  }

  .recovery-cream-hero__sub-bonus-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
  }

  .recovery-cream-hero__sub-bonus-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--space-3, 0.75rem);
    align-items: start;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #131313;
  }

  .recovery-cream-hero__sub-bonus-item strong {
    display: block;
    font-weight: 600;
    color: #131313;
  }

  .recovery-cream-hero__sub-bonus-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.825rem;
    color: rgba(19, 19, 19, 0.6);
  }

  .recovery-cream-hero__sub-bonus-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #131313;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
  }

  .recovery-cream-hero__sub-bonus-foot {
    margin: var(--space-4, 1rem) 0 0 0;
    font-size: 0.825rem;
    color: rgba(19, 19, 19, 0.6);
    text-align: center;
    font-style: italic;
  }

  .recovery-cream-hero__why-subscribe-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6, 1.5rem) var(--space-8, 2rem);
    background: var(--background-1, #fff);
    border: 1.5px solid var(--border-subtle, #E0DED8);
    border-radius: var(--radius-lg, 16px);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-heading, #1a1a1a);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  
  .recovery-cream-hero__why-subscribe-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 125, 96, 0.1), transparent);
    transition: left 0.5s ease;
  }
  
  .recovery-cream-hero__why-subscribe-button:hover::before {
    left: 100%;
  }
  
  .recovery-cream-hero__why-subscribe-button:hover {
    border-color: var(--accent-gold, #C8A27B);
    background: var(--veluna-pearl, #FAF9F6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 162, 123, 0.12);
  }
  
  .recovery-cream-hero__why-subscribe-button[aria-expanded="true"] {
    border-color: var(--accent-gold, #C8A27B);
    background: var(--veluna-pearl, #FAF9F6);
    box-shadow: 0 8px 24px rgba(200, 162, 123, 0.12);
  }
  
  .recovery-cream-hero__why-subscribe-text {
    position: relative;
    z-index: 1;
  }
  
  .recovery-cream-hero__why-subscribe-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--accent-gold, #C8A27B);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: auto;
  }
  
  .recovery-cream-hero__why-subscribe-icon svg {
    width: 100%;
    height: 100%;
  }
  
  .recovery-cream-hero__why-subscribe-button[aria-expanded="true"] .recovery-cream-hero__why-subscribe-icon {
    transform: rotate(45deg);
  }
  
  .recovery-cream-hero__why-subscribe-content {
    margin-top: var(--space-5, 1.25rem);
    padding: var(--space-10, 2.5rem) var(--space-10, 2.5rem);
    background: var(--background-1, #fff);
    border: 1.5px solid var(--accent-gold, #C8A27B);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 8px 32px rgba(200, 162, 123, 0.1);
    display: none;
    position: relative;
    overflow: hidden;
  }
  
  .recovery-cream-hero__why-subscribe-header {
    margin-bottom: var(--space-8, 2rem);
    padding-bottom: var(--space-6, 1.5rem);
    border-bottom: 1px solid rgba(200, 162, 123, 0.15);
  }
  
  .recovery-cream-hero__why-subscribe-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 400;
    color: var(--text-heading, #1a1a1a);
    font-family: var(--font-serif);
    line-height: 1.2;
    margin: 0 0 var(--space-3, 0.75rem) 0;
    letter-spacing: -0.02em;
  }
  
  .recovery-cream-hero__why-subscribe-subtitle {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--text-body, #4a4a4a);
    line-height: 1.5;
    margin: 0;
  }
  
  .recovery-cream-hero__why-subscribe-content.is-expanded {
    display: block;
    animation: fadeInUp 0.4s ease;
  }
  
  .recovery-cream-hero__why-subscribe-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 1.5rem);
    position: relative;
    z-index: 1;
  }
  
  .recovery-cream-hero__why-subscribe-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5, 1.25rem);
    padding: 0;
    transition: transform 0.2s ease;
  }
  
  .recovery-cream-hero__why-subscribe-list li:hover {
    transform: translateX(4px);
  }
  
  .recovery-cream-hero__why-subscribe-icon-item {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--veluna-pearl, #FAF9F6);
    border: 2px solid var(--accent-gold, #C8A27B);
    border-radius: 12px;
    color: var(--accent-gold, #C8A27B);
    transition: all 0.3s ease;
  }
  
  .recovery-cream-hero__why-subscribe-list li:hover .recovery-cream-hero__why-subscribe-icon-item {
    background: var(--accent-gold, #C8A27B);
    color: #fff;
    transform: scale(1.05);
  }
  
  .recovery-cream-hero__why-subscribe-icon-item svg {
    width: 24px;
    height: 24px;
  }
  
  .recovery-cream-hero__why-subscribe-text-wrapper {
    font-size: 1rem;
    color: var(--text-heading, #1a1a1a);
    line-height: 1.6;
    padding-top: 4px;
  }
  
  .recovery-cream-hero__why-subscribe-text-wrapper strong {
    font-weight: 600;
    color: var(--text-heading, #1a1a1a);
  }
  
  .recovery-cream-hero__toggles {
    margin-top: var(--space-6, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    max-width: 100%;
    padding-right: 0;
  }
  
  /* Desktop (>=990px): Toggles and cross-sell are full-width (outside grid) */
  @media (min-width: 990px) {
    /* Toggles and cross-sell are now inside the right column, so they inherit column width naturally */
    /* No full-width overrides needed - they flow as part of the right column content */
  }
  
  .recovery-cream-hero__toggle-item {
    border-bottom: 1px solid var(--border-subtle, #E0DED8);
  }
  
  .recovery-cream-hero__toggle-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-4, 1rem) 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: var(--font-size-base, 1rem);
    font-weight: 500;
    color: var(--text-heading, #131313);
    text-align: left;
  }
  
  .recovery-cream-hero__toggle-button:hover {
    color: var(--veluna-ember, #c97d60);
  }
  
  .recovery-cream-hero__toggle-text {
    flex: 1;
  }
  
  .recovery-cream-hero__toggle-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-eyebrow, #7A746A);
    transition: transform 0.3s ease, color 0.3s ease;
    margin-left: auto;
    transform: rotate(0deg);
  }
  
  .recovery-cream-hero__toggle-content {
    padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-6, 1.5rem) 0;
    display: none;
    color: var(--text-body, #333333);
    line-height: 1.8;
    font-size: var(--font-size-base, 1rem);
  }
  
  .recovery-cream-hero__toggle-content.is-expanded {
    display: block;
    animation: fadeIn 0.3s ease;
  }
  
  .recovery-cream-hero__toggle-button[aria-expanded="true"] .recovery-cream-hero__toggle-icon,
  .recovery-cream-hero__toggle-button.is-expanded .recovery-cream-hero__toggle-icon {
    transform: rotate(45deg);
    color: var(--veluna-ember, #c97d60);
  }
  
  .recovery-cream-hero__toggle-content p {
    margin: 0 0 var(--space-4, 1rem) 0;
    line-height: 1.8;
  }
  
  .recovery-cream-hero__toggle-content p:last-child {
    margin-bottom: 0;
  }
  
  .recovery-cream-hero__toggle-content p strong {
    font-weight: 600;
    color: var(--text-heading, #131313);
    display: block;
    margin-bottom: var(--space-2, 0.5rem);
  }
  
  .recovery-cream-hero__toggle-content ul {
    margin: var(--space-4, 1rem) 0 0 0;
    padding-left: var(--space-6, 1.5rem);
    list-style: none;
  }
  
  .recovery-cream-hero__toggle-content ul::before {
    content: '';
    display: block;
    height: var(--space-2, 0.5rem);
  }
  
  .recovery-cream-hero__toggle-content li {
    margin-bottom: var(--space-3, 0.75rem);
    padding-left: var(--space-6, 1.5rem);
    position: relative;
    line-height: 1.8;
  }
  
  .recovery-cream-hero__toggle-content li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--veluna-ember, #c97d60);
    font-weight: 600;
    font-size: var(--font-size-lg, 1.125rem);
  }
  
  .recovery-cream-hero__toggle-content li:last-child {
    margin-bottom: 0;
  }
  
  .recovery-cream-hero__toggle-content li strong {
    font-weight: 600;
    color: var(--text-heading, #131313);
  }

  /* ─────────────────────────────────────────────────────────────
     RITUAL EDUCATION (timeline + bundle grid)
     White-on-white cards, no media — pure text scaffolding.
     ───────────────────────────────────────────────────────────── */
  .recovery-cream-hero__ritual-education {
    margin-top: var(--space-12, 3rem);
    display: grid;
    gap: var(--space-10, 2.5rem);
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: var(--space-10, 2.5rem);
  }

  .recovery-cream-hero__ritual-heading {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: #131313;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 var(--space-6, 1.5rem) 0;
  }

  .recovery-cream-hero__ritual-steps,
  .recovery-cream-hero__ritual-bundle-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 1.25rem);
  }

  .recovery-cream-hero__ritual-step,
  .recovery-cream-hero__ritual-bundle-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--space-4, 1rem);
    align-items: start;
    background: #ffffff;
  }

  .recovery-cream-hero__ritual-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #ffffff;
    color: #131313;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
  }

  .recovery-cream-hero__ritual-bundle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #131313;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
  }

  .recovery-cream-hero__ritual-step-title,
  .recovery-cream-hero__ritual-bundle-title {
    font-family: var(--font-sans, inherit);
    font-size: 1rem;
    font-weight: 600;
    color: #131313;
    margin: 0 0 4px 0;
    line-height: 1.3;
  }

  .recovery-cream-hero__ritual-step-text,
  .recovery-cream-hero__ritual-bundle-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(19, 19, 19, 0.72);
    margin: 0;
  }

  @media (min-width: 768px) {
    .recovery-cream-hero__ritual-education {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-12, 3rem);
    }
  }

  /* Cross-Sell Section - Unified Column Card */
  /* Override base.css conflicting styles - must be more specific */
  [data-rc-cross-sell].recovery-cream-hero__cross-sell,
  .recovery-cream-hero__cross-sell[data-rc-cross-sell] {
    margin-top: var(--space-12, 3rem);
    padding-top: 0;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    filter: none !important;
    --rc-cross-sell-divider: rgba(0, 0, 0, 0.06);
    --rc-cross-sell-hover-bg: transparent;
    --rc-cross-sell-thumbnail-bg: transparent;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-heading {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 400 !important;
    color: #131313;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
    font-family: var(--font-serif) !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-social-proof {
    font-weight: 400;
    color: #666;
    font-size: 1rem;
    opacity: 0.8;
    margin-left: 8px;
  }
  
  /* HARDENED: White background only - no card effect */
  /* Override base.css card styles - must override border, shadow, and radius */
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-card,
  .recovery-cream-hero__cross-sell-card[data-rc-cross-sell-card] {
    background: #ffffff !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    padding: 24px 28px !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    outline: none !important;
    filter: none !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-card *,
  .recovery-cream-hero__cross-sell-card[data-rc-cross-sell-card] * {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  
  /* Override base.css item styles - must override border-bottom divider */
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-item,
  .recovery-cream-hero__cross-sell-item[data-veluna-cross-sell-item] {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-6, 1.5rem) !important;
    padding: 20px 0 !important;
    min-height: auto !important;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    transition: none;
    position: relative;
    width: 100%;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    outline: none !important;
    filter: none !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-item:not(:last-child) {
    border-bottom: none !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-item:first-child {
    padding-top: 0 !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-item:hover {
    background-color: transparent !important; /* HARDENED: No hover background */
  }
  
  /* Override base.css image styles - must override border, shadow, and radius */
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-image,
  .recovery-cream-hero__cross-sell-image[data-rc-cross-sell] {
    flex-shrink: 0;
    width: 80px !important;
    height: 80px !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    overflow: hidden;
    background: transparent !important;
    display: flex;
    align-items: center !important;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    filter: none !important;
  }
  
  /* Override base.css image img and placeholder styles */
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-image img,
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-placeholder,
  .recovery-cream-hero__cross-sell-image[data-rc-cross-sell] img,
  .recovery-cream-hero__cross-sell-placeholder[data-rc-cross-sell] {
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    background: transparent !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: var(--space-3, 0.75rem); /* HARDENED: More padding for larger images */
    border: none !important; /* HARDENED: No border on image */
    outline: none !important; /* HARDENED: No outline on image */
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-eyebrow, #7A746A);
    font-size: var(--font-size-sm, 0.875rem);
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-content {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: var(--space-5, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: 4px;
    gap: var(--space-1, 0.25rem); /* HARDENED: Tighter spacing for cleaner layout */
    justify-content: center; /* HARDENED: Center content for better alignment */
    align-items: center; /* HARDENED: Center all cross-sell text/price on desktop */
    width: auto; /* HARDENED: Auto width, not fixed */
    max-width: 100%; /* HARDENED: Don't exceed container */
    overflow: hidden; /* HARDENED: Prevent overflow */
  }
  
  /* Header: Title centered */
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-header {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 0.5rem);
    flex-wrap: nowrap;
    margin: 0;
    width: 100%;
    text-align: center !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #131313;
    margin: 0;
    line-height: 1.35;
    letter-spacing: 0;
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: normal;
    max-width: 100%;
    text-align: center !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-pricing {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-1, 0.25rem);
    flex-shrink: 0;
    width: 100%;
    text-align: center !important;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #131313;
    letter-spacing: 0;
    white-space: nowrap;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-discount {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--veluna-ember, #c97d60);
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    background: transparent;
    border: 1px solid var(--veluna-ember, #c97d60);
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0;
    border: none;
    white-space: nowrap;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-description {
    font-size: 0.8125rem;
    color: #666;
    line-height: 1.5;
    margin: var(--space-2, 0.5rem) 0 0 0;
    letter-spacing: 0;
    text-align: center;
    width: 100%;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-action {
    flex-shrink: 0 !important;
    align-self: center !important; /* HARDENED: Center button for better alignment */
    margin: 0; /* HARDENED: Clean spacing */
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-form {
    margin: 0;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-button {
    padding: 10px 16px !important;
    background: #131313 !important;
    color: #ffffff !important;
    border: 1px solid #131313 !important;
    border-radius: 8px !important;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.2s ease;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
    display: inline-block;
    min-width: 80px !important; /* HARDENED: Consistent button width */
    text-align: center;
    position: relative;
    overflow: visible;
    letter-spacing: 0;
    box-shadow: none;
    box-sizing: border-box;
    white-space: nowrap; /* HARDENED: Prevent button text wrapping */
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-button:hover:not(:disabled) {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    opacity: 0.95;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-button:active:not(:disabled) {
    background: #131313 !important;
    transform: scale(0.98);
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-button:focus:not(:disabled) {
    outline: 2px solid var(--text-heading, #131313);
    outline-offset: 2px;
  }
  
  [data-rc-cross-sell] .recovery-cream-hero__cross-sell-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  /* Reviews/Testimonials Section */
  .recovery-cream-hero__reviews {
    margin-top: var(--space-12, 3rem);
    padding-top: var(--space-12, 3rem);
    border-top: 1px solid var(--border-subtle, #E0DED8);
  }
  
  .recovery-cream-hero__reviews-headline {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 600;
    color: var(--text-heading, #131313);
    margin: 0 0 var(--space-8, 2rem) 0;
    letter-spacing: -0.02em;
    font-family: var(--font-serif, serif);
  }
  
  .recovery-cream-hero__reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6, 1.5rem);
  }
  
  .recovery-cream-hero__testimonial {
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem); /* HARDENED: Less vertical padding, more horizontal */
    background: #ffffff;
    border-radius: var(--radius-md, 12px);
    border: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem); /* HARDENED: Reduced gap for less vertical spacing */
    min-height: auto; /* HARDENED: Don't force height */
    height: auto; /* HARDENED: Let content determine height */
  }
  
  .recovery-cream-hero__testimonial:hover {
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }
  
  .recovery-cream-hero__testimonial-rating {
    display: flex;
    gap: var(--space-1, 0.25rem);
    margin-bottom: var(--space-1, 0.25rem); /* HARDENED: Less margin for less vertical space */
    flex-shrink: 0; /* HARDENED: Don't shrink rating */
  }
  
  .recovery-cream-hero__star {
    font-size: var(--font-size-lg, 1.125rem);
    color: #E0DED8;
    line-height: 1;
  }
  
  .recovery-cream-hero__star--filled {
    color: var(--veluna-ember, #c97d60);
  }
  
  .recovery-cream-hero__testimonial-text {
    font-size: var(--font-size-base, 1rem);
    color: var(--text-body, #333333);
    line-height: 1.5 !important; /* HARDENED: Tighter line-height for less vertical space */
    margin: 0;
    flex: 0 1 auto; /* HARDENED: Don't expand to fill space */
    font-style: italic;
  }
  
  .recovery-cream-hero__testimonial-author {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
    padding-top: var(--space-2, 0.5rem); /* HARDENED: Less padding for less vertical space */
    border-top: 1px solid var(--border-subtle, #E0DED8);
    margin-top: auto; /* HARDENED: Push author to bottom */
  }
  
  .recovery-cream-hero__testimonial-name {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-heading, #131313);
  }
  
  .recovery-cream-hero__testimonial-location {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-eyebrow, #7A746A);
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(-15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @media (max-width: 900px) {
    .shopify-design-mode .recovery-cream-hero__container,
    .recovery-cream-hero__container {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-areas:
        "media"
        "info" !important;
      gap: 20px !important;
    }
    
    .recovery-cream-hero__images {
      grid-area: media !important;
      /* Keep sticky on desktop, static only on mobile */
    }
    
    .recovery-cream-hero__info {
      grid-area: info !important;
    }
    
    .recovery-cream-hero__image-row {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4, 1rem);
    }
  }

  /* For live visitors, drop to single column only below 820px */
  @media (max-width: 820px) {
    /* Remove padding from wrapper on mobile */
    .recovery-cream-hero .veluna-max-width {
      padding-left: 0;
      padding-right: 0;
      padding-top: 0 !important;
      margin-top: 0;
      max-width: 100%;
    }
    
    /* Force single column even in Shopify design mode - override any inline styles */
    .shopify-design-mode .recovery-cream-hero__container,
    .recovery-cream-hero__container[style*="grid-template-columns"],
    .recovery-cream-hero__container {
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-areas:
        "media"
        "info" !important;
      gap: 0 !important;
      padding: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
    }

    .recovery-cream-hero {
      padding: 0;
      margin: 0;
    }

    /* Gallery/Carousel - Full width at top, no padding */
    .recovery-cream-hero__images {
      /* Sticky positioning handled by desktop media query above */
      margin: 0;
      margin-top: 0;
      margin-bottom: 0;
      width: 100%;
      padding: 0;
      padding-top: 0;
      grid-area: media;
    }
    
    /* Hide desktop images, show mobile carousel */
    .recovery-cream-hero__images-desktop {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      overflow: hidden !important;
      position: absolute !important;
      left: -9999px !important;
    }
    
    /* Hide all desktop image rows on mobile */
    .recovery-cream-hero__image-row,
    .recovery-cream-hero__image-row--single,
    .recovery-cream-hero__image-row--double {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    
    .recovery-cream-hero__images-mobile {
      display: block !important;
      width: 100%;
      margin: 0;
      margin-top: 0;
      padding: 0;
      padding-top: 0;
    }
    
    /* VELUNA_PROOF_TILE6_MOBILE_DEPLOY 2026-01-01T03:10:00Z - Mobile CTA sizing */
    .recovery-cream-hero .recovery-cream-hero__cta {
      width: 324px; /* Changed to match Arrae canon (324px) */
      max-width: 100%; /* Ensure responsive */
      padding: 10px var(--space-8, 2rem); /* Changed to achieve 44px height (matches Arrae canon) */
      height: 44px; /* Explicit height to match Arrae canon */
      box-sizing: border-box;
    }
    
    .recovery-cream-hero__carousel {
      margin: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding: 0 !important;
      width: 100%;
      border-radius: 0;
      background: #fff;
      min-height: 0 !important;
      height: auto !important;
    }
    
    .recovery-cream-hero__carousel-track {
      margin: 0;
      padding: 0;
      height: auto;
      min-height: 0;
    }
    
    .recovery-cream-hero__carousel-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
      min-height: 0 !important;
      height: auto !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    
    .recovery-cream-hero__carousel-slide img {
      width: 100%;
      height: auto;
      max-height: 45vh !important;
      object-fit: contain;
      object-position: center;
      display: block;
      visibility: visible;
      opacity: 1;
      margin: 0;
      padding: 0;
    }
    
    .recovery-cream-hero__thumbnail-gallery {
      padding: 10px 16px;
    }
    
    .recovery-cream-hero__thumbnail {
      width: 60px;
      height: 60px;
    }
    
    /* Show arrows on mobile - make them more visible */
    .recovery-cream-hero__carousel-controls {
      display: flex !important;
      padding: 0 12px;
    }
    
    .recovery-cream-hero__carousel-btn {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .recovery-cream-hero__carousel-dots {
      padding: 10px 0 14px;
      gap: 5px;
    }
    
    .recovery-cream-hero__carousel-dot {
      width: 5px;
      height: 5px;
    }
    
    .recovery-cream-hero__carousel-dot.is-active {
      width: 18px;
      background: rgba(0, 0, 0, 0.9);
    }
    
    /* Text content - Below gallery with proper padding */
    .recovery-cream-hero__info {
      width: 100%;
      padding: 20px 16px;
      gap: 20px;
      grid-area: info;
      max-width: 100%;
      box-sizing: border-box;
    }
    
    .recovery-cream-hero__title {
      font-size: clamp(1.75rem, 5vw, 2rem);
      margin-bottom: 12px;
      line-height: 1.2;
      font-weight: 400;
      width: 100%;
      box-sizing: border-box;
      padding: 0;
    }
    
    .recovery-cream-hero__subheadline {
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 20px;
      color: #333;
      width: 100%;
      box-sizing: border-box;
      padding: 0;
    }
    
    .recovery-cream-hero__benefits {
      margin-bottom: 28px;
      gap: 14px;
      width: 100%;
      box-sizing: border-box;
    }
    
    .recovery-cream-hero__benefits li {
      font-size: 15px;
      line-height: 1.7;
      padding-left: 28px;
      width: 100%;
      box-sizing: border-box;
    }

    /* Purchase form - Full width with padding */
    .recovery-cream-hero__form-card {
      margin-bottom: 24px;
      margin-left: 0;
      margin-right: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      padding: 20px 16px;
      border-radius: 0;
      border-left: none;
      border-right: none;
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #ffffff;
      background: #fff;
      width: 100%;
      box-sizing: border-box;
    }
    
    .recovery-cream-hero__quantity {
      margin-bottom: 20px !important;
    }
    
    /* Remove quantity input spinner arrows on hover - Scoped to RC PDP only - AGGRESSIVE */
    [data-veluna-qty] input[type="number"],
    [data-veluna-qty] input[type="number"]:hover,
    [data-veluna-qty] input[type="number"]:focus,
    [data-veluna-qty] input[type="number"]:active {
      -webkit-appearance: textfield !important;
      appearance: textfield !important;
      -moz-appearance: textfield !important;
      background-image: none !important;
    }
    
    [data-veluna-qty] input[type="number"]::-webkit-inner-spin-button,
    [data-veluna-qty] input[type="number"]::-webkit-outer-spin-button,
    [data-veluna-qty] input[type="number"]:hover::-webkit-inner-spin-button,
    [data-veluna-qty] input[type="number"]:hover::-webkit-outer-spin-button,
    [data-veluna-qty] input[type="number"]:focus::-webkit-inner-spin-button,
    [data-veluna-qty] input[type="number"]:focus::-webkit-outer-spin-button,
    [data-veluna-qty] input[type="number"]:active::-webkit-inner-spin-button,
    [data-veluna-qty] input[type="number"]:active::-webkit-outer-spin-button {
      -webkit-appearance: none !important;
      appearance: none !important;
      margin: 0 !important;
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      width: 0 !important;
      height: 0 !important;
    }
    
    /* Remove any arrow pseudo-elements on quantity input hover - ALL STATES */
    [data-veluna-qty] input[type="number"]::before,
    [data-veluna-qty] input[type="number"]::after,
    [data-veluna-qty] input[type="number"]:hover::before,
    [data-veluna-qty] input[type="number"]:hover::after,
    [data-veluna-qty] input[type="number"]:focus::before,
    [data-veluna-qty] input[type="number"]:focus::after {
      display: none !important;
      content: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      background-image: none !important;
    }
    
    /* Remove ALL hover effects on quantity wrapper and buttons - COMPREHENSIVE */
    [data-veluna-qty],
    [data-veluna-qty]:hover,
    [data-veluna-qty] *,
    [data-veluna-qty]:hover *,
    [data-veluna-qty] .recovery-cream-hero__quantity-btn,
    [data-veluna-qty] .recovery-cream-hero__quantity-btn:hover,
    [data-veluna-qty] .recovery-cream-hero__quantity-btn:focus,
    [data-veluna-qty] .recovery-cream-hero__quantity-btn:active,
    [data-veluna-qty] input,
    [data-veluna-qty] input:hover,
    [data-veluna-qty] input:focus {
      /* Remove any arrow icons or hover-only UI */
      background-image: none !important;
      background-position: unset !important;
      transform: none !important;
    }
    
    /* Specifically remove any hover-only arrow icons on quantity buttons - ALL PSEUDO ELEMENTS */
    [data-veluna-qty] button::before,
    [data-veluna-qty] button::after,
    [data-veluna-qty] button:hover::before,
    [data-veluna-qty] button:hover::after,
    [data-veluna-qty] button:focus::before,
    [data-veluna-qty] button:focus::after,
    [data-veluna-qty] button[data-quantity-decrease]::before,
    [data-veluna-qty] button[data-quantity-decrease]::after,
    [data-veluna-qty] button[data-quantity-decrease]:hover::before,
    [data-veluna-qty] button[data-quantity-decrease]:hover::after,
    [data-veluna-qty] button[data-quantity-increase]::before,
    [data-veluna-qty] button[data-quantity-increase]::after,
    [data-veluna-qty] button[data-quantity-increase]:hover::before,
    [data-veluna-qty] button[data-quantity-increase]:hover::after,
    [data-veluna-qty] .recovery-cream-hero__quantity-btn::before,
    [data-veluna-qty] .recovery-cream-hero__quantity-btn::after,
    [data-veluna-qty] .recovery-cream-hero__quantity-btn:hover::before,
    [data-veluna-qty] .recovery-cream-hero__quantity-btn:hover::after {
      display: none !important;
      content: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      background-image: none !important;
      width: 0 !important;
      height: 0 !important;
    }
    
    /* Remove any child elements that might show arrows on hover */
    [data-veluna-qty] *::before,
    [data-veluna-qty] *::after,
    [data-veluna-qty]:hover *::before,
    [data-veluna-qty]:hover *::after {
      background-image: none !important;
    }