/** Shopify CDN: Minification failed

Line 4869:69 Expected identifier but found bad string token
Line 4869:71 Unterminated string token
Line 5069:1 Unexpected "{"

**/
/* ========================================
   MAISON VAN IRENE — Premium polish overrides
   Injected via layout/theme.liquid before </head>
   Brand book: brand-book.html
   ======================================== */

:root {
  --mvi-gold: #c5a55a;
  --mvi-gold-light: #d4b97a;
  --mvi-gold-dark: #9e7a30;
  --mvi-navy: #0b1d3a;
  --mvi-navy-light: #122b4a;
  --mvi-navy-dark: #051021;
  --mvi-cream: #faf8f4;
  --mvi-cream-warm: #f5f2ec;
  --mvi-gold-gradient: linear-gradient(135deg, #9e7a30 0%, #c5a55a 30%, #d4b97a 50%, #c5a55a 70%, #9e7a30 100%);
  --mvi-navy-shadow: 0 12px 40px rgba(11, 29, 58, 0.08);
  --mvi-navy-shadow-hover: 0 16px 48px rgba(11, 29, 58, 0.12);
}

/* =====================================
   METALLIC GOLD PRIMARY BUTTONS
   Applied across all color schemes that use gold CTAs (scheme-3, scheme-5).
   Replaces flat gold fill with the brand-book metallic gradient.
===================================== */
/* PRIMARY (default) buttons in dark schemes get the metallic gradient.
   Horizon's primary button has class `button` (NOT `button-primary`); the
   secondary button has `button-secondary`. Catch any naked `.button` that
   isn't a known modifier or quick-add wrapper. */
.color-scheme-3 .button:not(.button-secondary):not(.button-unstyled):not(.button-tertiary):not([class*='quick-add']),
.color-scheme-5 .button:not(.button-secondary):not(.button-unstyled):not(.button-tertiary):not([class*='quick-add']),
[data-color-scheme="scheme-3"] .button:not(.button-secondary):not(.button-unstyled):not(.button-tertiary),
[data-color-scheme="scheme-5"] .button:not(.button-secondary):not(.button-unstyled):not(.button-tertiary),
.button[data-style-class="button-primary"],
.button-primary {
  background: var(--mvi-gold-gradient) !important;
  background-size: 200% 200% !important;
  background-position: left center !important;
  color: var(--mvi-navy) !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(197, 165, 90, 0.18) !important;
  transition: transform 300ms ease-out, background-position 600ms ease-out, box-shadow 300ms ease-out !important;
}

.color-scheme-3 .button:not(.button-secondary):not(.button-unstyled):not(.button-tertiary):not([class*='quick-add']):hover,
.color-scheme-5 .button:not(.button-secondary):not(.button-unstyled):not(.button-tertiary):not([class*='quick-add']):hover,
[data-color-scheme="scheme-3"] .button:not(.button-secondary):not(.button-unstyled):not(.button-tertiary):hover,
[data-color-scheme="scheme-5"] .button:not(.button-secondary):not(.button-unstyled):not(.button-tertiary):hover,
.button-primary:hover {
  transform: scale(1.015) !important;
  background-position: right center !important;
  box-shadow: 0 10px 32px rgba(197, 165, 90, 0.25) !important;
}

.button-primary:active,
.color-scheme-3 .button:not(.button-secondary):not(.button-unstyled):active,
.color-scheme-5 .button:not(.button-secondary):not(.button-unstyled):active {
  transform: scale(0.99) !important;
}

/* =====================================
   BODY TEXT SOFTENED (90% opacity)
   Removes the harsh full-opacity feel. Matches live site.
===================================== */
.color-scheme-1,
.color-scheme-2,
[data-color-scheme="scheme-1"],
[data-color-scheme="scheme-2"] {
  --color-foreground: rgba(11, 29, 58, 0.92);
}

/* =====================================
   NAVY-TINTED SHADOWS (replacing default black)
   Applies to product cards, cart drawer, modals, popovers.
===================================== */
.product-card,
.card,
[class*="product-card"] {
  box-shadow: none !important;
  transition: box-shadow 400ms ease-out, transform 400ms ease-out !important;
}
.product-card:hover,
[class*="product-card"]:hover {
  box-shadow: var(--mvi-navy-shadow-hover) !important;
}

/* Cart drawer + modal subtle navy tint */
.cart-drawer,
.drawer,
.modal,
[class*="cart-drawer"],
[class*="predictive-search"] {
  box-shadow: var(--mvi-navy-shadow) !important;
}

/* =====================================
   HERO RESPONSIVE HEADINGS (MOBILE)
   Horizon's JSON doesn't expose mobile font_size overrides. This handles it.
===================================== */
@media (max-width: 768px) {
  [id*="hero"] h1,
  .hero h1,
  .section--hero h1,
  .product-information h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }

  /* Stats band numbers — scale down on mobile */
  .stats-band .h1,
  [id*="stats"] .h1,
  [id*="consumer-results"] .h1 {
    font-size: 2.25rem !important;
  }

  /* Section padding compressed on mobile */
  .section--large,
  .section-padding-large {
    padding-block: 64px !important;
  }
}

@media (max-width: 480px) {
  [id*="hero"] h1,
  .hero h1,
  .section--hero h1 {
    font-size: 2.25rem !important;
  }
}

/* =====================================
   EDITORIAL FORM INPUTS
   Border-bottom-only aesthetic. Gold focus state. No blue browser ring.
===================================== */
.color-scheme-1 input[type="email"],
.color-scheme-1 input[type="text"],
.color-scheme-1 input[type="tel"],
.color-scheme-1 textarea,
.color-scheme-2 input[type="email"],
.color-scheme-2 input[type="text"],
.color-scheme-2 input[type="tel"],
.color-scheme-2 textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(11, 29, 58, 0.2) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  font-family: var(--font-body--family, Inter) !important;
  transition: border-color 300ms ease-out !important;
}

.color-scheme-1 input:focus,
.color-scheme-1 textarea:focus,
.color-scheme-2 input:focus,
.color-scheme-2 textarea:focus {
  outline: none !important;
  border-bottom-color: var(--mvi-gold) !important;
  border-bottom-width: 2px !important;
  box-shadow: none !important;
}

/* Dark-scheme input treatment */
.color-scheme-5 input[type="email"],
.color-scheme-5 input[type="text"],
.color-scheme-5 textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(250, 248, 244, 0.3) !important;
  border-radius: 0 !important;
  color: var(--mvi-cream) !important;
}

.color-scheme-5 input:focus,
.color-scheme-5 textarea:focus {
  outline: none !important;
  border-bottom-color: var(--mvi-gold) !important;
  border-bottom-width: 2px !important;
  box-shadow: none !important;
}

/* =====================================
   AMBIENT GOLD GLOW (utility class)
   Apply .mvi-glow to any section that needs atmospheric depth.
===================================== */
.mvi-glow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.mvi-glow::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(197, 165, 90, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  top: -200px;
  left: -150px;
  z-index: 0;
  pointer-events: none;
  animation: mvi-glow-drift 24s ease-in-out infinite alternate;
}

.mvi-glow > * {
  position: relative;
  z-index: 1;
}

@keyframes mvi-glow-drift {
  from { transform: translate(0, 0); opacity: 0.9; }
  to { transform: translate(120px, 100px); opacity: 1; }
}

/* =====================================
   KEN BURNS (utility class)
   Subtle 1.05 scale over 20s on hero video + image backgrounds.
===================================== */
.mvi-ken-burns {
  animation: mvi-ken-burns 22s ease-in-out infinite alternate;
}

@keyframes mvi-ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* =====================================
   PRICE DECIMAL STRIPPING
   Shopify outputs $95.00 by default. Hide .00 decimals for luxury feel.
