/** Shopify CDN: Minification failed

Line 651:0 All "@import" rules must come first

**/
/* ═══════════════════════════════════════════════════
   Human Renaissance — Global Brand Overrides
   Matches hero button: linear-gradient(135deg, #BB6B23 0%, #FF7F33 50%, #FFAA33 100%)
   ═══════════════════════════════════════════════════ */

/* ── SITEWIDE WARM TOP (owner 2026-07-23) ──
   The header floats transparently over the page. On the homepage/product page the
   first section paints its own warm amber-to-cream gradient behind that floating
   header, so the top reads warm. Every OTHER template (whats-inside, gifts, blog,
   about, research, affiliate, contact, cart, policies, 404, etc.) fell back to the
   theme's flat white/pale body background, creating a mismatched white band under
   the header. This sitewide rule paints the same warm-amber-to-cream fade behind
   the top of EVERY page by default. Templates that already supply their own
   scoped warm-top treatment (home hero, product hero) win the cascade because
   their <style> renders later in DOM order than this stylesheet, at equal
   !important specificity — so this is purely a fallback, never a double-paint. */
html,
body {
  background-color: #FBF6EC !important;
}

body {
  /* Long, seam-free warm fade: amber sits behind the floating header, then dissolves
     gradually into the page background across ~62vh. No early flat stop, so there is
     no visible hard line where the amber "ends" — it just keeps fading to cream. */
  background-image: linear-gradient(180deg,
    #FBE6C2 0%,
    #FBE8C8 14%,
    #FBEBD1 28%,
    #FBEEDA 42%,
    #FBF1E2 56%,
    #FBF4E9 72%,
    #FBF6EC 88%,
    #FBF6EC 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% clamp(560px, 82vh, 1040px) !important;
  background-position: top center !important;
}

/* ── Gradient Pill Buttons ── */
.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.cart__checkout-button,
.shopify-payment-button__button,
.form__submit {
  background: linear-gradient(135deg, #BB6B23 0%, #FF7F33 50%, #FFAA33 100%) !important;
  background-color: #FF7F33 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-heading-family, Montserrat, sans-serif);
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 20px rgba(187, 107, 35, 0.3) !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
  padding: 14px 28px !important;
  min-height: auto !important;
}

.button:before,
.button:after,
.shopify-challenge__button:before,
.shopify-challenge__button:after,
.customer button:before,
.customer button:after,
button.shopify-payment-button__button--unbranded:before,
button.shopify-payment-button__button--unbranded:after,
.cart__checkout-button:before,
.cart__checkout-button:after {
  display: none !important;
}

.button:not([disabled]):hover,
.shopify-challenge__button:hover,
.customer button:hover,
button.shopify-payment-button__button--unbranded:hover,
.cart__checkout-button:hover,
.form__submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(187, 107, 35, 0.4) !important;
  color: #fff !important;
  filter: brightness(1.05);
}

/* Secondary / outline buttons */
.button--secondary {
  background: transparent !important;
  color: #BB6B23 !important;
  border: 2px solid #BB6B23 !important;
  box-shadow: none !important;
}

.button--secondary:hover {
  background: rgba(187, 107, 35, 0.08) !important;
  box-shadow: 0 4px 16px rgba(187, 107, 35, 0.15) !important;
  filter: none;
}

/* Tertiary / text buttons */
.button--tertiary {
  background: transparent !important;
  color: #BB6B23 !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: underline;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 600 !important;
  padding: 0 !important;
  min-width: auto !important;
}

.button--tertiary:hover {
  color: #FF7F33 !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none;
}

/* ── Newsletter Arrow Button ── */
.newsletter-form__button.field__button {
  background: linear-gradient(135deg, #BB6B23 0%, #FF7F33 50%, #FFAA33 100%) !important;
  border-radius: 0 999px 999px 0 !important;
  min-width: 48px !important;
  min-height: auto !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.newsletter-form__button.field__button .svg-wrapper,
.newsletter-form__button.field__button svg {
  color: #fff !important;
  fill: #fff;
}

/* ── Cart Drawer Button ── */
.cart__checkout-button {
  min-height: 50px !important;
  font-size: 14px !important;
  width: 100%;
}

/* ── Login / Account Page ── */
.customer .field {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.customer .field__input {
  border: 1.5px solid rgba(26, 18, 12, 0.15) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  background: rgba(253, 246, 238, 0.5) !important;
  color: #1a120c !important;
  box-shadow: none !important;
}

.customer .field__input:focus,
.customer .field__input:focus-visible {
  border-color: #FF7F33 !important;
  box-shadow: 0 0 0 3px rgba(255, 127, 51, 0.12) !important;
  outline: none !important;
}

.customer .field__label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  color: #3f2613 !important;
}

.customer h1,
.customer h2 {
  color: #1a120c;
  font-family: var(--font-heading-family, Montserrat, sans-serif);
}

/* Sign in with Shop button */
#shop-login-button,
.shopify-cleanslate [data-shop-pay-login-button],
div[data-login-with-shop-wrapper] button,
#shopify-section-customer-login shop-login-button {
  border-radius: 999px !important;
  overflow: hidden;
}

#shop-login-button::part(button),
shop-login-button::part(button) {
  border-radius: 999px !important;
}

/* Customer account links */
.customer a {
  color: #BB6B23;
}

.customer a:hover {
  color: #FF7F33;
}

/* ── Cart Drawer Enhancements ── */

/* Cart: kill the big empty gap when the cart is short.
   The theme sets <cart-drawer-items> to flex:1, so the items area grows to
   fill the whole drawer and leaves a large void above the footer with only a
   few items. Let it size to content (scroll only when it overflows) so content
   stacks from the top and the footer rises directly beneath the items. */
.cart-drawer cart-drawer-items {
  flex: 0 1 auto !important;
  min-height: 0;
}

/* Cart drawer: adapt to the REAL phone height instead of a hard-coded size that
   crops on bigger iPhones (16/17 Pro Max). On mobile the drawer goes full-bleed
   — 100dvh (dynamic viewport, so the iOS address bar can't crop it), no rounded
   corners (kills the corner "crop" cut), full width, and it respects the notch
   + home-indicator safe areas. Clean slide transform regardless of theme box mode. */
/* NOTE (2026-07-23): the cart drawer is now a centered two-panel DIALOG owned
   entirely by component-cart-drawer.css ("HR cart dialog v2"). The legacy
   side-drawer rules that used to live here (border-radius:20px 0 0 20px,
   translateX slide, 100vw full-bleed, #fdf6ee bg, 0 20px padding) were
   !important and silently overrode the dialog — the summary panel's right
   corners got clipped square and the mobile sheet lost its rounded top. They
   are removed so component-cart-drawer.css controls radius/background/padding/
   transform on both desktop and mobile. Only the dim backdrop stays here. */
@media (max-width: 749.98px) {
  .drawer { height: 100vh !important; height: 100dvh !important; }
}

.drawer {
  background-color: rgba(22, 17, 14, 0.3) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: visibility 0.35s ease, opacity 0.35s ease !important;
}

cart-drawer .drawer__header {
  border-bottom: 1px solid rgba(187, 107, 35, 0.12);
  padding: 20px 24px;
}

cart-drawer .drawer__close svg {
  transition: transform 0.2s ease;
}

cart-drawer .drawer__close:hover svg {
  transform: rotate(90deg);
}

cart-drawer .cart-item__name {
  color: #1a120c;
  font-weight: 500;
}

cart-drawer .totals__subtotal-value {
  color: #1a120c;
  font-weight: 700;
}

/* ── Cart drawer: order summary + guarantee polish ── */
.cart-drawer .totals {
  display: flex; align-items: baseline; justify-content: space-between; padding: 3px 0;
}
.cart-drawer .totals__total { font-size: 1.35rem !important; font-weight: 600; color: #5d3612; margin: 0; }
.cart-drawer .totals__total-value { font-size: 1.35rem !important; font-weight: 700; color: #2d1b0e; }
/* savings row reads green + bold */
.cart-drawer .cross-price { color: #1f7a3d !important; font-weight: 800 !important; }
/* estimated total is the prominent line, with a hairline divider above it */
.cart-drawer .cart-drawer__footer .totals:last-of-type {
  margin-top: 7px; padding-top: 12px; border-top: 1px solid rgba(187, 107, 35, 0.22);
}
.cart-drawer .cart-drawer__footer .totals:last-of-type .totals__total { font-size: 1.5rem !important; font-weight: 800; color: #2a1a0b; }
.cart-drawer .cart-drawer__footer .totals:last-of-type .totals__total-value { font-size: 1.75rem !important; font-weight: 800; color: #2a1a0b; }
.hr-cart-guarantee {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 11px 0 2px; font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 600; color: #6a5230;
}
.hr-cart-guarantee svg { color: #1f7a3d; flex: none; }

/* Cart quantity buttons */
cart-drawer .quantity__button {
  border-radius: 8px !important;
  transition: background 0.2s ease;
  background: transparent !important;
  box-shadow: none !important;
  min-width: auto !important;
  min-height: auto !important;
  padding: 4px 8px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 16px !important;
}

cart-drawer .quantity__button:hover {
  background: rgba(187, 107, 35, 0.08) !important;
  transform: none !important;
}

cart-drawer .quantity__input {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Empty cart state */
cart-drawer .drawer__inner-empty {
  text-align: center;
  padding: 48px 24px;
}

/* ── Shopify Payment Buttons (Buy Now, etc.) ── */
.shopify-payment-button__button {
  border-radius: 999px !important;
  overflow: hidden;
}

.shopify-payment-button__button--branded {
  border-radius: 999px !important;
}

/* ── Form Inputs Global ── */
.field__input {
  border-radius: 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field__input:focus,
.field__input:focus-visible {
  border-color: #FF7F33 !important;
  box-shadow: 0 0 0 3px rgba(255, 127, 51, 0.1) !important;
}

/* ── Links / Accent Colors ── */
a.link--text:hover {
  color: #BB6B23;
}

/* ── Policy Pages ── */
.shopify-policy__container {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.shopify-policy__title {
  font-size: 36px;
  font-weight: 700;
  color: #1a120c;
  text-align: center;
  margin-bottom: 8px;
}

.shopify-policy__body {
  color: #372516;
  line-height: 1.75;
  font-size: 15px;
}

.shopify-policy__body h1,
.shopify-policy__body h2,
.shopify-policy__body h3 {
  color: #1a120c;
  margin-top: 32px;
}

.shopify-policy__body a {
  color: #BB6B23;
  text-decoration: underline;
}

.shopify-policy__body a:hover {
  color: #FF7F33;
}

/* ── Focus Outlines ── */
*:focus-visible {
  outline-color: rgba(255, 127, 51, 0.5) !important;
}

/* ── Exclude specific elements from button overrides ── */
.disclosure__button,
.country-selector__close-button,
.country-filter__reset-button,
.drawer__close,
cart-remove-button button,
.cart-item__quantity button,
.quantity__button {
  background: transparent !important;
  box-shadow: none !important;
  min-width: auto !important;
  min-height: auto !important;
  padding: 4px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
  font-weight: normal !important;
  border-radius: 8px !important;
  color: inherit !important;
}

/* ═══════════════════════════════════════════════════
   PRODUCT PAGE — UNIFIED CREAM BACKGROUND
   On product pages, every Shopify section from flip-cards
   through FAQ needs the same warm cream background so
   there are no white gap strips between them.
   Body doesn't get a .template-product class in this
   theme, so we target by the specific section IDs that
   appear on the product page.
   ═══════════════════════════════════════════════════ */

/* Shopify section wrappers — force cream on every one that
   lives between the flip-cards and the FAQ. */
[id^="shopify-section-template"][id*="multicolumn_aCWpwn"],
[id^="shopify-section-template"][id*="custom_liquid_placeholder_uQ3N7a"],
[id^="shopify-section-template"][id*="hr_why"],
[id^="shopify-section-template"][id*="hr_stats"],
[id^="shopify-section-template"][id*="hr_timeline"],
[id^="shopify-section-template"][id*="lumin_mega"],
[id^="shopify-section-template"][id*="rich_text_seo"],
[id^="shopify-section-template"][id*="rich_text_KXtYLT"],
[id^="shopify-section-template"][id*="testimonial"],
[id^="shopify-section-template"][id*="image_banner"],
[id^="shopify-section-template"][id*="section_divider"],
[id^="shopify-section-template"][id*="collapsible_content"] {
  background: #faf4eb !important;
}

/* Inner wrapper overrides — many Dawn sections set a color
   scheme background on their first child. Strip those. */
[id^="shopify-section-template"][id*="lumin_mega"] > *,
[id^="shopify-section-template"][id*="rich_text_seo"] > *,
[id^="shopify-section-template"][id*="rich_text_KXtYLT"] > *,
[id^="shopify-section-template"][id*="collapsible_content"] > *,
[id^="shopify-section-template"][id*="multicolumn_aCWpwn"] > *,
[id^="shopify-section-template"][id*="testimonial"] > *,
[id^="shopify-section-template"][id*="section_divider"] > * {
  background: transparent !important;
}

/* Dawn's color scheme wrappers carry `--color-background`
   CSS vars. Override with cream so inherited backgrounds
   inside those sections flow visually. */
[id^="shopify-section-template"][id*="lumin_mega"] .color-scheme,
[id^="shopify-section-template"][id*="rich_text_seo"] .color-scheme,
[id^="shopify-section-template"][id*="collapsible_content"] .color-scheme,
[id^="shopify-section-template"] [class*="color-scheme-"] {
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   MAIN PRODUCT SECTION — DOSSIER TYPOGRAPHY
   The top buy-box area adopts Fraunces + Inter Tight + JetBrains
   Mono so it matches the Nature-Did + Week-By-Week sections.
   ══════════════════════════════════════════════════════════════ */

[id^="shopify-section-template"][id*="__main"] .product__title,
[id^="shopify-section-template"][id*="__main"] .product__title h1,
[id^="shopify-section-template"][id*="__main"] h1.product-title {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 700 !important;
  color: #14100b !important;
}

/* Product price + variant picker typography */
[id^="shopify-section-template"][id*="__main"] .price,
[id^="shopify-section-template"][id*="__main"] .price__regular,
[id^="shopify-section-template"][id*="__main"] .price__sale,
[id^="shopify-section-template"][id*="__main"] .product__price {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  color: #14100b !important;
}

/* Labels, captions, accordion headers in main section */
[id^="shopify-section-template"][id*="__main"] label,
[id^="shopify-section-template"][id*="__main"] .form__label,
[id^="shopify-section-template"][id*="__main"] .variant-picker__option-label,
[id^="shopify-section-template"][id*="__main"] .product__accordion-title,
[id^="shopify-section-template"][id*="__main"] .accordion__title,
[id^="shopify-section-template"][id*="__main"] .tab-title,
[id^="shopify-section-template"][id*="__main"] .nav-tab {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #4a3f31 !important;
}

/* Tabs / accordions in main product (shipping details, returns, benefits, reviews, etc.) */
[id^="shopify-section-template"][id*="__main"] details summary,
[id^="shopify-section-template"][id*="__main"] .product__accordion summary,
[id^="shopify-section-template"][id*="__main"] .collapsible-tab-button,
[id^="shopify-section-template"][id*="__main"] .product__tab-title {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: #14100b !important;
  letter-spacing: -0.005em !important;
  font-variation-settings: "SOFT" 100, "opsz" 72, "wght" 500 !important;
}

/* Body text inside main product (descriptions, feature lists, etc.) */
[id^="shopify-section-template"][id*="__main"] .product__description,
[id^="shopify-section-template"][id*="__main"] .product__description p,
[id^="shopify-section-template"][id*="__main"] .rte p,
[id^="shopify-section-template"][id*="__main"] .lumin-subtitle,
[id^="shopify-section-template"][id*="__main"] .product__subtitle,
[id^="shopify-section-template"][id*="__main"] .collapsible-row-content p {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #4a3f31 !important;
}

/* Review / rating badge */
[id^="shopify-section-template"][id*="__main"] .lrw,
[id^="shopify-section-template"][id*="__main"] .review-text,
[id^="shopify-section-template"][id*="__main"] .product__review-summary {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #756957 !important;
}

/* Trust features / bullet rows */
[id^="shopify-section-template"][id*="__main"] .product__features,
[id^="shopify-section-template"][id*="__main"] .product__features li,
[id^="shopify-section-template"][id*="__main"] .lumin-list,
[id^="shopify-section-template"][id*="__main"] .lumin-list li {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif !important;
  color: #4a3f31 !important;
}

/* ══════════════════════════════════════════════════════════════
   HIDE EMPTY TRUST-FEATURE CELLS
   trust_feature blocks render both slots even when text_2 is
   empty. Hide any `.hr-trust-item` whose content has no text.
   ══════════════════════════════════════════════════════════════ */
.hr-trust-item:not(:has(.hr-trust-text, p, span[class*="text"])),
.hr-trust-item:has(.hr-trust-text:empty),
.hr-trust-item:has(.rte:empty) {
  display: none !important;
  visibility: hidden !important;
}

/* ══════════════════════════════════════════════════════════════
   TRANSLATION COMPATIBILITY
   When the hr-translate widget swaps English text for longer
   translations (Indonesian, German, etc.), make sure our new
   sections don't break: allow text to wrap, stretch containers,
   keep typography readable, and don't clip overflow.
   ══════════════════════════════════════════════════════════════ */

/* Nature Did: headline + prose + no-list must flex and wrap */
.hrn__title,
.hrn__index,
.hrn__prose,
.hrn__left,
.hrn__label-left,
.hrn__label-right,
.hrn__cta,
.hrn__tag {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  max-width: 100%;
}
.hrn__body { min-height: 0; }
.hrn__label { flex-wrap: wrap; gap: 12px; }
.hrn__cta-row { flex-wrap: wrap; row-gap: 12px; }
.hrn__cta { white-space: normal; text-align: left; line-height: 1.3; }

/* Week-by-week: phase titles, bodies, day numbers can grow */
.hwbw__title,
.hwbw__intro,
.hwbw__step-phase,
.hwbw__step-title,
.hwbw__step-body,
.hwbw__step-marker,
.hwbw__footer-quote,
.hwbw__label-left,
.hwbw__label-right,
.hwbw__cta,
.hwbw__cta-label {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  max-width: 100%;
}
.hwbw__label { flex-wrap: wrap; gap: 12px; }
.hwbw__head { align-items: start !important; }
.hwbw__footer { flex-wrap: wrap; gap: 24px; row-gap: 24px; }
.hwbw__cta { white-space: normal; text-align: left; line-height: 1.3; min-height: 56px; }
/* Long translated phase titles need vertical room, not overflow */
.hwbw__step { min-height: 0; overflow: visible; }
.hwbw__step-day { font-size: clamp(40px, 5vw, 80px); }
.hwbw__step-title { max-width: 18ch; line-height: 1.25; }
.hwbw__step-body { max-width: 34ch; }

/* FAQ: questions + answers must wrap gracefully */
[id^="shopify-section-template"][id*="collapsible_content"] h2,
[id^="shopify-section-template"][id*="collapsible_content"] .title,
[id^="shopify-section-template"][id*="collapsible_content"] details .accordion__title,
[id^="shopify-section-template"][id*="collapsible_content"] details summary h3,
[id^="shopify-section-template"][id*="collapsible_content"] details p {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  max-width: 100%;
}

/* Mobile: further relax grid so long text doesn't crush layouts */
@media (max-width: 1000px) {
  .hrn__body,
  .hrn__head { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hwbw__head { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hwbw__track { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   FAQ — MINIMAL DOSSIER STYLE (conservative, no layout resets)
   ══════════════════════════════════════════════════════════════ */

/* Import fonts — used across all product-page sections */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,700;0,9..144,800;1,9..144,400&family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

[id^="shopify-section-template"][id*="collapsible_content"] {
  background: #faf4eb !important;
  padding-top: 96px !important;
  padding-bottom: 112px !important;
}

/* Section heading ("Frequently Asked Questions") */
[id^="shopify-section-template"][id*="collapsible_content"] h2,
[id^="shopify-section-template"][id*="collapsible_content"] .title {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #14100b;
  font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 700;
}

/* Each FAQ row — thin rule separators, no card shell */
[id^="shopify-section-template"][id*="collapsible_content"] details {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #c9b89a !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
[id^="shopify-section-template"][id*="collapsible_content"] details:last-of-type {
  border-bottom: 1px solid #c9b89a !important;
}

/* Question text (H3 inside summary) */
[id^="shopify-section-template"][id*="collapsible_content"] details .accordion__title,
[id^="shopify-section-template"][id*="collapsible_content"] details summary h3,
[id^="shopify-section-template"][id*="collapsible_content"] details summary h2 {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.35;
  color: #14100b;
  letter-spacing: -0.005em;
  font-variation-settings: "SOFT" 100, "opsz" 72, "wght" 500;
}

/* Answer body */
[id^="shopify-section-template"][id*="collapsible_content"] details .rte,
[id^="shopify-section-template"][id*="collapsible_content"] details .accordion__content {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #4a3f31;
}
[id^="shopify-section-template"][id*="collapsible_content"] details p {
  color: #4a3f31;
}
[id^="shopify-section-template"][id*="collapsible_content"] details strong { color: #14100b; font-weight: 600; }
[id^="shopify-section-template"][id*="collapsible_content"] details em { font-style: italic; color: #c05e10; }

/* Hover hint on question */
[id^="shopify-section-template"][id*="collapsible_content"] details summary:hover .accordion__title {
  color: #c05e10;
  transition: color 0.2s ease;
}

/* Toggle icon tint */
[id^="shopify-section-template"][id*="collapsible_content"] details[open] summary .icon-caret,
[id^="shopify-section-template"][id*="collapsible_content"] details[open] summary svg {
  color: #c05e10;
}

/* Kill the tiny white padding band that rich_text_seo renders
   with by default. */
[id^="shopify-section-template"][id*="rich_text_seo"] {
  padding-top: 24px !important;
  padding-bottom: 48px !important;
}

/* Ensure the stats and the dedicated hr__* sections all
   render on the same cream base. Defensive redeclaration. */
.hps, .hrt, .hpw {
  background: #faf4eb !important;
}

/* custom_liquid_placeholder contains a white-bg inner wrapper
   that bleeds through as a visible horizontal stripe between
   the flip cards and the Why section. Force every descendant
   transparent so the cream section bg shows through. */
[id^="shopify-section-template"][id*="custom_liquid_placeholder_uQ3N7a"] *,
[id^="shopify-section-template"][id*="custom_liquid_placeholder_uQ3N7a"] div {
  background: transparent !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════
   HEADER — full-width light-orange aurora background
   ═══════════════════════════════════════════════════ */
#shopify-section-header,
.shopify-section-header,
sticky-header,
.header-wrapper {
  position: relative;
  isolation: isolate;
  overflow: visible; /* one-pill header: don't clip the pill's shadow or drawers */
}

/* Global horizontal-scroll safety net — desktop only.
   On mobile, overflow-x:hidden chops pinch-zoom panning. */
@media screen and (min-width: 750px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
}

/* Mobile + tablet: clip horizontal overflow to stop the whole-page "pan the canvas" bug.
   overflow-x:clip preserves pinch-zoom AND position:sticky (unlike overflow:hidden). */
@media screen and (max-width: 1024px) {
  html, body {
    overflow-x: clip !important;
    max-width: 100% !important;
    width: 100%;
  }

  body {
    overscroll-behavior-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .hr-facts-section,
  section.hr-facts-section {
    overflow: visible !important;
    overflow-x: visible !important;
  }
}

/* Keep the header contents readable over the aurora */
#shopify-section-header > *,
.shopify-section-header > *,
sticky-header > *,
.header-wrapper > * {
  position: relative;
  z-index: 2;
}

/* ONE-PILL LIQUID GLASS (owner spec 2026-07-08): the aurora band is OFF and the
   section shell is transparent — the pill in component-space-header.css is the
   only painted surface. The inner .header stays transparent so the pill glass
   shows through; the .header-wrapper background is NOT overridden here (the
   liquid-glass material lives in component-space-header.css). */
#shopify-section-header::before, .shopify-section-header::before, sticky-header::before,
#shopify-section-header::after,  .shopify-section-header::after,  sticky-header::after {
  content: none !important; background: none !important;
}
#shopify-section-header, .shopify-section-header { background: transparent !important; }
#shopify-section-header .header, sticky-header .header { background: transparent !important; }

/* Announcement bar (if present inside header section) keeps its own color;
   scope the aurora so it lives behind the logo+nav row, not on top of it. */
#shopify-section-header .announcement-bar,
#shopify-section-header .utility-bar,
sticky-header .announcement-bar,
sticky-header .utility-bar {
  position: relative;
  z-index: 3;
}



/* ═══════════════════════════════════════════════════
   Heritage cards (Warriors / Cosmonaut / Olympians)
   — mobile typography & spacing fix
   ═══════════════════════════════════════════════════ */

@media screen and (max-width: 749px) {
  /* Tighter padding & rounded corners on mobile */
  #shopify-section-lumin_mega_tN8Nxt .lm-image-mega,
  #shopify-section-lumin_mega_yBVfAb .lm-image-mega,
  #shopify-section-lumin_mega_96gzBK .lm-image-mega {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  /* Heading sizing on mobile */
  #shopify-section-lumin_mega_tN8Nxt .fancy-heading,
  #shopify-section-lumin_mega_yBVfAb .fancy-heading,
  #shopify-section-lumin_mega_96gzBK .fancy-heading,
  #shopify-section-lumin_mega_tN8Nxt h2,
  #shopify-section-lumin_mega_yBVfAb h2,
  #shopify-section-lumin_mega_96gzBK h2 {
    font-size: 32px !important;
    line-height: 1.08 !important;
    margin-top: 8px !important;
    margin-bottom: 14px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Body text — comfortable mobile reading size */
  #shopify-section-lumin_mega_tN8Nxt .image-with-text__content p,
  #shopify-section-lumin_mega_yBVfAb .image-with-text__content p,
  #shopify-section-lumin_mega_96gzBK .image-with-text__content p {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.005em !important;
    margin-bottom: 22px !important;
  }

  /* Reduce excess top margin between image and text */
  #shopify-section-lumin_mega_tN8Nxt .image-with-text__text-item,
  #shopify-section-lumin_mega_yBVfAb .image-with-text__text-item,
  #shopify-section-lumin_mega_96gzBK .image-with-text__text-item {
    padding: 26px 18px 28px !important;
  }

  /* Buttons consistent across all 3 cards */
  #shopify-section-lumin_mega_tN8Nxt .button,
  #shopify-section-lumin_mega_yBVfAb .button,
  #shopify-section-lumin_mega_96gzBK .button {
    width: auto !important;
    min-width: 200px;
    margin-top: 8px !important;
    padding: 13px 26px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.1em !important;
  }
}


/* ═══════════════════════════════════════════════════
   Why-Pouch-Not-Pills section — typography + mobile VS divider
   ═══════════════════════════════════════════════════ */

/* Bump headline sizes globally for readability */
.wpnp-comparison-table_9P3crY .wpnp__heading,
[class*="wpnp-"] .wpnp__heading {
  font-size: clamp(36px, 5vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
}

.wpnp-comparison-table_9P3crY .wpnp__lede,
[class*="wpnp-"] .wpnp__lede {
  font-size: clamp(15.5px, 1.4vw, 18px) !important;
  line-height: 1.55 !important;
}

/* "WHAT THEY GIVE YOU" / "WHAT WE GIVE YOU" subtag labels */
.wpnp-comparison-table_9P3crY .wpnp__subtag,
[class*="wpnp-"] .wpnp__subtag {
  font-size: 12.5px !important;
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
}

/* Card kickers (e.g. "A typical supplement shelf" / "One whole-food matrix") */
.wpnp-comparison-table_9P3crY .wpnp__kicker,
[class*="wpnp-"] .wpnp__kicker {
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  font-weight: 600 !important;
}

/* "Your cabinet" / "The pouch" — bigger column titles */
.wpnp-comparison-table_9P3crY .wpnp__title,
[class*="wpnp-"] .wpnp__title {
  font-size: clamp(28px, 3vw, 40px) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
}

/* Item rows (Sand, Wax, Titanium paint, etc.) — readable size */
.wpnp-comparison-table_9P3crY .wpnp__them-name,
.wpnp-comparison-table_9P3crY .wpnp__them-tag,
[class*="wpnp-"] .wpnp__them-name {
  font-size: 17px !important;
  line-height: 1.3 !important;
}
.wpnp-comparison-table_9P3crY .wpnp__them-tag,
[class*="wpnp-"] .wpnp__them-tag {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}

/* Us chips (Omega-7, 88% Absorption, etc.) — readable */
.wpnp-comparison-table_9P3crY .wpnp__chip-label,
[class*="wpnp-"] .wpnp__chip-label {
  font-size: 14.5px !important;
  font-weight: 600 !important;
}
.wpnp-comparison-table_9P3crY .wpnp__chip-note,
[class*="wpnp-"] .wpnp__chip-note {
  font-size: 12px !important;
  opacity: 0.78;
}

/* MOBILE: stack the two columns + show clear "VS" divider between them */
@media screen and (max-width: 749px) {
  /* Force single-column stack */
  [class*="wpnp-"] .wpnp__grid,
  .wpnp-comparison-table_9P3crY .wpnp__grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* "VS" badge between the cabinet and pouch columns on mobile */
  [class*="wpnp-"] .wpnp__col--theirs,
  .wpnp-comparison-table_9P3crY .wpnp__col--theirs {
    margin-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    position: relative;
  }
  [class*="wpnp-"] .wpnp__col--theirs::after,
  .wpnp-comparison-table_9P3crY .wpnp__col--theirs::after {
    content: "VS";
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    z-index: 5;
    background: linear-gradient(135deg, #BB6B23 0%, #FF7F33 50%, #FFAA33 100%);
    color: #fff;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    padding: 9px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(187,107,35,0.45);
  }
  [class*="wpnp-"] .wpnp__col--us,
  .wpnp-comparison-table_9P3crY .wpnp__col--us {
    margin-top: 22px;
    border-radius: 0 0 18px 18px !important;
  }

  /* Subtag labels stack so both visible above their card */
  [class*="wpnp-"] .wpnp__subtag-row,
  .wpnp-comparison-table_9P3crY .wpnp__subtag-row {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  [class*="wpnp-"] .wpnp__subtag-right,
  .wpnp-comparison-table_9P3crY .wpnp__subtag-right {
    margin-top: 32px !important;
  }

  /* Mobile typography bumps */
  [class*="wpnp-"] .wpnp__heading {
    font-size: clamp(30px, 9vw, 44px) !important;
  }
  [class*="wpnp-"] .wpnp__lede {
    font-size: 15.5px !important;
  }
  [class*="wpnp-"] .wpnp__title {
    font-size: 26px !important;
  }
  [class*="wpnp-"] .wpnp__them-name {
    font-size: 16.5px !important;
  }
  [class*="wpnp-"] .wpnp__chip-label {
    font-size: 14px !important;
  }
}


/* ═══════════════════════════════════════════════════
   Daily Servings → Clinically Proven seam-killer.
   These two sections should read as ONE continuous
   "Backed by Nature · Verified by Science" aurora zone.
   ═══════════════════════════════════════════════════ */
#shopify-section-daily_servings_section_mwqMfk,
#shopify-section-scroll_text_6gkfTn {
  margin: 0 !important;
  padding: 0 !important;
}
#shopify-section-daily_servings_section_mwqMfk {
  border-bottom: 0 !important;
}
#shopify-section-scroll_text_6gkfTn {
  border-top: 0 !important;
}
#shopify-section-daily_servings_section_mwqMfk + #shopify-section-scroll_text_6gkfTn {
  margin-top: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   HERITAGE CHAPTER CARDS — Warriors / Cosmonaut / Olympians.
   Transforms the basic lumin-mega image+text blocks into editorial,
   premium chapter previews with:
     - VOL. chapter eyebrow + year + place (via ::before)
     - Italic Fraunces heading
     - Italic serif body
     - Text-link CTA (not a pill button)
     - Soft image vignette
   Applied via section ID so other lumin-mega instances are unaffected.
   ═══════════════════════════════════════════════════════════════════ */

#LM--lumin_mega_tN8Nxt,
#LM--lumin_mega_yBVfAb,
#LM--lumin_mega_96gzBK,
#shopify-section-lumin_mega_tN8Nxt,
#shopify-section-lumin_mega_yBVfAb,
#shopify-section-lumin_mega_96gzBK {
  background: #fbf6ec !important;
}

/* Card frame */
#LM--lumin_mega_tN8Nxt .lm-image-mega,
#LM--lumin_mega_yBVfAb .lm-image-mega,
#LM--lumin_mega_96gzBK .lm-image-mega {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(31, 20, 8, 0.10), 0 6px 16px rgba(31, 20, 8, 0.06) !important;
  background: #fffaf0 !important;
  isolation: isolate !important;
}

/* ── KILL the lumin-mega overlap mechanics.
   The default content_layout="overlap" pulls the text card up over the
   image with a negative margin, which reads as a glass card blocking
   the photo. We remove all of that so image + card sit cleanly. */
#LM--lumin_mega_tN8Nxt .image-with-text__text-item,
#LM--lumin_mega_yBVfAb .image-with-text__text-item,
#LM--lumin_mega_96gzBK .image-with-text__text-item {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
  transform: none !important;
}
#LM--lumin_mega_tN8Nxt .image-with-text__media-item,
#LM--lumin_mega_yBVfAb .image-with-text__media-item,
#LM--lumin_mega_96gzBK .image-with-text__media-item {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}
#LM--lumin_mega_tN8Nxt .image-with-text__media,
#LM--lumin_mega_yBVfAb .image-with-text__media,
#LM--lumin_mega_96gzBK .image-with-text__media {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  position: relative !important;
}

/* ── DESKTOP: side-by-side, image left, card right, touching */
@media screen and (min-width: 750px) {
  #LM--lumin_mega_tN8Nxt .image-with-text__grid,
  #LM--lumin_mega_yBVfAb .image-with-text__grid,
  #LM--lumin_mega_96gzBK .image-with-text__grid {
    display: grid !important;
    grid-template-columns: 1.05fr 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__media-item,
  #LM--lumin_mega_yBVfAb .image-with-text__media-item,
  #LM--lumin_mega_96gzBK .image-with-text__media-item {
    min-height: 460px !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__media,
  #LM--lumin_mega_yBVfAb .image-with-text__media,
  #LM--lumin_mega_96gzBK .image-with-text__media {
    height: 100% !important;
    min-height: 460px !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__media img,
  #LM--lumin_mega_yBVfAb .image-with-text__media img,
  #LM--lumin_mega_96gzBK .image-with-text__media img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__text-item,
  #LM--lumin_mega_yBVfAb .image-with-text__text-item,
  #LM--lumin_mega_96gzBK .image-with-text__text-item {
    display: flex !important;
    align-items: center !important;
  }
}

/* Image area + vignette */
#LM--lumin_mega_tN8Nxt .image-with-text__media,
#LM--lumin_mega_yBVfAb .image-with-text__media,
#LM--lumin_mega_96gzBK .image-with-text__media {
  position: relative !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
#LM--lumin_mega_tN8Nxt .image-with-text__media::after,
#LM--lumin_mega_yBVfAb .image-with-text__media::after,
#LM--lumin_mega_96gzBK .image-with-text__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(31, 20, 8, 0) 50%, rgba(31, 20, 8, 0.18) 100%),
    linear-gradient(180deg, rgba(31, 20, 8, 0.06) 0%, rgba(31, 20, 8, 0) 30%, rgba(31, 20, 8, 0) 70%, rgba(31, 20, 8, 0.12) 100%);
  pointer-events: none;
}
#LM--lumin_mega_tN8Nxt .image-with-text__media img,
#LM--lumin_mega_yBVfAb .image-with-text__media img,
#LM--lumin_mega_96gzBK .image-with-text__media img {
  border-radius: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Content area */
#LM--lumin_mega_tN8Nxt .image-with-text__content,
#LM--lumin_mega_yBVfAb .image-with-text__content,
#LM--lumin_mega_96gzBK .image-with-text__content {
  background: #fffaf0 !important;
  padding: 38px 36px 40px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  position: relative !important;
}

/* Chapter eyebrow injected via ::before */
#LM--lumin_mega_tN8Nxt .image-with-text__content::before,
#LM--lumin_mega_yBVfAb .image-with-text__content::before,
#LM--lumin_mega_96gzBK .image-with-text__content::before {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #c05e10;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(192, 94, 16, 0.30);
}
#LM--lumin_mega_tN8Nxt .image-with-text__content::before {
  content: "VOL. I  ·  327 BCE \2192 1206 CE  ·  PERSIA \2192 MONGOLIA";
}
#LM--lumin_mega_yBVfAb .image-with-text__content::before {
  content: "VOL. II  ·  1961  ·  USSR \2014 LOW EARTH ORBIT";
}
#LM--lumin_mega_96gzBK .image-with-text__content::before {
  content: "VOL. III  ·  2008  ·  BEIJING OLYMPICS";
}

/* Heading */
#LM--lumin_mega_tN8Nxt .image-with-text__heading,
#LM--lumin_mega_yBVfAb .image-with-text__heading,
#LM--lumin_mega_96gzBK .image-with-text__heading,
#LM--lumin_mega_tN8Nxt .fancy-heading,
#LM--lumin_mega_yBVfAb .fancy-heading,
#LM--lumin_mega_96gzBK .fancy-heading,
#LM--lumin_mega_tN8Nxt h2,
#LM--lumin_mega_yBVfAb h2,
#LM--lumin_mega_96gzBK h2 {
  font-family: "Fraunces", "Playfair Display", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: #1f1408 !important;
  margin: 0 0 18px !important;
  text-align: left !important;
  padding: 0 !important;
}

/* Body text */
#LM--lumin_mega_tN8Nxt .image-with-text__content p,
#LM--lumin_mega_yBVfAb .image-with-text__content p,
#LM--lumin_mega_96gzBK .image-with-text__content p {
  font-family: "Fraunces", "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 17.5px !important;
  line-height: 1.55 !important;
  color: rgba(31, 20, 8, 0.72) !important;
  margin: 0 0 28px !important;
  letter-spacing: 0.005em !important;
  text-align: left !important;
}

/* Button \2192 elegant text link with arrow */
#LM--lumin_mega_tN8Nxt .button,
#LM--lumin_mega_yBVfAb .button,
#LM--lumin_mega_96gzBK .button {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  color: #c05e10 !important;
  border: none !important;
  border-bottom: 1.5px solid #c05e10 !important;
  border-radius: 0 !important;
  padding: 6px 0 8px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  min-height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: gap 0.3s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s ease !important;
  width: auto !important;
  min-width: 0 !important;
}
#LM--lumin_mega_tN8Nxt .button::after,
#LM--lumin_mega_yBVfAb .button::after,
#LM--lumin_mega_96gzBK .button::after {
  content: "\2192";
  font-family: serif;
  font-size: 16px;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
#LM--lumin_mega_tN8Nxt .button:hover::after,
#LM--lumin_mega_yBVfAb .button:hover::after,
#LM--lumin_mega_96gzBK .button:hover::after {
  transform: translateX(4px);
}
#LM--lumin_mega_tN8Nxt .button:hover,
#LM--lumin_mega_yBVfAb .button:hover,
#LM--lumin_mega_96gzBK .button:hover {
  background: transparent !important;
  color: #BB6B23 !important;
  border-bottom-color: #BB6B23 !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}
#LM--lumin_mega_tN8Nxt .button::before,
#LM--lumin_mega_yBVfAb .button::before,
#LM--lumin_mega_96gzBK .button::before {
  display: none !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  #LM--lumin_mega_tN8Nxt .lm-image-mega,
  #LM--lumin_mega_yBVfAb .lm-image-mega,
  #LM--lumin_mega_96gzBK .lm-image-mega {
    margin-left: 18px !important;
    margin-right: 18px !important;
    border-radius: 20px !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__content,
  #LM--lumin_mega_yBVfAb .image-with-text__content,
  #LM--lumin_mega_96gzBK .image-with-text__content {
    padding: 28px 24px 30px !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__content::before,
  #LM--lumin_mega_yBVfAb .image-with-text__content::before,
  #LM--lumin_mega_96gzBK .image-with-text__content::before {
    font-size: 9.5px;
    letter-spacing: 0.24em;
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__heading,
  #LM--lumin_mega_yBVfAb .image-with-text__heading,
  #LM--lumin_mega_96gzBK .image-with-text__heading,
  #LM--lumin_mega_tN8Nxt h2,
  #LM--lumin_mega_yBVfAb h2,
  #LM--lumin_mega_96gzBK h2 {
    font-size: 30px !important;
    line-height: 1.04 !important;
    margin-bottom: 14px !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__content p,
  #LM--lumin_mega_yBVfAb .image-with-text__content p,
  #LM--lumin_mega_96gzBK .image-with-text__content p {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
  }
  #LM--lumin_mega_tN8Nxt .button,
  #LM--lumin_mega_yBVfAb .button,
  #LM--lumin_mega_96gzBK .button {
    font-size: 11px !important;
    letter-spacing: 0.20em !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   HERITAGE CARDS — BULLETPROOF overlap kill.
   The theme's image-with-text--overlap class applies transforms,
   negative margins, and absolute positioning that can sneak past
   selectors. This block forces flat grid layout with no overlap
   anywhere, on either viewport.
   ═══════════════════════════════════════════════════════════════════ */

/* Neutralise ALL theme overlap modifiers on these 3 sections */
#LM--lumin_mega_tN8Nxt .image-with-text,
#LM--lumin_mega_yBVfAb .image-with-text,
#LM--lumin_mega_96gzBK .image-with-text,
#LM--lumin_mega_tN8Nxt .image-with-text--overlap,
#LM--lumin_mega_yBVfAb .image-with-text--overlap,
#LM--lumin_mega_96gzBK .image-with-text--overlap {
  display: block !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

#LM--lumin_mega_tN8Nxt .image-with-text__media,
#LM--lumin_mega_yBVfAb .image-with-text__media,
#LM--lumin_mega_96gzBK .image-with-text__media,
#LM--lumin_mega_tN8Nxt .image-with-text__media img,
#LM--lumin_mega_yBVfAb .image-with-text__media img,
#LM--lumin_mega_96gzBK .image-with-text__media img,
#LM--lumin_mega_tN8Nxt .image-with-text__content,
#LM--lumin_mega_yBVfAb .image-with-text__content,
#LM--lumin_mega_96gzBK .image-with-text__content {
  border-radius: 0 !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* DESKTOP: lock to perfect side-by-side, equal heights */
@media screen and (min-width: 750px) {
  #LM--lumin_mega_tN8Nxt .image-with-text__grid,
  #LM--lumin_mega_yBVfAb .image-with-text__grid,
  #LM--lumin_mega_96gzBK .image-with-text__grid {
    display: grid !important;
    grid-template-columns: 1.05fr 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__grid > *,
  #LM--lumin_mega_yBVfAb .image-with-text__grid > *,
  #LM--lumin_mega_96gzBK .image-with-text__grid > * {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-row: 1 !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__media-item,
  #LM--lumin_mega_yBVfAb .image-with-text__media-item,
  #LM--lumin_mega_96gzBK .image-with-text__media-item {
    height: 100% !important;
    min-height: 460px !important;
    align-self: stretch !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__media,
  #LM--lumin_mega_yBVfAb .image-with-text__media,
  #LM--lumin_mega_96gzBK .image-with-text__media {
    height: 100% !important;
    min-height: 460px !important;
    width: 100% !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__media img,
  #LM--lumin_mega_yBVfAb .image-with-text__media img,
  #LM--lumin_mega_96gzBK .image-with-text__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: relative !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__text-item,
  #LM--lumin_mega_yBVfAb .image-with-text__text-item,
  #LM--lumin_mega_96gzBK .image-with-text__text-item {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    align-self: stretch !important;
  }
}

