/* ============================================================
   Noxera One — public styles
   Ported from noxera-one-landing.html. Adds: form/admin/utility
   styles for non-home pages and the language switcher.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --midnight: #0a0e1a;
  --navy: #0f1528;
  --navy-light: #162040;
  --gold: #c9a96e;
  --gold-light: #e4cc9c;
  --gold-dim: #8a7245;
  --cream: #f5f0e8;
  --cream-dim: #d4cfc7;
  --text-body: #b8b5c0;
  --purple-glow: #2a1f4e;
  --section-gap: 120px;
  --error: #e26d6d;
  --success: #6ec597;

  /* --- NOXERA v2.0 brand palette (dormant — Phase 3 homepage redesign
         consumes these; declared early so partials authored against them
         compile clean before the section work lands). --- */
  --noxera-bg: #F5F1EC;
  --noxera-ink: #1C1716;
  --noxera-gold: #D8B07A;
  --noxera-gold-2: #C7A86B;
  --noxera-warm-white: #FAF7F3;
  --noxera-soft-gray: #A6A19C;

  /* --- Bloom (morning / warm / feminine) --- */
  --bloom-champagne: #E7D6C4;
  --bloom-peach: #F2C6A8;
  --bloom-blush: #E8D5D0;
  --bloom-ivory: #FAF7F3;
  --bloom-linen: #EFE6DC;

  /* --- ONE (night / restoration) --- */
  --one-night: #0E0E10;
  --one-black: #141215;
  --one-espresso: #2B2320;
  --one-moon-beige: #C9B8A8;
  --one-brown: #6B5A52;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', sans-serif;
  background: var(--midnight);
  color: var(--text-body);
  overflow-x: hidden;
  line-height: 1.7;
}

::selection { background: var(--gold-dim); color: var(--cream); }

/* === STARS BACKGROUND === */
.stars-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  /* Sits above the home page's .hero-bg gradient (no z-index, treated as 0)
     but below .hero-content (z-index: 2), so the stars twinkle through the
     hero on every page including the homepage. */
  z-index: 1;
}

/* === NAV === */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.4s, backdrop-filter 0.4s;
}

nav.scrolled {
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201, 169, 110, 0.1);
}

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-logo span {
  display: block;
  font-size: 11px;
  letter-spacing: 6px;
  color: var(--gold-dim);
  margin-top: -2px;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  color: var(--cream-dim);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
  transition: color 0.3s;
}

.nav-links a:hover { color: var(--gold); }

.nav-cta {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold) !important;
  padding: 10px 28px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-block;
  text-decoration: none;
}

.nav-cta:hover {
  background: var(--gold);
  color: var(--midnight) !important;
}

/* Language switcher */
.lang-switcher { position: relative; }
.lang-current {
  background: transparent;
  border: 1px solid rgba(201, 169, 110, 0.25);
  color: var(--cream-dim);
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
}
.lang-current:hover { border-color: var(--gold); color: var(--gold); }
.lang-flag { font-size: 14px; line-height: 1; }
.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  /* Fully opaque so the hero moon's gold glow can never bleed through
     the dropdown rows. z-index above the nav (100) so it always wins
     against any other stacking context on the page. */
  background: rgb(10, 14, 26);
  border: 1px solid rgba(201, 169, 110, 0.3);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 200;
  list-style: none;
  padding: 6px;
  min-width: 160px;
  z-index: 110;
}
.lang-menu li form { margin: 0; }
.lang-option {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--cream-dim);
  font: inherit;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}
.lang-option:hover { background: rgba(201, 169, 110, 0.08); color: var(--gold); }
.lang-menu[hidden] { display: none; }

/* === HERO === */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* Layered ambient glow on top of the body's midnight background. The
     bottom linear-gradient used to be opaque (#0d1225, #151833…), which
     completely hid the .stars-canvas behind it. Switching it to rgba with
     alpha < 1 lets the stars twinkle through while preserving the warm
     navy-to-purple wash. */
  background:
    radial-gradient(ellipse 80% 60% at 50% 80%, rgba(42, 31, 78, 0.5) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 30% 60%, rgba(15, 21, 40, 0.7) 0%, transparent 70%),
    linear-gradient(180deg, rgba(13, 18, 37, 0) 0%, rgba(21, 24, 51, 0.4) 70%, rgba(26, 21, 64, 0.6) 100%);
}

.hero-moon {
  position: absolute;
  top: 15%;
  right: 20%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-light) 0%, var(--gold) 40%, var(--gold-dim) 100%);
  box-shadow:
    0 0 60px rgba(201, 169, 110, 0.3),
    0 0 120px rgba(201, 169, 110, 0.15);
  animation: moonGlow 4s ease-in-out infinite;
}

.hero-moon::after {
  content: '';
  position: absolute;
  top: 8px; left: 15px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--navy);
  opacity: 0.85;
}

@keyframes moonGlow {
  0%, 100% { box-shadow: 0 0 60px rgba(201, 169, 110, 0.3), 0 0 120px rgba(201, 169, 110, 0.15); }
  50% { box-shadow: 0 0 80px rgba(201, 169, 110, 0.45), 0 0 160px rgba(201, 169, 110, 0.2); }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}

.hero-badge {
  display: inline-block;
  border: 1px solid var(--gold-dim);
  padding: 8px 24px;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 1s 0.3s forwards;
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(52px, 8vw, 110px);
  font-weight: 300;
  color: var(--cream);
  line-height: 0.95;
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0;
  animation: fadeUp 1s 0.5s forwards;
}

.hero-title em {
  display: block;
  font-style: italic;
  font-size: 0.45em;
  color: var(--gold);
  letter-spacing: 12px;
  margin-top: 8px;
  font-weight: 300;
}

.hero-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 2.5vw, 26px);
  font-style: italic;
  color: var(--gold-light);
  font-weight: 300;
  margin-top: 24px;
  letter-spacing: 3px;
  opacity: 0;
  animation: fadeUp 1s 0.7s forwards;
}

.hero-sub {
  font-size: 15px;
  color: var(--text-body);
  max-width: 500px;
  margin: 28px auto 0;
  font-weight: 300;
  line-height: 1.8;
  opacity: 0;
  animation: fadeUp 1s 0.9s forwards;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 48px;
  opacity: 0;
  animation: fadeUp 1s 1.1s forwards;
  flex-wrap: wrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: var(--midnight);
  border: none;
  padding: 16px 48px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(201, 169, 110, 0.3);
}

/* Disabled / aria-busy state: visually muted, no hover lift, cursor wait.
   Used by the submit-once guard while a form POST is in flight. */
button[disabled],
button[aria-busy="true"] {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}
.btn-primary[disabled]:hover,
.btn-primary[aria-busy="true"]:hover {
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  color: var(--cream-dim);
  border: 1px solid rgba(201, 169, 110, 0.3);
  padding: 16px 48px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s;
  text-decoration: none;
  display: inline-block;
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeUp 1s 1.4s forwards;
}

.hero-scroll span {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold-dim), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === SECTIONS COMMON === */
section {
  position: relative;
  z-index: 1;
  padding: var(--section-gap) 60px;
}

.section-label {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 20px;
}

.section-divider {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 24px 0;
}

/* === BENEFITS === */
.benefits {
  background: linear-gradient(180deg, var(--midnight) 0%, var(--navy) 100%);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 60px auto 0;
}

.benefit-card {
  text-align: center;
  padding: 48px 28px;
  border: 1px solid rgba(201, 169, 110, 0.08);
  background: rgba(15, 21, 40, 0.5);
  transition: all 0.5s;
}