===================================== */
.price .money,
[class*="price"] .money,
[class*="price__regular"] .money {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

/* Hide trailing .00 in money amounts (only when followed by nothing) */
.money[data-currency-code]:not([data-has-decimals="true"]) {
  content: attr(data-clean-price);
}

/* =====================================
   CART COUNT BUBBLE — gold not red
   ONLY the numeric badge, not the cart wrapper.
===================================== */
.cart-count-bubble,
[data-cart-count]:not(a):not(button),
.cart-indicator__count,
[class*=header__cart-count]:not(a):not(button) {
  background: var(--mvi-gold) !important;
  color: var(--mvi-navy) !important;
  border: 1px solid var(--mvi-gold-dark) !important;
}

/* Hide the bubble entirely when cart is empty */
.cart-count-bubble:empty,
.cart-count-bubble[data-count="0"],
.cart-count-bubble[aria-label*="0 items"],
[data-cart-count="0"],
.cart-indicator__count:empty {
  display: none !important;
}

/* Make sure the cart link/button itself has no background applied */
a[href*="/cart"],
a[href*="cart"],
.header__cart-link,
.cart-indicator,
[class*="cart-link"],
[class*="cart-toggle"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* =====================================
   STICKY MOBILE ATC — NAVY + GOLD
   Horizon default is white bar. Restyle to brand.
===================================== */
.product-information-sticky-atc,
[data-sticky-atc],
[class*="sticky-add-to-cart"] {
  background: rgba(11, 29, 58, 0.96) !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
  border-top: 1px solid rgba(197, 165, 90, 0.25) !important;
  box-shadow: 0 -8px 24px rgba(11, 29, 58, 0.15) !important;
  color: var(--mvi-cream) !important;
}

.product-information-sticky-atc .button-primary,
[data-sticky-atc] .button-primary,
[class*="sticky-add-to-cart"] .button {
  background: var(--mvi-gold-gradient) !important;
  color: var(--mvi-navy) !important;
  border: none !important;
  font-weight: 500 !important;
}

/* =====================================
   LETTER-SPACING INVERSE SCALE
   Tighter on big display type. Wider on tiny labels.
   Matches live site typography rhythm.
===================================== */
h1,
[class*="type-preset-h1"] {
  letter-spacing: -0.015em !important;
}

h2,
[class*="type-preset-h2"] {
  letter-spacing: -0.005em !important;
}

h3,
h4,
[class*="type-preset-h3"],
[class*="type-preset-h4"] {
  letter-spacing: 0 !important;
}

/* Eyebrow / uppercase label letter-spacing refined to 0.08em (Horizon heading-loose is too wide at 0.15em) */
.eyebrow,
[class*="uppercase-label"],
[class*="type-case-uppercase"] p,
p[style*="uppercase"] {
  letter-spacing: 0.08em !important;
}

/* =====================================
   SECTION DIVIDER (utility)
   Thin gold hairline centered between signature sections.
===================================== */
.mvi-divider {
  display: block;
  width: 80px;
  height: 1px;
  background: rgba(197, 165, 90, 0.35);
  margin: 0 auto;
  border: none;
}

/* =====================================
   ACCESSIBILITY: REDUCED MOTION RESPECT
===================================== */
@media (prefers-reduced-motion: reduce) {
  .mvi-ken-burns,
  .mvi-glow::before {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================
   HOVER DISABLED ON TOUCH DEVICES
   Prevents sticky hover states on mobile.
===================================== */
@media (hover: none) {
  .product-card:hover,
  [class*="product-card"]:hover {
    box-shadow: none !important;
    transform: none !important;
  }

  .button-primary:hover,
  .button-secondary:hover,
  .button:hover {
    transform: none !important;
  }
}

/* =====================================
   FOOTER POLISH
   Muted tones, no pure-black copyright text.
===================================== */
footer .money,
footer .address,
footer p[style*="muted"] {
  opacity: 0.7;
}

/* Payment icons: monochrome navy outline (desaturate the default colored SVGs) */
.payment-icons img,
.payment-icon,
[class*="payment-icons"] svg {
  filter: grayscale(1) brightness(0.7) !important;
  opacity: 0.6;
  transition: opacity 200ms ease-out;
}

.payment-icons:hover img,
.payment-icons:hover svg {
  opacity: 1;
  filter: none !important;
}

/* =====================================
   SMOOTH SCROLL
===================================== */
html {
  scroll-behavior: smooth;
}

/* =====================================
   SELECTION COLOR — GOLD TINT
===================================== */
::selection {
  background: rgba(197, 165, 90, 0.3);
  color: var(--mvi-navy);
}

/* =====================================
   END MVI CUSTOM
   ===================================== */

/* ========================================
   MVI PHASE 2 EXTENSIONS
   Section-ID targeted polish, cinematic hero,
   editorial compare-at pricing, scroll reveals.
   ======================================== */

/* =====================================
   AMBIENT GOLD GLOW — apply by section ID
   No JSON class attribute needed.
===================================== */
#shopify-section-template--hero_jVaWmY,
#hero_jVaWmY,
[id*="hero_jVaWmY"],
[id*="final_cta"],
[id*="email_signup"],
[id*="savings_emphasis"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#hero_jVaWmY::after,
[id*="hero_jVaWmY"]::after,
[id*="final_cta"]::after,
[id*="email_signup"]::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(197, 165, 90, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -200px;
  left: -150px;
  pointer-events: none;
  z-index: 0;
  animation: mvi-glow-drift-large 28s ease-in-out infinite alternate;
}

[id*="final_cta"]::after,
[id*="email_signup"]::after {
  top: auto;
  bottom: -250px;
  right: -150px;
  left: auto;
}

@keyframes mvi-glow-drift-large {
  from { transform: translate(0, 0); opacity: 0.8; }
  to { transform: translate(150px, 100px); opacity: 1; }
}

/* =====================================
   HERO VIDEO CINEMATIC TREATMENT
   Subtle ken-burns + gradient overlay so video doesn't look flat.
===================================== */
#hero_jVaWmY video,
[id*="hero_jVaWmY"] video,
#hero_jVaWmY [class*="video"],
[id*="hero_jVaWmY"] [class*="video"] {
  animation: mvi-ken-burns-slow 24s ease-in-out infinite alternate !important;
  transform-origin: center 40%;
  will-change: transform;
}

@keyframes mvi-ken-burns-slow {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* Cinematic gradient overlay on hero (vignette from bottom) */
#hero_jVaWmY [class*="overlay"],
[id*="hero_jVaWmY"] [class*="overlay"] {
  background: linear-gradient(to bottom,
    rgba(11, 29, 58, 0.2) 0%,
    rgba(11, 29, 58, 0.4) 50%,
    rgba(11, 29, 58, 0.65) 100%
  ) !important;
}

/* =====================================
   EDITORIAL COMPARE-AT PRICE
   Replaces default strikethrough with elegant "was" label.
===================================== */
.price__sale .price-item--regular,
.price__sale .price--regular,
.compare-at-price,
[class*="compare-at"],
s[class*="price"] {
  text-decoration: none !important;
  opacity: 0.5 !important;
  font-size: 0.8em !important;
  font-weight: 400 !important;
  position: relative !important;
  margin-left: 8px !important;
}

/* Prefix with "was" label (visual only, content from CSS ::before) */
.compare-at-price::before,
[class*="compare-at"]::before {
  content: "was ";
  font-size: 0.75em;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  margin-right: 2px;
  opacity: 0.7;
}

/* =====================================
   NAVIGATION LINK HOVER — gold underline slide-in
===================================== */
.header__menu a,
[class*="nav-link"],
[class*="header__menu"] a {
  position: relative;
  transition: color 200ms ease-out !important;
}

.header__menu a::after,
[class*="nav-link"]::after,
[class*="header__menu"] a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--mvi-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms ease-out;
  pointer-events: none;
}

.header__menu a:hover::after,
[class*="nav-link"]:hover::after,
[class*="header__menu"] a:hover::after {
  transform: scaleX(1);
}

@keyframes mvi-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================
   BADGE STYLING — editorial luxury
   Overrides Horizon's default pill badge.
===================================== */
[class*="badge"],
[class*="product-badge"],
.sold-out-badge,
.sale-badge {
  border-radius: 2px !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  font-weight: 500 !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Sold-out badge specifically — transparent with navy text and subtle backdrop */
.sold-out-badge,
[class*="sold-out"],
[data-sold-out="true"] [class*="badge"] {
  color: var(--mvi-navy) !important;
  background: rgba(250, 248, 244, 0.85) !important;
  border-color: rgba(11, 29, 58, 0.2) !important;
}

/* =====================================
   FOCUS-VISIBLE KEYBOARD ACCESSIBILITY
   Gold focus ring — never blue browser default.
===================================== */
*:focus-visible {
  outline: 2px solid var(--mvi-gold) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--mvi-gold) !important;
  outline-offset: 4px !important;
}

/* =====================================
   HORIZONTAL RULE — editorial thin gold
===================================== */
hr {
  border: none !important;
  height: 1px !important;
  background: rgba(197, 165, 90, 0.2) !important;
  max-width: 80px !important;
  margin: 48px auto !important;
}

/* =====================================
   END PHASE 2 EXTENSIONS
   ======================================== */

/* ========================================
   MVI PHASE 3 — FINAL POLISH
   Corner trust stamp, cart drawer refinement,
   custom scrollbar, active nav, image hover.
   ======================================== */

/* =====================================
   HERO TRUST STAMP — bottom-left corner
   Moves the "EST. 2026 · THE SIGNATURE ELIXIR" from stacked-bottom to corner stamp.
===================================== */
@media (min-width: 769px) {
  #hero_jVaWmY [data-block-id*="mvi_trust_line"],
  [id*="hero_jVaWmY"] [data-block-id*="mvi_trust_line"],
  [id*="hero_jVaWmY"] [data-block-id*="trust"] {
    position: absolute !important;
    bottom: 40px !important;
    left: 40px !important;
    margin: 0 !important;
    z-index: 3;
    opacity: 0.85;
    transition: opacity 300ms ease-out;
  }

  [id*="hero_jVaWmY"] [data-block-id*="mvi_trust_line"]:hover {
    opacity: 1;
  }
}

/* =====================================
   CART DRAWER — line-item polish
   Softer separators (gold 10%), typography refined.
===================================== */
.cart-drawer,
[class*="cart-drawer"],
[data-drawer="cart"] {
  background: var(--mvi-cream) !important;
}

.cart-drawer .cart-item,
.cart-drawer [class*="line-item"],
[class*="cart-drawer"] [class*="line-item"] {
  border-bottom: 1px solid rgba(197, 165, 90, 0.15) !important;
  padding-block: 20px !important;
}

.cart-drawer .cart-item:last-child,
.cart-drawer [class*="line-item"]:last-child {
  border-bottom: none !important;
}

.cart-drawer h1, .cart-drawer h2,
[class*="cart-drawer"] h1, [class*="cart-drawer"] h2 {
  font-family: var(--font-heading--family, 'Playfair Display') !important;
  letter-spacing: -0.01em !important;
}

.cart-drawer [class*="line-item__title"],
.cart-drawer [class*="cart-item__name"],
[class*="cart-drawer"] [class*="line-item__title"] {
  font-family: var(--font-heading--family, 'Playfair Display') !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

.cart-drawer [class*="price"],
[class*="cart-drawer"] [class*="price"] {
  font-family: var(--font-body--family, Inter) !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums;
}

/* Cart checkout button — full metallic gradient treatment */
.cart-drawer [class*="checkout"],
.cart-drawer button[type="submit"],
[class*="cart-drawer"] [class*="checkout"] {
  background: var(--mvi-gold-gradient) !important;
  background-size: 200% 200% !important;
  background-position: left center !important;
  color: var(--mvi-navy) !important;
  border: none !important;
  transition: background-position 500ms ease-out !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

.cart-drawer [class*="checkout"]:hover,
[class*="cart-drawer"] [class*="checkout"]:hover {
  background-position: right center !important;
}

/* Empty cart state — editorial */
.cart-drawer [class*="empty"],
[class*="cart-drawer"] [class*="empty"] {
  font-family: var(--font-heading--family, 'Playfair Display') !important;
  font-style: italic !important;
  color: rgba(11, 29, 58, 0.6) !important;
}

/* =====================================
   CUSTOM SCROLLBAR — subtle navy/gold
   Works in WebKit (Safari/Chrome) and some others.
===================================== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--mvi-cream);
}

::-webkit-scrollbar-thumb {
  background: rgba(11, 29, 58, 0.2);
  border-radius: 0;
  border: 3px solid var(--mvi-cream);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(197, 165, 90, 0.4);
}

/* Firefox */
html {
  scrollbar-color: rgba(11, 29, 58, 0.2) var(--mvi-cream);
  scrollbar-width: thin;
}

/* =====================================
   ACTIVE NAV LINK STATE
   When user is on a page, the nav link gets gold underline.
===================================== */
.header__menu a[aria-current="page"],
[class*="nav-link"][aria-current="page"],
.header__menu a.active,
[class*="header__menu"] a[aria-current="page"] {
  color: var(--mvi-gold) !important;
  position: relative;
}

.header__menu a[aria-current="page"]::after,
[class*="nav-link"][aria-current="page"]::after,
[class*="header__menu"] a[aria-current="page"]::after {
  transform: scaleX(1) !important;
  background: var(--mvi-gold) !important;
}

/* =====================================
   PRODUCT CARD IMAGE HOVER — subtle lift
===================================== */
@media (hover: hover) {
  .product-card img,
  [class*="product-card"] img,
  [class*="product__media"] img {
    transition: transform 500ms ease-out !important;
  }

  .product-card:hover img,
  [class*="product-card"]:hover img {
    transform: scale(1.03) !important;
  }
}

/* =====================================
   SMOOTH BUTTON TRANSITIONS (everywhere)
===================================== */
.button,
button,
a[class*="button"],
[class*="button-primary"],
[class*="button-secondary"] {
  transition: transform 200ms ease-out,
              background-color 250ms ease-out,
              background-position 500ms ease-out,
              color 200ms ease-out,
              border-color 200ms ease-out,
              box-shadow 300ms ease-out !important;
}

/* =====================================
   EMAIL SIGNUP BUTTON — metallic when on dark scheme
===================================== */
.color-scheme-5 [class*="email-signup"] button,
[class*="scheme-5"] [class*="email-signup"] button,
.color-scheme-5 [class*="newsletter"] button {
  background: var(--mvi-gold-gradient) !important;
  background-size: 200% 200% !important;
  color: var(--mvi-navy) !important;
  border: none !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  transition: background-position 500ms ease-out !important;
}

.color-scheme-5 [class*="email-signup"] button:hover,
[class*="scheme-5"] [class*="email-signup"] button:hover {
  background-position: right center !important;
}

/* =====================================
   IMAGE ON MEDIA-WITH-CONTENT — subtle vignette
   Frames product/founder shots with editorial gravitas.
===================================== */
#science_mwc [class*="media"] img,
#brand_story_mwc [class*="media"] img,
#about_founder_mwc [class*="media"] img,
[id*="media-with-content"] [class*="media"] img {
  transition: transform 800ms ease-out !important;
}

/* =====================================
   PAGE TRANSITION — subtle cross-fade
===================================== */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: mvi-page-fade-in 400ms ease-out backwards;
  }

  @keyframes mvi-page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* =====================================
   FOUNDER SIGNATURE — Playfair italic flourish
   Underlines the "— Irene." signature with a hairline gold rule.
===================================== */
[data-block-id*="signature"] p,
[data-block-id*="signature"] em {
  position: relative;
  font-style: italic;
  display: inline-block;
  padding-bottom: 8px;
}

[data-block-id*="signature"] p::after,
[data-block-id*="signature"] em::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: var(--mvi-gold);
  opacity: 0.6;
}

/* =====================================
   FINAL: ENSURE NO TEXT-DECORATION UNDERLINES ON HEADINGS
===================================== */
h1, h2, h3, h4, h5, h6 {
  text-decoration: none !important;
}

/* =====================================
   END PHASE 3 — END OF MVI CUSTOM CSS
   ======================================== */

/* ========================================
   TRANSPARENT HEADER CART FIX
   Removes the cream/white box behind the cart icon when header is transparent.
   Applies to any element in the header area that has an unwanted background.
======================================== */
header,
header *,
[class*="header"],
[class*="header"] a,
[class*="header"] button,
[class*="header__icons"],
[class*="header__icons"] *,
[class*="cart"],
[class*="cart"] a,
[class*="cart"] svg,
a[href*="/cart"],
button[data-cart-toggle],
header .icon-cart,
header svg {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* But keep the gold badge visible (if a count > 0 renders) */
.cart-count-bubble:not(:empty),
[data-cart-count]:not([data-cart-count="0"]):not(:empty),
.cart-indicator__count:not(:empty) {
  background: var(--mvi-gold) !important;
  background-color: var(--mvi-gold) !important;
  color: var(--mvi-navy) !important;
}

/* Hide empty bubble entirely */
.cart-count-bubble:empty,
.cart-count-bubble[data-count="0"],
[data-cart-count="0"]:not(a):not(button),
.cart-indicator__count:empty {
  display: none !important;
  visibility: hidden !important;
}

/* ========================================
   REDUCE AMBIENT GLOW INTENSITY
   The bright spot behind "Discover the Elixir" was too strong.
======================================== */
#hero_jVaWmY::after,
[id*="hero_jVaWmY"]::after {
  background: radial-gradient(circle, rgba(197, 165, 90, 0.06) 0%, transparent 70%) !important;
  width: 800px !important;
  height: 800px !important;
  bottom: -350px !important;
  right: -200px !important;
  left: auto !important;
  top: auto !important;
}

[id*="final_cta"]::after,
[id*="email_signup"]::after {
  background: radial-gradient(circle, rgba(197, 165, 90, 0.05) 0%, transparent 70%) !important;
}

/* =====================================
   FOOTER BRAND ALIGNMENT
   Match the live website footer:
   - Column headers: navy #0B1D3A, bold (override Horizon's inline gold --color)
   - Body / address / email: muted charcoal #44474D
   - Hover state: gold-brown #745B17
   See brand book + index.html for source of truth.
===================================== */

/* Column headers (THE COLLECTION, COMPANY, CONNECT) — these render
   as <div class="text-block ... h6"> with an inline style="--color: #c5a55a;".
   We must override BOTH the CSS variable and the color property. */
footer .text-block.h6,
footer .text-block.h6 p,
footer .text-block.h6 a {
  --color: #0B1D3A !important;
  color: #0B1D3A !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Body text — paragraph text-blocks (NOT headings), address, email link,
   support note, and any rte-formatter content inside the footer */
footer .text-block:not(.h6),
footer .text-block:not(.h6) p,
footer .text-block:not(.h6) a:not(:hover),
footer rte-formatter,
footer rte-formatter p,
footer rte-formatter a:not(:hover),
footer a[href^="mailto:"]:not(:hover),
footer a[href^="tel:"]:not(:hover),
footer .menu-drawer__menu-item-text,
footer p,
footer li,
footer li a:not(:hover) {
  --color: #44474D !important;
  color: #44474D !important;
}

/* Quick-links / menu items in footer columns */
footer ul li a:not(:hover),
footer nav a:not(:hover),
footer [class*="footer-block"] a:not(:hover) {
  color: #44474D !important;
  text-decoration: none !important;
  transition: color 200ms ease-out;
}

/* Hover state — gold-brown, matches website */
footer a:hover,
footer rte-formatter a:hover,
footer .text-block a:hover,
footer ul li a:hover,
footer nav a:hover {
  color: #745B17 !important;
  --color: #745B17 !important;
}

/* Social icons — keep gold, but slightly muted for refinement */
footer icon-block svg,
footer [class*="icon-block"] svg,
footer a[href*="facebook.com"] svg,
footer a[href*="instagram.com"] svg,
footer a[href*="youtube.com"] svg,
footer a[href*="tiktok.com"] svg {
  color: #C5A55A !important;
  fill: currentColor !important;
  transition: color 200ms ease-out, transform 200ms ease-out;
}

footer a[href*="facebook.com"]:hover svg,
footer a[href*="instagram.com"]:hover svg,
footer a[href*="youtube.com"]:hover svg,
footer a[href*="tiktok.com"]:hover svg {
  color: #745B17 !important;
  transform: translateY(-2px);
}

/* Copyright line — keep muted but a touch lighter than body */
footer .text-block:not(.h6) p[class*="copyright"],
footer p[class*="copyright"],
footer .copyright {
  color: #6B6E74 !important;
  --color: #6B6E74 !important;
  opacity: 1 !important;
}

/* Bottom-row legal links (Privacy, Terms, etc.) */
footer [class*="legal"] a:not(:hover),
footer [class*="policy"] a:not(:hover) {
  color: #6B6E74 !important;
  --color: #6B6E74 !important;
}

/* =====================================
   HEADER BRAND ALIGNMENT
   Match the live website header (maisonvanirene.com).
   - Glass-blur cream background (matches index.html .glass-nav)
   - Primary nav (desktop): UPPERCASE, tracking-widest, font-label tone
   - Active link: gold-brown #745B17 + 1px gold underline
   - Mobile drawer: text-lg uppercase tracking, generous spacing
   - Optional logo wordmark companion (md+ only)
   See brand book + index.html for source of truth.
===================================== */

/* --- 1. Glass-blur cream background ---
   Horizon's header is sticky 'always', so .header always has data-sticky-state.
   We override the scheme-1 bg with translucent cream + 20px backdrop blur,
   matching the website's .glass-nav. Transparent-over-hero is preserved by the
   :not([transparent='not-sticky']) guard on the parent <header-component>. */
header-component:not([transparent='not-sticky']) .header,
header-component[data-sticky-state='active'] .header,
.header-section .header[data-sticky-state] {
  background-color: rgba(252, 249, 243, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* --- 2. Primary nav (desktop) — UPPERCASE editorial-luxury treatment ---
   Horizon's menu links use .menu-list__link. Phase 1 already turns on uppercase
   via type_case_primary_link='uppercase'; this layer adds tracking + colour. */
.menu-list__link, .header-menu .menu-list__link, .header-menu a {
  letter-spacing: 0.15em !important;
  font-weight: 400 !important;
  color: rgba(28, 28, 24, 0.72) !important;
  transition: color 200ms ease-out !important;
}

.menu-list__link:hover,
.header-menu a:hover {
  color: #745B17 !important;
}

/* --- 3. Active link state — match website (gold-brown text + 1px gold underline) --- */
.menu-list__link[aria-current='page'],
.menu-list__link.is-active,
.header-menu a[aria-current='page'] {
  color: #745B17 !important;
  border-bottom: 1px solid rgba(197, 165, 90, 0.45) !important;
  padding-bottom: 6px !important;
}

/* --- 4. Mobile drawer typography ---
   The drawer uses #Details-menu-drawer-container as the open-state hook. Inside,
   menu links are still .menu-list__link but rendered in a vertical list. Match
   website's text-lg uppercase tracking-wide spacing. */
#Details-menu-drawer-container .menu-list__link,
#Details-menu-drawer-container a,
[class*='menu-drawer'] .menu-list__link,
[class*='menu-drawer'] a:not(.button):not([class*='button']) {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
  font-size: 1.125rem !important;          /* text-lg = 18px */
  color: rgba(28, 28, 24, 0.72) !important;
  transition: color 200ms ease-out !important;
}

#Details-menu-drawer-container .menu-list__link:hover,
[class*='menu-drawer'] a:hover {
  color: #745B17 !important;
}

/* Generous vertical rhythm in the drawer (matches website's space-y-6) */
#Details-menu-drawer-container .menu-list__list-item,
[class*='menu-drawer'] .menu-list__list-item,
[class*='menu-drawer'] li {
  margin-bottom: 1.25rem !important;
}

/* --- 5. Mobile hamburger refinement (1.25px stroke per brand book) --- */
.menu-drawer-toggle svg,
[class*='menu-drawer'] button svg,
.header-actions__action svg {
  stroke-width: 1.5 !important;
  color: #0B1D3A !important;
}

/* --- 6. Logo wordmark companion ---
   Adds "MAISON VAN IRENE" wordmark next to whatever logo the merchant uploads
   via Shopify admin (theme settings -> logo). Matches website spec at
   index.html line 294. */

.header-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Hide Horizon's text fallback inside the inner span. Only affects text nodes;
   <img> elements have intrinsic dimensions so they render unaffected.
   IMPORTANT: do NOT override `display` here — Horizon toggles between
   .--original and .--inverse containers via display: none/block depending
   on transparent-header state. Overriding display would render BOTH at
   once (duplicate logo bug). */
.header-logo .header-logo__image-container,
.header-logo > span {
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
}

/* Wordmark — sits flush next to the logo image, vertically centered */
.header-logo::after {
  content: 'MAISON VAN IRENE';
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  letter-spacing: -0.025em;
  color: #0B1D3A;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  margin-left: -3px;
  align-self: center;
}

@media (min-width: 768px) {
  .header-logo::after {
    font-size: 1.125rem;
    letter-spacing: -0.025em;
    margin-left: -6px;
  }
}

/* --- 7. Announcement bar polish — REMOVED (was overflowing the bar) --- */

/* --- 8. Mobile: trim header chrome to logo + hamburger only ---
   Phase 1 already disables search/country/language. This is a belt-and-braces
   guard in case a stray icon survives in the cart/account slot. */
@media (max-width: 767px) {
  .header__column--right .localization-selector,
  .header__column--right .search-modal,
  .header__column--right [class*='language-selector'],
  .header__column--right [class*='country-selector'] {
    display: none !important;
  }
}

/* =====================================
   DROPDOWN PANEL DEFENSE
   When a top-level nav item has children (e.g. SHOP), Horizon renders the
   submenu panel below the header. Phase 1 had set menu_style='drawer' which
   broke desktop panel rendering — items appeared as floating text over the
   hero. menu_style is now reverted to 'menu', and we add explicit panel
   styling here so the dropdown reads as a refined cream pane, not chrome.
===================================== */
.menu-list__submenu,
[class*='menu-list__submenu'],
[class*='submenu-panel'],
.header-menu [aria-expanded='true'] + [role='menu'],
.header-menu [data-submenu='true'] {
  background-color: rgba(252, 249, 243, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(11, 29, 58, 0.06) !important;
  border-radius: 2px !important;
  box-shadow: 0 16px 48px rgba(11, 29, 58, 0.10) !important;
  padding: 1rem 1.5rem !important;
}

/* Submenu link refinements (within the dropdown panel) */
.menu-list__submenu .menu-list__link,
[class*='menu-list__submenu'] a {
  color: rgba(28, 28, 24, 0.78) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding-block: 0.4rem !important;
}

.menu-list__submenu .menu-list__link:hover,
[class*='menu-list__submenu'] a:hover {
  color: #745B17 !important;
}

/* =====================================
   BENEFITS GRID — match website spec (with mobile fix)
   Real Horizon DOM:
     #shopify-section-...__benefits_grid > .section.color-scheme-1
       > .layout-panel-flex--column.section-content-wrapper
         > [class*='__eyebrow']  ("Visible Results")
         > [class*='__header']   ("What the Elixir Does for Your Skin")
         > .group-block (cards_row wrapper)
           > .group-block-content.layout-panel-flex--row
             > .group-block.color-scheme-2 (×4 cards)
   ===================================== */

/* Section: left-anchor on desktop, center on mobile */
[id*='benefits_grid'] > .section .layout-panel-flex--column.section-content-wrapper {
  --horizontal-alignment: flex-start !important;
}

/* Eyebrow */
[id*='benefits_grid'] [class*='__eyebrow'] p {
  color: #C5A55A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  font-family: var(--font-body--family) !important;
  margin: 0 !important;
}

/* Section heading h2 — left, navy, regular weight (matches website) */
[id*='benefits_grid'] [class*='__header'] {
  --width: 100% !important;
  text-align: left !important;
}
[id*='benefits_grid'] [class*='__header'] h2 {
  text-align: left !important;
  font-size: clamp(1.625rem, 3.5vw, 2.25rem) !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;        /* regular Playfair, like website */
  color: #0B1D3A !important;
  margin: 0 !important;
  font-family: var(--font-heading--family) !important;
}

/* Cards: flex 1 1 0, hover lift, subtle shadow */
[id*='benefits_grid'] .layout-panel-flex--row > .group-block {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  position: relative !important;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 350ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 1px 2px rgba(11, 29, 58, 0.04), 0 4px 12px rgba(11, 29, 58, 0.04) !important;
}
[id*='benefits_grid'] .layout-panel-flex--row > .group-block:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 4px 12px rgba(11, 29, 58, 0.06), 0 16px 32px rgba(11, 29, 58, 0.08) !important;
}

/* Icon circle via ::before on .group-block-content */
[id*='benefits_grid'] .layout-panel-flex--row > .group-block .group-block-content::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #0B1D3A;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  margin-bottom: 16px;
  flex-shrink: 0;
  order: -1;
}
[id*='benefits_grid'] .layout-panel-flex--row > .group-block:nth-child(1) .group-block-content::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a55a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5C12 2.5 5.5 9 5.5 14a6.5 6.5 0 0 0 13 0c0-5-6.5-11.5-6.5-11.5z'/%3E%3Cpath d='M9.5 14a2.5 2.5 0 0 0 2.5 2.5' opacity='0.55'/%3E%3C/svg%3E"); }
[id*='benefits_grid'] .layout-panel-flex--row > .group-block:nth-child(2) .group-block-content::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a55a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.5 4.7 1.5-4.5 1.8L12 15.3 10.2 10.8 5.5 9l4.7-1.5z'/%3E%3Cpath d='M19.5 14l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z' opacity='0.55'/%3E%3C/svg%3E"); }
[id*='benefits_grid'] .layout-panel-flex--row > .group-block:nth-child(3) .group-block-content::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a55a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5L4 6v6c0 4.5 3.4 8.6 8 9.5 4.6-.9 8-5 8-9.5V6z'/%3E%3Cpath d='M9 11.5l2 2 4-4' opacity='0.7'/%3E%3C/svg%3E"); }
[id*='benefits_grid'] .layout-panel-flex--row > .group-block:nth-child(4) .group-block-content::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a55a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3Cpath d='M3 12a9 9 0 0 1 5-8' opacity='0.55'/%3E%3C/svg%3E"); }

/* Card heading h4: regular weight (NOT bold) — matches website */
[id*='benefits_grid'] .layout-panel-flex--row > .group-block .text-block.h4 h4 {
  font-size: 1.125rem !important;
  font-weight: 400 !important;        /* regular Playfair */
  line-height: 1.3 !important;
  color: #0B1D3A !important;
  font-family: var(--font-heading--family) !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Card body */
[id*='benefits_grid'] .layout-panel-flex--row > .group-block rte-formatter p,
[id*='benefits_grid'] .layout-panel-flex--row > .group-block rte-formatter {
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  margin: 0 !important;
  text-align: left !important;
  font-family: var(--font-body--family) !important;
}

/* === MOBILE: 749px and below === */
@media (max-width: 749px) {
  /* Cards stack vertically — let JSON's vertical_on_mobile drive this,
     but ensure cards are full-width with proper spacing */
  [id*='benefits_grid'] .layout-panel-flex--row {
    --gap: 16px !important;
    gap: 16px !important;
  }

  /* Disable hover lift on touch devices */
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block:hover {
    transform: none !important;
  }

  /* Reduce card padding on mobile (was 32px → 24px) */
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block {
    --padding-block-start: max(20px, calc(var(--spacing-scale) * 24px)) !important;
    --padding-block-end: max(20px, calc(var(--spacing-scale) * 24px)) !important;
    --padding-inline-start: max(20px, calc(var(--spacing-scale) * 24px)) !important;
    --padding-inline-end: max(20px, calc(var(--spacing-scale) * 24px)) !important;
  }

  /* Smaller icon on mobile */
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block .group-block-content::before {
    width: 40px;
    height: 40px;
    background-size: 19px 19px;
    margin-bottom: 12px;
  }

  /* Center align section header on mobile (eyebrow + heading) */
  [id*='benefits_grid'] > .section .layout-panel-flex--column.section-content-wrapper {
    --horizontal-alignment: center !important;
  }
  [id*='benefits_grid'] [class*='__header'] h2 {
    text-align: center !important;
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
  [id*='benefits_grid'] [class*='__eyebrow'] p {
    text-align: center !important;
    letter-spacing: 0.18em !important;
  }

  /* Card content stays left-aligned within each card */
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block .text-block.h4 h4 {
    font-size: 1.0625rem !important;
  }
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block rte-formatter p {
    font-size: 0.85rem !important;
  }
}

/* FOOTER LINK BLOCKS — match website weight + size */
/* The footer column items (Copper Peptide Elixir, Amazon Store, etc.) render
   as <a class="size-style link link--HASH"> — Horizon link block type.
   These are NOT inside text-blocks so the FOOTER BRAND ALIGNMENT rules above
   don't catch them. Force website-matching typography here.

   Website spec (index.html footer):
     - Body link:     text-sm (14px) Inter weight 400, color #44474D
     - Tagline:       text-sm light, color #44474D
     - Address:       text-sm, color #44474D
     - Email link:    text-sm, color #0B1D3A (slightly darker — emphasis)
     - Hover all:     #745B17 gold-brown
*/

/* FOOTER COLUMN LINKS — apply to all <a> blocks inside footer columns.
   Catches .link blocks plus any straggler menu items. */
footer a.link,
footer a[class*="link--"],
footer .footer-block a,
footer [class*="footer-block"] a:not(.button) {
  font-family: var(--font-body--family, Inter), sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;       /* 14px — text-sm */
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  color: #44474D !important;
  text-transform: none !important;
}

footer a.link:hover,
footer a[class*="link--"]:hover,
footer .footer-block a:hover {
  color: #745B17 !important;
}

/* FOOTER PARAGRAPH BODY (tagline, address, email rte-formatter)
   These ARE text-blocks. The existing FOOTER BRAND ALIGNMENT block
   sets color but not size/weight. Add those here. */
footer rte-formatter,
footer rte-formatter p,
footer .text-block:not(.h6),
footer .text-block:not(.h6) p {
  font-family: var(--font-body--family, Inter), sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;       /* 14px */
  line-height: 1.65 !important;
}

/* FOOTER COLUMN HEADERS (THE COLLECTION, COMPANY, CONNECT)
   The existing rule sets weight 700 + uppercase. The website actually uses
   weight 600 + 11px + 0.1em tracking. Bump down to 600 for refinement. */
footer .text-block.h6,
footer .text-block.h6 p,
footer .text-block.h6 a {
  font-weight: 600 !important;          /* was 700 — too heavy vs website */
  font-size: 0.6875rem !important;      /* 11px — matches website eyebrow scale */
  letter-spacing: 0.1em !important;
}

/* FOOTER EMAIL — slightly darker than other body for emphasis (matches website
   where the email link is full-saturation navy, not muted) */
footer a[href^="mailto:"]:not(:hover),
footer a[href^="tel:"]:not(:hover) {
  color: #0B1D3A !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;
}

/* FOOTER ADDRESS BLOCK — make it look like a tight stanza, not a paragraph */
footer rte-formatter[class*="address"],
footer rte-formatter[class*="address"] p {
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: #44474D !important;
}

/* FOOTER TAGLINE ("Science-led skincare. Rooted in nature, refined by research.")
   Website uses Inter weight 300 (light) for refined feel. */
footer [class*="tagline"] p,
footer [class*="footer-tagline"] p,
footer rte-formatter[class*="tagline"] p {
  font-weight: 300 !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
}

/* FOOTER SUPPORT NOTE (the small "For customer support..." text at bottom)
   Should be 12px, very muted — already styled in places, just ensure size. */
footer [class*="support_note"] p,
footer [class*="support-note"] p {
  font-size: 0.75rem !important;        /* 12px */
  font-weight: 400 !important;
  color: #6B6E74 !important;
  line-height: 1.6 !important;
}

/* FOOTER BOTTOM ROW (copyright + Privacy/Terms) — smaller, muted */
footer .footer-utilities__text,
footer [class*="footer-utilities"] [class*="text"],
footer [class*="footer-utilities"] a,
footer [class*="utilities--blocks"] p,
footer [class*="utilities--blocks"] a {
  font-size: 0.75rem !important;        /* 12px */
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: #6B6E74 !important;
}

footer [class*="footer-utilities"] a:hover,
footer [class*="utilities--blocks"] a:hover {
  color: #745B17 !important;
}

/* MOBILE — slight tightening */
@media (max-width: 749px) {
  footer a.link,
  footer a[class*="link--"],
  footer rte-formatter p,
  footer .text-block:not(.h6) p {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
  }
  footer .text-block.h6 {
    margin-top: 24px !important;        /* breathing room between stacked columns */
  }
}

/* =================================================
   1. SECTION HEADING ITALIC GOLD
   Across all elixir sections, italic <em> in h2 should
   be tinted gold (consistent with Zero Fillers treatment)
================================================= */
[id*='sensory_profile'] [class*='__heading_row'] h2 em,
[id*='clinical_benefits'] [class*='__heading_row'] h2 em,
[id*='clinical_benefits'] h2 em,
[id*='how_to_use'] [class*='__heading_row'] h2 em,
[id*='consumer_results'] [class*='__heading_row'] h2 em,
[id*='final_cta'] [class*='__heading_main'] h2 em,
[id*='final_cta'] h2 em,
[id*='complete_the_ritual'] h2 em,
[id*='whats_included'] h2 em,
[id*='why_peptides'] h2 em,
[id*='brand_story'] h2 em,
[id*='savings_emphasis'] h2 em {
  color: #C5A55A !important;
  font-weight: 400 !important;
  font-style: italic;
}

/* =================================================
   2. SECTION HEADING H2 — consistent tone across all
   Apply weight 400, tighter letter-spacing, line-height
================================================= */
[id*='sensory_profile'] h2,
[id*='clinical_benefits'] h2,
[id*='how_to_use'] h2,
[id*='consumer_results'] h2,
[id*='final_cta'] h2,
[id*='complete_the_ritual'] h2,
[id*='whats_included'] h2,
[id*='why_peptides'] h2,
[id*='brand_story'] h2 {
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
  font-family: var(--font-heading--family) !important;
}

/* =================================================
   3. EYEBROW LABELS — refined gold, tight tracking
================================================= */
[id*='sensory_profile'] [class*='__eyebrow_row'] p,
[id*='how_to_use'] [class*='__eyebrow_row'] p,
[id*='consumer_results'] [class*='__eyebrow_row'] p,
[id*='clinical_benefits'] [class*='__eyebrow'] p {
  color: #C5A55A !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-family: var(--font-body--family) !important;
}

/* =================================================
   4. HOW TO USE — 3-step ritual cards
   Numbers (1, 2, 3) become navy circles with gold number,
   matching website's pattern (w-16 h-16 rounded-full bg-primary-container)
================================================= */
[id*='how_to_use'] [class*='__num'] {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #0B1D3A !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}
[id*='how_to_use'] [class*='__num'] p {
  color: #C5A55A !important;
  --color: #C5A55A !important;
  font-family: var(--font-heading--family) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Step name "Cleanse" / "Apply" / "Seal" — italic Playfair, navy */
[id*='how_to_use'] [class*='__name'] p,
[id*='how_to_use'] [class*='__name'] em {
  color: #0B1D3A !important;
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* Step description body */
[id*='how_to_use'] [class*='__text'] p {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #44474D !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* =================================================
   5. CONSUMER RESULTS / STATS BAND — huge gold percentages
   Section bg is scheme-5 (navy/dark)
================================================= */
[id*='consumer_results'] {
  position: relative;
}

/* Stat number text-blocks (94%, 97%, 91%) — make HUGE + metallic gold gradient */
[id*='consumer_results'] [class*='__num'] p {
  background: var(--mvi-gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-family: var(--font-heading--family) !important;
  font-size: clamp(3rem, 7vw, 5rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

/* Stat labels under each number */
[id*='consumer_results'] [class*='__label'] p {
  color: rgba(250, 248, 244, 0.85) !important;
  --color: rgba(250, 248, 244, 0.85) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  font-family: var(--font-body--family) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* H2 "Measured in Weeks" on dark bg — cream */
[id*='consumer_results'] h2 {
  color: #FAF8F4 !important;
  font-size: clamp(1.875rem, 4vw, 2.5rem) !important;
  margin-bottom: 8px !important;
}

/* Sub paragraph */
[id*='consumer_results'] [class*='__sub_row'] p {
  color: rgba(250, 248, 244, 0.7) !important;
  font-size: 0.95rem !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
}

/* =================================================
   6. FAQ ACCORDION — <details><summary> in product description
   Native HTML disclosure, style summary as Inter 500 navy,
   body Inter 400 muted, gold chevron
================================================= */
.product-information details,
[class*='product-information'] details,
.product-information rte-formatter details {
  border-bottom: 1px solid rgba(11, 29, 58, 0.08) !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}

.product-information details summary,
[class*='product-information'] details summary,
rte-formatter details summary {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #0B1D3A !important;
  cursor: pointer !important;
  list-style: none !important;
  padding: 8px 32px 8px 0 !important;
  position: relative !important;
  transition: color 200ms ease-out !important;
}

.product-information details summary::-webkit-details-marker,
rte-formatter details summary::-webkit-details-marker {
  display: none !important;
}

/* Custom gold chevron via ::after */
.product-information details summary::after,
rte-formatter details summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid #C5A55A;
  border-bottom: 1.5px solid #C5A55A;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 250ms ease-out;
}

.product-information details[open] summary::after,
rte-formatter details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}

.product-information details summary:hover,
rte-formatter details summary:hover {
  color: #745B17 !important;
}

.product-information details p,
rte-formatter details p {
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #44474D !important;
  line-height: 1.7 !important;
  margin: 8px 0 0 0 !important;
  padding-bottom: 8px !important;
}

/* H3 "Frequently Asked Questions" inside product description */
.product-information rte-formatter h3,
rte-formatter h3 {
  font-family: var(--font-heading--family) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  color: #0B1D3A !important;
  letter-spacing: -0.01em !important;
  margin-top: 32px !important;
  margin-bottom: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(11, 29, 58, 0.08) !important;
}

/* =================================================
   7. FINAL CTA — heading polish
   The button itself uses class="button-primary" so existing
   metallic-gradient rule should fire. Just polish the heading.
================================================= */
[id*='final_cta'] h2 {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  margin-bottom: 16px !important;
}

[id*='final_cta'] [class*='__sub'] p {
  font-size: 1.05rem !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: rgba(11, 29, 58, 0.75) !important;
  margin-bottom: 32px !important;
  line-height: 1.5 !important;
}

/* Belt-and-braces — ensure button-primary in final_cta gets the gradient
   even if it's wrapped weirdly */
[id*='final_cta'] .button-primary,
[id*='final_cta'] [class*='button-primary'] {
  background: var(--mvi-gold-gradient) !important;
  background-size: 200% 200% !important;
  background-position: left center !important;
  color: var(--mvi-navy) !important;
  border: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 16px 40px !important;
  font-size: 0.875rem !important;
  transition: background-position 500ms ease-out, transform 200ms ease-out !important;
}

[id*='final_cta'] .button-primary:hover,
[id*='final_cta'] [class*='button-primary']:hover {
  background-position: right center !important;
  transform: scale(1.015) !important;
}

/* =================================================
   8. SENSORY PROFILE — small badge labels
   The labels (e.g. "Water-light", "Rapid Absorb") are
   __label h5 blocks. They have inline gold color.
   Polish with subtle border + tighter padding.
================================================= */
[id*='sensory_profile'] [class*='__label'] p {
  color: #C5A55A !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: var(--font-body--family) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* =================================================
   9. MOBILE — refinements for all sections
================================================= */
@media (max-width: 749px) {
  [id*='consumer_results'] [class*='__num'] p {
    font-size: 2.75rem !important;
  }
  [id*='consumer_results'] [class*='__label'] p {
    font-size: 0.8rem !important;
    letter-spacing: 0.08em !important;
  }
  [id*='how_to_use'] [class*='__num'] {
    width: 56px !important;
    height: 56px !important;
  }
  [id*='how_to_use'] [class*='__num'] p {
    font-size: 1.25rem !important;
  }
  [id*='how_to_use'] [class*='__name'] p {
    font-size: 1.125rem !important;
  }
  [id*='final_cta'] h2 {
    font-size: 1.875rem !important;
  }
  .product-information details summary,
  rte-formatter details summary {
    font-size: 0.95rem !important;
    padding-right: 36px !important;
  }
  .product-information details p,
  rte-formatter details p {
    font-size: 0.875rem !important;
  }
}

/* HOW TO USE — inline link styling (gold underline) */
/* =====================================
   Step description link (e.g. "Copper Peptide Barrier Cream" in step 3)
   Match website pattern: gold #C5A55A, underline with 3px offset, hover gold-brown.
===================================== */
[id*='how_to_use'] [class*='__text'] a,
[id*='how_to_use'] rte-formatter a {
  color: #C5A55A !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  font-weight: 400 !important;
  transition: color 200ms ease-out !important;
}
[id*='how_to_use'] [class*='__text'] a:hover,
[id*='how_to_use'] rte-formatter a:hover {
  color: #745B17 !important;
}

/* FORMULATION — clean rebuild (full-width to match other sections) */
/* =====================================
   No max-width — let the section-content-wrapper inherit Horizon's
   --page-width like every other section on the page. The cream card
   surface now spans the same width as the formulation's neighbours.
===================================== */

[id*='the_formulation'] > .section {
  background-color: #FAF8F4 !important;
}

[id*='the_formulation'] .section-content-wrapper {
  background: #F5F2EC !important;
  border-radius: 16px !important;
  --padding-block-start: max(28px, calc(var(--spacing-scale) * 48px)) !important;
  --padding-block-end:   max(28px, calc(var(--spacing-scale) * 48px)) !important;
  --padding-inline-start: max(20px, calc(var(--spacing-scale) * 48px)) !important;
  --padding-inline-end:   max(20px, calc(var(--spacing-scale) * 48px)) !important;
  --gap: 32px !important;
  gap: 32px !important;
  box-shadow: 0 1px 2px rgba(11, 29, 58, 0.04), 0 4px 12px rgba(11, 29, 58, 0.04) !important;
}

/* HEADER ROW: align baseline of left + right */
[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(1) > .group-block-content {
  align-items: flex-end !important;
}

/* "The Formulation" h2 italic Playfair */
[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(1) [class*='title'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 3vw, 1.875rem) !important;
  color: #0B1D3A !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(1) [class*='tagline'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: #44474D !important;
  line-height: 1.5 !important;
  margin: 4px 0 0 0 !important;
  max-width: 540px !important;
  text-align: left !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(1) [class*='big_num'] p {
  font-family: var(--font-heading--family) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 400 !important;
  color: #C5A55A !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-align: right !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(1) [class*='bio_actives'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  color: #8899B0 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 4px 0 0 0 !important;
  text-align: right !important;
}

/* INGREDIENTS GRID — 4 cols desktop, 2 tablet, 1 mobile */
[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(2) > .group-block-content {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px 32px !important;
  --gap: 0 !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(2) > .group-block-content > .group-block {
  display: block !important;
  margin: 0 !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(2) > .group-block-content > .group-block > .group-block-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Ingredient name */
[id*='the_formulation'] [class*='__label'] p,
[id*='the_formulation'] [class*='__label'] {
  font-family: var(--font-body--family) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #0B1D3A !important;
  --color: #0B1D3A !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Description */
[id*='the_formulation'] [class*='__formulation_text'] p,
[id*='the_formulation'] [class*='__formulation_text'] {
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #44474D !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* TRUST STRIP — top border, 3 items inline with shield/heart icons */
[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) {
  border-top: 1px solid rgba(11, 29, 58, 0.08) !important;
  --padding-block-start: 24px !important;
  margin-top: 8px !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content {
  --gap: 24px !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > .group-block {
  position: relative;
  padding-left: 24px;
  display: flex !important;
  align-items: center !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > .group-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a55a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > .group-block:last-child::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a55a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/%3E%3C/svg%3E");
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > .group-block:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(11, 29, 58, 0.15);
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) p {
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #44474D !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Mobile/tablet */
@media (max-width: 1023px) {
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(2) > .group-block-content {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 24px !important;
  }
}

@media (max-width: 599px) {
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(2) > .group-block-content {
    grid-template-columns: 1fr !important;
  }
  [id*='the_formulation'] .section-content-wrapper {
    --padding-block-start: max(24px, calc(var(--spacing-scale) * 28px)) !important;
    --padding-block-end:   max(24px, calc(var(--spacing-scale) * 28px)) !important;
    --padding-inline-start:max(16px, calc(var(--spacing-scale) * 20px)) !important;
    --padding-inline-end:  max(16px, calc(var(--spacing-scale) * 20px)) !important;
    border-radius: 12px !important;
  }
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(1) [class*='title'] h2 {
    font-size: 1.5rem !important;
  }
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(1) [class*='big_num'] p {
    font-size: 2rem !important;
  }
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > .group-block:not(:last-child)::after {
    display: none;
  }
}

/* JUDGE.ME — brand color customization */
/* =====================================
   Override Judge.me default styles with Maison Van Irene brand colors.
   Targets jdgm-* and judgeme-* class prefixes (Judge.me uses both).

   What this controls:
     - Star color: brand gold #C5A55A
     - Heading: Playfair italic navy
     - Body text: Inter regular muted
     - "Write a review" button: gold metallic gradient
     - Review card: cream surface, subtle shadow, gold accents
     - Verified badge: gold

   What you set in Judge.me app admin (Apps → Judge.me → Settings):
     - Brand logo (Vi monogram) — Settings → Branding → Upload logo
     - Email template colors — Settings → Email Customization
     - Featured reviews to highlight — Settings → Reviews
===================================== */

/* PREVIEW BADGE (small star rating under product title) */
.jdgm-prev-badge,
[class*='preview-badge'] .jdgm-prev-badge {
  font-family: var(--font-body--family) !important;
  margin: 0 0 16px 0 !important;
}

.jdgm-prev-badge__stars,
.jdgm-prev-badge .jdgm-prev-badge__stars {
  color: #C5A55A !important;
}

.jdgm-prev-badge__text {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #44474D !important;
  letter-spacing: 0.02em !important;
  margin-left: 8px !important;
  -webkit-font-smoothing: antialiased !important;
}

/* All star icons in widgets — brand gold */
.jdgm-star,
.jdgm-star.jdgm--on,
.jdgm--on,
[class*='judgeme'] .jdgm-star {
  color: #C5A55A !important;
}

/* Empty/half stars — muted gold */
.jdgm-star.jdgm--off,
.jdgm--off {
  color: rgba(197, 165, 90, 0.3) !important;
}

/* FULL REVIEW WIDGET */
.jdgm-rev-widg,
[class*='review-widget'] .jdgm-rev-widg {
  font-family: var(--font-body--family) !important;
  border-top: 1px solid rgba(11, 29, 58, 0.08) !important;
  padding-top: 32px !important;
}

/* Widget heading */
.jdgm-rev-widg__title {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  color: #0B1D3A !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Average rating summary */
.jdgm-rev-widg__summary,
.jdgm-rev-widg__summary-text {
  color: #44474D !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
}

.jdgm-rev-widg__summary-stars .jdgm-star {
  color: #C5A55A !important;
}

/* "Write a review" button — gold gradient */
.jdgm-write-rev-link,
.jdgm-btn,
.jdgm-btn--solid,
button.jdgm-write-rev-link {
  background: var(--mvi-gold-gradient) !important;
  background-size: 200% 200% !important;
  background-position: left center !important;
  color: var(--mvi-navy) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: var(--font-body--family) !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-size: 0.8125rem !important;
  padding: 12px 24px !important;
  transition: background-position 500ms ease-out, transform 200ms ease-out !important;
}

.jdgm-write-rev-link:hover,
.jdgm-btn:hover {
  background-position: right center !important;
  transform: scale(1.015) !important;
}

/* Individual review card */
.jdgm-rev {
  border-bottom: 1px solid rgba(11, 29, 58, 0.08) !important;
  padding: 24px 0 !important;
}

.jdgm-rev__author,
.jdgm-rev__author-name {
  font-family: var(--font-body--family) !important;
  font-weight: 600 !important;
  color: #0B1D3A !important;
  font-size: 0.95rem !important;
}

.jdgm-rev__title {
  font-family: var(--font-heading--family) !important;
  font-weight: 400 !important;
  font-size: 1.125rem !important;
  color: #0B1D3A !important;
  margin: 8px 0 !important;
}

.jdgm-rev__body,
.jdgm-rev__body p {
  font-family: var(--font-body--family) !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  color: #44474D !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* "Verified Buyer" badge */
.jdgm-rev__verified-badge,
.jdgm-rev__buyer-badge {
  background: rgba(197, 165, 90, 0.1) !important;
  color: #745B17 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(197, 165, 90, 0.3) !important;
}

/* Review form */
.jdgm-form,
.jdgm-form input,
.jdgm-form textarea,
.jdgm-form select {
  font-family: var(--font-body--family) !important;
  border-radius: 2px !important;
  border: 1px solid rgba(11, 29, 58, 0.15) !important;
}

.jdgm-form input:focus,
.jdgm-form textarea:focus {
  border-color: #C5A55A !important;
  outline: none !important;
}

/* Review filter pills / sort dropdown */
.jdgm-rev-widg__sort-dropdown,
.jdgm-rev-widg__sort {
  font-family: var(--font-body--family) !important;
  color: #44474D !important;
}

/* Pagination */
.jdgm-paginate__page,
.jdgm-paginate__page--active {
  font-family: var(--font-body--family) !important;
  color: #0B1D3A !important;
}

.jdgm-paginate__page--active {
  background: #C5A55A !important;
  color: #0B1D3A !important;
}

/* Mobile */
@media (max-width: 749px) {
  .jdgm-prev-badge {
    margin: 0 0 12px 0 !important;
  }
  .jdgm-rev-widg__title {
    font-size: 1.5rem !important;
  }
  .jdgm-write-rev-link {
    width: 100% !important;
    text-align: center !important;
  }
}

/* FORMULATION TRUST STRIP — fixed selectors */
/* =====================================
   The 3 trust items render as <rte-formatter> direct children inside
   the trust_strip's .group-block-content. Each has inline --width: 100%
   forcing full row width and stacking. Override + add icons + dividers.
===================================== */

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) {
  border-top: 1px solid rgba(11, 29, 58, 0.08) !important;
  --padding-block-start: 24px !important;
  margin-top: 8px !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content {
  --gap: 24px !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  --flex-direction: row !important;
  flex-direction: row !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > rte-formatter,
[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust'] {
  --width: auto !important;
  --max-width: none !important;
  width: auto !important;
  max-width: none !important;
  position: relative !important;
  padding-left: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust_1']::before,
[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust_2']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a55a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust_3']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a55a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust_1']::after,
[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust_2']::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(11, 29, 58, 0.15);
}

[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > rte-formatter p,
[id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #44474D !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

@media (max-width: 749px) {
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content {
    flex-direction: column !important;
    --flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > rte-formatter,
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust'] {
    width: 100% !important;
  }
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust_1']::after,
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust_2']::after {
    display: none !important;
  }
}

/* INGREDIENT NAMES — gold */
/* =====================================
   Per user request, every ingredient name (COPPER TRIPEPTIDE-1, etc.)
   in brand gold #C5A55A. Weight stays 700.
===================================== */
[id*='the_formulation'] [class*='__label'] p,
[id*='the_formulation'] [class*='__label'] {
  color: #C5A55A !important;
  --color: #C5A55A !important;
}

/* BARRIER CREAM clinical_benefits — leaf icon for Usage Protocol */
[id*='clinical_benefits'] .color-scheme-5 [class*='leaf_marker'] {
  width: 56px !important;
  height: 56px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a55a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V11'/%3E%3Cpath d='M5 11c0-3.5 3-6.5 7-6.5s7 3 7 6.5c0 3-3 5-7 5s-7-2-7-5z'/%3E%3Cpath d='M8.5 8c1-1 2.5-1.5 3.5-1.5s2.5.5 3.5 1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  margin: 0 0 8px 0 !important;
}
[id*='clinical_benefits'] .color-scheme-5 [class*='leaf_marker'] p {
  visibility: hidden;
  font-size: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Seal label — same gold uppercase as Elixir's "ideal_label" */
[id*='clinical_benefits'] .color-scheme-5 [class*='seal_label'] p {
  color: #C5A55A !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-family: var(--font-body--family) !important;
  margin: 0 !important;
  text-align: left !important;
}

/* PRODUCT INFO — per-product eyebrow + subtitle */
/* =====================================
   ELIXIR (template--20989143515368): "PRECISION-FORMULATED" eyebrow +
     "GHK-Cu + 9 Multi-Peptide Complex · Facial Serum · 30ml" subtitle
   BARRIER CREAM (template--20989183852776): "CLINICAL BARRIER SUPPORT"
     eyebrow + "Multi-Peptide Complex · Triple Ceramide · 50g / 1.76 oz"
   Title typography (italic Playfair, navy, antialiased) is shared.
===================================== */

/* SHARED — title styling on both products */
[id*='shopify-section-template--']:has(.product-information) .product-information h1,
.product-information h1,
[class*='product-information'] h1 {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ELIXIR eyebrow */
[id*='20989143515368'] .product-information h1::before,
[id*='20989143515368'] [class*='product-information'] h1::before {
  content: 'Precision-Formulated';
  display: block;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #C5A55A !important;
  margin-bottom: 16px !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ELIXIR subtitle */
[id*='20989143515368'] .product-information h1::after,
[id*='20989143515368'] [class*='product-information'] h1::after {
  content: 'GHK-Cu + 9 Multi-Peptide Complex \00b7 Facial Serum \00b7 30ml';
  display: block;
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0 !important;
  color: #44474D !important;
  margin-top: 12px !important;
  -webkit-font-smoothing: antialiased !important;
}

/* BARRIER CREAM eyebrow */
[id*='20989183852776'] .product-information h1::before,
[id*='20989183852776'] [class*='product-information'] h1::before {
  content: 'Clinical Barrier Support';
  display: block;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #C5A55A !important;
  margin-bottom: 16px !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased !important;
}

/* BARRIER CREAM subtitle */
[id*='20989183852776'] .product-information h1::after,
[id*='20989183852776'] [class*='product-information'] h1::after {
  content: 'Multi-Peptide Complex \00b7 Triple Ceramide \00b7 50g / 1.76 oz';
  display: block;
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0 !important;
  color: #44474D !important;
  margin-top: 12px !important;
  -webkit-font-smoothing: antialiased !important;
}

/* SHARED — description content (tagline / intro / callout / sparkle bullets) */
.elixir-tagline em,
.product-information rte-formatter .elixir-tagline em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  color: rgba(11, 29, 58, 0.7) !important;
  font-weight: 400 !important;
}
.elixir-tagline { margin: 0 0 16px 0 !important; }

.elixir-intro {
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #44474D !important;
  margin: 0 0 16px 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

.elixir-callout { margin: 0 0 24px 0 !important; }
.elixir-callout strong {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #0B1D3A !important;
}

.elixir-benefits,
.product-information rte-formatter .elixir-benefits {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elixir-benefits li,
.product-information rte-formatter .elixir-benefits li {
  position: relative !important;
  padding: 0 0 12px 32px !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #0B1D3A !important;
  -webkit-font-smoothing: antialiased !important;
}
.elixir-benefits li::before,
.product-information rte-formatter .elixir-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c5a55a'%3E%3Cpath d='M12 2l1.6 6.4L20 10l-6.4 1.6L12 18l-1.6-6.4L4 10l6.4-1.6z'/%3E%3Cpath d='M19 14l.7 1.8L21.5 16.5l-1.8.7L19 19l-.7-1.8-1.8-.7 1.8-.7z' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Mobile */
@media (max-width: 749px) {
  .product-information h1,
  [class*='product-information'] h1 {
    font-size: 1.875rem !important;
  }
  [id*='20989143515368'] .product-information h1::after,
  [id*='20989143515368'] [class*='product-information'] h1::after,
  [id*='20989183852776'] .product-information h1::after,
  [id*='20989183852776'] [class*='product-information'] h1::after {
    font-size: 0.95rem !important;
  }
  .elixir-benefits li { font-size: 0.9rem !important; }
}

/* COMPLETE THE RITUAL — typography polish */
/* =====================================
   Section: complete_the_ritual on the Elixir + Barrier Cream pages.
   Apply consistent typography, fix image cropping via object-fit, and
   ensure media block contains the full product shot.
===================================== */

/* Eyebrow "COMPLETE THE RITUAL" gold uppercase tracking-wide */
[id*='complete_the_ritual'] [class*='caption'] p,
[id*='complete_the_ritual'] [class*='__caption'] p {
  color: #C5A55A !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-family: var(--font-body--family) !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 0 12px 0 !important;
}

/* Heading h2/h3 — match site pattern (italic gold em) */
[id*='complete_the_ritual'] h2,
[id*='complete_the_ritual'] h3,
[id*='complete_the_ritual'] [class*='heading_title'] h2,
[id*='complete_the_ritual'] [class*='heading_title'] h3 {
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='complete_the_ritual'] h2 em,
[id*='complete_the_ritual'] h3 em,
[id*='complete_the_ritual'] [class*='heading_title'] em {
  color: #C5A55A !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* Price / size line */
[id*='complete_the_ritual'] [class*='price'] p {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #0B1D3A !important;
  font-family: var(--font-body--family) !important;
  margin: 12px 0 24px 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Body copy */
[id*='complete_the_ritual'] [class*='__text'] p,
[id*='complete_the_ritual'] [class*='__text'] {
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #44474D !important;
  font-family: var(--font-body--family) !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 0 16px 0 !important;
}
[id*='complete_the_ritual'] [class*='__text'] strong {
  color: #0B1D3A !important;
  font-weight: 600 !important;
}

/* Buttons — primary "Shop The Ritual" gets the metallic gradient,
   secondary "Add Barrier Cream" gets the navy outline ghost style */
[id*='complete_the_ritual'] [class*='button_ritual'],
[id*='complete_the_ritual'] [class*='button_ritual'] a {
  background: var(--mvi-gold-gradient) !important;
  background-size: 200% 200% !important;
  background-position: left center !important;
  color: var(--mvi-navy) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: var(--font-body--family) !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-size: 0.8125rem !important;
  padding: 14px 28px !important;
  transition: background-position 500ms ease-out, transform 200ms ease-out !important;
}
[id*='complete_the_ritual'] [class*='button_ritual']:hover {
  background-position: right center !important;
  transform: scale(1.015) !important;
}

/* IMAGE — ensure it shows in full (no cropping). The JSON change to
   image_position: contain handles most of this; this CSS is a safety net. */
[id*='complete_the_ritual'] img,
[id*='complete_the_ritual'] [class*='media-block__media'] {
  object-fit: contain !important;
  object-position: center !important;
  max-height: 70vh !important;
  width: 100% !important;
  height: auto !important;
}

/* Mobile */
@media (max-width: 749px) {
  [id*='complete_the_ritual'] h2,
  [id*='complete_the_ritual'] h3 {
    font-size: 1.875rem !important;
  }
  [id*='complete_the_ritual'] img {
    max-height: 50vh !important;
  }
}

/* =====================================
   Section: morning_evening_ritual on the Ritual page.
   - Italic centered heading
   - Two card layout: white (foundation) + navy (seal)
   - Numbered circles (1 = solid navy with cream text, 2 = navy with gold ring)
   - KEY INGREDIENTS label with gold divider line above
===================================== */

/* Heading: full-italic Playfair, navy */
[id*='morning_evening_ritual'] h2,
[id*='morning_evening_ritual'] [class*='heading_row'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 !important;
}
[id*='morning_evening_ritual'] h2 em {
  font-style: italic !important;
  color: #0B1D3A !important;
}

/* Card border-radius safety */
[id*='morning_evening_ritual'] [class*='c_step'] {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Numbered circles — STEP 1 (solid navy bg, cream "1") */
[id*='morning_evening_ritual'] [class*='c_step1'] [class*='num_circle'] {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 9999px !important;
  background: #0B1D3A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
[id*='morning_evening_ritual'] [class*='c_step1'] [class*='num_circle'] p {
  color: #FAF8F4 !important;
  font-family: var(--font-body--family) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  margin: 0 !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Numbered circles — STEP 2 (navy bg with gold outline ring, cream "2") */
[id*='morning_evening_ritual'] [class*='c_step2'] [class*='num_circle'] {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  border: 1.5px solid #C5A55A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
[id*='morning_evening_ritual'] [class*='c_step2'] [class*='num_circle'] p {
  color: #FAF8F4 !important;
  font-family: var(--font-body--family) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  margin: 0 !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Card eyebrow + title shared */
[id*='morning_evening_ritual'] [class*='eyebrow'] p {
  font-family: var(--font-body--family) !important;
  color: #C5A55A !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] [class*='c_step'] h3,
[id*='morning_evening_ritual'] [class*='c_step'] h3 em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.375rem, 2.5vw, 1.625rem) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] [class*='c_step1'] h3,
[id*='morning_evening_ritual'] [class*='c_step1'] h3 em {
  color: #0B1D3A !important;
}
[id*='morning_evening_ritual'] [class*='c_step2'] h3,
[id*='morning_evening_ritual'] [class*='c_step2'] h3 em {
  color: #FAF8F4 !important;
}

/* Body copy */
[id*='morning_evening_ritual'] [class*='c_step'] [class*='__body'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] [class*='c_step1'] [class*='__body'] p {
  color: #44474D !important;
}
[id*='morning_evening_ritual'] [class*='c_step2'] [class*='__body'] p {
  color: rgba(250, 248, 244, 0.85) !important;
}

/* KEY INGREDIENTS label — with thin gold divider above */
[id*='morning_evening_ritual'] [class*='kii_label'] {
  position: relative !important;
  padding-top: 20px !important;
  margin-top: 4px !important;
}
[id*='morning_evening_ritual'] [class*='kii_label']::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
}
[id*='morning_evening_ritual'] [class*='c_step1'] [class*='kii_label']::before {
  background: rgba(11, 29, 58, 0.12) !important;
}
[id*='morning_evening_ritual'] [class*='c_step2'] [class*='kii_label']::before {
  background: rgba(197, 165, 90, 0.3) !important;
}
[id*='morning_evening_ritual'] [class*='kii_label'] p {
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] [class*='kii_text'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] [class*='c_step1'] [class*='kii_text'] p {
  color: #44474D !important;
}
[id*='morning_evening_ritual'] [class*='c_step2'] [class*='kii_text'] p {
  color: rgba(250, 248, 244, 0.85) !important;
}

/* Mobile — stack vertically */
@media (max-width: 749px) {
  [id*='morning_evening_ritual'] h2 {
    font-size: 1.875rem !important;
  }
  [id*='morning_evening_ritual'] [class*='c_step'] {
    padding: 32px !important;
  }
  [id*='morning_evening_ritual'] [class*='c_step'] h3 {
    font-size: 1.375rem !important;
  }
}

/* =====================================
   Section: morning_evening_ritual on the Ritual page.
   Each card is a single rte text block with hand-written HTML carrying
   .mer-* classes (more reliable than Horizon block-id-based selectors).
===================================== */

/* Section heading: italic Playfair, navy, antialiased */
[id*='morning_evening_ritual'] h2,
[id*='morning_evening_ritual'] [class*='heading_row'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 !important;
}
[id*='morning_evening_ritual'] h2 em {
  font-style: italic !important;
  color: #0B1D3A !important;
  font-weight: 400 !important;
}

/* Card container — padding lives here so the group radius/scheme stays clean */
[id*='morning_evening_ritual'] .mer-card {
  padding: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  height: 100% !important;
  width: 100% !important;
}

/* Head row — circle on left, eyebrow+title stack on right */
[id*='morning_evening_ritual'] .mer-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 0 !important;
}

/* Numbered circle — light variant: solid navy filled, cream "1" */
[id*='morning_evening_ritual'] .mer-light .mer-num {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 9999px !important;
  background: #0B1D3A !important;
  color: #FAF8F4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body--family) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Numbered circle — dark variant: navy bg w/ gold ring outline */
[id*='morning_evening_ritual'] .mer-dark .mer-num {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  border: 1.5px solid #C5A55A !important;
  color: #FAF8F4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body--family) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Title column — eyebrow + title stack tight */
[id*='morning_evening_ritual'] .mer-title-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Eyebrow */
[id*='morning_evening_ritual'] .mer-eyebrow {
  font-family: var(--font-body--family) !important;
  color: #C5A55A !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Card title */
[id*='morning_evening_ritual'] .mer-title {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.375rem, 2.5vw, 1.625rem) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] .mer-light .mer-title { color: #0B1D3A !important; }
[id*='morning_evening_ritual'] .mer-dark .mer-title  { color: #FAF8F4 !important; }

/* Body copy */
[id*='morning_evening_ritual'] .mer-body {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] .mer-light .mer-body { color: #44474D !important; }
[id*='morning_evening_ritual'] .mer-dark .mer-body  { color: rgba(250, 248, 244, 0.85) !important; }

/* KEY INGREDIENTS label — gold, with thin divider above */
[id*='morning_evening_ritual'] .mer-kii-label {
  position: relative !important;
  padding-top: 20px !important;
  margin: 4px 0 0 0 !important;
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] .mer-kii-label::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
}
[id*='morning_evening_ritual'] .mer-light .mer-kii-label::before {
  background: rgba(11, 29, 58, 0.12) !important;
}
[id*='morning_evening_ritual'] .mer-dark .mer-kii-label::before {
  background: rgba(197, 165, 90, 0.3) !important;
}

/* KEY INGREDIENTS list */
[id*='morning_evening_ritual'] .mer-kii {
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] .mer-light .mer-kii { color: #44474D !important; }
[id*='morning_evening_ritual'] .mer-dark .mer-kii  { color: rgba(250, 248, 244, 0.85) !important; }

/* Mobile */
@media (max-width: 749px) {
  [id*='morning_evening_ritual'] h2 {
    font-size: 1.875rem !important;
  }
  [id*='morning_evening_ritual'] .mer-card {
    padding: 32px !important;
  }
  [id*='morning_evening_ritual'] .mer-title {
    font-size: 1.375rem !important;
  }
}

/* RITUAL — morning_evening_ritual section */
/* =====================================
   morning_evening_ritual on /products/the-ritual.
   Selectors rely on:
     - text-block--<id>   (Horizon adds this for every text block)
     - color-scheme-{1,5} (group.liquid adds this when inherit_color_scheme=false)
   Group blocks DO NOT get block-id classes, so we never target groups by id.
===================================== */

/* Section heading: full italic Playfair */
[id*='morning_evening_ritual'] h2,
[id*='morning_evening_ritual'] [class*='heading_row'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 !important;
}
[id*='morning_evening_ritual'] h2 em {
  font-style: italic !important;
  color: #0B1D3A !important;
  font-weight: 400 !important;
}

/* Numbered circle — shared base */
[id*='morning_evening_ritual'] [class*='mer_num'] {
  --width: auto !important;
  width: 48px !important;
  max-width: 48px !important;
  flex: 0 0 48px !important;
  height: 48px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
[id*='morning_evening_ritual'] [class*='mer_num'] p {
  margin: 0 !important;
  font-family: var(--font-body--family) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: #FAF8F4 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Light card (scheme-1): solid navy filled circle */
[id*='morning_evening_ritual'] .color-scheme-1 [class*='mer_num'] {
  background: #0B1D3A !important;
}
/* Dark card (scheme-5): gold ring outline */
[id*='morning_evening_ritual'] .color-scheme-5 [class*='mer_num'] {
  background: transparent !important;
  border: 1.5px solid #C5A55A !important;
}

/* Eyebrow */
[id*='morning_evening_ritual'] [class*='mer_eyebrow'] {
  --width: auto !important;
}
[id*='morning_evening_ritual'] [class*='mer_eyebrow'] p,
[id*='morning_evening_ritual'] [class*='mer_eyebrow'] {
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Card title (h3, italic) */
[id*='morning_evening_ritual'] [class*='mer_title'] h3,
[id*='morning_evening_ritual'] [class*='mer_title'] h3 em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.375rem, 2.5vw, 1.625rem) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] .color-scheme-1 [class*='mer_title'] h3,
[id*='morning_evening_ritual'] .color-scheme-1 [class*='mer_title'] h3 em {
  color: #0B1D3A !important;
}
[id*='morning_evening_ritual'] .color-scheme-5 [class*='mer_title'] h3,
[id*='morning_evening_ritual'] .color-scheme-5 [class*='mer_title'] h3 em {
  color: #FAF8F4 !important;
}

/* Body copy */
[id*='morning_evening_ritual'] [class*='mer_body'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] .color-scheme-1 [class*='mer_body'] p {
  color: #44474D !important;
}
[id*='morning_evening_ritual'] .color-scheme-5 [class*='mer_body'] p {
  color: rgba(250, 248, 244, 0.88) !important;
}

/* KEY INGREDIENTS label — gold w/ thin divider above */
[id*='morning_evening_ritual'] [class*='mer_kii_label'] {
  position: relative !important;
  padding-top: 20px !important;
  margin-top: 4px !important;
  --width: 100% !important;
  width: 100% !important;
}
[id*='morning_evening_ritual'] [class*='mer_kii_label']::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
}
[id*='morning_evening_ritual'] .color-scheme-1 [class*='mer_kii_label']::before {
  background: rgba(11, 29, 58, 0.12) !important;
}
[id*='morning_evening_ritual'] .color-scheme-5 [class*='mer_kii_label']::before {
  background: rgba(197, 165, 90, 0.3) !important;
}
[id*='morning_evening_ritual'] [class*='mer_kii_label'] p {
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* KEY INGREDIENTS list */
[id*='morning_evening_ritual'] [class*='mer_kii_text'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='morning_evening_ritual'] .color-scheme-1 [class*='mer_kii_text'] p {
  color: #44474D !important;
}
[id*='morning_evening_ritual'] .color-scheme-5 [class*='mer_kii_text'] p {
  color: rgba(250, 248, 244, 0.88) !important;
}

/* Mobile */
@media (max-width: 749px) {
  [id*='morning_evening_ritual'] h2 {
    font-size: 1.875rem !important;
  }
  [id*='morning_evening_ritual'] .color-scheme-1.group-block,
  [id*='morning_evening_ritual'] .color-scheme-5.group-block {
    padding: 32px !important;
  }
  [id*='morning_evening_ritual'] [class*='mer_title'] h3 {
    font-size: 1.375rem !important;
  }
}

/* RITUAL — whats_included typography polish */
/* =====================================
   whats_included on /products/the-ritual.
   Match the typography pattern used by morning_evening_ritual + the rest
   of the page: italic Playfair headings with gold em accent, antialiased
   smoothing, gold uppercase eyebrows, muted body copy.
===================================== */

/* Section eyebrow "WHAT'S INCLUDED" */
[id*='whats_included'] [class*='eyebrow_row'] p {
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Section heading "Two Products. One System." */
[id*='whats_included'] [class*='heading_row'] h2,
[id*='whats_included'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 !important;
}
[id*='whats_included'] h2 em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #C5A55A !important;
}

/* Sub line under heading */
[id*='whats_included'] [class*='sub_row'] p {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Card eyebrow "STEP 01 · THE TREATMENT" */
[id*='whats_included'] [class*='wi_eyebrow'] p {
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Card title "Copper Peptide Elixir" — italic Playfair */
[id*='whats_included'] [class*='wi_title'] h3,
[id*='whats_included'] [class*='wi_title'] h3 em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 3vw, 1.875rem) !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Card price */
[id*='whats_included'] [class*='wi_price'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Card description body */
[id*='whats_included'] [class*='wi_desc'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Mobile */
@media (max-width: 749px) {
  [id*='whats_included'] h2 {
    font-size: 1.875rem !important;
  }
  [id*='whats_included'] [class*='wi_title'] h3 {
    font-size: 1.5rem !important;
  }
}

/* RITUAL — why_ritual typography polish */
/* =====================================
   why_ritual on /products/the-ritual.
   Match the typography pattern used by morning_evening_ritual +
   whats_included: gold uppercase eyebrow + italic Playfair heading
   with gold em accent + muted body + semi-bold pillar names.
===================================== */

/* Section eyebrow "WHY IT WORKS" */
[id*='why_ritual'] [class*='eyebrow_row'] p {
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Section heading "The Full Architecture" — navy w/ italic gold em */
[id*='why_ritual'] [class*='heading_row'] h2,
[id*='why_ritual'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 !important;
}
[id*='why_ritual'] h2 em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #C5A55A !important;
}

/* Sub line under heading */
[id*='why_ritual'] [class*='sub_row'] p {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Pillar name "Treat" / "Seal" / "Compound" — semi-bold navy sans */
[id*='why_ritual'] [class*='wr_name'] p {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='why_ritual'] [class*='wr_name'] strong {
  font-weight: 600 !important;
  color: #0B1D3A !important;
}

/* Pillar body description */
[id*='why_ritual'] [class*='wr_body'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Mobile */
@media (max-width: 749px) {
  [id*='why_ritual'] h2 {
    font-size: 1.875rem !important;
  }
  [id*='why_ritual'] [class*='wr_name'] p {
    font-size: 1rem !important;
  }
  [id*='why_ritual'] [class*='wr_body'] p {
    font-size: 0.9rem !important;
  }
}

/* RITUAL — product-info eyebrow + subtitle */
/* =====================================
   Ritual product page eyebrow + (hidden) subtitle.
   Scoped via :has([id*='whats_included']) — that section only exists on
   the Ritual page (custom-built in product.ritual.json), so this rule
   never leaks to Elixir or Barrier Cream.
===================================== */

/* RITUAL eyebrow above the title */
body:has([id*='whats_included']) .product-information h1::before,
body:has([id*='whats_included']) [class*='product-information'] h1::before {
  content: 'The Complete Ritual' !important;
  display: block !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #C5A55A !important;
  margin-bottom: 16px !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased !important;
}

/* RITUAL — hide any subtitle (no per-page subtitle, the descriptionHtml
   tagline carries that role) */
body:has([id*='whats_included']) .product-information h1::after,
body:has([id*='whats_included']) [class*='product-information'] h1::after {
  content: '' !important;
  display: none !important;
}

/* Mobile parity */
@media (max-width: 749px) {
  body:has([id*='whats_included']) .product-information h1::before {
    font-size: 0.6875rem !important;
  }
}

/* ABOUT PAGE — typography polish */
/* =====================================
   /pages/about — match the typography pattern used across the site:
     - gold uppercase eyebrow w/ 0.2em tracking
     - Playfair regular navy headings, italic gold <em> accent
     - muted #44474D body w/ 1.65 line-height
     - antialiased font-smoothing on every element
   Scope: [id*='about_'] matches every section on this page (about_hero,
   about_origin, about_pillars, about_approach, about_cta, about_founder_mwc).
===================================== */

/* Eyebrows (every section's <p>OUR ...</p> top label) */
[id*='about_'] [class*='eyebrow'] p,
[id*='about_'] [class*='caption'] p {
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Hero h1 — slightly larger than h2 */
[id*='about_'] [class*='heading'] h1,
[id*='about_'] h1 {
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(2.5rem, 5vw, 3.75rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* h2 in every section */
[id*='about_'] [class*='heading'] h2,
[id*='about_'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Italic gold em accent inside any heading */
[id*='about_'] h1 em,
[id*='about_'] h2 em,
[id*='about_'] h3 em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #C5A55A !important;
}

/* h3 (pillars: Precision / Purity / Performance) */
[id*='about_'] [class*='col_'] h3,
[id*='about_'] h3 {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.375rem, 2.5vw, 1.625rem) !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Sub line / body paragraphs across the page */
[id*='about_'] [class*='sub'] p,
[id*='about_'] [class*='__sub'] p,
[id*='about_'] [class*='__p1'] p,
[id*='about_'] [class*='__p2'] p,
[id*='about_'] [class*='__text'] p,
[id*='about_'] [class*='__body'] p,
[id*='about_'] [class*='__desc'] p {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Founder media-with-content block — quote + attribution + signature */
[id*='about_founder'] [class*='quote'] p,
[id*='about_founder'] [class*='__quote'] p {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
  line-height: 1.4 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='about_founder'] [class*='attribution'] p,
[id*='about_founder'] [class*='__attribution'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #44474D !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='about_founder'] [class*='signature'] p,
[id*='about_founder'] [class*='__signature'] p {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.125rem !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* CTA section trust strip "PRECISION-FORMULATED..." */
[id*='about_cta'] [class*='trust'] p {
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #C5A55A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Mobile */
@media (max-width: 749px) {
  [id*='about_'] h1 {
    font-size: 2.25rem !important;
  }
  [id*='about_'] h2 {
    font-size: 1.75rem !important;
  }
  [id*='about_'] h3 {
    font-size: 1.25rem !important;
  }
  [id*='about_'] [class*='__p1'] p,
  [id*='about_'] [class*='__p2'] p,
  [id*='about_'] [class*='__sub'] p,
  [id*='about_'] [class*='sub'] p {
    font-size: 0.95rem !important;
  }
}

/* ABOUT PAGE — dark-scheme color overrides */
/* =====================================
   about_cta + about_philosophy use color_scheme: scheme-5 (navy bg).
   The previous ABOUT polish forced h2/body to dark colors — invisible
   on a navy background. These overrides flip those two specific
   text colors back to cream for any scheme-5 group on the About page.
   The shared eyebrow + gold <em> + trust strip rules already work on
   navy because they're already gold.
===================================== */

/* h2 base text on dark sections — cream */
[id*='about_'] .color-scheme-5 [class*='heading'] h2,
[id*='about_'] .color-scheme-5 h2 {
  color: #FAF8F4 !important;
}

/* h1 on dark sections (defensive, unused today) */
[id*='about_'] .color-scheme-5 [class*='heading'] h1,
[id*='about_'] .color-scheme-5 h1 {
  color: #FAF8F4 !important;
}

/* h3 on dark sections — cream italic */
[id*='about_'] .color-scheme-5 h3,
[id*='about_'] .color-scheme-5 [class*='col_'] h3 {
  color: #FAF8F4 !important;
}

/* Body copy on dark sections — soft cream w/ slight alpha for muting */
[id*='about_'] .color-scheme-5 [class*='sub'] p,
[id*='about_'] .color-scheme-5 [class*='__sub'] p,
[id*='about_'] .color-scheme-5 [class*='__p1'] p,
[id*='about_'] .color-scheme-5 [class*='__p2'] p,
[id*='about_'] .color-scheme-5 [class*='__text'] p,
[id*='about_'] .color-scheme-5 [class*='__body'] p,
[id*='about_'] .color-scheme-5 [class*='__desc'] p {
  color: rgba(250, 248, 244, 0.88) !important;
}

/* The gold <em> accent stays gold even on dark sections (already does
   in the base ABOUT polish — no change needed). */

/* =====================================
   "Our Philosophy" section — heading centered + gold (overrides the
   dark-scheme cream-h2 rule), body text one notch smaller for a more
   restrained editorial feel.
===================================== */

/* Heading — centered, gold (override the dark-scheme cream h2 rule) */
[id*='about_philosophy'] [class*='heading'] h2,
[id*='about_philosophy'] h2 {
  color: #C5A55A !important;
  text-align: center !important;
  font-style: italic !important;
}

/* Body text — slightly smaller in this section */
[id*='about_philosophy'] [class*='__text'] p,
[id*='about_philosophy'] .color-scheme-5 [class*='__text'] p {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

@media (max-width: 749px) {
  [id*='about_philosophy'] [class*='__text'] p {
    font-size: 0.875rem !important;
  }
}

/* ABOUT PAGE — about_philosophy specific */
/* =====================================
   "Our Philosophy" — heading gold + centered + italic.
   Selectors include .color-scheme-5 to match the specificity of the
   dark-scheme cream-h2 override (0,3,1) so the source-order tie-break
   makes this rule win.
===================================== */

/* Heading — gold, centered, italic — beats the dark-scheme cream override */
[id*='about_philosophy'] .color-scheme-5 [class*='heading'] h2,
[id*='about_philosophy'] .color-scheme-5 h2,
[id*='about_philosophy'] [class*='heading'] h2,
[id*='about_philosophy'] h2 {
  color: #C5A55A !important;
  text-align: center !important;
  font-style: italic !important;
  font-family: var(--font-heading--family) !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Body text — slightly smaller in this section (kept from prior commit) */
[id*='about_philosophy'] .color-scheme-5 [class*='__text'] p,
[id*='about_philosophy'] [class*='__text'] p {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

@media (max-width: 749px) {
  [id*='about_philosophy'] [class*='__text'] p {
    font-size: 0.875rem !important;
  }
}

/* =====================================
   /pages/faq — match the site typography pattern: Playfair regular navy
   headings w/ italic gold <em> accent, gold uppercase eyebrow if used,
   muted body, accordion question = semi-bold navy, accordion answer =
   muted body. All antialiased.
===================================== */

/* Hero h1 "Frequently Asked Questions" */
[id*='faq_'] [class*='heading'] h1,
[id*='faq_'] h1 {
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Section h2 ("The Elixir", "Barrier Cream", etc.) */
[id*='faq_'] [class*='heading'] h2,
[id*='faq_'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(1.875rem, 3.5vw, 2.5rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Italic gold <em> accent in any heading */
[id*='faq_'] h1 em,
[id*='faq_'] h2 em,
[id*='faq_'] h3 em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #C5A55A !important;
}

/* Sub line under hero "Everything you need to know..." */
[id*='faq_'] [class*='sub'] p,
[id*='faq_'] [class*='__sub'] p {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Accordion question (rendered as <summary class="details__header"> */
[id*='faq_'] .accordion .details__header,
[id*='faq_'] .accordion summary {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.01em !important;
  color: #0B1D3A !important;
  -webkit-font-smoothing: antialiased !important;
  padding-block: 18px !important;
}

/* Caret/plus icons inside summary — keep gold */
[id*='faq_'] .accordion .icon-caret,
[id*='faq_'] .accordion .icon-plus,
[id*='faq_'] .accordion summary .svg-wrapper {
  color: #C5A55A !important;
}

/* Accordion answer body */
[id*='faq_'] .accordion .details-content,
[id*='faq_'] .accordion .details-content p,
[id*='faq_'] .accordion .details-content li,
[id*='faq_'] .accordion .details-content rte-formatter p {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='faq_'] .accordion .details-content p {
  margin: 0 0 12px 0 !important;
}
[id*='faq_'] .accordion .details-content p:last-child {
  margin-bottom: 0 !important;
}
[id*='faq_'] .accordion .details-content strong {
  color: #0B1D3A !important;
  font-weight: 600 !important;
}
[id*='faq_'] .accordion .details-content em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  color: #0B1D3A !important;
}

/* Accordion divider lines — subtle navy */
[id*='faq_'] .accordion--dividers .details {
  border-block-start: 1px solid rgba(11, 29, 58, 0.1) !important;
}

/* Mobile */
@media (max-width: 749px) {
  [id*='faq_'] h1 {
    font-size: 2.25rem !important;
  }
  [id*='faq_'] h2 {
    font-size: 1.625rem !important;
  }
  [id*='faq_'] .accordion .details__header,
  [id*='faq_'] .accordion summary {
    font-size: 0.95rem !important;
  }
  [id*='faq_'] .accordion .details-content p {
    font-size: 0.9rem !important;
  }
}

/* FAQ PAGE — typography polish */
/* =====================================
   /pages/faq — italic gold Playfair section headings (per user request),
   plus the rest of the site typography pattern: gold em accent, muted
   body, semi-bold navy accordion question, muted answer body.
===================================== */

/* Hero h1 "Frequently Asked Questions" — italic gold Playfair */
[id*='faq_'] [class*='heading'] h1,
[id*='faq_'] h1 {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #C5A55A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Section h2 ("The Elixir", "Barrier Cream", etc.) — italic gold Playfair */
[id*='faq_'] [class*='heading'] h2,
[id*='faq_'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.875rem, 3.5vw, 2.5rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  color: #C5A55A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Em accent inside any heading — also gold (already gold, just enforced) */
[id*='faq_'] h1 em,
[id*='faq_'] h2 em,
[id*='faq_'] h3 em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #C5A55A !important;
}

/* Sub line under hero "Everything you need to know..." */
[id*='faq_'] [class*='sub'] p,
[id*='faq_'] [class*='__sub'] p {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Accordion question (rendered as <summary class="details__header">) */
[id*='faq_'] .accordion .details__header,
[id*='faq_'] .accordion summary {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.01em !important;
  color: #0B1D3A !important;
  -webkit-font-smoothing: antialiased !important;
  padding-block: 18px !important;
}

/* Caret/plus icons inside summary — gold */
[id*='faq_'] .accordion .icon-caret,
[id*='faq_'] .accordion .icon-plus,
[id*='faq_'] .accordion summary .svg-wrapper {
  color: #C5A55A !important;
}

/* Accordion answer body */
[id*='faq_'] .accordion .details-content,
[id*='faq_'] .accordion .details-content p,
[id*='faq_'] .accordion .details-content li,
[id*='faq_'] .accordion .details-content rte-formatter p {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='faq_'] .accordion .details-content p {
  margin: 0 0 12px 0 !important;
}
[id*='faq_'] .accordion .details-content p:last-child {
  margin-bottom: 0 !important;
}
[id*='faq_'] .accordion .details-content strong {
  color: #0B1D3A !important;
  font-weight: 600 !important;
}
[id*='faq_'] .accordion .details-content em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  color: #0B1D3A !important;
}

/* Divider lines between accordion rows */
[id*='faq_'] .accordion--dividers .details {
  border-block-start: 1px solid rgba(11, 29, 58, 0.1) !important;
}

/* Mobile */
@media (max-width: 749px) {
  [id*='faq_'] h1 {
    font-size: 2.25rem !important;
  }
  [id*='faq_'] h2 {
    font-size: 1.625rem !important;
  }
  [id*='faq_'] .accordion .details__header,
  [id*='faq_'] .accordion summary {
    font-size: 0.95rem !important;
  }
  [id*='faq_'] .accordion .details-content p {
    font-size: 0.9rem !important;
  }
}

/* =====================================
   /pages/contact rebuild — 2-column row matching the website layout.
   LEFT: eyebrow + italic-em heading + body + 4 info pairs.
   RIGHT: contact form in a white card on the cream section background.
===================================== */

/* Heading "A Dialogue Between Science and Skin." */
[id*='contact_main'] [class*='c_heading'] h2,
[id*='contact_main'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='contact_main'] h2 em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #C5A55A !important;
}

/* Eyebrow "INQUIRIES" + info labels (General Correspondence, etc.) */
[id*='contact_main'] [class*='c_eyebrow'] p,
[id*='contact_main'] [class*='info_label'] p {
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Intro body paragraph */
[id*='contact_main'] [class*='c_body'] p {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Info body lines (email, social handle, shop link, hours) */
[id*='contact_main'] [class*='info_body'] p {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='contact_main'] [class*='info_body'] a {
  color: #0B1D3A !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(11, 29, 58, 0.2) !important;
  transition: border-color 200ms ease !important;
}
[id*='contact_main'] [class*='info_body'] a:hover {
  border-bottom-color: #C5A55A !important;
}

/* Right column — white card on the cream section bg */
[id*='contact_main'] .color-scheme-1.group-block {
  background: #FFFFFF !important;
  border-radius: 16px !important;
}

/* Contact form fields */
[id*='contact_main'] contact-form input[type='text'],
[id*='contact_main'] contact-form input[type='email'],
[id*='contact_main'] contact-form input[type='tel'],
[id*='contact_main'] contact-form textarea,
[id*='contact_main'] .contact-form input,
[id*='contact_main'] .contact-form textarea {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  color: #0B1D3A !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(11, 29, 58, 0.2) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='contact_main'] contact-form input:focus,
[id*='contact_main'] contact-form textarea:focus,
[id*='contact_main'] .contact-form input:focus,
[id*='contact_main'] .contact-form textarea:focus {
  outline: none !important;
  border-bottom-color: #C5A55A !important;
}
[id*='contact_main'] contact-form input::placeholder,
[id*='contact_main'] contact-form textarea::placeholder,
[id*='contact_main'] .contact-form input::placeholder,
[id*='contact_main'] .contact-form textarea::placeholder {
  color: rgba(11, 29, 58, 0.4) !important;
}
[id*='contact_main'] contact-form label,
[id*='contact_main'] .contact-form label {
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #44474D !important;
  margin-bottom: 6px !important;
  display: block !important;
  -webkit-font-smoothing: antialiased !important;
}

/* SEND button — navy primary */
[id*='contact_main'] contact-form button[type='submit'],
[id*='contact_main'] contact-form .button-primary,
[id*='contact_main'] .contact-form button[type='submit'] {
  background: #0B1D3A !important;
  color: #FAF8F4 !important;
  border: none !important;
  border-radius: 9999px !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 16px 36px !important;
  cursor: pointer !important;
  transition: transform 200ms ease, background 300ms ease !important;
}
[id*='contact_main'] contact-form button[type='submit']:hover,
[id*='contact_main'] contact-form .button-primary:hover {
  transform: scale(1.02) !important;
}

/* Mobile — stack vertically */
@media (max-width: 749px) {
  [id*='contact_main'] h2 {
    font-size: 1.875rem !important;
  }
  [id*='contact_main'] .color-scheme-1.group-block {
    padding: 32px !important;
  }
}

/* CONTACT PAGE — rebuild */
/* =====================================
   /pages/contact — 2-column row matching the website. LEFT: eyebrow +
   italic-em heading + body + 5 info pairs (with multi-platform social).
   RIGHT: contact form in a white card with custom Subject <select>.
===================================== */

/* Heading */
[id*='contact_main'] [class*='c_heading'] h2,
[id*='contact_main'] h2 {
  font-family: var(--font-heading--family) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='contact_main'] h2 em {
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #C5A55A !important;
}

/* Eyebrow + info labels */
[id*='contact_main'] [class*='c_eyebrow'] p,
[id*='contact_main'] [class*='info_label'] p {
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Intro body */
[id*='contact_main'] [class*='c_body'] p {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #44474D !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Info body lines (each <p> on its own row) */
[id*='contact_main'] [class*='info_body'] p {
  font-family: var(--font-body--family) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #0B1D3A !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='contact_main'] [class*='info_body'] p + p {
  margin-top: 4px !important;
}
[id*='contact_main'] [class*='info_body'] a {
  color: #0B1D3A !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(11, 29, 58, 0.2) !important;
  transition: border-color 200ms ease, color 200ms ease !important;
}
[id*='contact_main'] [class*='info_body'] a:hover {
  color: #C5A55A !important;
  border-bottom-color: #C5A55A !important;
}

/* Right column white card */
[id*='contact_main'] .color-scheme-1.group-block {
  background: #FFFFFF !important;
  border-radius: 16px !important;
}

/* Contact form fields — bottom-border-only inputs + select */
[id*='contact_main'] contact-form input[type='text'],
[id*='contact_main'] contact-form input[type='email'],
[id*='contact_main'] contact-form input[type='tel'],
[id*='contact_main'] contact-form textarea,
[id*='contact_main'] contact-form select,
[id*='contact_main'] .contact-form input,
[id*='contact_main'] .contact-form textarea,
[id*='contact_main'] .contact-form select {
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  color: #0B1D3A !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(11, 29, 58, 0.2) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  margin: 0 0 24px 0 !important;
  width: 100% !important;
  -webkit-font-smoothing: antialiased !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Subject select — caret indicator on the right */
[id*='contact_main'] contact-form select,
[id*='contact_main'] .contact-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1D3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 16px !important;
  padding-right: 32px !important;
  cursor: pointer !important;
}
[id*='contact_main'] contact-form select:focus,
[id*='contact_main'] contact-form input:focus,
[id*='contact_main'] contact-form textarea:focus,
[id*='contact_main'] .contact-form input:focus,
[id*='contact_main'] .contact-form textarea:focus,
[id*='contact_main'] .contact-form select:focus {
  outline: none !important;
  border-bottom-color: #C5A55A !important;
}
[id*='contact_main'] contact-form input::placeholder,
[id*='contact_main'] contact-form textarea::placeholder,
[id*='contact_main'] .contact-form input::placeholder,
[id*='contact_main'] .contact-form textarea::placeholder {
  color: rgba(11, 29, 58, 0.4) !important;
}
[id*='contact_main'] contact-form select option,
[id*='contact_main'] .contact-form select option {
  background: #FFFFFF !important;
  color: #0B1D3A !important;
}

/* Hide screen-reader only labels visually but keep them in DOM */
[id*='contact_main'] .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* SEND button — navy pill */
[id*='contact_main'] contact-form button[type='submit'],
[id*='contact_main'] contact-form .button-primary,
[id*='contact_main'] contact-form .button,
[id*='contact_main'] .contact-form button[type='submit'] {
  background: #0B1D3A !important;
  color: #FAF8F4 !important;
  border: none !important;
  border-radius: 9999px !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 16px 36px !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  transition: transform 200ms ease, background 300ms ease !important;
}
[id*='contact_main'] contact-form button[type='submit']:hover,
[id*='contact_main'] contact-form .button-primary:hover,
[id*='contact_main'] contact-form .button:hover {
  transform: scale(1.02) !important;
}

/* Mobile */
@media (max-width: 749px) {
  [id*='contact_main'] h2 {
    font-size: 1.875rem !important;
  }
  [id*='contact_main'] .color-scheme-1.group-block {
    padding: 32px !important;
  }
}

/* FIX: ensure content visible on browsers without animation-timeline support */
section[id*="benefits_grid"], section[id*="trust_strip"], section[id*="three_pillars"], section[id*="stats_band"], section[id*="sensory_profile"], section[id*="clinical_benefits"], section[id*="the_formulation"], section[id*="how_to_use"], section[id*="consumer_results"], section[id*="complete_the_ritual"], section[id*="whats_included"], section[id*="why_ritual"], section[id*="savings_emphasis"], section[id*="why_peptides"], section[id*="experience_quote"], section[id*="science_mwc"], section[id*="brand_story_mwc"] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section[id*="benefits_grid"], section[id*="trust_strip"], section[id*="three_pillars"], section[id*="stats_band"], section[id*="sensory_profile"], section[id*="clinical_benefits"], section[id*="the_formulation"], section[id*="how_to_use"], section[id*="consumer_results"], section[id*="complete_the_ritual"], section[id*="whats_included"], section[id*="why_ritual"], section[id*="savings_emphasis"], section[id*="why_peptides"], section[id*="experience_quote"], section[id*="science_mwc"], section[id*="brand_story_mwc"] {
      animation: mvi-fade-up 800ms ease-out backwards !important;
      animation-timeline: view() !important;
      animation-range: entry 0% entry 30% !important;
    }
  }
}

/* ========================================
   FORCED TEXT VISIBILITY OVERRIDE
   Last-resort fix: ensure all text content in animated sections is visible
   regardless of animation state, height clipping, or opacity inheritance.
   ======================================== */

section[id*="benefits_grid"],
section[id*="trust_strip"],
section[id*="three_pillars"],
section[id*="stats_band"],
section[id*="sensory_profile"],
section[id*="clinical_benefits"],
section[id*="the_formulation"],
section[id*="how_to_use"],
section[id*="consumer_results"],
section[id*="complete_the_ritual"],
section[id*="whats_included"],
section[id*="why_ritual"],
section[id*="savings_emphasis"],
section[id*="why_peptides"],
section[id*="experience_quote"],
section[id*="science_mwc"],
section[id*="brand_story_mwc"] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Force every descendant to be visible — no opacity 0 or hidden visibility surviving */
section[id*="benefits_grid"] *,
section[id*="trust_strip"] *,
section[id*="three_pillars"] *,
section[id*="stats_band"] *,
section[id*="sensory_profile"] *,
section[id*="clinical_benefits"] *,
section[id*="the_formulation"] *,
section[id*="how_to_use"] *,
section[id*="consumer_results"] *,
section[id*="complete_the_ritual"] *,
section[id*="whats_included"] *,
section[id*="why_ritual"] *,
section[id*="savings_emphasis"] *,
section[id*="why_peptides"] *,
section[id*="experience_quote"] *,
section[id*="science_mwc"] *,
section[id*="brand_story_mwc"] * {
  animation-name: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Specific to benefits_grid: ensure text inside each card column is fully readable */
section[id*="benefits_grid"] h1,
section[id*="benefits_grid"] h2,
section[id*="benefits_grid"] h3,
section[id*="benefits_grid"] h4,
section[id*="benefits_grid"] h5,
section[id*="benefits_grid"] h6,
section[id*="benefits_grid"] p,
section[id*="benefits_grid"] span,
section[id*="benefits_grid"] li {
  opacity: 1 !important;
  visibility: visible !important;
  color: #0b1d3a !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: inherit !important;
}

section[id*="benefits_grid"] p {
  color: #0b1d3a !important;
  opacity: 0.92 !important;
}

/* Mobile-specific: ensure benefits_grid cards have enough height for content */
@media (max-width: 768px) {
  section[id*="benefits_grid"] [class*="col_"],
  section[id*="benefits_grid"] [class*="group"] {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding-block: 16px !important;
  }
}

/* ELIXIR clinical_benefits — pill cards visibility + mobile stack */
/* =====================================
   The 4 benefit pill-cards on the elixir page render as group
   blocks containing a title text block + desc text block. Without
   explicit CSS color rules they may render invisible (cream-on-cream)
   or with broken layout on mobile. Force colors + layout here.
===================================== */

/* Heading "Clinical Benefits" inside left card */
[id*='clinical_benefits'] [class*='left_heading'] h3,
[id*='clinical_benefits'] [class*='left_heading'] h3 em {
  color: #0B1D3A !important;
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 3vw, 1.875rem) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}
[id*='clinical_benefits'] [class*='left_heading'] h3 em {
  color: #C5A55A !important;
}

/* Each benefit (b1-b4) title — navy bold sans */
[id*='clinical_benefits'] [class*='__title'] p,
[id*='clinical_benefits'] [class*='__title'] strong {
  color: #0B1D3A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Each benefit description — muted body */
[id*='clinical_benefits'] [class*='__desc'] p {
  color: #44474D !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Right card heading "Usage Protocol" — cream on navy bg */
[id*='clinical_benefits'] .color-scheme-5 [class*='right_heading'] h3,
[id*='clinical_benefits'] .color-scheme-5 [class*='right_heading'] h3 em {
  color: #FAF8F4 !important;
  font-family: var(--font-heading--family) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 3vw, 1.875rem) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Right card instruction text — soft cream on navy */
[id*='clinical_benefits'] .color-scheme-5 [class*='instruction_text'] p {
  color: rgba(250, 248, 244, 0.88) !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Right card label "Ideal for all skin types" — gold uppercase */
[id*='clinical_benefits'] .color-scheme-5 [class*='ideal_label'] p {
  color: #C5A55A !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Mobile — stack the two cards vertically and give each one breathing room */
@media (max-width: 749px) {
  [id*='clinical_benefits'] [class*='two_col_row'] {
    flex-direction: column !important;
    gap: 16px !important;
  }
  [id*='clinical_benefits'] [class*='left_card'],
  [id*='clinical_benefits'] [class*='right_card'] {
    width: 100% !important;
    --width: 100% !important;
    padding: 24px !important;
  }
  [id*='clinical_benefits'] [class*='benefits_list'] {
    gap: 16px !important;
  }
  [id*='clinical_benefits'] [class*='__title'] p {
    font-size: 0.9375rem !important;
  }
  [id*='clinical_benefits'] [class*='__desc'] p {
    font-size: 0.85rem !important;
  }
}

/* HOME benefits_grid — mobile readability fix */
/* =====================================
   On mobile, the 4 cards on the homepage benefits_grid section
   ("What the Elixir Does for Your Skin") were showing as horizontal
   pill bars with the navy icon visible but the heading + description
   text invisible / clipped. Force cards to stack icon-above-text in
   a column and ensure all text is visible.
===================================== */

@media (max-width: 749px) {
  /* Force the cards row to stack vertically (each card full width) */
  [id*='benefits_grid'] [class*='cards_row'],
  [id*='benefits_grid'] .layout-panel-flex--row {
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Each card full-width with proper internal column layout */
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block,
  [id*='benefits_grid'] [class*='cards_row'] > .group-block {
    width: 100% !important;
    --width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 24px !important;
    --padding-block-start: 24px !important;
    --padding-block-end: 24px !important;
    --padding-inline-start: 24px !important;
    --padding-inline-end: 24px !important;
  }

  /* Card content area: column flow, icon above text, fully visible */
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block .group-block-content,
  [id*='benefits_grid'] [class*='cards_row'] > .group-block .group-block-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Icon stays at top (order: -1 already set in base CSS) */
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block .group-block-content::before,
  [id*='benefits_grid'] [class*='cards_row'] > .group-block .group-block-content::before {
    width: 44px !important;
    height: 44px !important;
    background-size: 20px 20px !important;
    margin: 0 0 8px 0 !important;
    flex-shrink: 0 !important;
    order: -1 !important;
    display: block !important;
  }

  /* Heading h4 — visible navy regular Playfair */
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block .text-block.h4 h4,
  [id*='benefits_grid'] [class*='cards_row'] > .group-block [class*='heading'] h4,
  [id*='benefits_grid'] [class*='cards_row'] > .group-block h4 {
    color: #0B1D3A !important;
    font-family: var(--font-heading--family) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
    margin: 0 !important;
    text-align: left !important;
    -webkit-font-smoothing: antialiased !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Body text — visible muted charcoal */
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block rte-formatter,
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block rte-formatter p,
  [id*='benefits_grid'] [class*='cards_row'] > .group-block rte-formatter,
  [id*='benefits_grid'] [class*='cards_row'] > .group-block rte-formatter p,
  [id*='benefits_grid'] [class*='cards_row'] > .group-block [class*='__text'] p {
    color: #44474D !important;
    font-family: var(--font-body--family) !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: left !important;
    -webkit-font-smoothing: antialiased !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
  }

  /* Make sure no inherited rule kills text-block widths */
  [id*='benefits_grid'] [class*='cards_row'] > .group-block .text-block,
  [id*='benefits_grid'] .layout-panel-flex--row > .group-block .text-block {
    width: 100% !important;
    --width: 100% !important;
    max-width: none !important;
  }
}

/* MOBILE MENU DRAWER — correct selectors */
/* =====================================
   Match maisonvanirene.com mobile drawer.
   Target the ACTUAL drawer panel class .menu-drawer (with
   color-scheme variants) — NOT the outer .header__drawer wrapper
   that ALSO contains the hamburger button.
===================================== */

@media screen and (max-width: 749px) {
  /* Drawer panel only — cream background, override the color-scheme bg */
  #header-component .menu-drawer,
  #header-component .menu-drawer.color-scheme-1,
  #header-component .menu-drawer.color-scheme-2,
  #header-component .menu-drawer.color-scheme-3,
  #header-component .menu-drawer.color-scheme-4,
  #header-component .menu-drawer.color-scheme-5 {
    --color-background: #FAF8F4 !important;
    --color-scheme-background: #FAF8F4 !important;
    background: #FAF8F4 !important;
    background-color: #FAF8F4 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  }

  /* Inner menu list — cream so it doesn\u2019t show another scheme through */
  #header-component .menu-drawer .menu-list,
  #header-component .menu-drawer .menu-list--mobile,
  #header-component .menu-drawer .menu-list__scroll-container,
  #header-component .menu-drawer .menu-list__list,
  #header-component .menu-drawer .menu-list__list-item {
    background: #FAF8F4 !important;
    background-color: #FAF8F4 !important;
  }

  /* Tighten vertical rhythm — Horizon real classes are .menu-drawer__list-item
     (NOT .menu-list__item). Each <li> defaults to margin-bottom: 20px. Kill it. */
  #header-component .menu-drawer .menu-drawer__menu,
  #header-component .menu-drawer .menu-drawer__menu--childlist {
    gap: 0 !important;
    row-gap: 0 !important;
  }
  #header-component .menu-drawer .menu-drawer__list-item,
  #header-component .menu-drawer .menu-drawer__list-item--flat {
    margin-block: 0 !important;
    margin-bottom: 0 !important;
    padding-block: 0 !important;
  }
  /* Legacy menu-list selectors kept in case Horizon uses them in some contexts */
  #header-component .menu-drawer .menu-list,
  #header-component .menu-drawer .menu-list--mobile,
  #header-component .menu-drawer .menu-list__list {
    gap: 0 !important;
    row-gap: 0 !important;
  }
  #header-component .menu-drawer .menu-list__list-item,
  #header-component .menu-drawer .menu-list__item {
    margin-block: 0 !important;
    padding-block: 0 !important;
  }
  #header-component .menu-drawer .menu-drawer__menu-link,
  #header-component .menu-drawer .menu-list__link,
  #header-component .menu-drawer .menu-list__link-title,
  #header-component .menu-drawer .menu-drawer__list-item > a,
  #header-component .menu-drawer .menu-drawer__list-item--flat > a,
  #header-component .menu-drawer a {
    background: transparent !important;
    color: rgba(11, 29, 58, 0.72) !important;
    font-family: var(--font-body--family) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    -webkit-font-smoothing: antialiased !important;
    transition: color 300ms ease !important;
    padding-block: 0.25rem !important;
    margin-block: 0 !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
  }
  #header-component .menu-drawer .menu-list__link:hover,
  #header-component .menu-drawer a:hover,
  #header-component .menu-drawer .menu-list__link--active {
    color: #745B17 !important;
  }

  /* Empty utility-links div has margin-top: 284px which pushes the
     featured product cards way down. Collapse it. */
  #header-component .menu-drawer .menu-drawer__utility-links {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
  }

  /* Underlay (the dim layer behind the drawer) — 40% black */
  #header-component .header__underlay,
  #header-component .header__underlay-open {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ELIXIR clinical_benefits — mobile clip fix */
/* =====================================
   On mobile the LEFT card (4 benefits) needs ~426px but is forced
   to 395px by inline 'overflow: hidden' and equal-height stretching.
   Release height + overflow on mobile only so all four benefits show.
===================================== */

@media screen and (max-width: 749px) {
  [id*='clinical_benefits'] .group-block,
  [id*='clinical_benefits'] .group-block-content {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  [id*='clinical_benefits'] .layout-panel-flex--row,
  [id*='clinical_benefits'] .layout-panel-flex--column {
    align-items: flex-start !important;
    height: auto !important;
  }
}

/* ELIXIR formulation trust badges — mobile wrap fix */
/* =====================================
   The 3 trust badges at the bottom of the_formulation card use
   white-space: nowrap which causes badge 1 ('Precision-formulated
   under strict quality standards') to overflow the 316px column
   on mobile. Allow wrapping on mobile + slightly tighter font.
===================================== */

@media screen and (max-width: 749px) {
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > rte-formatter p,
  [id*='the_formulation'] .section-content-wrapper > .group-block:nth-child(3) > .group-block-content > [class*='__trust'] p {
    white-space: nowrap !important;
    font-size: 0.6875rem !important;
    line-height: 1.4 !important;
  }
}

/* JUDGE.ME — remove preview badge boxes */
/* =====================================
   Horizon paints 0.8px borders via currentColor on the preview
   badge wrapper, stars, and review-count link. Strip them all so
   the badge reads as: stars · "2 reviews" — no boxes.
===================================== */

.jdgm-widget.jdgm-preview-badge,
.jdgm-prev-badge,
.jdgm-prev-badge__stars,
.jdgm-prev-badge__text {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Lay them out inline with a small gap */
.jdgm-widget.jdgm-preview-badge,
.jdgm-prev-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 16px 0 !important;
}

/* Underline only on hover for the review count link */
.jdgm-prev-badge__text {
  text-decoration: none !important;
  color: rgba(11, 29, 58, 0.65) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.04em !important;
}
.jdgm-prev-badge__text:hover {
  color: #0B1D3A !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* HOME product cards — empty badge + Ritual padding fix */
/* =====================================
   Hide empty badge containers (small rectangles top-left of cards)
   and force consistent zero padding on .card-gallery so all 3
   product images fill their wrapper edge-to-edge.
===================================== */

/* Hide the badge wrapper when it has no children (no SOLD OUT, no SALE) */
.product-card .product-badges:empty,
.product-card .product-badges:not(:has(*)) {
  display: none !important;
}

/* Belt-and-suspenders: kill the border on any badge wrapper that does
   render — Horizon gives it a currentColor border which we never want. */
.product-card .product-badges {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Force consistent edge-to-edge image — overrides per-product theme
   settings that add padding inside the card-gallery wrapper. */
.product-card .card-gallery {
  padding: 0 !important;
  --padding-block-start: 0 !important;
  --padding-block-end: 0 !important;
  --padding-inline-start: 0 !important;
  --padding-inline-end: 0 !important;
}

/* HOME product cards — gold frame */
/* =====================================
   1px solid gold frame around each product image. Brand gold
   #C5A55A, 2px radius (sharp luxury corner). Subtle deepening
   shadow on hover — no scale bounce.
===================================== */

.product-card .card-gallery {
  /* Use box-shadow as the frame so Horizon's 0.8px border-width var
     can't shrink it. inset draws inside, 0 spread keeps it crisp. */',
  box-shadow: 0 0 0 4px #C5A55A !important;
  border-radius: 2px !important;
  overflow: hidden;
  transition: box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  /* Margin so the outset frame has room to breathe inside the card */
  margin: 4px !important;
}

.product-card:hover .card-gallery,
.product-card:focus-within .card-gallery {
  box-shadow: 0 0 0 4px #C5A55A, 0 12px 28px -10px rgba(197, 165, 90, 0.5) !important;
}

/* P1 BUNDLE — sticky ATC + footer dedup + announcement arrows */
/* =====================================
   1) Sticky add-to-cart fixed at bottom of mobile viewport
   2) Hide duplicate footer-utilities section
   3) Hide prev/next arrows in announcement bar
===================================== */

/* (1) STICKY ATC — mobile only. Force the bar position:fixed.
   Horizon's JS still controls show/hide via the transform on the
   .sticky-add-to-cart__bar element (translateY animates in/out). */
@media screen and (max-width: 749px) {
  /* Higher-specificity selector to beat existing
     [class*="sticky-add-to-cart"] rule with !important. */
  sticky-add-to-cart.sticky-add-to-cart {
    display: block !important;
    /* CRITICAL: Horizon (and a stray earlier custom rule) ship
       backdrop-filter on this wrapper which creates a containing
       block for fixed-positioned children — so bottom:0 on the bar
       resolves to wrapper-bottom not viewport-bottom. Strip it. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }
  sticky-add-to-cart .sticky-add-to-cart__bar {
    position: fixed !important;
    /* Horizon sets `top: -<barHeight>` to hide the bar above viewport.
       Force top: auto so bottom: 0 takes effect. */
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 100 !important;
    background: #FAF8F4 !important;
    border-top: 1px solid rgba(11, 29, 58, 0.08) !important;
    box-shadow: 0 -8px 24px -8px rgba(11, 29, 58, 0.12) !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    gap: 12px !important;
    /* Override Horizon's slide-in animation that translates the bar */
    transform: none !important;
    transition: opacity 250ms ease !important;
    opacity: 1 !important;
  }

  /* Brand-tone the inner pieces */
  .sticky-add-to-cart__image-img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
  }
  .sticky-add-to-cart__title {
    font-family: var(--font-body--family) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #0B1D3A !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  .sticky-add-to-cart__variant {
    font-size: 0.75rem !important;
    color: rgba(11, 29, 58, 0.6) !important;
    line-height: 1.2 !important;
  }
  .sticky-add-to-cart__price .price {
    font-family: var(--font-body--family) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #0B1D3A !important;
  }
  .sticky-add-to-cart__button {
    background: linear-gradient(135deg, #9E7A30 0%, #C5A55A 30%, #D4B97A 50%, #C5A55A 70%, #9E7A30 100%) !important;
    color: #0B1D3A !important;
    border: none !important;
    border-radius: 2px !important;
    font-family: var(--font-body--family) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    padding: 12px 20px !important;
    min-height: 44px !important;
    cursor: pointer !important;
  }

  /* Pad the page footer so sticky bar never overlaps last content */
  body { padding-bottom: 90px !important; }
}

/* Hide sticky ATC entirely on desktop where the regular ATC is visible */
@media screen and (min-width: 750px) {
  sticky-add-to-cart, .sticky-add-to-cart__bar {
    display: none !important;
  }
}

/* (2) FOOTER DEDUP — Horizon emits a separate footer-utilities
   section that repeats copyright + policy links our custom footer
   already shows. Hide it. */
.shopify-section.footer-utilities {
  display: none !important;
}

/* (3) ANNOUNCEMENT BAR — hide prev/next arrows. The 3-slide
   auto-rotation handles itself; arrows add visual noise and
   render briefly empty between slides. */
.announcement-bar .slideshow-control,
.announcement-bar .slideshow-control--previous,
.announcement-bar .slideshow-control--next {
  display: none !important;
}

/* PRODUCT PAGE — navy Add to Cart button (brand CTA) */
/* =====================================
   Brand-book rule: light sections (cream/white bg) get NAVY CTA
   buttons; gold metallic is reserved for dark sections. The existing
   primary-button gold rule only fires on scheme-3 / scheme-5, so the
   ATC button on the cream product page was falling through to
   Horizon defaults and rendering invisible cream-on-cream.

   Selectors are deliberately broad (multiple class hooks) because the
   button class differs slightly between Horizon component variants.
   :not() guards keep the rule away from accelerated checkout
   (Shop Pay / Apple Pay / PayPal) and quick-add card buttons.
===================================== */
button[name="add"],
add-to-cart-component button[type="submit"],
product-form-component button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]),
.product-form-buttons button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]),
[class*="product-form-buttons"] button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]),
[class*="buy-buttons-block"] button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]) {
  background: var(--mvi-navy) !important;
  background-color: var(--mvi-navy) !important;
  color: var(--mvi-cream) !important;
  border: 1px solid var(--mvi-navy) !important;
  border-radius: 2px !important;
  font-family: var(--font-body--family) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  padding: 14px 28px !important;
  min-height: 48px !important;
  width: 100% !important;
  box-shadow: 0 6px 20px rgba(11, 29, 58, 0.15) !important;
  transition: transform 300ms ease-out, background-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out !important;
  cursor: pointer !important;
}

button[name="add"]:hover,
add-to-cart-component button[type="submit"]:hover,
product-form-component button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):hover,
.product-form-buttons button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):hover,
[class*="product-form-buttons"] button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):hover,
[class*="buy-buttons-block"] button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):hover {
  /* Hover lifts to gold-on-navy: navy stays, but the cream text
     warms to brand gold and the shadow deepens. Subtle but feels
     premium and clearly interactive. */
  background: var(--mvi-navy-light) !important;
  background-color: var(--mvi-navy-light) !important;
  color: var(--mvi-gold-light) !important;
  border-color: var(--mvi-gold) !important;
  transform: scale(1.015) !important;
  box-shadow: 0 10px 28px rgba(11, 29, 58, 0.22) !important;
}

button[name="add"]:active,
add-to-cart-component button[type="submit"]:active,
product-form-component button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):active,
.product-form-buttons button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):active,
[class*="product-form-buttons"] button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):active,
[class*="buy-buttons-block"] button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):active {
  transform: scale(0.99) !important;
}

button[name="add"]:disabled,
add-to-cart-component button[type="submit"]:disabled,
product-form-component button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):disabled,
.product-form-buttons button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):disabled,
[class*="product-form-buttons"] button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):disabled,
[class*="buy-buttons-block"] button[type="submit"]:not(.shopify-payment-button__button):not([class*="accelerated"]):not([class*="quick-add"]):disabled,
 {
  /* Sold out / unavailable — desaturated navy, no hover. */
  background: rgba(11, 29, 58, 0.4) !important;
  background-color: rgba(11, 29, 58, 0.4) !important;
  border-color: rgba(11, 29, 58, 0.4) !important;
  color: rgba(250, 248, 244, 0.8) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* CART DRAWER V3 — paint the <dialog> panel */
/* =====================================
   The visible cart drawer panel is a native <dialog> with classes
   .cart-drawer__dialog .dialog-modal .dialog-drawer .color-scheme-1.
   Painting .cart-drawer (the wrapper component) does nothing visible
   because the dialog renders separately at the top layer.
===================================== */

/* (1) The actual sliding panel — solid cream, navy text, drop shadow. */
dialog.cart-drawer__dialog,
.cart-drawer__dialog,
dialog.dialog-drawer,
dialog.dialog-modal.dialog-drawer {
  background: #FAF8F4 !important;
  background-color: #FAF8F4 !important;
  color: #0B1D3A !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* (2) Inner regions inherit the cream — keep them transparent. */
.cart-drawer__header,
.cart-drawer__content,
.cart-drawer__items,
.cart-drawer__heading,
.cart-drawer__footer,
.cart-drawer__close-button,
.cart-items__wrapper,
.cart-items-component {
  background: transparent !important;
  background-color: transparent !important;
  color: #0B1D3A !important;
}

/* (3) Native dialog backdrop — 40% black underlay. */
dialog.cart-drawer__dialog::backdrop,
dialog.dialog-drawer::backdrop,
dialog.dialog-modal::backdrop,
.dialog-modal::backdrop,
.dialog-modal[open]::backdrop {
  background: rgba(0, 0, 0, 0.4) !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
}

/* (4) Empty-cart heading — italic Playfair gold. */
.cart-drawer__heading,
.cart-drawer__heading--empty {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  color: #9E7A30 !important;
  letter-spacing: 0.01em !important;
}

/* (5) Close button — soft navy, gold-dark on hover. */
.cart-drawer__close-button {
  color: rgba(11, 29, 58, 0.7) !important;
  transition: color 200ms ease !important;
}
.cart-drawer__close-button:hover {
  color: #9E7A30 !important;
}

/* (6) Cart line items inside .cart-items-component — readable navy. */
.cart-items-component .cart-item__title,
.cart-items-component a[class*="cart-item"],
.cart-items__wrapper [class*="cart-item__name"] {
  color: #0B1D3A !important;
  font-family: var(--font-body--family) !important;
  font-weight: 500 !important;
}

.cart-items-component [class*="cart-item__variant"],
.cart-items-component [class*="cart-item__option"],
.cart-items-component [class*="cart-item__sku"],
.cart-items__wrapper [class*="cart-item__option"] {
  color: rgba(11, 29, 58, 0.6) !important;
}

.cart-items-component [class*="cart-item__price"],
.cart-items-component .price,
.cart-drawer__dialog .price {
  color: #0B1D3A !important;
  font-weight: 600 !important;
}

/* (7) Quantity selector inside drawer — match navy outline. */
.cart-drawer__dialog [class*="quantity"] button,
.cart-drawer__dialog [class*="quantity"] input {
  color: #0B1D3A !important;
  border-color: rgba(11, 29, 58, 0.2) !important;
  background: transparent !important;
}

/* (8) Trash / remove button — soft navy, gold on hover. */
.cart-drawer__dialog button[class*="remove"],
.cart-drawer__dialog a[class*="remove"],
.cart-items-component button[class*="remove"] {
  color: rgba(11, 29, 58, 0.6) !important;
  transition: color 200ms ease !important;
}
.cart-drawer__dialog button[class*="remove"]:hover,
.cart-items-component button[class*="remove"]:hover {
  color: #9E7A30 !important;
}

/* (9) Footer / totals — hairline divider above. */
.cart-drawer__footer,
.cart-drawer__dialog [class*="cart-totals"],
.cart-drawer__dialog [class*="cart-summary"] {
  border-top: 1px solid rgba(11, 29, 58, 0.08) !important;
  color: #0B1D3A !important;
  background: #FAF8F4 !important;
}

/* CART BADGE — gold count inside the bag body */
/* =====================================
   No circle / no badge background. The count number sits INSIDE
   the bag silhouette, centered in the body of the bag (below the
   handle). Gold text on the navbar cream tone — clean luxury feel.
===================================== */

/* Anchor: cart-icon is the positioning context. */
.header-actions__cart-icon,
cart-icon.header-actions__cart-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Force overflow:visible up the navbar chain. */
.shopify-section.header-section,
.shopify-section-group-header-group,
.header-section,
header.header,
.header,
.header__row,
.header__columns,
.header__column,
.header__column--right,
.header-menu,
.header-menu__inner,
.header-actions,
.header-actions__action,
cart-drawer-component,
cart-icon {
  overflow: visible !important;
}

/* The bubble container — sits INSIDE the bag body, centered. */
/* The bag SVG is 20-unit viewBox; bag body spans y=6.9 to y=17 and
   x=3.4 to x=16.6. Center of the body is roughly (10, 12) in viewBox
   coords, which on a ~20px rendered icon is ~50% horizontal and ~60%
   vertical (slightly below center to land in the body, not the handle). */
.cart-bubble {
  position: absolute !important;
  top: 60% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  overflow: visible !important;
}

/* No circle — hide the bubble background span entirely. */
.cart-bubble__background {
  display: none !important;
}

/* Count text — gold, bold, small enough to fit cleanly inside the bag. */
.cart-bubble__text,
.cart-bubble #cart-bubble-text,
.cart-bubble [id="cart-bubble-text"] {
  position: relative !important;
  z-index: 2 !important;
  color: #9E7A30 !important;
  font-family: var(--font-body--family) !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  padding: 0 !important;
}

/* Hover — number lifts to gold-light. */
.header-actions__action:hover .cart-bubble__text {
  color: #C5A55A !important;
}

/* Empty cart — Horizon adds .visually-hidden, keep it hidden. */
.cart-bubble.visually-hidden {
  display: none !important;
}

/* CART BADGE — gold count inside the bag body */
/* =====================================
   No circle / no badge background. The count number sits INSIDE
   the bag silhouette, centered in the body of the bag (below the
   handle). Gold text on the navbar cream tone — clean luxury feel.
===================================== */

/* Anchor: cart-icon is the positioning context. Do NOT touch its
   display / flex / size — that crops the bag SVG. Only set the bare
   minimum needed for the absolute-positioned bubble to anchor. */
.header-actions__cart-icon,
cart-icon.header-actions__cart-icon {
  position: relative !important;
  overflow: visible !important;
}

/* Force overflow:visible up the navbar chain. */
.shopify-section.header-section,
.shopify-section-group-header-group,
.header-section,
header.header,
.header,
.header__row,
.header__columns,
.header__column,
.header__column--right,
.header-menu,
.header-menu__inner,
.header-actions,
.header-actions__action,
cart-drawer-component,
cart-icon {
  overflow: visible !important;
}

/* The bubble container — sits INSIDE the bag body, centered. */
/* The bag SVG is 20-unit viewBox; bag body spans y=6.9 to y=17 and
   x=3.4 to x=16.6. Center of the body is roughly (10, 12) in viewBox
   coords, which on a ~20px rendered icon is ~50% horizontal and ~60%
   vertical (slightly below center to land in the body, not the handle). */
.cart-bubble {
  position: absolute !important;
  top: 60% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  overflow: visible !important;
}

/* No circle — hide the bubble background span entirely. */
.cart-bubble__background {
  display: none !important;
}

/* Count text — gold, bold, small enough to fit cleanly inside the bag. */
.cart-bubble__text,
.cart-bubble #cart-bubble-text,
.cart-bubble [id="cart-bubble-text"] {
  position: relative !important;
  z-index: 2 !important;
  color: #9E7A30 !important;
  font-family: var(--font-body--family) !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  padding: 0 !important;
}

/* Hover — number lifts to gold-light. */
.header-actions__action:hover .cart-bubble__text {
  color: #C5A55A !important;
}

/* Empty cart — Horizon adds .visually-hidden, keep it hidden. */
.cart-bubble.visually-hidden {
  display: none !important;
}

/* CART BADGE — gold circle hugging the bag corner */
/* =====================================
   Small gold metallic circle with navy count, anchored TIGHT against
   the top-right of the bag — the badge's corner essentially touches
   the icon corner so they read as one unit, not two separate elements.
===================================== */

/* Anchor: cart-icon is the positioning context. Do NOT touch its
   display / flex / size — that crops the bag SVG. Only set the bare
   minimum needed for the absolute-positioned bubble to anchor. */
.header-actions__cart-icon,
cart-icon.header-actions__cart-icon {
  position: relative !important;
  overflow: visible !important;
}

/* Force overflow:visible up the navbar chain. */
.shopify-section.header-section,
.shopify-section-group-header-group,
.header-section,
header.header,
.header,
.header__row,
.header__columns,
.header__column,
.header__column--right,
.header-menu,
.header-menu__inner,
.header-actions,
.header-actions__action,
cart-drawer-component,
cart-icon {
  overflow: visible !important;
}

/* The badge — gold circle hugging the bag corner. Offsets are 0 so
   the badge corner sits exactly at the icon corner, with the cream
   ring providing visual separation. */
.cart-bubble {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  min-width: 14px !important;
  height: 14px !important;
  padding: 0 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  /* 1px cream ring + soft drop shadow so the badge separates cleanly
     from the bag stroke without floating off it. */
  box-shadow: 0 0 0 1px #FAF8F4, 0 1px 3px rgba(11, 29, 58, 0.18) !important;
  overflow: visible !important;
  z-index: 2 !important;
  /* Translate slightly up-right so the center of the badge lands on
     the corner of the bag — gives that "hugging" overlap feel. */
  transform: translate(35%, -35%) !important;
}

/* Gold metallic gradient fill. */
.cart-bubble__background {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, #9E7A30 0%, #C5A55A 30%, #D4B97A 50%, #C5A55A 70%, #9E7A30 100%) !important;
  background-size: 200% 200% !important;
  background-position: left center !important;
  border-radius: 999px !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 1 !important;
}

/* Count text — navy, bold, sits over the gold fill. */
.cart-bubble__text,
.cart-bubble #cart-bubble-text,
.cart-bubble [id="cart-bubble-text"] {
  position: relative !important;
  z-index: 1 !important;
  color: #0B1D3A !important;
  font-family: var(--font-body--family) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Empty cart — Horizon adds .visually-hidden, keep it hidden. */
.cart-bubble.visually-hidden {
  display: none !important;
}

/* Hover the cart button — gradient slides for the metallic feel. */
.header-actions__action:hover .cart-bubble__background {
  background-position: right center !important;
}

/* CART BADGE — gold circle hugging the bag corner */
/* =====================================
   Small gold metallic circle with navy count, anchored TIGHT against
   the top-right of the bag — the badge's corner essentially touches
   the icon corner so they read as one unit, not two separate elements.
===================================== */

/* Anchor: cart-icon is the positioning context. Do NOT touch its
   display / flex / size — that crops the bag SVG. Only set the bare
   minimum needed for the absolute-positioned bubble to anchor. */
.header-actions__cart-icon,
cart-icon.header-actions__cart-icon {
  position: relative !important;
  overflow: visible !important;
}

/* Force overflow:visible up the navbar chain. */
.shopify-section.header-section,
.shopify-section-group-header-group,
.header-section,
header.header,
.header,
.header__row,
.header__columns,
.header__column,
.header__column--right,
.header-menu,
.header-menu__inner,
.header-actions,
.header-actions__action,
cart-drawer-component,
cart-icon {
  overflow: visible !important;
}

/* The badge — gold circle hugging the bag corner. Offsets are 0 so
   the badge corner sits exactly at the icon corner, with the cream
   ring providing visual separation. */
.cart-bubble {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  min-width: 14px !important;
  height: 14px !important;
  padding: 0 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  /* 1px cream ring + soft drop shadow so the badge separates cleanly
     from the bag stroke without floating off it. */
  box-shadow: 0 0 0 1px #FAF8F4, 0 1px 3px rgba(11, 29, 58, 0.18) !important;
  overflow: visible !important;
  z-index: 2 !important;
  /* No translate — keep the badge fully inside the icon's top-right
     corner. top:0 right:0 with translate(0,0) means the badge corner
     hugs the bag corner with the badge sitting on top of the icon. */
  transform: translate(0, 0) !important;
}

/* Gold metallic gradient fill. */
.cart-bubble__background {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, #9E7A30 0%, #C5A55A 30%, #D4B97A 50%, #C5A55A 70%, #9E7A30 100%) !important;
  background-size: 200% 200% !important;
  background-position: left center !important;
  border-radius: 999px !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 1 !important;
}

/* Count text — navy, bold, sits over the gold fill. */
.cart-bubble__text,
.cart-bubble #cart-bubble-text,
.cart-bubble [id="cart-bubble-text"] {
  position: relative !important;
  z-index: 1 !important;
  color: #0B1D3A !important;
  font-family: var(--font-body--family) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Empty cart — Horizon adds .visually-hidden, keep it hidden. */
.cart-bubble.visually-hidden {
  display: none !important;
}

/* Hover the cart button — gradient slides for the metallic feel. */
.header-actions__action:hover .cart-bubble__background {
  background-position: right center !important;
}

/* CART BADGE — gold circle hugging the bag corner */
/* =====================================
   Small gold metallic circle with navy count, anchored TIGHT against
   the top-right of the bag — the badge's corner essentially touches
   the icon corner so they read as one unit, not two separate elements.
===================================== */

/* Anchor: cart-icon is the positioning context. Do NOT touch its
   display / flex / size — that crops the bag SVG. Only set the bare
   minimum needed for the absolute-positioned bubble to anchor. */
.header-actions__cart-icon,
cart-icon.header-actions__cart-icon {
  position: relative !important;
  overflow: visible !important;
}

/* Force overflow:visible up the navbar chain. */
.shopify-section.header-section,
.shopify-section-group-header-group,
.header-section,
header.header,
.header,
.header__row,
.header__columns,
.header__column,
.header__column--right,
.header-menu,
.header-menu__inner,
.header-actions,
.header-actions__action,
cart-drawer-component,
cart-icon {
  overflow: visible !important;
}

/* The badge — gold circle hugging the bag corner. Offsets are 0 so
   the badge corner sits exactly at the icon corner, with the cream
   ring providing visual separation. */
.cart-bubble {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  bottom: auto !important;
  left: auto !important;
  min-width: 14px !important;
  height: 14px !important;
  padding: 0 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  /* 1px cream ring + soft drop shadow so the badge separates cleanly
     from the bag stroke without floating off it. */
  box-shadow: 0 0 0 1px #FAF8F4, 0 1px 3px rgba(11, 29, 58, 0.18) !important;
  overflow: visible !important;
  z-index: 2 !important;
  /* No translate — keep the badge fully inside the icon's top-right
     corner. top:0 right:0 with translate(0,0) means the badge corner
     hugs the bag corner with the badge sitting on top of the icon. */
  transform: translate(0, 0) !important;
}

/* Gold metallic gradient fill. */
.cart-bubble__background {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, #9E7A30 0%, #C5A55A 30%, #D4B97A 50%, #C5A55A 70%, #9E7A30 100%) !important;
  background-size: 200% 200% !important;
  background-position: left center !important;
  border-radius: 999px !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 1 !important;
}

/* Count text — navy, bold, sits over the gold fill. */
.cart-bubble__text,
.cart-bubble #cart-bubble-text,
.cart-bubble [id="cart-bubble-text"] {
  position: relative !important;
  z-index: 1 !important;
  color: #0B1D3A !important;
  font-family: var(--font-body--family) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Empty cart — Horizon adds .visually-hidden, keep it hidden. */
.cart-bubble.visually-hidden {
  display: none !important;
}

/* Hover the cart button — gradient slides for the metallic feel. */
.header-actions__action:hover .cart-bubble__background {
  background-position: right center !important;
}

/* CART BADGE — gold circle hugging the bag corner */
/* =====================================
   Small gold metallic circle with navy count, anchored TIGHT against
   the top-right of the bag — the badge's corner essentially touches
   the icon corner so they read as one unit, not two separate elements.
===================================== */

/* Anchor: cart-icon is the positioning context. Do NOT touch its
   display / flex / size — that crops the bag SVG. Only set the bare
   minimum needed for the absolute-positioned bubble to anchor. */
.header-actions__cart-icon,
cart-icon.header-actions__cart-icon {
  position: relative !important;
  overflow: visible !important;
}

/* Force overflow:visible up the navbar chain. */
.shopify-section.header-section,
.shopify-section-group-header-group,
.header-section,
header.header,
.header,
.header__row,
.header__columns,
.header__column,
.header__column--right,
.header-menu,
.header-menu__inner,
.header-actions,
.header-actions__action,
cart-drawer-component,
cart-icon {
  overflow: visible !important;
}

/* The badge — gold circle hugging the bag corner. Offsets are 0 so
   the badge corner sits exactly at the icon corner, with the cream
   ring providing visual separation. */
.cart-bubble {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  bottom: auto !important;
  left: auto !important;
  min-width: 14px !important;
  height: 14px !important;
  padding: 0 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  /* 1px cream ring + soft drop shadow so the badge separates cleanly
     from the bag stroke without floating off it. */
  box-shadow: 0 0 0 1px #FAF8F4, 0 1px 3px rgba(11, 29, 58, 0.18) !important;
  overflow: visible !important;
  z-index: 2 !important;
  /* No translate — keep the badge fully inside the icon's top-right
     corner. top:0 right:0 with translate(0,0) means the badge corner
     hugs the bag corner with the badge sitting on top of the icon. */
  transform: translate(0, 0) !important;
}

/* Gold metallic gradient fill. */
.cart-bubble__background {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, #9E7A30 0%, #C5A55A 30%, #D4B97A 50%, #C5A55A 70%, #9E7A30 100%) !important;
  background-size: 200% 200% !important;
  background-position: left center !important;
  border-radius: 999px !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 1 !important;
}

/* Count text — navy, bold, sits over the gold fill. */
.cart-bubble__text,
.cart-bubble #cart-bubble-text,
.cart-bubble [id="cart-bubble-text"] {
  position: relative !important;
  z-index: 1 !important;
  color: #0B1D3A !important;
  font-family: var(--font-body--family) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Empty cart — Horizon adds .visually-hidden, keep it hidden. */
.cart-bubble.visually-hidden {
  display: none !important;
}

/* Hover the cart button — gradient slides for the metallic feel. */
.header-actions__action:hover .cart-bubble__background {
  background-position: right center !important;
}


/* CONTACT SOCIAL ICONS — Instagram / TikTok / Facebook */
/* =====================================
   Adds platform icons before each social link in the 'Follow Us'
   section of /pages/contact. Uses CSS mask-image so the icons inherit
   currentColor — which means they pick up the link's text color
   (navy default, gold on hover) automatically.

   Scoped to [id*='contact_main'] (section-bound) and the link's
   destination domain (URL-bound). Robust against any future block-ID
   changes inside the contact section.
===================================== */

/* Make each <p> in the social block render as a flex row, and each
   <a> show its icon to the left of the label. */
[id*='contact_main'] a[href*='instagram.com'],
[id*='contact_main'] a[href*='tiktok.com'],
[id*='contact_main'] a[href*='facebook.com'] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

/* Tighten the paragraph spacing — three rows look cluttered with the
   default <p> margin from the rich-text reset. */
[id*='contact_main'] [class*='text-block'] p:has(a[href*='instagram.com']),
[id*='contact_main'] [class*='text-block'] p:has(a[href*='tiktok.com']),
[id*='contact_main'] [class*='text-block'] p:has(a[href*='facebook.com']) {
  margin-block: 0 0 !important;
  margin-bottom: 10px !important;
}

/* The icon — sized 20px square, rendered via mask-image so the SVG
   stencils a 'currentColor' fill. flex-shrink:0 keeps it from
   collapsing on narrow viewports. */
[id*='contact_main'] a[href*='instagram.com']::before,
[id*='contact_main'] a[href*='tiktok.com']::before,
[id*='contact_main'] a[href*='facebook.com']::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 20px 20px !important;
  mask-size: 20px 20px !important;
  flex-shrink: 0 !important;
  transition: background-color 300ms ease !important;
}

[id*='contact_main'] a[href*='instagram.com']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%272%27 width=%2720%27 height=%2720%27 rx=%275%27 ry=%275%27/%3E%3Cpath d=%27M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z%27/%3E%3Cline x1=%2717.5%27 y1=%276.5%27 x2=%2717.51%27 y2=%276.5%27/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%272%27 width=%2720%27 height=%2720%27 rx=%275%27 ry=%275%27/%3E%3Cpath d=%27M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z%27/%3E%3Cline x1=%2717.5%27 y1=%276.5%27 x2=%2717.51%27 y2=%276.5%27/%3E%3C/svg%3E") !important;
}
[id*='contact_main'] a[href*='tiktok.com']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath d=%27M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1v-3.5a6.37 6.37 0 00-.79-.05A6.34 6.34 0 003.15 15.2a6.34 6.34 0 0010.86 4.48v-7.15a8.16 8.16 0 005.58 2.2V11.3a4.85 4.85 0 01-3.77-1.84V6.69h3.77z%27/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath d=%27M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1v-3.5a6.37 6.37 0 00-.79-.05A6.34 6.34 0 003.15 15.2a6.34 6.34 0 0010.86 4.48v-7.15a8.16 8.16 0 005.58 2.2V11.3a4.85 4.85 0 01-3.77-1.84V6.69h3.77z%27/%3E%3C/svg%3E") !important;
}
[id*='contact_main'] a[href*='facebook.com']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath d=%27M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z%27/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath d=%27M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z%27/%3E%3C/svg%3E") !important;
}