/* MOBILE: clean vertical stack, image on top with fixed height, NO overlap */
@media screen and (max-width: 749px) {
  #LM--lumin_mega_tN8Nxt .image-with-text__grid,
  #LM--lumin_mega_yBVfAb .image-with-text__grid,
  #LM--lumin_mega_96gzBK .image-with-text__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__media-item,
  #LM--lumin_mega_yBVfAb .image-with-text__media-item,
  #LM--lumin_mega_96gzBK .image-with-text__media-item {
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    order: 1 !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__text-item,
  #LM--lumin_mega_yBVfAb .image-with-text__text-item,
  #LM--lumin_mega_96gzBK .image-with-text__text-item {
    width: 100% !important;
    order: 2 !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__media,
  #LM--lumin_mega_yBVfAb .image-with-text__media,
  #LM--lumin_mega_96gzBK .image-with-text__media {
    height: 100% !important;
    width: 100% !important;
  }
  #LM--lumin_mega_tN8Nxt .image-with-text__media img,
  #LM--lumin_mega_yBVfAb .image-with-text__media img,
  #LM--lumin_mega_96gzBK .image-with-text__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   DISABLE THE CLICK-TO-ZOOM / LIGHTBOX on product images sitewide.
   The theme's <modal-opener> custom element wraps every product image
   and binds a click handler that opens the ProductModal dialog (which
   blows the image up to a huge overlay). Hide the trigger UI + zoom
   icon + invisible toggle button so nothing fires.
   ═══════════════════════════════════════════════════════════════════ */