.benefit-card:hover {
  border-color: rgba(201, 169, 110, 0.25);
  transform: translateY(-8px);
  background: rgba(22, 32, 64, 0.4);
}

.benefit-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.benefit-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.benefit-card p {
  font-size: 14px;
  color: var(--text-body);
  font-weight: 300;
  line-height: 1.7;
}

/* === PRODUCT === */
.product {
  background: var(--navy);
  overflow: hidden;
}

.product-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}

.product-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.product-glow {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  /* Pre-blurred soft halo — same look as the old `filter: blur(40px)`
     version, but expressed via a wider radial fall-off so the
     compositor doesn't have to rasterise a 350×350 region every paint.
     Removing the filter measurably improved scroll perf on Chrome +
     Firefox after Phase 3 stacked a second blurred glow on the page. */
  background: radial-gradient(
    circle,
    rgba(42, 31, 78, 0.6) 0%,
    rgba(42, 31, 78, 0.35) 35%,
    rgba(42, 31, 78, 0.12) 60%,
    transparent 85%
  );
}

.product-photo {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 8px;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.5),
    0 0 80px rgba(201, 169, 110, 0.06);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-photo:hover { transform: scale(1.03); }

.product-info h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.25;
}

.product-info h2 em { font-style: italic; color: var(--gold); }

.product-desc {
  font-size: 15px;
  color: var(--text-body);
  margin: 24px 0 36px;
  font-weight: 300;
  line-height: 1.85;
  max-width: 440px;
}

.product-badges {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.product-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(201, 169, 110, 0.15);
  font-size: 12px;
  color: var(--cream-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.product-badge .badge-icon { color: var(--gold); font-size: 14px; }

.product-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

/* Mandatory food-supplement disclosures (EU regulation + BG Закон за храните).
   Visually understated but always visible — small print, gold accent. */
.supplement-notice {
  margin-top: 28px;
  padding: 16px 20px;
  border-left: 2px solid var(--gold-dim);
  background: rgba(15, 21, 40, 0.4);
  font-size: 12px;
  line-height: 1.6;
  color: var(--cream-dim);
}
.supplement-notice-heading {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.supplement-notice ul {
  margin: 0;
  padding-left: 16px;
}
.supplement-notice li {
  margin: 2px 0;
}

.price-current {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 400;
  color: var(--cream);
}

.price-note { font-size: 13px; color: var(--text-body); }

/* === INGREDIENTS === */
.ingredients { background: linear-gradient(180deg, var(--navy) 0%, var(--midnight) 100%); }
.ingredients-inner { max-width: 1100px; margin: 0 auto; }
.ingredients-header { text-align: center; margin-bottom: 70px; }
.ingredients-header p {
  max-width: 550px;
  margin: 0 auto;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
}

.ingredient-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}

.ingredient-item {
  text-align: center;
  padding: 40px 20px;
  border: 1px solid rgba(201, 169, 110, 0.06);
  background: rgba(15, 21, 40, 0.3);
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
}

.ingredient-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.5s;
}

.ingredient-item:hover::before { opacity: 1; }

.ingredient-item:hover {
  border-color: rgba(201, 169, 110, 0.15);
  transform: translateY(-4px);
}

.ingredient-dose {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}

.ingredient-unit { font-size: 14px; color: var(--gold-dim); margin-top: 4px; }

.ingredient-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--cream);
  margin-top: 16px;
  font-weight: 400;
}

.ingredient-detail {
  font-size: 12px;
  color: var(--text-body);
  margin-top: 8px;
  font-weight: 300;
  line-height: 1.6;
}

/* === RITUAL === */
.ritual { background: var(--midnight); text-align: center; }
.ritual-inner { max-width: 800px; margin: 0 auto; }
.ritual-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  margin-top: 60px;
}
.ritual-step { position: relative; }

.step-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 300;
  color: rgba(201, 169, 110, 0.15);
  line-height: 1;
  margin-bottom: 16px;
}

.ritual-step h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 10px;
}

.ritual-step p {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-body);
  line-height: 1.7;
}

/* === TESTIMONIALS === */
.testimonials { background: linear-gradient(180deg, var(--midnight) 0%, var(--navy) 100%); }
.testimonials-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 60px;
}

.testimonial-card {
  text-align: left;
  padding: 40px;
  border: 1px solid rgba(201, 169, 110, 0.08);
  background: rgba(15, 21, 40, 0.4);
}

.testimonial-stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.testimonial-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  color: var(--cream-dim);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 24px;
}

.testimonial-author {
  font-size: 13px;
  color: var(--gold-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* === CTA === */
.cta {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(42, 31, 78, 0.4) 0%, transparent 70%),
    var(--navy);
  text-align: center;
  padding: 140px 60px;
}

.cta-inner { max-width: 600px; margin: 0 auto; }
.cta .section-title { font-size: clamp(36px, 4.5vw, 56px); }

.cta p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  margin: 20px 0 40px;
  color: var(--text-body);
}

/* === FOOTER === */
footer {
  position: relative;
  z-index: 1;
  background: var(--midnight);
  border-top: 1px solid rgba(201, 169, 110, 0.08);
  padding: 60px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.footer-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.footer-brand span {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: var(--text-body);
  letter-spacing: 1px;
  font-weight: 300;
  margin-top: 8px;
  text-transform: none;
}

.footer-links { display: flex; gap: 60px; }

.footer-col h4 {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  color: var(--text-body);
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 10px;
  transition: color 0.3s;
}

.footer-col a:hover { color: var(--gold); }

/* Impressum block — sits between footer-links and footer-bottom. Tiny
   inline list of business identifiers per BG/EU e-commerce law. */
.footer-impressum {
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(201, 169, 110, 0.05);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 11px;
  color: var(--text-body-dim, var(--text-body));
  font-weight: 300;
  letter-spacing: 0.3px;
  line-height: 1.7;
}
.footer-impressum strong { color: var(--cream-dim); font-weight: 500; }
.footer-impressum a { color: inherit; text-decoration: none; }
.footer-impressum a:hover { color: var(--gold); }

.footer-bottom {
  max-width: 1100px;
  margin: 40px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(201, 169, 110, 0.06);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-body);
  font-weight: 300;
}

.footer-trust { display: flex; gap: 24px; }
.footer-trust span { color: var(--gold-dim); }

/* === SCROLL REVEAL === */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* === GENERIC PAGE === */
.page-inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 180px 60px 100px;
}

.page-header { margin-bottom: 40px; }
.page-header .section-divider { margin-top: 16px; }

.prose p {
  margin-bottom: 1.2em;
  font-size: 15px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--text-body);
}

.muted { color: var(--text-body); opacity: 0.85; font-size: 14px; }
.contact-note { margin-top: 30px; font-size: 14px; }
.contact-note a { color: var(--gold); text-decoration: none; }
.contact-note a:hover { text-decoration: underline; }

/* === BREADCRUMBS === */
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin-bottom: 30px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.breadcrumbs a { color: var(--gold-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs [aria-current="page"] { color: var(--cream-dim); }

/* === FORMS === */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  margin-top: 30px;
}
.form-stack label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--cream-dim);
  text-transform: uppercase;
}
.form-stack input,
.form-stack textarea,
.form-stack select {
  background: rgba(15, 21, 40, 0.6);
  border: 1px solid rgba(201, 169, 110, 0.2);
  color: var(--cream);
  font: inherit;
  padding: 12px 14px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.form-stack input:focus,
.form-stack textarea:focus,
.form-stack select:focus {
  outline: none;
  border-color: var(--gold);
}
.form-stack textarea { resize: vertical; min-height: 100px; }
.form-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}
.form-row--equal {
  grid-template-columns: 1fr 1fr;
}
.form-stack fieldset {
  border: 1px solid rgba(201, 169, 110, 0.15);
  padding: 16px;
}
.form-stack fieldset legend {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gold-dim);
  text-transform: uppercase;
  padding: 0 6px;
}
.form-stack .radio {
  flex-direction: row;
  align-items: center;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream-dim);
  font-size: 14px;
  margin-bottom: 8px;
}
.form-stack .radio input { width: auto; }

/* Mandatory consent checkbox on the order form. Inline links inherit the
   gold accent and stay underlined so it's obvious they're tappable. */
.form-stack .checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream-dim);
  font-size: 13px;
  line-height: 1.6;
}
.form-stack .checkbox input {
  width: auto;
  margin-top: 4px;
  accent-color: var(--gold);
  cursor: pointer;
}
.form-stack .checkbox a {
  color: var(--gold);
  text-decoration: underline;
}
.form-stack .checkbox a:hover { color: var(--gold-light); }

/* Honeypot */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.alert {
  padding: 14px 18px;
  border: 1px solid;
  margin-bottom: 18px;
  font-size: 14px;
  /* Match the .order-summary card and .form-stack form below — same
     max-width keeps everything aligned on the same vertical column. */
  max-width: 560px;
}
.alert-error   { border-color: var(--error);   color: var(--error); }
.alert-success { border-color: var(--success); color: var(--success); }
.alert-info    { border-color: var(--gold-dim); color: var(--cream); }

/* Account link in the nav — same compact style as the lang switcher,
   small enough to fit alongside ORDER + lang on mobile. */
.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 8px 12px;
  border: 1px solid rgba(201, 169, 110, 0.15);
  color: var(--cream-dim);
  text-decoration: none;
  text-transform: uppercase;
}
.nav-account:hover { color: var(--gold); border-color: rgba(201, 169, 110, 0.4); }
.nav-account-icon { color: var(--gold); font-size: 8px; }

@media (max-width: 600px) {
  /* Mobile: hide the account text label, keep just the icon dot. */
  .nav-account { padding: 6px 10px; font-size: 11px; }
  .nav-account-label { display: none; }
}

/* Pre-order tier banner — pinned to the very top of the viewport ABOVE
   the nav. The nav gets pushed down by --preorder-banner-h via the
   body.has-preorder class (set in the layout when the campaign is on),
   so the two never visually overlap. Quiet but golden, urgency without
   being shouty. */
:root { --preorder-banner-h: 38px; }

.preorder-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--preorder-banner-h);
  z-index: 110; /* above nav (100) so nav scrolls under, banner stays */
  background: linear-gradient(180deg, rgba(20, 16, 40, 0.96), rgba(15, 21, 40, 0.96));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201, 169, 110, 0.25);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--cream);
  letter-spacing: 0.3px;
}
.preorder-banner-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.preorder-banner-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--gold);
  color: var(--midnight);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.preorder-banner strong { color: var(--gold); font-weight: 600; }
.preorder-banner .muted { font-size: 11px; }

/* When the banner exists in the DOM, push the nav down by its height so
   they sit on separate rows. Uses :has() — when preorder is off the
   banner partial renders nothing, the selector doesn't match, and the
   nav sits at top:0 as normal. No JS / body class needed. */
body:has(.preorder-banner) nav { top: var(--preorder-banner-h); }

@media (max-width: 600px) {
  /* Tighter padding on phones; the banner can wrap to 2 lines if needed. */
  :root { --preorder-banner-h: 44px; }
  .preorder-banner { padding: 4px 12px; font-size: 11px; }
  .preorder-banner-inner { gap: 8px; }
}

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  border: 1px solid rgba(201, 169, 110, 0.1);
  background: rgba(15, 21, 40, 0.5);
  padding: 18px 22px;
}
.faq-item summary {
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--cream);
  font-weight: 400;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  color: var(--gold);
  font-size: 22px;
  transition: transform 0.3s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-body);
  font-weight: 300;
}

/* Order summary */
.order-summary {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(201, 169, 110, 0.1);
  background: rgba(15, 21, 40, 0.4);
  margin-bottom: 30px;
  /* Align with .form-stack below (same max-width). */
  max-width: 560px;
}
.order-summary img {
  width: 120px;
  height: auto;
  flex-shrink: 0;
}
.order-summary h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  color: var(--cream);
  font-weight: 400;
  margin-bottom: 8px;
}
.order-summary .price-current { font-size: 24px; }

/* Pre-order: original price strikethrough + savings badge next to the
   discounted price on the order-summary card. */
.price-strike {
  text-decoration: line-through;
  color: var(--cream-dim);
  font-size: 0.65em;
  margin-left: 8px;
  font-weight: 400;
}
.price-save {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--gold);
  color: var(--midnight);
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 1px;
  vertical-align: middle;
}

/* Live order preview — appears above the submit button on /order. */
.order-preview {
  border: 1px solid rgba(201, 169, 110, 0.18);
  background: rgba(15, 21, 40, 0.45);
  padding: 16px 20px;
  margin-top: 8px;
}
.order-preview h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--gold);
  font-weight: 400;
  margin: 0 0 12px;
  letter-spacing: 1px;
}
.order-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  padding: 6px 0;
  color: var(--cream);
}
/* `display:flex` above out-specifies the UA stylesheet's [hidden]{display:none}
   rule, so explicit `hidden` rows (like the promo line before a code is
   applied) would otherwise still render with empty placeholders. */
.order-preview-row[hidden] { display: none; }
.order-preview-label { flex: 1; }
.order-preview-unit { font-size: 13px; }

/* Quantity tile picker (1 / 2 / 3 bottles) — radio cards rendered when
   the volume-discount feature is enabled in admin. Mutually exclusive
   with promo + pre-order, so the tiles never show alongside those. */
.qty-tiles { padding: 0; border: none; margin: 0; }
.qty-tiles legend {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream-dim);
  padding: 0 0 8px;
}
.qty-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 540px) {
  .qty-tiles-grid { grid-template-columns: 1fr; }
}
.qty-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px 18px;
  border: 1px solid rgba(201, 169, 110, 0.2);
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.qty-tile:hover { border-color: rgba(201, 169, 110, 0.5); }
.qty-tile-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.qty-tile--selected {
  border-color: var(--gold) !important;
  background: rgba(201, 169, 110, 0.08);
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.qty-tile-images {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 80px;
  /* Centred so on the 1-bottle tile the lone bottle sits in the middle
     instead of being left-aligned, and on the 3-bottle tile the cluster
     is balanced under the heading. */
  max-width: 100%;
}
.qty-tile-images img {
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  flex-shrink: 0;
}
.qty-tile-label { font-size: 13px; color: var(--cream); }
.qty-tile-price { font-size: 13px; color: var(--gold); }
.qty-tile-save {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  color: var(--gold);
  background: rgba(201, 169, 110, 0.18);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  /* Pin above the bottle images so a tile crowded with 3 bottles can't
     visually obscure the badge. (The bottles have no `position`, so
     z-index on them does nothing; this is the side that needs it.) */
  z-index: 2;
  pointer-events: none;
}
.qty-tile-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0a0e1a;
  background: var(--gold);
  padding: 3px 10px;
  border-radius: 3px;
  white-space: nowrap;
}
.order-preview-total {
  border-top: 1px solid rgba(201, 169, 110, 0.15);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--gold);
}

.order-receipt {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid rgba(201, 169, 110, 0.15);
}
.order-receipt p { margin-bottom: 8px; font-size: 14px; }