/* Kill the invisible toggle button that fires the modal */
.product__modal-opener .product__media-toggle,
.product__modal-opener button[aria-haspopup="dialog"],
modal-opener .product__media-toggle,
modal-opener button[aria-haspopup="dialog"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Hide the magnifier / play icon overlay that hinted at the zoom action */
.product__modal-opener .product__media-icon,
modal-opener .product__media-icon,
.product__media-icon--lightbox,
.product__media-icon--hover {
  display: none !important;
}

/* Restore normal cursor — no more "click to enlarge" affordance */
.product__modal-opener,
.product__modal-opener .product__media,
.product__modal-opener img,
.product__media-list .product__media-item,
.product__media-item img,
modal-opener {
  cursor: default !important;
}

/* Kill any image-magnify hover behavior */
.image-magnify-hover,
.image-magnify-lightbox {
  cursor: default !important;
}
.image-magnify-hover:hover,
.image-magnify-lightbox:hover {
  transform: none !important;
}

/* Belt-and-suspenders: if the ProductModal dialog somehow opens, hide it */
product-modal[open],
product-modal.is-open,
.product-media-modal[open],
.product-media-modal.is-open {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HR :: PRODUCT GALLERY — UNIFORM IMAGE CARDS + NATIVE VIDEO
   ═══════════════════════════════════════════════════════════════════
   Image tiles all lock to vertical 4:5 so swapping between photos
   doesn't make the gallery height jump.
   Video tile is its own beast — keep it 16:9 horizontal (native shape,
   no crop). The video slide is letterboxed inside a 4:5 reservation
   so the slider doesn't violently resize when you scroll to it.
   Thumbnails are perfect squares.
   Scope: product page only (.product__media-list).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Image tiles: vertical 4:5, content fills the card ─────────────── */
.product__media-list .product__media-item.media-type-image .product-media-container,
.product__media-list .product__media-item .product-media-container.media-type-image {
  aspect-ratio: 4 / 5 !important;
  --ratio: 0.8 !important;
  --preview-ratio: 0.8 !important;
  overflow: hidden;
  border-radius: 18px;
  /* 2026-07-18: was flat #fff, which read as a stark white card behind any
     letterboxed (contain-fit) photo -- a white island against the page's
     cream field. Match the warm card tone the mobile gallery treatment
     below already uses. */
  background: linear-gradient(180deg, #FFF7EB 0%, #FFEFDC 100%);
}
.product__media-list .product__media-item.media-type-image .product__media,
.product__media-list .product__media-item .product-media-container.media-type-image .product__media {
  aspect-ratio: 4 / 5 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative;
  overflow: hidden;
}
.product__media-list .product__media-item.media-type-image img,
.product__media-list .product__media-item .product-media-container.media-type-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

/* ── Video tile: native horizontal 16:9, letterboxed inside a
      brand-gradient frame with rising-bubble particles ───────────── */
.product__media-list .product__media-item.product__media-item--full .product-media-container,
.product__media-list .product__media-item .product-media-container.media-type-video {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 200, 130, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(187, 107, 35, 0.55) 0%, transparent 60%),
    linear-gradient(135deg, #BB6B23 0%, #FF7F33 50%, #FFAA33 100%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
}

/* Subtle warm glow vignette layered over the gradient */
.product__media-list .product__media-item.product__media-item--full .product-media-container::after,
.product__media-list .product__media-item .product-media-container.media-type-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(40, 22, 6, 0.18) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Bubble layer container — sits between the gradient and the video.
   Bubble nodes are injected by inline JS in main-product.liquid. */
.product__media-list .product-media-container .hr-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.product__media-list .product-media-container .hr-bubble {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 35%, rgba(255, 255, 255, 0.08) 65%, transparent 100%);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.25),
    0 0 16px rgba(255, 200, 130, 0.35);
  opacity: 0;
  will-change: transform, opacity;
  animation: hr-bubble-rise linear infinite;
}
.product__media-list .product-media-container .hr-bubble::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 22%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(1px);
}
@keyframes hr-bubble-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.55); opacity: 0; }
  8%   { opacity: 0.85; }
  50%  { transform: translate3d(8px, -50%, 0) scale(0.95); }
  92%  { opacity: 0.7; }
  100% { transform: translate3d(-12px, calc(-100% - 80px), 0) scale(1.15); opacity: 0; }
}