/* === RESPONSIVE === */
@media (max-width: 900px) {
  nav { padding: 16px 24px; }
  .nav-links { gap: 18px; }
  /* Mobile nav: keep logo (outside .nav-links), the Order CTA, account
     pill (icon-only at <600px), and lang switcher visible; hide the
     secondary anchor links (#ritual on home, Home/About/FAQ/Contact on
     subpages - the footer covers them).
     Direct child only: without `>`, this cascades into `.lang-menu li`
     and silently hides the first 3 of the 5 language options.
     `:has(.nav-cta)` ensures Order CTA stays visible regardless of
     where its <li> sits: it used to be 2nd-to-last and was kept by
     `:nth-last-child(2)`, but when the account link was added it
     became 3rd-to-last and got silently hidden on mobile. */
  .nav-links > li:not(:last-child):not(:nth-last-child(2)):not(:has(.nav-cta)) { display: none; }
  section { padding: 80px 24px; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .product-inner { grid-template-columns: 1fr; text-align: center; }
  .product-desc { margin-left: auto; margin-right: auto; }
  .product-badges { justify-content: center; }
  .product-visual { min-height: auto; }
  .ingredient-list { grid-template-columns: repeat(2, 1fr); }
  .ritual-steps { grid-template-columns: 1fr; gap: 40px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .hero-moon { width: 50px; height: 50px; top: 12%; right: 12%; }
  .hero-moon::after { top: 5px; left: 10px; width: 38px; height: 38px; }
  .footer-inner { flex-direction: column; gap: 40px; }
  .footer-links { gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .page-inner { padding: 140px 24px 80px; }
  .form-row { grid-template-columns: 1fr; }
  .order-summary { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .ingredient-list { grid-template-columns: 1fr; }
  .footer-links { flex-direction: column; gap: 30px; }
  footer { padding: 40px 24px; }

  /* Tight nav: logo, ORDER CTA, and lang switcher all need to share one
     row without overlapping. Drop the logo wordmark down a size and
     compact every nav element so the three fit at <600px. */
  nav { padding: 14px 14px; }
  .nav-logo { font-size: 16px; letter-spacing: 3px; }
  .nav-logo span { font-size: 8px; letter-spacing: 4px; }
  .nav-links { gap: 8px; }
  .nav-cta { padding: 6px 14px !important; font-size: 11px !important; letter-spacing: 1px !important; }
  .lang-current { padding: 6px 10px; font-size: 11px; }
  .lang-current .lang-code { display: none; } /* keep just the flag — saves ~30px */

  /* Hero moon — purely decorative; hide on very narrow screens so the
     section-label badge "NIGHT RESET — SLEEP & STRESS SUPPORT" has room
     to wrap without colliding into the moon's gold glow. */
  .hero-moon { display: none; }
}

/* === DELIVERY PICKER === */
.delivery-fieldset {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}
.delivery-fieldset .radio {
  flex: 1 1 200px;
  cursor: pointer;
}
[data-delivery-fields="econt"] select,
[data-delivery-fields="econt"] input[list] {
  font-family: 'Jost', sans-serif;
}
[data-delivery-fields="econt"] select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === COOKIE BANNER === */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(10, 14, 26, 0.96);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(201, 169, 110, 0.2);
  padding: 18px 24px;
  animation: cookieSlideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes cookieSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1 1 300px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cream-dim);
}
.cookie-banner-text strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.cookie-banner-text p { font-weight: 300; margin: 0; }
.cookie-banner-text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-banner .btn-primary,
.cookie-banner .btn-secondary {
  padding: 10px 24px;
  font-size: 12px;
  letter-spacing: 2px;
}
.footer-cookie-link {
  color: var(--gold-dim) !important;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
}
.footer-cookie-link:hover { color: var(--gold) !important; }
@media (max-width: 700px) {
  .cookie-banner { padding: 14px 16px; }
  .cookie-banner-inner { gap: 14px; }
  .cookie-banner-actions { width: 100%; flex-direction: column-reverse; }
  .cookie-banner .btn-primary,
  .cookie-banner .btn-secondary { width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .stars-canvas { display: none; }
}

/* =============================================================
   NOXERA v2.0 — Phase 3a — Bloom reveal section (Section 2)
   ============================================================= */
/* Warm-ivory editorial block sitting between the dark hero and the
   dark product section. The body bg stays --midnight everywhere else;
   only this section flips to the Bloom palette via a high-specificity
   wrapper, so we don't leak light styles into siblings. */
.bloom-reveal {
  position: relative;
  z-index: 2;
  padding: 120px 60px;
  background:
    radial-gradient(ellipse at 20% 20%, var(--bloom-peach) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 60%, var(--bloom-blush) 0%, transparent 50%),
    var(--bloom-linen);
  color: var(--noxera-ink);
  overflow: hidden;
}
.bloom-reveal-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.bloom-reveal-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bloom-reveal-glow {
  position: absolute;
  inset: 10% 10%;
  /* Pre-blurred radial via a wider transparent fall-off — same soft
     halo look but no `filter: blur()` (the 40px blur was the main
     paint hot-spot in Phase 3a; both Chrome and Firefox were
     rasterising a 480×600 area every paint pass). */
  background: radial-gradient(
    circle,
    var(--bloom-champagne) 0%,
    rgba(231, 214, 196, 0.55) 35%,
    rgba(231, 214, 196, 0.18) 60%,
    transparent 85%
  );
  z-index: 0;
}
.bloom-reveal-photo {
  position: relative;
  z-index: 1;
  max-width: 100%;
  height: auto;
  /* drop-shadow filter swapped for box-shadow — same visual but
     compositor-friendly (drop-shadow forces an offscreen render). */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}
.bloom-reveal-info { padding: 20px 0; }
.bloom-label {
  color: var(--noxera-gold-2);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 16px;
}
.bloom-reveal-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.1;
  margin: 8px 0 16px;
  color: var(--noxera-ink);
}
.bloom-divider {
  width: 60px;
  height: 1px;
  background: var(--noxera-gold);
  margin: 16px 0 28px;
}
.bloom-reveal-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(28, 23, 22, 0.78);
  margin-bottom: 28px;
  max-width: 520px;
}
.bloom-reveal-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 20px 0 32px;
}
.bloom-reveal-price .price-current {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  color: var(--noxera-ink);
}
.bloom-reveal-price .price-note {
  font-size: 0.85rem;
  color: rgba(28, 23, 22, 0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Bloom CTA — gold-on-ivory to harmonise with the warm bg, in contrast
   with the gold-on-midnight elsewhere. */
.bloom-cta.btn-primary {
  background: var(--noxera-ink);
  color: var(--bloom-ivory);
  border: 1px solid var(--noxera-ink);
}
.bloom-cta.btn-primary:hover {
  background: var(--noxera-gold-2);
  color: var(--noxera-ink);
  border-color: var(--noxera-gold-2);
}

@media (max-width: 900px) {
  .bloom-reveal { padding: 80px 24px; }
  .bloom-reveal-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .bloom-reveal-divider { margin-left: auto; margin-right: auto; }
  .bloom-reveal-desc { margin-left: auto; margin-right: auto; }
  .bloom-reveal-price { justify-content: center; }
}

/* =============================================================
   NOXERA v2.0 — Phase 3b — Ritual v2 + Compare split-screen
   ============================================================= */

/* SECTION 3 — Day Ritual (4-stage timeline)
   Stacked rows alternating left/right around a center spine. The
   spine is a vertical 1px gold line; each stage has a 12px diamond
   node where it meets the spine. Mobile collapses to a single
   left-aligned column. */
.ritual-v2 {
  position: relative;
  z-index: 2;
  padding: 120px 60px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 20%, rgba(42, 31, 78, 0.4) 0%, transparent 70%),
    var(--midnight);
}
.ritual-v2-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.ritual-v2-intro {
  max-width: 620px;
  margin: 12px auto 56px;
  color: var(--text-body);
  font-size: 1.05rem;
}
.ritual-v2-timeline {
  position: relative;
  margin-top: 32px;
  padding: 24px 0;
}
.ritual-v2-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--gold-dim) 15%, var(--gold-dim) 85%, transparent 100%);
}
.ritual-v2-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  align-items: center;
  gap: 0;
  margin: 32px 0;
}
.ritual-v2-card {
  background: rgba(15, 21, 40, 0.55);
  border: 1px solid rgba(201, 169, 110, 0.18);
  border-radius: 2px;
  padding: 28px 32px;
  text-align: left;
  transition: border-color 0.4s, transform 0.4s;
}
.ritual-v2-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-2px);
}
.ritual-v2-card .ritual-v2-time {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.ritual-v2-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--cream);
  margin: 0 0 12px;
  letter-spacing: 2px;
}
.ritual-v2-card p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0;
}
.ritual-v2-node {
  width: 12px;
  height: 12px;
  background: var(--gold);
  border: 2px solid var(--midnight);
  border-radius: 50%;
  justify-self: center;
  box-shadow: 0 0 18px rgba(201, 169, 110, 0.45);
}
/* Stage layout: left-side stage has the card in column 1 (left of spine)
   and the node in column 2. Right-side stage has the node in column 2
   and the card in column 3 (right of spine). */
.stage-left .ritual-v2-card { grid-column: 1; }
.stage-left .ritual-v2-node { grid-column: 2; }
.stage-right .ritual-v2-node { grid-column: 2; }
.stage-right .ritual-v2-card { grid-column: 3; }
/* Soft warm tint on Bloom-anchored stages (morning) and cool blue on
   ONE-anchored stages (night) so the brand association is visual. */
.ritual-v2-stage[data-stage="morning"] .ritual-v2-card {
  background: linear-gradient(135deg, rgba(231, 214, 196, 0.06) 0%, rgba(15, 21, 40, 0.55) 70%);
  border-color: rgba(216, 176, 122, 0.32);
}
.ritual-v2-stage[data-stage="night"] .ritual-v2-card {
  background: linear-gradient(135deg, rgba(15, 21, 40, 0.55) 0%, rgba(14, 14, 16, 0.7) 100%);
  border-color: rgba(201, 169, 110, 0.32);
}
@media (max-width: 760px) {
  .ritual-v2 { padding: 80px 24px; }
  .ritual-v2-timeline { padding-left: 28px; }
  .ritual-v2-spine { left: 4px; }
  .ritual-v2-stage,
  .stage-left,
  .stage-right {
    grid-template-columns: 16px 1fr;
    text-align: left;
    margin: 20px 0;
  }
  .stage-left .ritual-v2-card,
  .stage-right .ritual-v2-card {
    grid-column: 2;
  }
  .stage-left .ritual-v2-node,
  .stage-right .ritual-v2-node {
    grid-column: 1;
  }
}

/* SECTION 5 — Compare the Ritual (split-screen)
   Hard 50/50 split on desktop, vertical stack on mobile. Each side
   renders its own palette; the dividing seam is a thin gold line. */
.compare-ritual {
  position: relative;
  z-index: 2;
  padding: 100px 60px;
  background: var(--midnight);
}
.compare-ritual-header {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.compare-ritual-intro {
  color: var(--text-body);
  font-size: 1.05rem;
  max-width: 580px;
  margin: 12px auto 0;
}
.compare-ritual-split {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-dim);
}
.compare-ritual-side {
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
}
.compare-bloom {
  background:
    radial-gradient(ellipse 80% 60% at 30% 70%, var(--bloom-peach) 0%, transparent 60%),
    var(--bloom-linen);
  color: var(--noxera-ink);
}
.compare-one {
  background:
    radial-gradient(ellipse 60% 40% at 70% 30%, rgba(201, 169, 110, 0.18) 0%, transparent 60%),
    var(--one-night);
  color: var(--noxera-warm-white);
}
.compare-ritual-eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 16px;
}
.compare-ritual-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2rem, 3vw, 2.8rem);
  margin: 0 0 16px;
  letter-spacing: 2px;
}
.compare-ritual-copy {
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 420px;
  opacity: 0.85;
}
.compare-one .btn-primary {
  background: var(--gold);
  color: var(--midnight);
  border: 1px solid var(--gold);
}
.compare-one .btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}
@media (max-width: 760px) {
  .compare-ritual { padding: 80px 24px; }
  .compare-ritual-split {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .compare-ritual-side {
    padding: 48px 28px;
    min-height: 380px;
  }
}

/* =============================================================
   NOXERA v2.0 — Phase 3c — How-the-Ritual + Brand Philosophy
   ============================================================= */

/* SECTION 6 — How the Ritual Works
   Horizontal flow on desktop (7 steps with thin connector segments),
   vertical stack on mobile. Each step has an inline-SVG icon coloured
   via `currentColor` so theme tweaks propagate. Product-anchored
   steps (Bloom, ONE) get a tinted halo to mark them as the brand
   touch-points within the daily arc. */
.how-ritual {
  position: relative;
  z-index: 2;
  padding: 110px 60px;
  background: var(--midnight);
}
.how-ritual-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.how-ritual-intro {
  max-width: 560px;
  margin: 12px auto 56px;
  color: var(--text-body);
  font-size: 1.05rem;
}
.how-ritual-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 4px;
}
.how-ritual-step {
  /* `flex: 1 0 0` makes every step take an equal share of the row
     so the icons sit on a uniform grid regardless of label width
     ("Естествена енергия" no longer pushes its step wider than
     "ONE"). Labels wrap to a second line if they outgrow the cell. */
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 4px;
  min-width: 96px;
  position: relative;
}
.how-ritual-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  border: 1px solid rgba(201, 169, 110, 0.32);
  border-radius: 50%;
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}
.how-ritual-step:hover .how-ritual-icon {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(201, 169, 110, 0.25);
}
.how-ritual-step.is-product .how-ritual-icon {
  background: radial-gradient(circle, rgba(201, 169, 110, 0.18) 0%, transparent 70%);
  border-color: var(--gold);
}
.how-ritual-label {
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-align: center;
}
.how-ritual-step.is-product .how-ritual-label {
  color: var(--gold-light);
  font-weight: 500;
}
.how-ritual-connector {
  flex: 0 0 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 50%, transparent 100%);
  align-self: center;
  margin-top: 22px; /* aligns connector vertically with icon centre */
}
@media (max-width: 900px) {
  .how-ritual { padding: 80px 24px; }
  .how-ritual-flow {
    flex-direction: column;
    align-items: center;
  }
  /* Column layout: each step shrinks back to its content so cells
     don't stretch vertically when flex-direction flips. */
  .how-ritual-step {
    flex: 0 0 auto;
  }
  .how-ritual-connector {
    width: 1px;
    height: 24px;
    background: linear-gradient(180deg, transparent 0%, var(--gold-dim) 50%, transparent 100%);
    flex-basis: 24px;
    margin: 0;
  }
}

/* SECTION 7 — Brand Philosophy
   Large editorial close. The bg layer is a soft gold radial glow on
   midnight — stands in for the "large photography" the brief calls
   for until brand imagery is curated; admin can drop a hero shot in
   later without restructuring. Quote uses the brand serif at scale
   and intentionally avoids any CTA, letting the page rest. */