/* Video element — TRANSPARENT background. With object-fit: contain
   the letterbox area shows through to the gradient on the outer
   container. NEVER use a solid colour here or you'll get black bars
   where the 16:9 video doesn't fill the 4:5 frame. */
.product__media-list .product__media-item.product__media-item--full video,
.product__media-list .product__media-item .product-media-container.media-type-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 2;
}

/* Deferred-media / video-section / video wrapper — also transparent
   so nothing covers the gradient behind the video. */
.product__media-list .product__media-item.product__media-item--full .deferred-media,
.product__media-list .product__media-item .product-media-container.media-type-video .deferred-media,
.product__media-list .product__media-item.product__media-item--full video-section,
.product__media-list .product__media-item .product-media-container.media-type-video video-section,
.product__media-list .product__media-item.product__media-item--full .product__media,
.product__media-list .product__media-item .product-media-container.media-type-video .product__media,
.product__media-list .product__media-item.product__media-item--full .media,
.product__media-list .product__media-item .product-media-container.media-type-video .media {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Poster fallback image — contained, transparent bg so gradient shows */
.product__media-list .product__media-item.product__media-item--full .deferred-media__poster img,
.product__media-list .product__media-item .product-media-container.media-type-video img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Belt-and-suspenders: kill the Dawn `.gradient` utility class that
   sometimes adds its own opaque background on the media container */
.product__media-list .product-media-container.gradient.media-type-video,
.product__media-list .product__media-item--full .product-media-container.gradient {
  background-image:
    radial-gradient(ellipse at 30% 0%, rgba(255, 200, 130, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(187, 107, 35, 0.55) 0%, transparent 60%),
    linear-gradient(135deg, #BB6B23 0%, #FF7F33 50%, #FFAA33 100%) !important;
  background-color: #FF7F33 !important;
}

/* Crisp uniform thumbnails — perfect squares, equal spacing */
.thumbnail-list .thumbnail-list__item {
  aspect-ratio: 1 / 1 !important;
}
.thumbnail-list .thumbnail-list__item .thumbnail {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 10px;
}
.thumbnail-list .thumbnail-list__item .thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HR :: MOBILE GALLERY — UNIFORM 1:1 SQUARES, IMAGE FILLS THE FRAME
   ═══════════════════════════════════════════════════════════════════
   Owner 2026-07-18: clean, edge-to-edge mobile gallery. Every slide is a
   1:1 square and the image FILLS it edge to edge (cover) — no letterbox,
   no cream gap above/below. The prior 4:5 + `contain` treatment was what
   letterboxed the SQUARE hero (hr-hero-drizzle-pouch, a 1:1 file) inside
   a portrait box, i.e. the "big white gap above the image" the owner
   flagged. The product photography is predominantly square (the hero +
   three lifestyle shots are 1:1), so a 1:1 frame keeps the hero
   pixel-perfect with zero crop and lets the two portrait shots
   centre-crop gracefully. The video tile stays a clean white square card
   with its footage filling the same 1:1 footprint (uniform slider).
   ═══════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {

  /* Outer slide locked to 1:1 square so the slider never jumps between
     slides of different intrinsic heights (uniform gallery). */
  .product__media-list .product__media-item {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: stretch !important;
  }

  /* Image tile: 1:1 square, image FILLS the frame (cover) — clean full image */
  .product__media-list .product__media-item .product-media-container.media-type-image,
  .product__media-list .product__media-item.media-type-image .product-media-container {
    aspect-ratio: 1 / 1 !important;
    --ratio: 1 !important;
    --preview-ratio: 1 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px;
    overflow: hidden !important;
    position: relative !important; /* containing block for the pinned img below */
    /* Warm the mat TOP to amber so the first gallery square flows out of the
       header's warm amber instead of reading as a pale-white pad under the
       header (owner 2026-07-23). Settles into the existing cream framing. */
    background: linear-gradient(180deg, #FBE7C6 0%, #FDF1E1 46%, #FFEFDC 100%) !important;
    background-color: #FBE7C6 !important;
    background-image: linear-gradient(180deg, #FBE7C6 0%, #FDF1E1 46%, #FFEFDC 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Neutralise the theme's magnify wrapper chain. The photo is wrapped in a
     custom <modal-opener> plus .product__media, and the theme sizes the
     lightbox <img> to its 2x intrinsic height. A `height:100%` chain can't
     survive through the custom element + aspect-ratio boxes (the wrapper
     stayed ~2x tall), so instead we take the wrappers OUT of the sizing
     path: position:static + height:auto lets them collapse (the img is
     pulled out of flow below), and the square .product-media-container
     becomes the img's containing block. */
  .product__media-list .product__media-item .product-media-container.media-type-image .product__modal-opener,
  .product__media-list .product__media-item .product-media-container.media-type-image .product__media,
  .product__media-list .product__media-item .product-media-container.media-type-image .media {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }
  /* Show the FULL photo, never cropped (owner 2026-07-18: product
     photography must never be cut off). Pin the image to fill the square
     container, then `contain` fits the WHOLE image inside the 1:1 frame;
     any letterbox area falls on the warm cream gradient set on the
     container above, so it reads as intentional framing, never a broken
     white bar. Absolute + inset:0 against the (relative, overflow-hidden)
     container guarantees the image box equals the square, sidestepping the
     broken percentage-height chain entirely. */
  .product__media-list .product__media-item .product-media-container.media-type-image img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
  }

  /* Video tile on mobile: CLEAN white 16:9 card. No gradient, no
     bubbles, no orange fill — those belong only on desktop. Selectors
     are over-specified on purpose to beat the desktop `.gradient`
     utility class override that ships !important from earlier in
     this file. */
  .product__media-list .product__media-item.product__media-item--full,
  .product__media-list .product__media-item.product__media-item--full.grid__item {
    aspect-ratio: 1 / 1 !important;
  }
  .product__media-list .product__media-item.product__media-item--full .product-media-container,
  .product__media-list .product__media-item .product-media-container.media-type-video,
  .product__media-list .product__media-item .product-media-container.gradient.media-type-video,
  .product__media-list .product__media-item--full .product-media-container.gradient,
  .product__media-list .product__media-item--full .product-media-container.gradient.media-type-video {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    /* Plain white — explicitly nukes the orange linear-gradient + the
       two radial-gradient highlights set by the desktop .gradient rule */
    background: #fff !important;
    background-image: none !important;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: block !important;
  }
  .product__media-list .product__media-item.product__media-item--full video,
  .product__media-list .product__media-item .product-media-container.media-type-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    background: transparent !important;
    image-rendering: -webkit-optimize-contrast;
  }

  /* Bubble layer — kill it on mobile with max specificity (and JS
     in main-product.liquid already skips injection at this breakpoint,
     but this is the belt to its suspenders) */
  .product__media-list .hr-bubbles,
  .product__media-list .product-media-container .hr-bubbles,
  .product__media-list .product__media-item--full .hr-bubbles {
    display: none !important;
    visibility: hidden !important;
  }

  /* ── Adaptive gallery height — kills the big white gap under the video ──
     The mobile slider is a horizontal grid row whose height equals the
     TALLEST slide (a 4:5 portrait image ≈ 1.25×width). The 16:9 video slide
     is much shorter (≈0.56×width), so it left a large empty band beneath it
     before the thumbnails. Fix: stop the grid from stretching the short
     slide, and let JS clip the viewer to the ACTIVE slide's real height.
     (JS lives in main-product.liquid → hrAdaptiveGalleryHeight.) */
  .product__media-list.slider--mobile {
    align-items: start !important;   /* don't stretch the short video slide */
    overflow-y: hidden;              /* clip the tall grid row to JS-set height */
  }
  /* Transition is enabled by JS AFTER the first height is set, so the initial
     collapse from the tall row down to the video height doesn't animate.
     Clipping the <ul> (not the <slider-component>) keeps the "1/7" counter
     and arrows — which live below the track — visible. */
  .product__media-list.slider--mobile.hr-adaptive-ready {
    /* Height is set explicitly by JS; keep this step immediate to avoid layout
       thrash from transition-driven reflow on every gallery snap. */
    transition: none;
  }

  /* ── Mobile thumbnails — small, sleek, smooth-scrolling row ──
     Owner 2026-07-18: the old row read chunky. Neat 40px squares, tight
     even spacing, momentum horizontal scroll with a hidden scrollbar,
     dimmed inactive tiles and a clean warm-amber ring on the active one. */
  .thumbnail-slider {
    margin-top: 12px !important;
    align-items: center;
  }
  .thumbnail-slider .thumbnail-list.slider,
  .lm-slider-thumb .thumbnail-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    padding: 2px 1px 4px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .thumbnail-slider .thumbnail-list.slider::-webkit-scrollbar,
  .lm-slider-thumb .thumbnail-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .thumbnail-list .thumbnail-list__item.slider__slide {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    scroll-snap-align: start;
  }
  .thumbnail-list .thumbnail-list__item.slider__slide::before {
    content: none !important;
  }
  .thumbnail-list .thumbnail-list__item .thumbnail {
    border-radius: 9px;
    opacity: 0.6;
    box-shadow: inset 0 0 0 1px rgba(36, 20, 5, 0.10);
    transition: opacity 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  }
  .thumbnail-list .thumbnail-list__item .thumbnail[aria-current] {
    opacity: 1;
    box-shadow: 0 0 0 2px #BB6B23, 0 3px 9px -4px rgba(187, 107, 35, 0.55);
  }
  @media (prefers-reduced-motion: reduce) {
    .thumbnail-list .thumbnail-list__item .thumbnail { transition: none; }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HR :: MOBILE GALLERY HARD-RESET (outside @media for safety)
   ═══════════════════════════════════════════════════════════════════
   The desktop `.gradient` utility ships at the same specificity as the
   mobile override. To guarantee mobile wins, this block uses an extra
   .product__media-wrapper anchor + the @media query so it appears
   AFTER the gradient rule in source order and wins the tie-break.
   2026-07-18: this catch-all's `.gradient` half also nets the IMAGE
   containers (Dawn's `.gradient` class is on image AND video tiles), so
   it was silently overriding the dedicated mobile image treatment
   below with flat #fff -- a white island in the gallery. Recolored to
   the same warm card tone used everywhere else in the gallery so it can
   never again resolve to plain white, whichever selector wins the tie. */
@media screen and (max-width: 749px) {
  .product__media-wrapper .product__media-list .product-media-container.media-type-video,
  .product__media-wrapper .product__media-list .product-media-container.gradient {
    background: linear-gradient(180deg, #FFF7EB 0%, #FFEFDC 100%) !important;
    background-image: linear-gradient(180deg, #FFF7EB 0%, #FFEFDC 100%) !important;
    background-color: #FFF7EB !important;
  }
}

/* Tap-to-play badge — always defined, only shown when needed */
.hr-tap-to-play {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}
.hr-tap-to-play__btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #BB6B23 0%, #FF7F33 50%, #FFAA33 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(40, 22, 6, 0.35);
  border: 3px solid rgba(255, 255, 255, 0.9);
}
.hr-tap-to-play__btn::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}

/* ═══════════════════════════════════════════════════════════════════
   HR :: PRODUCT INFO STICKY — KEEP BUY NOW VISIBLE ON DESKTOP
   ═══════════════════════════════════════════════════════════════════ */

@media screen and (min-width: 990px) {
  .product__info-wrapper.product__column-sticky {
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}

/* Mobile sticky Buy Now bar was removed — it was eating too much
   viewport space. Hard-hide any stale instance just in case the
   browser is showing a cached version. */
.hr-mobile-buy-bar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   HR :: UNIFIED RIGHT-RAIL CARD (desktop only)
   ═══════════════════════════════════════════════════════════════════
   Wraps the entire .product__info-container in one bordered card —
   rating, title, badges, price, benefits, Welcome Kit, Buy Now all
   live inside one frame. Adds hairline dividers between sections,
   internal padding, and a corner "BEST VALUE" stamp on top-right.
   ═══════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 990px) {

  /* Card chrome — chained selector for specificity (0,2,1) beats theme's (0,1,0) */
  section.product__info-container,
  .product .product__info-container,
  .product__info-wrapper .product__info-container {
    background: #FFFDF8 !important;
    border: 1.5px solid rgba(187, 107, 35, 0.32) !important;
    border-radius: 14px !important;
    padding: 36px 30px 28px !important;
    position: relative !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 1px 2px rgba(36, 20, 5, 0.03),
      0 30px 60px -40px rgba(36, 20, 5, 0.18) !important;
    overflow: visible !important;
  }

  /* BEST VALUE badge REMOVED — premium brand, not discount.
     Theme sets a ::before pseudo on .product__info-container; hide it. */
  section.product__info-container::before,
  .product .product__info-container::before {
    content: "" !important;
    display: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Hairline divider BEFORE the first benefit block */
  section.product__info-container [class*="qa-feature-feature_rTkbxB"],
  .product .product__info-container [class*="qa-feature-feature_rTkbxB"] {
    border-top: 1px solid rgba(36, 20, 5, 0.10) !important;
    padding-top: 20px !important;
    margin-top: 22px !important;
  }

  /* Hairline divider BEFORE the buy buttons block */
  section.product__info-container .product-form,
  .product .product__info-container .product-form,
  section.product__info-container form[action*="/cart/add"],
  .product .product__info-container form[action*="/cart/add"] {
    border-top: 1px solid rgba(36, 20, 5, 0.10) !important;
    padding-top: 22px !important;
    margin-top: 22px !important;
  }

  /* Compact spacing on inline price/shipping cluster */
  section.product__info-container .product-savings-price,
  section.product__info-container .hr-per-unit-price,
  section.product__info-container .product__tax {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }

  /* Title badges row */
  section.product__info-container .hr-product-value-subtitle {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
  }

  /* Shop Pay installments line — was below the price/free-shipping
     cluster; JS moves it to right under the title badges so it reads
     as a "from $X/mo" payment-tease BEFORE the price reveal. Tone it
     down so it doesn't compete with the price block visually. */
  section.product__info-container .hr-payment-moved,
  section.product__info-container shopify-payment-terms.hr-payment-moved,
  section.product__info-container shopify-payment-terms,
  section.product__info-container .shopify-payment-terms {
    font-size: 11.5px !important;
    color: rgba(36, 20, 5, 0.62) !important;
    opacity: 1;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    padding: 4px 0 2px !important;
    border-bottom: none !important;
    display: block !important;
  }
  section.product__info-container shopify-payment-terms a,
  section.product__info-container .shopify-payment-terms a {
    color: var(--hr-brand-orange, #BB6B23) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* "Benefits you won't find anywhere" heading — prominent Fraunces
     serif italic with a thin gold accent rule above. Reads as a real
     section heading, not a tiny mono label. */
  section.product__info-container .hr-benefits-heading {
    font-family: 'Fraunces', 'Times New Roman', Georgia, serif !important;
    font-weight: 300 !important;
    font-style: italic !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: #241405 !important;
    text-transform: none !important;
    margin: 16px 0 14px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(36, 20, 5, 0.12) !important;
    position: relative;
  }
  section.product__info-container .hr-benefits-heading::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 36px;
    height: 2px;
    background: #BB6B23;
  }

  /* === PRICE BLOCK RESTRAINT — calm the orange-fest ===
     Mute the $249 strikethrough to neutral gray, soften -20% pill,
     calm the "One pouch per day" orange. */
  section.product__info-container .product-savings-price .price--on-sale [class*="regular"],
  section.product__info-container .product-savings-price .price__compare,
  section.product__info-container .product-savings-price s,
  section.product__info-container .product-savings-price del,
  section.product__info-container .price--on-sale .price__regular,
  section.product__info-container [class*="compare-price"] {
    color: rgba(36, 20, 5, 0.42) !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: rgba(36, 20, 5, 0.28) !important;
    font-weight: 400 !important;
  }
  /* SAVINGS BADGE — HIGHLIGHTED. Filled brand-gradient pill with white bold
     text so the discount actually reads as a deal (was invisible: transparent
     bg + faint brown outline). */
  section.product__info-container .price__badge-sale {
    display: inline-block !important;
    background: linear-gradient(135deg, #BB6B23 0%, #FF7F33 55%, #FFAA33 100%) !important;
    color: #FFFDF8 !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px -5px rgba(187, 107, 35, 0.6) !important;
    -webkit-text-fill-color: #FFFDF8 !important;
  }
  section.product__info-container .hr-per-unit-price strong,
  section.product__info-container .hr-per-unit-price b {
    color: #241405 !important;
    font-weight: 500 !important;
  }
  section.product__info-container .hr-per-unit-price {
    color: rgba(36, 20, 5, 0.62) !important;
  }

  /* Once heading is injected, kill the duplicate hairline border-top
     I added earlier on the first feature block (the heading provides
     the divider now) */
  section.product__info-container .hr-benefits-heading + [class*="qa-feature-feature_"] {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Topical-icon attempt REVERTED — my CSS doubled the icons (didn't
     properly hide the original orange checkmark). Will redo after
     inspecting the actual DOM structure for the right element to hide. */
}

/* Savings badge — highlighted at ALL viewports (desktop + mobile) so the
   discount always pops as a real deal, not just on desktop. */
.product__info-container .price__badge-sale {
  display: inline-block !important;
  background: linear-gradient(135deg, #BB6B23 0%, #FF7F33 55%, #FFAA33 100%) !important;
  color: #FFFDF8 !important;
  -webkit-text-fill-color: #FFFDF8 !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px -5px rgba(187, 107, 35, 0.55) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HR :: HEADER SCROLL FIX — kill the show/hide-on-scroll glitch
   ═══════════════════════════════════════════════════════════════════
   The Lumin sticky-header had a hide-on-scroll-down / show-on-scroll-up
   behavior that was choppy and felt buggy. Make the header always
   visible at the top of the viewport with a smooth slide transition,
   no auto-hide. Animation respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
sticky-header,
sticky-header.shopify-section-header-sticky,
sticky-header.shopify-section-header-hidden {
  transform: translateY(0) !important;
  transition: box-shadow 0.25s ease, background-color 0.25s ease !important;
}
sticky-header.shopify-section-header-hidden {
  /* Force visible — was being translated off-screen by the theme JS */
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  sticky-header { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   HR :: STICKY HEADER OPAQUE-ON-SCROLL — kill content bleed-through
   ═══════════════════════════════════════════════════════════════════
   At the TOP of the page the header pill stays the translucent floating
   "liquid glass" (unscrolled, intentional). But once scrolled, the pill
   overlaps page content and, because the base glass background is only
   ~0.42 alpha on mobile, article/price text was double-printing through
   the pill onto the wordmark/logo (owner-confirmed via screenshot).
   Fix: when the section is scrolled-past, make the pill a near-opaque
   warm-cream so NO page content shows through. Backdrop blur is kept for
   polish (at ~0.98 alpha it can no longer leak text). Applies to mobile
   and desktop (the base backgrounds it overrides carry no !important).
   ═══════════════════════════════════════════════════════════════════ */
.section-header.scrolled-past-header .header-wrapper,
.section-header.shopify-section-header-sticky .header-wrapper {
  /* Fully opaque cream (alpha 1.0) so NOT a single pixel of page content can
     whisper through the pill once scrolled. The warm two-stop gradient keeps
     the pill reading as brand cream rather than a flat slab. */
  background:
    linear-gradient(180deg, rgb(255, 250, 243) 0%, rgb(255, 244, 231) 100%) !important;
}
/* Neutralize the specular sweep's transparent top-band so it can't reveal
   a translucent seam once the pill is opaque. */
.section-header.scrolled-past-header .header-wrapper::before,
.section-header.shopify-section-header-sticky .header-wrapper::before {
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════
   HR :: DESKTOP VIDEO — 16:9 INSIDE BRAND ORANGE GRADIENT FRAME
   ═══════════════════════════════════════════════════════════════════
   User preference: bring back the brand-gradient frame around the
   video. 16:9 native video is centered inside a 4:5 portrait frame
   (matches image slides). The frame has the orange brand gradient +
   rising bubble particles from lines ~1517-1641 above. Video uses
   CONTAIN — full video visible, nothing cropped. The letterbox area
   above/below the video shows the gradient frame as the brand effect.
   ═══════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 750px) {

  /* Container: 4:5 portrait, matches image slides */
  .product__media-list .product__media-item.product__media-item--full .product-media-container.media-type-video,
  .product__media-list .product__media-item .product-media-container.media-type-video,
  .product__media-list .product__media-item.product__media-item--full .product-media-container[class*="media-type-video"] {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    /* DO NOT override background here — let the gradient frame from
       lines ~1521-1524 + ~1634-1641 of this file remain visible. */
  }

  /* Outer LI also 4:5 — uniform slider heights */
  .product__media-list .product__media-item.product__media-item--full:has(.product-media-container.media-type-video) {
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }

  /* Video element: CONTAIN — show full 16:9 video, no crop. Letterbox
     bands above/below show the brand orange gradient frame behind.
     Higher specificity to win over the earlier hr-brand-overrides
     'object-fit: contain' rule and the theme's 'cover' rule. */
  .product__media-wrapper .product__media-list .product__media-item.product__media-item--full video,
  .product__media-wrapper .product__media-list .product__media-item .product-media-container.media-type-video video,
  .product__media-list .product__media-item.product__media-item--full video,
  .product__media-list .product__media-item .product-media-container.media-type-video video {
    object-fit: contain !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border-radius: 0;
  }

  /* ── Desktop adaptive gallery height — SAME mechanism mobile uses ──
     The outer slide above is reserved at a tall 4:5 "uniform slider
     height" box, but the JS-corrected video container inside it only
     fills its own real (near-16:9) height, leaving a tall dead gap of
     bare page background below the video (owner-reported: "desktop
     video looks weird"). hrAdaptiveGalleryHeight (main-product.liquid)
     already clips the gallery viewer to the ACTIVE slide's real height
     on mobile; it now runs at every width, so this just supplies the
     desktop half of the same treatment: don't stretch the short video
     slide, and let the JS-set height clip cleanly (overflow already
     computes to hidden here from the overflow-x rule above, this makes
     it explicit) with the identical smooth transition mobile uses. */
  .product__media-list.slider--mobile {
    align-items: start !important;
    overflow-y: hidden;
  }
  .product__media-list.slider--mobile.hr-adaptive-ready {
    /* Keep desktop/mobile adaptive height updates immediate on high-frequency
       gallery changes for lower layout pressure on older iOS devices. */
    transition: none;
  }
}
/* end :: HR desktop video 16:9 inside gradient frame */

/* ═══════════════════════════════════════════════════════════════════
   HR :: PREMIUM HIGHLIGHTER for lumin-mega [bracketed] words
   ═══════════════════════════════════════════════════════════════════
   The lumin-mega fancy_heading uses [word] -> .lumin-section__fancy and
   feature/text blocks use [word] -> .lumin-text__fancy1, (( )) -> fancy2.
   Default styling is a hard black box at a smaller font — looks off.
   Override with a real "highlighter marker swipe": a warm-gold band that
   sits behind the lower ~60% of the text (like a highlighter pen), text
   keeps its own color + size, multi-line safe via box-decoration-break.
   ═══════════════════════════════════════════════════════════════════ */
.lumin-section__fancy,
.lumin-text__fancy1 {
  background-image: linear-gradient(
    180deg,
    transparent 0 54%,
    rgba(255, 193, 110, 0.72) 54% 94%,
    transparent 94%
  ) !important;
  background-color: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  padding: 0 0.12em !important;
  border-radius: 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Secondary highlight (( )) — brand-orange bold text, no marker */
.lumin-text__fancy2 {
  color: #BB6B23 !important;
  font-weight: 600 !important;
  background: none !important;
}

/* ── "Food was the original medicine" feature bullets ──────────────
   Remove the default circle-checkmark icon (the block renders one when
   no icon is set) and close the empty gap so the two benefit lines read
   as clean highlighted statements, not a checklist. */
.qa-feature-feature_LKBxfQ img,
.qa-feature-feature_LKBxfQ svg,
.qa-feature-feature_7q8Cgp img,
.qa-feature-feature_7q8Cgp svg {
  display: none !important;
}
.qa-feature-feature_LKBxfQ,
.qa-feature-feature_7q8Cgp {
  gap: 0 !important;
}
/* Premium typography for the two benefit statements — richer than a
   plain checklist line. Bigger, confident, with a small gold diamond
   marker (replaces the removed checkmark) and the gold highlighter on
   the key phrase carrying the weight. */
.qa-feature-feature_LKBxfQ h4,
.qa-feature-feature_7q8Cgp h4 {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
  color: #3a2a14 !important;
  position: relative !important;
  /* !important is REQUIRED — the theme sets h4 padding to 0 with higher
     priority; without it the text hugs the left edge and the diamond marker
     below lands on top of the first letter. */
  padding-left: 24px !important;
}
.qa-feature-feature_LKBxfQ h4::before,
.qa-feature-feature_7q8Cgp h4::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  background: linear-gradient(135deg, #BB6B23 0%, #FF7F33 52%, #FFAA33 100%);
  transform: rotate(45deg);
  border-radius: 1px;
}
.qa-feature-feature_LKBxfQ,
.qa-feature-feature_7q8Cgp {
  margin: 14px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HR :: "Food was the original medicine" — replace the 5 dated webp
   icons with premium brand-gradient SVG badges (theme assets). Hide the
   original <img>, paint our SVG as a background. nth-child order matches
   index.json: 1 Additive Free · 2 Wild Harvest · 3 Pesticide Free ·
   4 Undiluted · 5 No Sugar.
   ═══════════════════════════════════════════════════════════════════ */
#LM--icons_UBH6M3 .lumin-section__image__wrapper {
  width: 60px !important;
  height: 60px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
#LM--icons_UBH6M3 .lumin-section__image__wrapper img,
#LM--icons_UBH6M3 .lumin-section__image__wrapper svg {
  opacity: 0 !important;
  width: 60px !important;
  height: 60px !important;
}
#LM--icons_UBH6M3 .lumin-section__icon:nth-child(1) .lumin-section__image__wrapper { background-image: url('hr-feat-additive.svg') !important; }
#LM--icons_UBH6M3 .lumin-section__icon:nth-child(2) .lumin-section__image__wrapper { background-image: url('hr-feat-wild.svg') !important; }
#LM--icons_UBH6M3 .lumin-section__icon:nth-child(3) .lumin-section__image__wrapper { background-image: url('hr-feat-pesticide.svg') !important; }
#LM--icons_UBH6M3 .lumin-section__icon:nth-child(4) .lumin-section__image__wrapper { background-image: url('hr-feat-undiluted.svg') !important; }
#LM--icons_UBH6M3 .lumin-section__icon:nth-child(5) .lumin-section__image__wrapper { background-image: url('hr-feat-nosugar.svg') !important; }
/* icon labels — clean mono caps */
#LM--icons_UBH6M3 .lumin-section__icon-heading {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6b5841 !important;
  margin-top: 12px !important;
  line-height: 1.3 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HR :: "Food was the original medicine" — full-frame 16:9 video card
   Dawn .media > * forces position:absolute and collapses the column on desktop.
   ═══════════════════════════════════════════════════════════════════ */
.hr-medicine-video-section .image-with-text__grid,
[id*="lumin_mega_7UeFcG"] .image-with-text__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 20px !important;
}

.hr-medicine-video-section .image-with-text__media-item,
[id*="lumin_mega_7UeFcG"] .image-with-text__media-item {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

.hr-medicine-video-section .image-with-text__text-item,
[id*="lumin_mega_7UeFcG"] .image-with-text__text-item {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.hr-medicine-video-section .image-with-text__media,
.hr-medicine-video-section .image-with-text__media.media,
.hr-medicine-video-section .image-with-text__media.image-with-text__media--adapt,
[id*="lumin_mega_7UeFcG"] .image-with-text__media,
[id*="lumin_mega_7UeFcG"] .image-with-text__media.media,
[id*="lumin_mega_7UeFcG"] .image-with-text__media.image-with-text__media--adapt {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  aspect-ratio: unset !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  transform: none !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(100, 52, 10, 0.16) !important;
}

/* Override Dawn base.css: .media > * { position: absolute } */
.hr-medicine-video-section .image-with-text__media.media > .hr-medicine-video-shell,
[id*="lumin_mega_7UeFcG"] .image-with-text__media.media > .hr-medicine-video-shell {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: #0d0d0d !important;
}

.hr-medicine-video-section .image-with-text__content,
[id*="lumin_mega_7UeFcG"] .image-with-text__content {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  align-self: center !important;
}

.hr-medicine-video-section .hr-medicine-video-shell .hr-medicine-video-player,
.hr-medicine-video-section .image-with-text__media img,
[id*="lumin_mega_7UeFcG"] .hr-medicine-video-shell .hr-medicine-video-player,
[id*="lumin_mega_7UeFcG"] .image-with-text__media img {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #0d0d0d !important;
}

@media screen and (min-width: 750px) {
  .hr-medicine-video-section .image-with-text__media.media > .hr-medicine-video-shell,
  [id*="lumin_mega_7UeFcG"] .image-with-text__media.media > .hr-medicine-video-shell {
    min-height: clamp(280px, 28vw, 420px) !important;
  }
}

@media screen and (max-width: 749px) {
  .hr-medicine-video-section .image-with-text__grid,
  [id*="lumin_mega_7UeFcG"] .image-with-text__grid {
    gap: 14px !important;
  }

  .hr-medicine-video-section .image-with-text__media,
  .hr-medicine-video-section .image-with-text__media.media,
  [id*="lumin_mega_7UeFcG"] .image-with-text__media,
  [id*="lumin_mega_7UeFcG"] .image-with-text__media.media {
    border-radius: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HR :: MOBILE HEADER — compact icon row (☰ logo 🌐 🔍 👤 🛒)
   ═══════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  .hr-announce__inner {
    padding: 6px 12px !important;
    min-height: 0 !important;
  }

  .hr-announce__text {
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
  }

  .hr-announce__cta {
    font-size: 9px !important;
    padding: 3px 10px !important;
  }

  #shopify-section-header .header,
  sticky-header .header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    grid-template-columns: auto 1fr auto !important;
    column-gap: 8px !important;
  }

  #shopify-section-header .header__heading,
  sticky-header .header__heading {
    justify-self: center;
    margin: 0 !important;
  }

  #shopify-section-header .header__heading-logo,
  sticky-header .header__heading-logo {
    max-height: 42px !important;
    width: auto !important;
  }

  #shopify-section-header .header__icons,
  sticky-header .header__icons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #shopify-section-header .header__icon,
  sticky-header .header__icon,
  #shopify-section-header .hr-translate .hr-translate__btn,
  sticky-header .hr-translate .hr-translate__btn,
  #shopify-section-header .hr-translate > .hr-translate__btn,
  sticky-header .hr-translate > .hr-translate__btn {
    width: 4.4rem !important;
    height: 4.4rem !important;
    min-width: 4.4rem !important;
    max-width: 4.4rem !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #shopify-section-header .hr-translate .hr-translate__label,
  sticky-header .hr-translate .hr-translate__label,
  #shopify-section-header .hr-translate__label,
  sticky-header .hr-translate__label {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  #shopify-section-header .hr-translate,
  sticky-header .hr-translate {
    order: 0;
    margin: 0 !important;
  }

  #shopify-section-header .header__search,
  sticky-header .header__search {
    order: 1;
  }

  #shopify-section-header .header__icon--account,
  sticky-header .header__icon--account {
    order: 2;
    display: inline-flex !important;
  }

  #shopify-section-header .header__icon--cart,
  sticky-header .header__icon--cart {
    order: 3;
  }

  /* Hide extra header chrome on mobile to save above-the-fold space */
  #shopify-section-header .header__icon--wishlist,
  #shopify-section-header .header__icon--recently-viewed,
  sticky-header .header__icon--wishlist,
  sticky-header .header__icon--recently-viewed {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════
   SEAMLESS SECTION CHAIN (owner rule 2026-07-09):
   1) Lumin adds margin-top to section wrappers -> white strips between
      sections. Kill them; sections carry their own padding.
   2) Featured product sat white-on-white after heritage's fade -> users
      can't tell where the product zone starts. Give it a cream field,
      and hand off cream -> white into the comparison section after it.
   ═══════════════════════════════════════════════════ */
#MainContent > .shopify-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* 2026-07-10 update: the whole middle band used to read white (featured product,
   comparison table, image-with-text "Powered by Purpose", newsletter). We now paint
   each section's full-bleed .gradient element the base cream so the page flows as one
   continuous field, matching the "See what's inside" page. We target the section's
   own instance-id suffix so nothing leaks to other templates (e.g. About Us uses a
   different image-with-text instance), and we stay shallow (> direct child) so the
   inner opaque content cards keep their own fills and read as cards ON the cream. */
[id$="__featured_product_kLT9Uk"],
[id$="__featured_product_kLT9Uk"] > .gradient,
[id$="__featured_product_kLT9Uk"] .featured-product,
[id$="__comparison_table_9P3crY"],
[id$="__comparison_table_9P3crY"] > .content-for-grouping,
[id$="__blocks_eRBzUf"],
[id$="__blocks_eRBzUf"] > .gradient,
[id$="__newsletter_rEYqWd"],
[id$="__newsletter_rEYqWd"] > .gradient {
  background: #FBF6EC !important;
}

/* ============================================================================
   HR mobile country/currency selector fix (2026-07-10)
   The footer's mobile country picker is a position:fixed BOTTOM-SHEET. That model
   fought the footer's nested stacking contexts and inherited the footer's amber
   --color-background AND the theme's scroll-reveal animation, so it rendered orange
   and see-through, with the FDA disclaimer painting over the country options ("weird
   glitch" when tapping USD/CAD). Rather than fight the fixed-sheet stacking, switch
   mobile to the same simple INLINE dropdown desktop uses: an absolutely-positioned,
   opaque cream panel that opens directly above the button, inside the normal flow.
   No fixed positioning, no full-screen overlay, no stacking trap.
   ============================================================================ */
@media screen and (max-width: 749px){
  /* anchor the dropdown to the selector, and lift this footer branch above the disclaimer */
  .footer__content-bottom-wrapper{ position: relative !important; z-index: 10 !important; }
  .footer .localization-form .disclosure{ position: relative !important; }

  .disclosure__list-wrapper.country-selector{
    position: absolute !important;
    inset: auto 0 calc(100% + 8px) 0 !important;  /* open UPWARD from the button */
    width: 100% !important;
    max-width: none !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px !important;
    border: 1px solid #ecdfca !important;
    box-shadow: 0 22px 50px -18px rgba(60,32,10,0.55) !important;
    z-index: 60 !important;
    /* kill the leaked scroll-reveal so the panel is solid + correctly placed */
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .disclosure__list-wrapper.country-selector,
  .disclosure__list-wrapper.country-selector .country-selector__list,
  .disclosure__list-wrapper.country-selector .country-filter,
  .disclosure__list-wrapper.country-selector .country-selector__close-button{
    background: #FBF6EC !important;
  }
  .disclosure__list-wrapper.country-selector .disclosure__link,
  .disclosure__list-wrapper.country-selector .country,
  .disclosure__list-wrapper.country-selector .localization-form__currency,
  .disclosure__list-wrapper.country-selector .country-selector__close-button{
    color: #2a1c10 !important;
  }
  .disclosure__list-wrapper.country-selector .disclosure__link[aria-current="true"]{
    background: rgba(192,87,14,0.08) !important;
  }
  /* an inline dropdown does not need (and should not show) the full-screen dim */
  .country-selector__overlay{ display: none !important; }
}

/* Product price reads as solid ink (owner 2026-07-15: the amber price + broken "-0%"
   badge read as a messy sale display). The price element has NO .product ancestor in
   this theme and its amber comes from an inherited wrapper color, so target the price
   structure directly. Struck compare-at prices keep their own muted styling. */
.price__regular .price-item--regular,
.price__sale .price-item--sale{
  color: #14100B !important;
}

/* =====================================================================
   PRODUCT PAGE — one continuous warm field (owner 2026-07-18)
   "There are so many dividers. Merge each section's background into the
   one above and below, no dividers anywhere ... it should match and fade
   into each other for the whole product page."

   Same central-CSS technique as the homepage seam-blend: every section
   KEEPS its own base colour; each boundary is melted by fading the UPPER
   section's bottom band into the LOWER section's top colour, and every
   hairline divider border is removed. Scoped to the product-template
   section ids (…__<key>). Static gradients only — GPU-safe, no layout
   shift, nothing animated (reduced-motion safe by construction).

   Page tones: cream #FBF6EC and warm-white #FDFCF9. The pouch-orbit keeps
   its warm wash untouched — its gradient already resolves to cream at both
   its top and bottom stops, so it meets its cream neighbours seamlessly.
   Boundaries that are already same-colour (results->60-day, 60-day->enjoy,
   pouch->closing, closing->models, models->benefits) only needed their
   divider border removed. Verified 375 + 1280: 0 hard seams, 0 h-overflow.
   ===================================================================== */
:root{
  --hrpdp-cream:#FBF6EC;   /* trust · reasons · closing · models · benefits · faq */
  /* Owner 2026-07-23: he still saw a faint divider where cream (#FBF6EC) met the
     warm-white (#FDFCF9) — some fade bridges are occluded by inner cards that paint
     to the section's bottom edge. The two tones differed by only ~21 RGB (invisible
     as a field, visible only as a hard seam line), so converge them to a single tone.
     Every cream/warm-white seam on the product page now has zero step. */
  --hrpdp-warm:#FBF6EC;    /* results · 60-day · enjoy · difference · judgeme     */
  --hrpdp-foot:#FCEEDB;    /* bridge tone into the warm premium footer            */
  --hrpdp-fade:clamp(88px,15vw,150px);
}

/* 1 — remove the literal hairline divider lines between sections */
[id$="__hr_trust_badges"] .hrtb{ border-top-color:transparent !important; border-bottom-color:transparent !important; }
[id$="__hr_results_feel"] [id^="hrf3-"]{ border-top-color:transparent !important; }
[id$="__hr_enjoy_grid"] .hej{ border-top-color:transparent !important; }
[id$="__hr_difference"] .hrdiff{ border-top-color:transparent !important; }
[id$="__hr_judgeme_reviews"] .hrjm{ border-top-color:transparent !important; }

/* 2 — melt every boundary: upper section fades into the next section's colour */

/* buy box + gallery (owner 2026-07-18 follow-up: this used to only fade to
   cream in the LAST var(--hrpdp-fade) before the hand-off to trust badges --
   everywhere above that, product-info/.product__media-wrapper/.hrsb all
   paint no background of their own (confirmed via computed-style), so the
   entire top of the product page sat on the plain white body -- a white
   island from y=0 down to ~this section's end, not just a seam at the
   bottom. Give the wrapper a solid cream fill so the whole section --
   gallery + buy box -- reads as continuous cream from the very top, same
   as every other product-page section in this chain. */
/* Owner round-4 (2026-07-23): "the very top has white padding ... there should
   be a whole section with the same gradient we use on the landing page."
   The product page now OPENS with the same warm amber->cream field as the
   homepage hero (sections/hr-hero-facts.liquid): amber at the very top, easing
   to the brand cream within the first ~660px, then holding cream all the way
   down so the hand-off into hr-trust-badges (cream) stays seamless. Replaces
   the previous flat-cream fill (which read as the "white padding" band because
   the buy-box color scheme is #f9f1e9). */
[id^="shopify-section-template"][id$="__main"]{
  background-color:var(--hrpdp-cream) !important;
  background-image:linear-gradient(to bottom,
    #FBE6C2 0,
    #FBEFDC 300px,
    var(--hrpdp-cream) 660px) !important;
}
/* The buy-box component (product-info) carries the theme color scheme
   (#f9f1e9) via its `.gradient`/`.color-scheme-…` classes, which painted an
   off-white field OVER the wrapper gradient at the top -- this was the "white
   padding" the owner saw. Make the component itself transparent so the warm
   wrapper gradient shows through the whole gallery + buy-box zone. Inner cards
   (.hrsb, media frames, etc.) keep their own fills. */
[id^="shopify-section-template"][id$="__main"] > product-info{
  background-color:transparent !important;
  background-image:none !important;
}
/* protocol reasons (cream) -> results (warm-white) */
[id$="__hr_protocol_reasons"] .hpr{
  background-color:var(--hrpdp-cream) !important;
  background-image:linear-gradient(to bottom,
    transparent 0, transparent calc(100% - var(--hrpdp-fade)), var(--hrpdp-warm) 100%) !important;
}
/* protocol reasons -> results, boundary bridge (owner 2026-07-20 seam fix).
   The .hpr fade above is OCCLUDED: its inner card wrapper (.hpr__reasons,
   solid #FBF6EC / panel #FFF8EC) paints right down to the section's bottom
   edge (0px gap), hiding the fade-to-warm entirely. So the visible boundary
   was a hard cream (#FBF6EC) -> warm-white (#FDFCF9) STEP where those cards
   butt against results-feel, not a border. Section-level colour math missed
   it because both sections still "resolve" to #FDFCF9. Fix on the results
   side: fade its top IN from the protocol-reasons cream into its own warm
   field, so the incoming edge matches the card colour above and eases down
   -- continuous, no step. background-color stays warm as the settled tone. */
[id$="__hr_results_feel"] [id^="hrf3-"]{
  background-image:linear-gradient(to bottom,
    var(--hrpdp-cream) 0, var(--hrpdp-warm) var(--hrpdp-fade)) !important;
}
/* enjoy grid (warm-white; mirror its amber top radial so it survives) -> pouch (cream) */
[id$="__hr_enjoy_grid"] .hej{
  background-color:var(--hrpdp-warm) !important;
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255,205,140,.16) 0%, transparent 62%),
    linear-gradient(to bottom,
      transparent 0, transparent calc(100% - var(--hrpdp-fade)), var(--hrpdp-cream) 100%) !important;
}
/* benefits teaser (cream) -> difference (warm-white) */
[id$="__hr_benefits_teaser"] [class^="hrbt-"]{
  background-color:var(--hrpdp-cream) !important;
  background-image:linear-gradient(to bottom,
    transparent 0, transparent calc(100% - var(--hrpdp-fade)), var(--hrpdp-warm) 100%) !important;
}
/* difference table (warm-white) -> faq (cream) */
[id$="__hr_difference"] .hrdiff{
  background-color:var(--hrpdp-warm) !important;
  background-image:linear-gradient(to bottom,
    transparent 0, transparent calc(100% - var(--hrpdp-fade)), var(--hrpdp-cream) 100%) !important;
}
/* faq (cream) -> judgeme (warm-white). Fill is carried on the section
   wrapper so the fade spans the whole section; inner .hrfaq is neutralised. */
[id$="__collapsible_content_bK8cEc"] .hrfaq{ background:transparent !important; }
/* wrapper selector carries the template prefix so it out-specifies the
   earlier `[id*="collapsible_content"]{ background:#faf4eb !important }` rule */
[id^="shopify-section-template"][id$="__collapsible_content_bK8cEc"]{
  background-color:var(--hrpdp-cream) !important;
  background-image:linear-gradient(to bottom,
    transparent 0, transparent calc(100% - var(--hrpdp-fade)), var(--hrpdp-warm) 100%) !important;
}
/* judgeme reviews (warm-white) -> premium footer (warm peach) */
[id$="__hr_judgeme_reviews"] .hrjm{
  background-color:var(--hrpdp-warm) !important;
  background-image:linear-gradient(to bottom,
    transparent 0, transparent calc(100% - var(--hrpdp-fade)), var(--hrpdp-foot) 100%) !important;
}

/* ---------------------------------------------------------------------------
   Owner round-4 (2026-07-23): "The body you haven't met yet." section
   (hr-models-hero) was a hard WHITE island. Its own CSS paints the section
   root AND the photo figure with --hmh-paper, whose stored value is #ffffff
   (settings bg_color). The seam chain above had ASSUMED this section was
   already cream, so it never neutralised it -- that assumption was wrong.
   Re-point the section's own --hmh-paper token to the brand cream so BOTH the
   field and the media panel resolve to cream in one move. Its neighbours
   (hr-protocol-closing above, hr-benefits-teaser below) are both cream, so a
   flat cream field makes this section flow continuously into them with no
   divider, matching the rest of the chain. (The product photo keeps its own
   baked-in backdrop; only the SECTION field is recoloured.) */
[id$="__hr_models_hero"] .hmh{
  --hmh-paper: var(--hrpdp-cream) !important;
}
[id$="__hr_models_hero"] .hmh,
[id$="__hr_models_hero"] .hmh__media{
  background-color: var(--hrpdp-cream) !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* =====================================================================
   HOMEPAGE SEAM DISSOLUTION — round 5 (owner 2026-07-23):
   "I can still see the divider, the horizontal line after every section...
    especially on the MAIN PAGE. Every section should fade clean into the
    next, above and below."
   Screenshot audit (Playwright, live homepage, 390 webkit + 1920 chromium)
   found the dominant hard seams at the daily-servings section: its opaque
   Aurora WebGL canvas (bg_base #fbe9c8 peach) butts against its cream
   neighbours (intro-product above, real-health below) with a hard step on
   BOTH edges. The section's own field is already cream (--ds-bg #FBF6EC),
   so fading the canvas vertically lets that cream show at the edges and
   melts the peach aurora into both neighbours — the praised fade technique,
   static (no animation), reduced-motion safe. Scoped to the section id so
   nothing else is touched. */
[id$="__daily_servings_section_mwqMfk"] .ds__aurora{
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%) !important;
          mask-image: linear-gradient(to bottom,
    transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%) !important;
}