.brand-philosophy {
  position: relative;
  z-index: 2;
  padding: 140px 40px 160px;
  overflow: hidden;
  background: var(--midnight);
}
.brand-philosophy-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(201, 169, 110, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(42, 31, 78, 0.55) 0%, transparent 60%),
    linear-gradient(180deg, rgba(15, 21, 40, 0.4) 0%, var(--midnight) 100%);
  pointer-events: none;
}
.brand-philosophy-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.philosophy-quote {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.15;
  color: var(--cream);
  margin: 24px 0 0;
  letter-spacing: 2px;
}
.philosophy-text {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--text-body);
  max-width: 620px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .brand-philosophy { padding: 100px 24px 120px; }
  .philosophy-text { font-size: 1rem; }
}

/* =============================================================
   NOXERA v2.1 — Landing redesign (2026-06-27)
   Five editorial sections above the existing Bloom/ONE narrative:
   landing-hero, wellness-quote, why-rituals, choose-ritual-heading,
   day-night-split. CSS-only photography placeholders for v1 (real
   imagery can layer in later via background-image swaps).
   ============================================================= */

/* LANDING HERO — sunset-sky CSS gradient. Stars canvas (position:
   fixed, already on the page) twinkles through the upper dark band. */
.landing-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.landing-hero-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Self-hosted hero photo (panoramic sunset over mountains). The image
     already carries its own deep-dark sky band + warm sun glow, so the
     overlay is much lighter than the Unsplash placeholder needed -
     just a top vignette to keep the white headline + italic line
     readable against the upper-sky region. `center bottom` anchors on
     the warm horizon + sun so it stays visible no matter how tall the
     viewport is. CSS gradient stays underneath as a fallback if the
     image fails. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.25) 100%),
    url('/static/images/landing/landing.webp') center bottom/cover no-repeat,
    linear-gradient(
      180deg,
      #060812 0%,
      #0c0f1c 22%,
      #1a1428 45%,
      #2f1f24 65%,
      #57342a 82%,
      #8a5028 100%
    );
}
.landing-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 760px;
}
.landing-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.18;
  color: var(--cream);
  margin: 0;
}
.landing-hero-line1 { display: block; }
.landing-hero-line2 {
  display: block;
  font-style: italic;
  color: var(--gold-light);
  margin-top: 8px;
}
.landing-hero-tagline {
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: rgba(245, 240, 232, 0.7);
  margin: 36px 0 40px;
}
.landing-hero-cta {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.6);
  color: var(--cream);
  padding: 14px 38px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.05em;
  font-size: 0.92rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.landing-hero-cta:hover {
  background: var(--cream);
  color: var(--midnight);
  border-color: var(--cream);
}

/* WELLNESS QUOTE — two-column block on cream bg. */
.wellness-quote {
  background: var(--bloom-linen);
  color: var(--noxera-ink);
  padding: 100px 40px;
}
.wellness-quote-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.wellness-quote-heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  color: var(--noxera-ink);
  margin: 0;
}
.wellness-quote-body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(28, 23, 22, 0.7);
  padding-left: 24px;
  border-left: 1px solid var(--noxera-gold);
  margin: 0;
}

/* WHY RITUALS MATTER — 3-icon row. Same cream bg flows from above. */
.why-rituals {
  background: var(--bloom-linen);
  padding: 60px 40px 100px;
  text-align: center;
}
.why-rituals-inner {
  max-width: 960px;
  margin: 0 auto;
}
.why-rituals-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--noxera-gold-2);
  margin-bottom: 48px;
}
.why-rituals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.why-rituals-cell {
  padding: 0 32px;
  border-right: 1px solid rgba(216, 176, 122, 0.3);
}
.why-rituals-cell:last-child { border-right: none; }
.why-rituals-icon {
  color: var(--noxera-gold);
  display: inline-flex;
  margin-bottom: 16px;
}
.why-rituals-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--noxera-ink);
  margin: 0 0 12px;
}
.why-rituals-text {
  font-size: 0.95rem;
  color: rgba(28, 23, 22, 0.7);
  line-height: 1.6;
  margin: 0;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

/* CHOOSE YOUR RITUAL — eyebrow + headline, sits above day/night. */
.choose-ritual-heading {
  background: var(--bloom-linen);
  text-align: center;
  padding: 60px 24px 56px;
}
.choose-ritual-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--noxera-gold-2);
  margin-bottom: 14px;
}
.choose-ritual-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 300;
  color: var(--noxera-ink);
  margin: 0;
}

/* DAY/NIGHT SPLIT — 50/50 clickable cards. Each side is an <a>
   so the whole card is clickable, not just the pill button.
   Hover lifts the inner content slightly. */
.day-night-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.day-night-side {
  position: relative;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 480px;
  text-decoration: none;
  transition: filter 0.4s ease;
}
.day-night-side:hover { filter: brightness(1.06); }
.day-night-day {
  /* Self-hosted Bloom-side photo (sheer curtain + dried botanicals).
     Image is already warm + bright + perfectly on-brand, so almost no
     overlay - just a thin warm wash for a touch of brand cohesion and
     to soften the brightest highlights so the dark CTA pill reads
     clearly. CSS gradient stays as the fallback. */
  background:
    linear-gradient(135deg, rgba(250, 247, 243, 0.08) 0%, rgba(231, 214, 196, 0.04) 100%),
    url('/static/images/landing/bloom.webp') center/cover no-repeat,
    linear-gradient(135deg, var(--bloom-linen) 0%, var(--bloom-blush) 65%, var(--bloom-peach) 100%);
  color: var(--noxera-ink);
}
.day-night-night {
  /* Self-hosted ONE-side photo (crescent moon + faint warm horizon).
     Soft vignette at the bottom keeps the white CTA pill readable
     against the warm horizon band. Top stays photo-only so the moon
     reads cleanly. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.45) 100%),
    url('/static/images/landing/one.webp') center/cover no-repeat,
    linear-gradient(135deg, var(--one-night) 0%, #14182a 60%, #1c2236 100%);
  color: var(--cream);
}
/* Hide the CSS-painted crescent on the night card whenever a
   background image is in play — the photo carries its own moon. */
.day-night-night::before { display: none; }
/* Tiny crescent moon SVG-via-mask on the night side for free,
   no extra HTML. Sits where the radial moon glow is. */
.day-night-night::before {
  content: '';
  position: absolute;
  top: 14%;
  right: 22%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: -8px 4px 0 -2px var(--one-night);
  opacity: 0.85;
}
.day-night-icon {
  color: currentColor;
  margin-bottom: 26px;
}
.day-night-day .day-night-icon { color: var(--noxera-gold-2); }
.day-night-night .day-night-icon { color: var(--gold); }
.day-night-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.day-night-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 300;
  margin: 0 0 32px;
  max-width: 280px;
  line-height: 1.4;
}
.day-night-cta {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.day-night-day .day-night-cta {
  background: var(--noxera-gold);
  color: var(--noxera-ink);
  border: 1px solid var(--noxera-gold);
}
.day-night-day:hover .day-night-cta {
  background: var(--noxera-ink);
  color: var(--bloom-ivory);
  border-color: var(--noxera-ink);
}
.day-night-night .day-night-cta {
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.7);
  color: var(--cream);
}
.day-night-night:hover .day-night-cta {
  background: var(--cream);
  color: var(--midnight);
}

@media (max-width: 900px) {
  .wellness-quote { padding: 72px 24px; }
  .wellness-quote-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .wellness-quote-body {
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid var(--noxera-gold);
  }
  .why-rituals { padding: 48px 24px 72px; }
  .why-rituals-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .why-rituals-cell {
    padding: 24px 0;
    border-right: none;
    border-bottom: 1px solid rgba(216, 176, 122, 0.3);
  }
  .why-rituals-cell:last-child { border-bottom: none; }
  .choose-ritual-heading { padding: 48px 20px; }
  .day-night-split { grid-template-columns: 1fr; }
  .day-night-side { padding: 60px 28px; min-height: 380px; }
  .day-night-night::before { right: 18%; top: 10%; }
}

/* =============================================================
   v2.1 landing — mobile-variant photos.
   ============================================================= */
/* Phones under ~900px get smaller-resolution WebP files (saved at
   900w from the same source). Cuts hero from 46 KB to 13 KB, day
   from 180 KB to 44 KB, night from 37 KB to 8 KB. Visual difference
   is imperceptible at phone DPR; bandwidth + LCP savings are real. */
@media (max-width: 900px) {
  .landing-hero-sky {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.25) 100%),
      url('/static/images/landing/landing-mobile.webp') center bottom/cover no-repeat,
      linear-gradient(180deg, #060812 0%, #0c0f1c 22%, #1a1428 45%, #2f1f24 65%, #57342a 82%, #8a5028 100%);
  }
  .day-night-day {
    background:
      linear-gradient(135deg, rgba(250, 247, 243, 0.08) 0%, rgba(231, 214, 196, 0.04) 100%),
      url('/static/images/landing/bloom-mobile.webp') center/cover no-repeat,
      linear-gradient(135deg, var(--bloom-linen) 0%, var(--bloom-blush) 65%, var(--bloom-peach) 100%);
  }
  .day-night-night {
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.45) 100%),
      url('/static/images/landing/one-mobile.webp') center/cover no-repeat,
      linear-gradient(135deg, var(--one-night) 0%, #14182a 60%, #1c2236 100%);
  }
}

/* =============================================================
   Product detail page hero (.product-hero)
   ============================================================= */
/* Sits at the top of /products/:slug. No background-color of its
   own so the body's --midnight + the .stars-canvas behind it both
   show through. z-index: 2 places the content above the canvas
   (which is z-index: 1) without creating a paint-blocking sibling. */
.product-hero {
  position: relative;
  z-index: 2;
  padding: 180px 24px 80px;
  text-align: center;
  background: transparent;
}
.product-hero-content {
  max-width: 800px;
  margin: 0 auto;
}
.product-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cream);
  margin: 16px 0 0;
}
.product-hero-coming-soon {
  margin-top: 20px;
  font-size: 1.05rem;
  color: var(--cream-dim);
  font-style: italic;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  .product-hero { padding: 140px 20px 60px; }
}

/* =============================================================
   Theme: Bloom (morning / day) — scoped to body.theme-bloom
   ============================================================= */
/* Swaps the dark midnight palette for the warm Bloom palette across
   every section of /products/bloom. Sections keep their structural
   CSS; only colors and background images change. The stars canvas
   is hidden (no stars at morning) and the .product-hero block uses
   bloom.png as its backdrop. */

body.theme-bloom { background: var(--bloom-linen); }
body.theme-bloom .stars-canvas { display: none; }

/* Hero: bloom.png photo backdrop + soft cream overlay so the dark
   ink title + eyebrow stay legible against the brighter highlights
   in the photo. */
body.theme-bloom .product-hero {
  background:
    linear-gradient(180deg, rgba(250, 247, 243, 0.45) 0%, rgba(250, 247, 243, 0.25) 50%, rgba(231, 214, 196, 0.55) 100%),
    url('/static/images/landing/bloom.webp') center/cover no-repeat,
    var(--bloom-linen);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.theme-bloom .product-hero-title { color: var(--noxera-ink); }
body.theme-bloom .product-hero-coming-soon {
  color: rgba(28, 23, 22, 0.75);
}
body.theme-bloom .product-hero .section-label { color: var(--noxera-gold-2); }
body.theme-bloom .product-hero .section-divider { background: var(--noxera-gold); }

/* Mobile hero uses the smaller bloom WebP variant. */
@media (max-width: 900px) {
  body.theme-bloom .product-hero {
    background:
      linear-gradient(180deg, rgba(250, 247, 243, 0.45) 0%, rgba(250, 247, 243, 0.25) 50%, rgba(231, 214, 196, 0.55) 100%),
      url('/static/images/landing/bloom-mobile.webp') center/cover no-repeat,
      var(--bloom-linen);
  }
}

/* .product, .ingredients, .benefits, .testimonials -> warm palettes
   instead of midnight/navy gradients. Slight tonal variation between
   sections keeps the visual rhythm without flipping to dark. */
body.theme-bloom .product {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(242, 198, 168, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 60%, rgba(232, 213, 208, 0.5) 0%, transparent 55%),
    var(--bloom-ivory);
}
body.theme-bloom .benefits {
  background: linear-gradient(180deg, var(--bloom-linen) 0%, var(--bloom-ivory) 100%);
}
body.theme-bloom .ingredients {
  background: linear-gradient(180deg, var(--bloom-ivory) 0%, var(--bloom-linen) 100%);
}
body.theme-bloom .testimonials {
  background: linear-gradient(180deg, var(--bloom-linen) 0%, var(--bloom-champagne) 100%);
}

/* Typography swap inside every Bloom-themed section: white-on-dark
   becomes ink-on-warm. Targets the shared partial classes so we
   don't have to touch the partials themselves. */
body.theme-bloom .product,
body.theme-bloom .benefits,
body.theme-bloom .ingredients,
body.theme-bloom .testimonials {
  color: var(--noxera-ink);
}
body.theme-bloom .product h2,
body.theme-bloom .product h3,
body.theme-bloom .benefits h2,
body.theme-bloom .benefits h3,
body.theme-bloom .ingredients h2,
body.theme-bloom .ingredients h3,
body.theme-bloom .testimonials h2,
body.theme-bloom .testimonials h3,
body.theme-bloom .product .section-title,
body.theme-bloom .benefits .section-title,
body.theme-bloom .ingredients .section-title,
body.theme-bloom .testimonials .section-title {
  color: var(--noxera-ink);
}
body.theme-bloom .product p,
body.theme-bloom .benefits p,
body.theme-bloom .ingredients p,
body.theme-bloom .testimonials p {
  color: rgba(28, 23, 22, 0.72);
}
body.theme-bloom .section-label { color: var(--noxera-gold-2); }
body.theme-bloom .section-divider { background: var(--noxera-gold); }

/* Product section internals — supplement notice, badges, price */
body.theme-bloom .product-desc { color: rgba(28, 23, 22, 0.75); }
body.theme-bloom .product-badge {
  border-color: rgba(216, 176, 122, 0.5);
  color: var(--noxera-ink);
}
body.theme-bloom .product-badge .badge-icon { color: var(--noxera-gold); }
body.theme-bloom .price-current { color: var(--noxera-ink); }
body.theme-bloom .price-strike { color: rgba(28, 23, 22, 0.45); }
body.theme-bloom .price-note { color: rgba(28, 23, 22, 0.55); }
body.theme-bloom .supplement-notice {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(216, 176, 122, 0.35);
  color: rgba(28, 23, 22, 0.7);
}
body.theme-bloom .supplement-notice-heading { color: var(--noxera-ink); }

/* CTA pill on Bloom theme: warm ink-on-gold (same as the home
   .bloom-cta) so it pops on the cream sections. */
body.theme-bloom .btn-primary {
  background: var(--noxera-ink);
  color: var(--bloom-ivory);
  border: 1px solid var(--noxera-ink);
}
body.theme-bloom .btn-primary:hover {
  background: var(--noxera-gold-2);
  color: var(--noxera-ink);
  border-color: var(--noxera-gold-2);
}

/* Card surfaces on the Bloom theme: the dark theme paints these
   with semi-transparent navy backgrounds + cream text. On the warm
   Bloom page that becomes either a hazy gray box (when the navy
   tint shows over cream) or invisible cream text on cream surface.
   The fix: swap each card's surface to a soft white + gold-tinted
   border, and re-color every text node that lived in cream/text-body
   tones over to ink/muted-ink so the type pops on warm.
   The exact partial class names vary:
     ingredients -> .ingredient-item   (NOT .ingredient-card)
     testimonials -> .testimonial-card
     benefits    -> .benefit-card                                  */
body.theme-bloom .ingredient-item,
body.theme-bloom .testimonial-card,
body.theme-bloom .benefit-card {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(216, 176, 122, 0.32);
  color: var(--noxera-ink);
}
body.theme-bloom .ingredient-item:hover,
body.theme-bloom .testimonial-card:hover,
body.theme-bloom .benefit-card:hover {
  border-color: var(--noxera-gold);
  background: rgba(255, 255, 255, 0.78);
}

/* Ingredients - per-sub-class text colors */
body.theme-bloom .ingredient-dose { color: var(--noxera-gold-2); }
body.theme-bloom .ingredient-unit { color: rgba(28, 23, 22, 0.5); }
body.theme-bloom .ingredient-name { color: var(--noxera-ink); }
body.theme-bloom .ingredient-detail { color: rgba(28, 23, 22, 0.72); }
/* The gold "shimmer" line that animates in on hover (.ingredient-item::before)
   uses var(--gold) which already reads OK on cream; left alone. */

/* Testimonials - text body, author, stars */
body.theme-bloom .testimonial-text { color: var(--noxera-ink); }
body.theme-bloom .testimonial-author { color: var(--noxera-gold-2); }
body.theme-bloom .testimonial-stars { color: var(--noxera-gold); }

/* Benefits - card titles + body */
body.theme-bloom .benefit-card h3,
body.theme-bloom .benefit-card .benefit-title { color: var(--noxera-ink); }
body.theme-bloom .benefit-card p,
body.theme-bloom .benefit-card .benefit-text { color: rgba(28, 23, 22, 0.72); }
body.theme-bloom .benefit-icon { color: var(--noxera-gold-2); }

/* =============================================================
   Theme-bloom nav: cream-tinted bar with dark ink text.
   ============================================================= */
/* The default dark-theme nav uses light cream text on a transparent
   (top) or dark-tinted (scrolled) background. On a Bloom-themed
   page the body is warm cream + the hero photo is bright golden -
   so the cream text becomes invisible until you scroll far enough
   for nav.scrolled to add the dark backdrop. The fix isn't to make
   nav permanently dark on Bloom pages (a dark nav on a warm page
   fights the morning aesthetic) but to flip the whole nav system
   to a cream/ink palette that stays brand-cohesive with the
   morning theme AND is always readable at AA-level contrast. */

body.theme-bloom nav {
  background: rgba(250, 247, 243, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(216, 176, 122, 0.18);
}
body.theme-bloom nav.scrolled {
  background: rgba(250, 247, 243, 0.96);
  border-bottom-color: rgba(216, 176, 122, 0.28);
}

/* Logo + small "ONE" subtitle stay legible against cream. */
body.theme-bloom .nav-logo { color: var(--noxera-ink); }
body.theme-bloom .nav-logo span { color: var(--noxera-gold-2); }

/* Menu links — ink at 78% opacity for a soft "active link gets full
   opacity on hover" feel that matches the brand's calm voice. */
body.theme-bloom .nav-links a { color: var(--noxera-ink); opacity: 0.78; }
body.theme-bloom .nav-links a:hover { color: var(--noxera-gold-2); opacity: 1; }

/* Lang switcher button + dropdown. */
body.theme-bloom .lang-current {
  color: var(--noxera-ink);
  border-color: rgba(216, 176, 122, 0.35);
}
body.theme-bloom .lang-current:hover {
  color: var(--noxera-gold-2);
  border-color: var(--noxera-gold);
}
body.theme-bloom .lang-menu {
  background: rgba(250, 247, 243, 0.98);
  border-color: rgba(216, 176, 122, 0.32);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
body.theme-bloom .lang-option { color: var(--noxera-ink); }
body.theme-bloom .lang-option:hover {
  background: rgba(216, 176, 122, 0.1);
  color: var(--noxera-gold-2);
}

/* Primary nav CTA ("Поръчай" / "Order") — outlined ink-on-cream
   that flips to filled ink-on-ivory on hover, mirroring the
   .bloom-cta button style elsewhere on the page. */
body.theme-bloom .nav-cta {
  border-color: var(--noxera-ink);
  color: var(--noxera-ink) !important;
  background: transparent;
}
body.theme-bloom .nav-cta:hover {
  background: var(--noxera-ink);
  color: var(--bloom-ivory) !important;
  border-color: var(--noxera-ink);
}

/* =============================================================
   Theme-night (product detail pages, non-Bloom)
   ============================================================= */
/* Same dark midnight palette the rest of the site uses, but tuned
   so the .stars-canvas (position: fixed behind everything) reads
   through every section of the page - not just the hero. The
   default .hero-bg has a purple-glow layer at the bottom that
   clashed with the stars look the owner liked; theme-night replaces
   it with pure midnight tones. The .product, .ingredients,
   .benefits, .testimonials sections all get ~8% transparency so
   their dark backgrounds become a uniform semi-translucent
   midnight that lets the stars twinkle through.

   Scoped to body.theme-night so the home page (same .hero markup)
   keeps its existing purple-tinted depth - that page is the brand's
   ritual narrative entry point and the mood there is intentional. */

body.theme-night .hero-bg {
  background:
    /* subtle vertical depth without the purple-glow at the bottom */
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(15, 21, 40, 0.5) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(10, 14, 26, 0.55) 0%, transparent 70%);
}

/* Sections become one continuous starscape with the hero. Each one
   carries only a soft midnight radial near its center for depth,
   fading to transparent at the edges - so the body --midnight + the
   fixed .stars-canvas read straight through. No tonal seams between
   sections, no per-section gradient bands, the entire scroll feels
   like one dark sky. Center positions vary per section (40% / 50%
   / 60% / 45%) so the soft "haloed" areas don't line up vertically
   and the rhythm reads. */
body.theme-night .product {
  background: radial-gradient(ellipse 90% 70% at 50% 40%, rgba(15, 21, 40, 0.45) 0%, transparent 75%);
}
body.theme-night .ingredients {
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(15, 21, 40, 0.4) 0%, transparent 75%);
}
body.theme-night .benefits {
  background: radial-gradient(ellipse 90% 70% at 50% 60%, rgba(15, 21, 40, 0.4) 0%, transparent 75%);
}
body.theme-night .testimonials {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(15, 21, 40, 0.4) 0%, transparent 75%);
}

/* Cards INSIDE each section keep their own dark surfaces so the
   text within them stays readable against the (now mostly
   transparent) section. We tune them down so they read as cards
   floating on the starscape instead of solid bright blocks that
   compete with the sky behind them. */
body.theme-night .ingredient-item {
  background: rgba(15, 21, 40, 0.55);
}
body.theme-night .testimonial-card,
body.theme-night .benefit-card {
  background: rgba(15, 21, 40, 0.45);
  border: 1px solid rgba(201, 169, 110, 0.08);
}

/* Stars canvas: bump it a notch brighter on theme-night so the
   twinkle reads through the section backgrounds without looking
   muddy. (Default opacity = 1; we're just lifting its z position
   in stacking so it isn't covered by section pseudo-elements.) */
body.theme-night .stars-canvas {
  opacity: 1;
}