/* ============================================================
   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: 16px;
  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: 15px;
  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;
  /* Top-align the two columns. `center` vertically-centered the bottle
     in a tall info-column row, so on desktop (esp. ONE, whose product
     grid sits below the .product-hero--night intro) the bottle floated
     ~550-645px down - below the fold / behind the cookie banner. Top
     alignment pins the bottle beside the product label so it's visible
     in the first viewport with no scroll. Mobile is single-column so
     this is inert there. */
  align-items: start;
}

.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: 16px;
  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: 16px;
  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: 15px;
  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: 16px;
  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: 15px;
  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: 16px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--text-body);
}

.muted { color: var(--text-body); opacity: 0.85; font-size: 15px; }
.contact-note { margin-top: 30px; font-size: 15px; }
.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: 15px;
  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: 15px;
  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: 14px;
  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: 15px;
  /* 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; }
}

/* Cart bag icon in the nav. Circular badge in the corner shows the
   live item count from res.locals.cartCount (hidden when zero). */
.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(201, 169, 110, 0.15);
  color: var(--cream-dim);
  cursor: pointer;
}
.nav-cart:hover { color: var(--gold); border-color: rgba(201, 169, 110, 0.4); }
.nav-cart-icon { font-size: 16px; }
.nav-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: #1b1b1b;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Cart drawer. Off-canvas panel + scrim; slides in from the right. */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}
.cart-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.cart-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cart-drawer.is-open .cart-drawer-scrim { opacity: 1; }
.cart-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: #1b1b1b;
  color: var(--cream);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(201, 169, 110, 0.2);
}
.cart-drawer.is-open .cart-drawer-panel { transform: translateX(0); }
.cart-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
}
.cart-drawer-header h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
}
.cart-drawer-close {
  background: transparent;
  border: none;
  color: var(--cream-dim);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.cart-drawer-close:hover { color: var(--gold); }
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
}
.cart-drawer-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--cream-dim);
}
.cart-drawer-empty p { margin-bottom: 16px; }
.cart-drawer-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(201, 169, 110, 0.1);
  align-items: flex-start;
}
.cart-item:first-child { border-top: none; }
.cart-item-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(201, 169, 110, 0.08);
}
.cart-item-img-placeholder { display: block; }
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 2px;
}
.cart-item-price {
  font-size: 12px;
  color: var(--cream-dim);
  margin-bottom: 8px;
}
.cart-item-price-current { color: var(--gold); font-weight: 500; }
.cart-item-price-strike {
  text-decoration: line-through;
  opacity: 0.6;
  margin-left: 4px;
}
.cart-item-price-save {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(201, 169, 110, 0.15);
  color: var(--gold);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.cart-item-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(201, 169, 110, 0.2);
  border-radius: 4px;
  overflow: hidden;
}
.cart-qty-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}
.cart-qty-btn:hover { color: var(--gold); }
.cart-qty-val {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--cream);
}
.cart-item-remove {
  background: transparent;
  border: none;
  color: var(--cream-dim);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.cart-item-remove:hover { color: var(--gold); }
.cart-drawer-footer {
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(201, 169, 110, 0.15);
}
.cart-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  font-size: 14px;
}
.cart-drawer-subtotal strong {
  font-size: 16px;
  color: var(--gold);
  font-weight: 500;
}
.cart-drawer-shipping-note {
  font-size: 11px;
  color: var(--cream-dim);
  margin: 0 0 14px 0;
}
.cart-drawer-checkout {
  display: block;
  text-align: center;
  width: 100%;
}

/* Multi-item cart summary shown above /order when the visitor's session
   cart has more than one product. Discount lanes are hidden for these
   orders (v1), so the block is a clean subtotal + line list. */
/* Double-class selector to outrank the legacy `.order-summary { display:
   flex }` rule further down the file. Without the specificity bump the
   base .order-summary flexed the multi block into 4 side-by-side columns
   (h2 / ul / subtotal / disclaimer), squishing every child to <250px
   and forcing character-by-character wrapping. Multi-cart is its own
   block layout: title, item list, subtotal, footnote - one after the
   other. */
.order-summary.order-summary--multi {
  display: block;
  padding: 20px 24px;
  border: 1px solid rgba(201, 169, 110, 0.15);
  background: rgba(201, 169, 110, 0.03);
  max-width: 560px;
  margin-bottom: 30px;
}
.order-summary.order-summary--multi h2 {
  margin: 0 0 12px 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
}
.order-cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order-cart-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(201, 169, 110, 0.1);
  align-items: center;
}
.order-cart-item:first-child { border-top: none; }
.order-cart-item img {
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(201, 169, 110, 0.06);
}
.order-cart-item-body { flex: 1; min-width: 0; }
.order-cart-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
}
.order-cart-item-meta {
  font-size: 12px;
  color: var(--cream-dim);
  margin-top: 2px;
}
.order-cart-item-total {
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
}
.order-cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 169, 110, 0.2);
  font-size: 14px;
}
.order-cart-subtotal strong {
  font-size: 18px;
  color: var(--gold);
  font-weight: 500;
}

/* 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: 15px;
  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;
}
/* Ritual tagline appended after the product name on the /order picker
   card ("Noxera Bloom - Сутрешен ритуал"). Same font family so it reads
   as part of the same title, muted + italic so the product name still
   leads visually. */
.order-summary-tagline {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
  opacity: 0.85;
  white-space: nowrap;
}
body.theme-order-cream .order-summary-tagline,
body.theme-bloom .order-summary-tagline {
  color: var(--noxera-gold);
}
.order-summary .price-current { font-size: 24px; }

/* Picker-card Add-to-cart button on /order. Two cards stack vertically
   above the shipping form; each has its own CTA that opens the cart
   drawer via `data-add-to-cart`. Sized to match .btn-secondary but
   pinned tighter under the price so the card reads as one unit. */
.order-summary-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 24px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.order-summary-cta:hover { background: var(--gold); color: #0a0e1a; }
body.theme-order-cream .order-summary-cta,
body.theme-bloom .order-summary-cta {
  color: var(--noxera-ink);
  border-color: var(--noxera-gold);
}
body.theme-order-cream .order-summary-cta:hover,
body.theme-bloom .order-summary-cta:hover {
  background: var(--noxera-gold);
  color: var(--noxera-linen);
}

/* === /order picker cards (Pass A + B, 2026-07-10) ==================
   Each product on /order is an .order-summary--picker card carrying its
   own tier picker (.qty-tiles--order-card) + a live-total CTA
   (.order-summary-cta with an inner price span). Above them: an optional
   bundle nudge banner. Below them: a sticky live-subtotal chip that
   updates via /api/cart on every cart mutation. See views/public/order.ejs
   for the corresponding markup + inline JS. */

/* Shrink the picker-card product photo so the info column has enough
   room for the tier picker + full-width CTA. The full-size bottle
   photo lives on /products/<slug> - here we just need a thumbnail. */
.order-summary--picker { grid-template-columns: 130px 1fr; }
.order-summary--picker img { width: 130px; height: auto; }
.order-summary--picker .order-summary-body { min-width: 0; }
.qty-tiles--order-card {
  margin: 14px 0 6px;
  padding: 0;
  border: none;
}
.qty-tiles--order-card legend {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream-dim);
  padding: 0 0 6px;
}
/* Per-card tile: number + price only. The "бутилка" caption is dropped
   because the card above already establishes context ("Noxera Bloom",
   image of a bottle) - repeating "бутилка" 3 times in a tight tile row
   crowded the layout. Big count number, small per-bottle price below. */
.qty-tiles--order-card .qty-tile {
  padding: 12px 6px 14px;
  min-width: 0;
  gap: 4px;
}
.qty-tiles--order-card .qty-tile-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream);
  line-height: 1;
}
.qty-tiles--order-card .qty-tile-label strong { font-weight: 300; font-size: 26px; }
.qty-tiles--order-card .qty-tile-label .qty-tile-unit {
  display: block;
  font-family: 'Jost', -apple-system, sans-serif;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 3px;
}
.qty-tiles--order-card .qty-tile-price {
  font-size: 12px;
  line-height: 1.3;
  font-family: 'Jost', -apple-system, sans-serif;
  color: var(--gold);
  white-space: nowrap;
}
.qty-tiles--order-card .qty-tile-price .qty-tile-price-per {
  display: block;
  font-size: 9.5px;
  color: var(--cream-dim);
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.qty-tiles--order-card .qty-tile-save { font-size: 10px; padding: 1px 5px; }
.qty-tiles--order-card .qty-tile-badge { font-size: 8.5px; padding: 2px 7px; letter-spacing: 1px; }
body.theme-order-cream .qty-tiles--order-card .qty-tile-label,
body.theme-bloom .qty-tiles--order-card .qty-tile-label {
  color: var(--noxera-ink);
}
body.theme-order-cream .qty-tiles--order-card .qty-tile-label .qty-tile-unit,
body.theme-bloom .qty-tiles--order-card .qty-tile-label .qty-tile-unit {
  color: rgba(28, 23, 22, 0.55);
}

/* CTA on picker cards - full-width dark button matching the mockup, with
   live-updating price. Keep the outlined .order-summary-cta rule above
   for non-primary CTAs; the picker CTA is the primary action per card. */
.order-summary--picker .order-summary-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--cream);
  color: var(--navy);
  border: 1px solid var(--cream);
  font-weight: 500;
  min-height: 44px;
  white-space: nowrap;
  flex-wrap: wrap;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.5px;
}
.order-summary--picker .order-summary-cta-price { font-size: 13px; letter-spacing: 0.5px; }
.order-summary--picker .order-summary-cta:hover {
  background: var(--gold);
  color: #0a0e1a;
  border-color: var(--gold);
}
.order-summary-cta-sep { opacity: 0.5; }
.order-summary-cta-price { font-variant-numeric: tabular-nums; }

body.theme-order-cream .order-summary--picker .order-summary-cta,
body.theme-bloom .order-summary--picker .order-summary-cta {
  background: var(--noxera-ink);
  color: var(--noxera-linen);
  border-color: var(--noxera-ink);
}
body.theme-order-cream .order-summary--picker .order-summary-cta:hover,
body.theme-bloom .order-summary--picker .order-summary-cta:hover {
  background: var(--noxera-gold);
  color: var(--noxera-linen);
  border-color: var(--noxera-gold);
}

/* Passive "in-cart" state for the picker CTA.
   When the product is already in the cart the button is not a "Do X"
   affordance any more - it's a status pill that shows the current
   line total and gets live-updated as tiles are clicked. Neutralise
   the hover / cursor so it doesn't look actionable. */
.order-summary--picker .order-summary-cta.order-summary-cta--in-cart {
  cursor: default;
  background: rgba(201, 169, 110, 0.12);
  border-color: rgba(201, 169, 110, 0.55);
  color: var(--gold);
}
.order-summary--picker .order-summary-cta.order-summary-cta--in-cart:hover {
  background: rgba(201, 169, 110, 0.12);
  border-color: rgba(201, 169, 110, 0.55);
  color: var(--gold);
}
body.theme-order-cream .order-summary--picker .order-summary-cta.order-summary-cta--in-cart,
body.theme-bloom .order-summary--picker .order-summary-cta.order-summary-cta--in-cart,
body.theme-order-cream .order-summary--picker .order-summary-cta.order-summary-cta--in-cart:hover,
body.theme-bloom .order-summary--picker .order-summary-cta.order-summary-cta--in-cart:hover {
  background: rgba(157, 121, 63, 0.14);
  border-color: rgba(157, 121, 63, 0.5);
  color: var(--noxera-gold);
}

/* Remove-from-cart link inside a picker card. Deliberately subdued -
   a footnote-weight action beneath the CTA. Underline on hover only,
   so the CTA remains the visual focus. */
.order-summary-remove {
  display: inline-block;
  margin: 10px auto 0;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}
.order-summary-remove:hover {
  color: var(--gold);
  text-decoration: underline;
}
.order-summary-remove--hidden { display: none; }
body.theme-order-cream .order-summary-remove,
body.theme-bloom .order-summary-remove {
  color: rgba(31, 39, 62, 0.55);
}
body.theme-order-cream .order-summary-remove:hover,
body.theme-bloom .order-summary-remove:hover {
  color: var(--noxera-gold);
}

/* Bundle nudge banner. Sits above the first picker card whenever the
   bundle discount is enabled in admin settings. Solid gold hairline +
   soft gold wash - matches the site's editorial vocabulary. */
.order-bundle-nudge {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; margin: 0 0 18px;
  max-width: 560px;
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.14), rgba(201, 169, 110, 0.06));
  border: 1px solid rgba(201, 169, 110, 0.55);
  border-radius: 4px;
}
.order-bundle-glyph {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 16px;
  flex-shrink: 0;
}
.order-bundle-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; line-height: 1.35; color: var(--cream);
}
.order-bundle-text small {
  display: block; font-family: 'Jost', sans-serif;
  font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 3px; font-weight: 500;
}
.order-bundle-text strong { color: var(--gold); font-weight: 400; }

body.theme-order-cream .order-bundle-nudge,
body.theme-bloom .order-bundle-nudge {
  background: linear-gradient(90deg, rgba(184, 146, 74, 0.16), rgba(184, 146, 74, 0.06));
  border-color: rgba(184, 146, 74, 0.55);
}
body.theme-order-cream .order-bundle-glyph,
body.theme-bloom .order-bundle-glyph {
  background: var(--noxera-gold); color: var(--noxera-linen);
}
body.theme-order-cream .order-bundle-text,
body.theme-bloom .order-bundle-text { color: var(--noxera-ink); }
body.theme-order-cream .order-bundle-text small,
body.theme-bloom .order-bundle-text small,
body.theme-order-cream .order-bundle-text strong,
body.theme-bloom .order-bundle-text strong { color: var(--noxera-gold-2, #a6844f); }

/* Sticky live subtotal chip - fixed to the bottom of the viewport so the
   customer always sees the current cart total + bundle savings while
   configuring quantities and filling the shipping form. Scoped to
   /order via `.order-live-chip` so it doesn't leak onto other pages. */
.order-live-chip {
  /* left:0 + right:0 + margin:auto + width:max-content = fixed centering
     that survives ancestor `transform` / `filter` / `contain` (any of
     which would break `left:50%; translate:-50%` by rebasing the fixed
     positioning). Robust across theme wrappers - previously the chip
     drifted left because some ancestor rebased the fixed positioning. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 22px;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100vw - 32px);
  z-index: 90;
  padding: 12px 22px;
  background: rgba(10, 14, 26, 0.92);
  border: 1px solid var(--gold);
  border-radius: 40px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: opacity 0.2s, transform 0.2s;
}
.order-live-chip--empty {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.order-live-chip-inner {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; justify-content: center;
  font-family: 'Jost', sans-serif;
}
.order-live-chip-label {
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--cream-dim);
}
.order-live-chip-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.order-live-chip-sep { color: rgba(201, 169, 110, 0.4); }
.order-live-chip-savings {
  font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.order-live-chip-savings--off { display: none; }

body.theme-order-cream .order-live-chip,
body.theme-bloom .order-live-chip {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--noxera-gold);
}
body.theme-order-cream .order-live-chip-label,
body.theme-bloom .order-live-chip-label {
  color: rgba(28, 23, 22, 0.6);
}
body.theme-order-cream .order-live-chip-amount,
body.theme-bloom .order-live-chip-amount,
body.theme-order-cream .order-live-chip-savings,
body.theme-bloom .order-live-chip-savings {
  color: var(--noxera-gold-2, #a6844f);
}

@media (max-width: 640px) {
  .order-live-chip { padding: 10px 16px; bottom: 16px; }
  .order-live-chip-amount { font-size: 17px; }
  .order-live-chip-savings { font-size: 10.5px; }
}
/* === end /order picker cards ============================================ */

/* 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: 15px;
  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; }
/* Product-page tier picker: the „Най-поръчвано" / „Най-изгодно" tile
   badges dangle 10px below the tile via `bottom: -10px` on qty-tile-
   badge. Without a bottom margin on the fieldset itself the next
   sibling (typically the Add-to-cart button) crashes into the badge.
   28px = 10px overhang + ~18px visual gap. Scoped to the --product
   variant so the /order page picker (which has no CTA immediately
   below) isn't affected. */
.qty-tiles--product { margin-bottom: 28px; }
.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: 15px; }

/* === RESPONSIVE === */
@media (max-width: 900px) {
  nav { padding: 16px 24px; }
  .nav-links { gap: 18px; }
  /* Mobile nav: keep logo (outside .nav-links), the Order CTA, cart bag
     icon, 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)` + `:has(.nav-cart)` ensure Order CTA + Cart bag
     stay visible regardless of where their <li> sits. Before the cart
     button was added (v3 shipping-cart phase) this rule kept only Order
     + account + lang via :nth-last-child(2) + :last-child; the new
     cart <li> is 3rd-to-last and would otherwise get silently hidden. */
  .nav-links > li:not(:last-child):not(:nth-last-child(2)):not(:has(.nav-cta)):not(:has(.nav-cart)) { 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 consent banner (GDPR-compliant) ===
   Mockup spec: noxera_gdpr_cookie_consent.html (2026-06-29).
   - Symmetric Accept/Reject (same .cookie-btn class, identical visual weight)
   - Customise is the 3rd action (gold-outlined, .cookie-btn-alt)
   - Toggles default OFF (no pre-ticked categories)
   - Strictly necessary is locked on
   - Floating reopen icon (bottom-left) for easy withdrawal post-consent
   - Banner is dismissible without a wall - site behind it stays interactive */
.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: 20px 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: 760px;
  margin: 0 auto;
}
.cookie-banner-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.cookie-banner-icon {
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 2px;
}
.cookie-banner-text {
  font-size: 14px;
  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;
}
.cookie-banner-text p { font-weight: 300; margin: 0; }
.cookie-banner-text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Per-category preferences panel (revealed by Customise). */
.cookie-prefs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(201, 169, 110, 0.12);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
}
.cookie-prefs[hidden] { display: none; }
.cookie-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(10, 14, 26, 0.96);
}
.cookie-pref-meta { flex: 1; min-width: 0; }
.cookie-pref-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--cream);
}
.cookie-pref-desc {
  font-size: 12px;
  color: var(--cream-dim);
  margin-top: 2px;
  line-height: 1.4;
}
.cookie-pref-lock {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--gold);
  text-transform: uppercase;
}

/* Toggle switch. Default state = OFF (background dim, knob left). */
.cookie-toggle {
  all: unset;
  cursor: pointer;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: rgba(201, 169, 110, 0.18);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.cookie-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.cookie-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cream-dim);
  transition: left 0.15s ease, background 0.15s ease;
}
.cookie-toggle[aria-checked="true"] { background: var(--gold); }
.cookie-toggle[aria-checked="true"] .cookie-toggle-knob {
  left: 21px;
  background: var(--midnight);
}

/* Action row. Reject + Accept are SYMMETRIC: identical class, padding,
   border, color. Any visual asymmetry here is a dark pattern under
   GDPR / ePrivacy guidance. Customise is the differentiated 3rd
   option (gold-outlined) - that's allowed because it's not a primary
   accept/refuse action. */
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: 11px 16px;
  border-radius: 6px;
  border: 1px solid rgba(245, 240, 232, 0.4);
  color: var(--cream);
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cookie-btn:hover {
  background: rgba(245, 240, 232, 0.06);
  border-color: rgba(245, 240, 232, 0.6);
}
.cookie-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.cookie-btn-alt {
  border-color: rgba(201, 169, 110, 0.5);
  color: var(--gold);
}
.cookie-btn-alt:hover {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.08);
}
.cookie-btn-primary {
  background: var(--gold);
  color: var(--midnight);
  border-color: var(--gold);
}
.cookie-btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}
.cookie-banner-save {
  margin-top: 10px;
}
.cookie-banner-save[hidden] { display: none; }

/* Floating reopen icon. Renders after consent has been given so the
   visitor can revise their choices any time (required by GDPR's
   "easy withdrawal" principle). Bottom-left so it doesn't collide with
   chat widgets or scroll-to-top buttons typically placed bottom-right. */
.cookie-reopen {
  position: fixed;
  /* Bottom-right corner - matches user expectation (Cookiebot, OneTrust, and
     most GDPR SDKs park the reopen widget bottom-right by default). Previously
     bottom-left, but at mobile widths (320-430px) that anchor overlapped the
     leftmost interactive content on pages like /login and /contact where form
     fields flush against the left edge. */
  right: 18px;
  bottom: 18px;
  z-index: 199;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 169, 110, 0.4);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cookie-reopen:hover {
  border-color: var(--gold);
  transform: scale(1.05);
}
.cookie-reopen:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 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: 16px 16px 18px; }
  .cookie-banner-actions { flex-direction: column; gap: 8px; }
  .cookie-btn { width: 100%; flex: none; }
  .cookie-reopen { right: 12px; bottom: 12px; width: 40px; height: 40px; }
  .cookie-pref-row { padding: 10px 12px; }
}

/* 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: var(--bloom-linen);
  color: var(--noxera-ink);
}
.ritual-v2-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.ritual-v2-intro {
  max-width: 620px;
  margin: 12px auto 56px;
  color: var(--noxera-ink);
  opacity: 0.78;
  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%, rgba(184, 146, 74, 0.45) 15%, rgba(184, 146, 74, 0.45) 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(255, 255, 255, 0.55);
  border: 1px solid rgba(28, 23, 22, 0.12);
  border-radius: 2px;
  padding: 28px 32px;
  text-align: left;
  transition: border-color 0.4s, transform 0.4s;
}
.ritual-v2-card:hover {
  border-color: var(--noxera-gold-2);
  transform: translateY(-2px);
}
.ritual-v2-card .ritual-v2-time {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--noxera-gold-2);
  margin-bottom: 10px;
}
.ritual-v2-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--noxera-ink);
  margin: 0 0 12px;
  letter-spacing: 2px;
}
.ritual-v2-card p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--noxera-ink);
  opacity: 0.78;
  margin: 0;
}
.ritual-v2-node {
  width: 12px;
  height: 12px;
  background: var(--noxera-gold-2);
  border: 2px solid var(--bloom-linen);
  border-radius: 50%;
  justify-self: center;
  box-shadow: 0 0 18px rgba(199, 168, 107, 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 a cooler ivory
   on ONE-anchored stages (night) so the brand association still reads
   even on the unified cream background. */
.ritual-v2-stage[data-stage="morning"] .ritual-v2-card {
  background: linear-gradient(135deg, rgba(242, 198, 168, 0.22) 0%, rgba(255, 255, 255, 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(255, 255, 255, 0.55) 0%, rgba(231, 214, 196, 0.4) 100%);
  border-color: rgba(184, 146, 74, 0.32);
}
/* Global .section-label / .section-title / .section-divider default to
   gold/cream-on-dark. Scope to the cream-bg ritual-v2 + brand-philosophy
   sections so the title reads on the warm background. */
.ritual-v2 .section-label,
.brand-philosophy .section-label { color: var(--noxera-gold-2); }
.ritual-v2 .section-title,
.brand-philosophy .section-title { color: var(--noxera-ink); }
.ritual-v2 .section-divider,
.brand-philosophy .section-divider { background: var(--noxera-gold); }
@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;
  /* Phase 9: 140/160 -> 100/110 desktop. Was the biggest band on the
     page and now sits between two dark sections (.soft-close before,
     .how-ritual after), so the old spacing doubled up dead space. */
  padding: 100px 40px 110px;
  overflow: hidden;
  background: var(--bloom-linen);
  color: var(--noxera-ink);
}
.brand-philosophy-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(199, 168, 107, 0.14) 0%, transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(242, 198, 168, 0.25) 0%, transparent 60%);
  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(--noxera-ink);
  margin: 24px 0 0;
  letter-spacing: 2px;
}
.philosophy-text {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--noxera-ink);
  opacity: 0.78;
  max-width: 620px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  /* Phase 9: 100/120 -> 72/80 mobile. Same rationale as desktop. */
  .brand-philosophy { padding: 72px 24px 80px; }
  .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;
  /* Phase 8: was 100vh - full-screen hid the sections below, killing the
     "there's more here" signal. 70vh desktop / 60vh mobile lets the top
     of Section 2 (Присъствие) peek into view without pushing the CTA
     off-screen. */
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 900px) {
  .landing-hero { min-height: 60vh; }
}
.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;
}
/* Phase 8: 2-line brand statement below the H1 pair. Smaller than the
   H1, quieter than the CTA - a beat of context before the button. */
.landing-hero-brand {
  font-family: 'Jost', sans-serif;
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  line-height: 1.6;
  color: rgba(245, 240, 232, 0.75);
  margin: 30px auto 34px;
  max-width: 460px;
}
.landing-hero-brand-line { display: block; }
.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: 1rem;
  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);
}

/* Cart v1: price + action row on each ritual card. */
.day-night-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  margin: 4px 0 14px;
  letter-spacing: 0.02em;
}
.day-night-day .day-night-price { color: var(--noxera-ink); }
.day-night-night .day-night-price { color: var(--cream); }
.day-night-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.day-night-cta-secondary {
  background: transparent !important;
  border-width: 1px;
}
.day-night-day .day-night-cta-secondary {
  border-color: var(--noxera-ink) !important;
  color: var(--noxera-ink) !important;
}
.day-night-day:hover .day-night-cta-secondary {
  background: var(--noxera-ink) !important;
  color: var(--bloom-ivory) !important;
}
.day-night-night .day-night-cta-secondary {
  border-color: rgba(245, 240, 232, 0.5) !important;
  color: var(--cream) !important;
}
.day-night-night:hover .day-night-cta-secondary {
  background: rgba(245, 240, 232, 0.15) !important;
}

@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);
  /* Phase 7 + follow-up: 60vh (Phase 6) → 40vh (Phase 7 initial) →
     hard px ceiling here. vh-only sizing ate too much fold on 16:9
     laptops. Now: height grows with the viewport up to 260px desktop
     / 180px mobile, but never taller. min-height provides a floor so
     the atmospheric intro doesn't collapse on very short viewports.
     Written with an explicit `height` alongside min/max so the
     computed height obeys the range - `min-height: 40vh` alone would
     override `max-height: 260px` when 40vh > 260px (min wins ties). */
  height: 40vh;
  min-height: 200px;
  max-height: 260px;
  padding: 40px 24px 24px;
  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. Same min/max/height
   pattern as desktop; ceiling 180px so very tall phones (Pro Max) don't
   render a 300px+ hero. */
@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);
    height: 30vh;
    min-height: 140px;
    max-height: 180px;
    padding: 20px 24px;
  }
}

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

/* =============================================================
   Theme: Order page (cream) — scoped to body.theme-order-cream
   =============================================================
   Reuses body.theme-bloom for nav/lang/footer/links palette and
   adds overrides for order-page-specific elements (product
   summary card, quantity tiles, form fields, delivery + courier
   pickers, totals card, submit button) so the cream chrome stays
   internally consistent. Toggleable via settings.order_page_theme
   in /admin/settings - flipping to 'dark' restores the original
   midnight chrome with no code change. */

/* Page wrapper - drop the deep-padding-on-dark feel and let the
   warm linen breathe. */
body.theme-order-cream .page-inner {
  background: var(--bloom-linen);
}

/* Page header (Order eyebrow + "Поръчай" title + divider). */
body.theme-order-cream .page-header .section-label { color: var(--noxera-gold-2); }
body.theme-order-cream .page-header .section-title { color: var(--noxera-ink); }
body.theme-order-cream .page-header .section-divider { background: var(--noxera-gold); }

/* Product summary card at the top of the form. */
body.theme-order-cream .order-summary {
  background: var(--noxera-warm-white);
  border: 1px solid rgba(28, 23, 22, 0.08);
  border-radius: 6px;
  padding: 24px;
}
body.theme-order-cream .order-summary h2 { color: var(--noxera-ink); }
body.theme-order-cream .order-summary .muted { color: rgba(28, 23, 22, 0.62); }
body.theme-order-cream .order-summary .price-current { color: var(--noxera-ink); }
body.theme-order-cream .order-summary .price-original { color: rgba(28, 23, 22, 0.48); }

/* Quantity tiles (1 / 2 / 3 bottles). */
body.theme-order-cream .qty-tiles legend { color: var(--noxera-ink); opacity: 0.7; }
body.theme-order-cream .qty-tile {
  background: var(--noxera-warm-white);
  border: 1px solid rgba(28, 23, 22, 0.10);
}
body.theme-order-cream .qty-tile:hover { border-color: rgba(184, 146, 74, 0.6); }
body.theme-order-cream .qty-tile--selected {
  border-color: var(--noxera-gold);
  background: linear-gradient(135deg, rgba(242, 198, 168, 0.18) 0%, var(--noxera-warm-white) 70%);
}
body.theme-order-cream .qty-tile-label { color: var(--noxera-ink); opacity: 0.7; }
body.theme-order-cream .qty-tile-price { color: var(--noxera-ink); }
body.theme-order-cream .qty-tile-save { color: var(--noxera-gold-2); }
body.theme-order-cream .qty-tile-badge {
  background: var(--noxera-gold);
  color: var(--noxera-warm-white);
}

/* Phase 4 follow-up (2026-07-04): the .qty-tiles* defaults use var(--cream)
   which sits on the DARK /order theme. The Bloom product page (theme-bloom)
   has a cream background where var(--cream) is basically invisible. Mirror
   the theme-order-cream overrides so the tier picker reads on Bloom too.
   Discovered during multi-device mobile audit (iPhone SE / iPad Mini). */
body.theme-bloom .qty-tiles legend { color: var(--noxera-ink); opacity: 0.7; }
body.theme-bloom .qty-tile {
  background: var(--noxera-warm-white);
  border: 1px solid rgba(28, 23, 22, 0.10);
}
body.theme-bloom .qty-tile:hover { border-color: rgba(184, 146, 74, 0.6); }
body.theme-bloom .qty-tile--selected {
  border-color: var(--noxera-gold);
  background: linear-gradient(135deg, rgba(242, 198, 168, 0.18) 0%, var(--noxera-warm-white) 70%);
}
body.theme-bloom .qty-tile-label { color: var(--noxera-ink); opacity: 0.8; }
body.theme-bloom .qty-tile-price { color: var(--noxera-ink); }
body.theme-bloom .qty-tile-save { color: var(--noxera-gold-2); }
body.theme-bloom .qty-tile-badge {
  background: var(--noxera-gold);
  color: var(--noxera-warm-white);
}

/* Form labels + inputs. */
body.theme-order-cream .form-stack label { color: var(--noxera-ink); opacity: 0.72; }
body.theme-order-cream .form-stack input,
body.theme-order-cream .form-stack textarea,
body.theme-order-cream .form-stack select {
  background: var(--noxera-warm-white);
  border-color: rgba(28, 23, 22, 0.14);
  color: var(--noxera-ink);
}
body.theme-order-cream .form-stack input:focus,
body.theme-order-cream .form-stack textarea:focus,
body.theme-order-cream .form-stack select:focus {
  border-color: var(--noxera-gold);
  box-shadow: 0 0 0 3px rgba(216, 176, 122, 0.18);
}
body.theme-order-cream .form-stack input::placeholder,
body.theme-order-cream .form-stack textarea::placeholder {
  color: rgba(28, 23, 22, 0.42);
}

/* Delivery + courier radios. */
body.theme-order-cream .form-stack fieldset legend { color: var(--noxera-ink); opacity: 0.72; }
body.theme-order-cream .form-stack .radio { color: var(--noxera-ink); }
body.theme-order-cream .form-stack .radio input[type="radio"] {
  accent-color: var(--noxera-gold);
}

/* Privacy checkbox. */
body.theme-order-cream .form-stack .checkbox { color: var(--noxera-ink); }
body.theme-order-cream .form-stack .checkbox input { accent-color: var(--noxera-gold); }
body.theme-order-cream .form-stack .checkbox a { color: var(--noxera-gold-2); }
body.theme-order-cream .form-stack .checkbox a:hover { color: var(--noxera-gold); }

/* Order totals box (subtotal / discount / total). The current CSS
   class is .order-receipt; check for both name variants. */
body.theme-order-cream .order-receipt,
body.theme-order-cream .order-totals {
  background: var(--noxera-warm-white);
  border: 1px solid rgba(28, 23, 22, 0.08);
  color: var(--noxera-ink);
}
body.theme-order-cream .order-receipt p,
body.theme-order-cream .order-totals p { color: var(--noxera-ink); }

/* Submit button - the gold gradient already reads well on cream;
   just ensure hover stays in the warm range and the focus ring is
   visible against linen. */
body.theme-order-cream .btn-primary {
  background: linear-gradient(135deg, var(--noxera-gold) 0%, var(--noxera-gold-2) 100%);
  color: var(--noxera-warm-white);
}
body.theme-order-cream .btn-primary:hover {
  box-shadow: 0 10px 40px rgba(184, 146, 74, 0.28);
}

/* Pre-order banner (if active during the campaign). */
body.theme-order-cream .preorder-banner {
  background: var(--noxera-warm-white);
  color: var(--noxera-ink);
  border-bottom: 1px solid rgba(184, 146, 74, 0.18);
}

/* IntlTelInput flag dropdown background swap so the phone input
   doesn't have a dark vendor widget on a cream form. */
body.theme-order-cream .iti__country-list,
body.theme-order-split .iti__country-list {
  background: var(--noxera-warm-white);
  color: var(--noxera-ink);
}
body.theme-order-cream .iti__selected-flag,
body.theme-order-split .iti__selected-flag { background: transparent; }
body.theme-order-cream .iti__selected-flag:hover,
body.theme-order-split .iti__selected-flag:hover { background: rgba(28, 23, 22, 0.04); }

/* =============================================================
   Theme: Order page (split) — scoped to body.theme-order-split
   =============================================================
   Cream form on the left + sticky dark "purchase summary" sidebar
   on the right. Inherits all the .theme-bloom + .theme-order-cream
   form-field styling for the left column (warm linen + ink text +
   warm-white inputs), then layers the split-grid + dark sidebar
   chrome on top.

   Mobile (<900px): collapses to single column. Sidebar stacks
   below the form fields inline. PLUS a slim sticky-to-bottom CTA
   bar appears on <700px so the total + submit are always one tap
   away while scrolling.

   Toggleable via settings.order_page_theme='split' in admin. */

/* Reuse the cream form-field palette from theme-order-cream. */
body.theme-order-split .page-inner { background: var(--bloom-linen); }
body.theme-order-split .page-header .section-label { color: var(--noxera-gold-2); }
body.theme-order-split .page-header .section-title { color: var(--noxera-ink); }
body.theme-order-split .page-header .section-divider { background: var(--noxera-gold); }
body.theme-order-split .form-stack label { color: var(--noxera-ink); opacity: 0.72; }
body.theme-order-split .form-stack input,
body.theme-order-split .form-stack textarea,
body.theme-order-split .form-stack select {
  background: var(--noxera-warm-white);
  border-color: rgba(28, 23, 22, 0.14);
  color: var(--noxera-ink);
}
body.theme-order-split .form-stack input:focus,
body.theme-order-split .form-stack textarea:focus,
body.theme-order-split .form-stack select:focus {
  border-color: var(--noxera-gold);
  box-shadow: 0 0 0 3px rgba(216, 176, 122, 0.18);
}
body.theme-order-split .form-stack input::placeholder,
body.theme-order-split .form-stack textarea::placeholder {
  color: rgba(28, 23, 22, 0.42);
}
body.theme-order-split .form-stack fieldset legend { color: var(--noxera-ink); opacity: 0.72; }
body.theme-order-split .form-stack .radio { color: var(--noxera-ink); }
body.theme-order-split .form-stack .radio input[type="radio"] { accent-color: var(--noxera-gold); }

/* Desktop split: 2-column grid inside the form. The form fields take
   the left ~60%; the sidebar takes the right ~340px and sticks under
   the nav as the visitor scrolls the form. Override the global
   .form-stack max-width:560px so the grid actually fills the page. */
body.theme-order-split form.form-stack { max-width: 980px; }
@media (min-width: 900px) {
  body.theme-order-split form.form-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
  }
  body.theme-order-split .order-form-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: 1;
    min-width: 0;
  }
  body.theme-order-split .order-form-sidebar {
    grid-column: 2;
    position: sticky;
    top: 96px;
    align-self: start;
  }
  body.theme-order-split .order-form-sidebar-inner {
    background: #14182A;
    border: 1px solid rgba(201, 169, 110, 0.18);
    border-radius: 8px;
    padding: 24px;
    color: var(--cream);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
}

/* Mobile + tablet: stack to single column. Sidebar renders inline below
   the form fields; sticky positioning is dropped (would be useless in a
   narrow viewport). Slim sticky-bottom CTA bar takes over below 700px. */
@media (max-width: 899px) {
  body.theme-order-split .order-form-fields,
  body.theme-order-split .order-form-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  body.theme-order-split .order-form-sidebar { margin-top: 20px; }
  body.theme-order-split .order-form-sidebar-inner {
    background: #14182A;
    border: 1px solid rgba(201, 169, 110, 0.18);
    border-radius: 8px;
    padding: 20px;
    color: var(--cream);
  }
}

/* Compact product card inside the sidebar. */
body.theme-order-split .order-summary--compact {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
}
body.theme-order-split .order-summary--compact img {
  width: 64px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}
body.theme-order-split .order-summary--compact h2 {
  font-size: 16px;
  color: var(--cream);
  margin: 0 0 4px;
}
body.theme-order-split .order-summary--compact p.price-current {
  font-size: 18px;
  color: var(--cream);
  margin: 0;
}
body.theme-order-split .order-summary--compact .price-strike {
  font-size: 12px;
  color: rgba(245, 240, 232, 0.5);
  text-decoration: line-through;
  margin-left: 6px;
}

/* Sidebar qty tiles: compact 3-up grid on dark bg. */
body.theme-order-split .order-form-sidebar-inner .qty-tiles { margin: 0; }
body.theme-order-split .order-form-sidebar-inner .qty-tiles legend {
  color: var(--cream-dim);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
body.theme-order-split .order-form-sidebar-inner .qty-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
body.theme-order-split .order-form-sidebar-inner .qty-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 169, 110, 0.25);
  padding: 12px 8px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
body.theme-order-split .order-form-sidebar-inner .qty-tile:hover {
  border-color: rgba(201, 169, 110, 0.55);
}
body.theme-order-split .order-form-sidebar-inner .qty-tile--selected {
  background: var(--gold);
  border-color: var(--gold);
}
body.theme-order-split .order-form-sidebar-inner .qty-tile--selected .qty-tile-label strong,
body.theme-order-split .order-form-sidebar-inner .qty-tile--selected .qty-tile-price,
body.theme-order-split .order-form-sidebar-inner .qty-tile--selected .qty-tile-save {
  color: var(--midnight);
}
body.theme-order-split .order-form-sidebar-inner .qty-tile-label strong {
  font-size: 16px;
  color: var(--cream);
  font-weight: 500;
  display: block;
}
body.theme-order-split .order-form-sidebar-inner .qty-tile-label small,
body.theme-order-split .order-form-sidebar-inner .qty-tile-images { display: none; }
body.theme-order-split .order-form-sidebar-inner .qty-tile-price {
  font-size: 11px;
  color: var(--cream-dim);
  display: block;
  margin-top: 2px;
}
body.theme-order-split .order-form-sidebar-inner .qty-tile-save {
  font-size: 10px;
  color: var(--gold);
  position: static;
  display: block;
  margin-top: 2px;
}
body.theme-order-split .order-form-sidebar-inner .qty-tile-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--midnight);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Order preview totals inside the dark sidebar. */
body.theme-order-split .order-form-sidebar-inner .order-preview {
  background: transparent;
  border: none;
  padding: 14px 0 0;
  border-top: 1px solid rgba(201, 169, 110, 0.18);
  margin: 0;
}
body.theme-order-split .order-form-sidebar-inner .order-preview h3 {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cream-dim);
  text-transform: uppercase;
  margin: 0 0 12px;
}
body.theme-order-split .order-form-sidebar-inner .order-preview-row {
  color: var(--cream);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
body.theme-order-split .order-form-sidebar-inner .order-preview-row .muted { color: rgba(245, 240, 232, 0.6); }
body.theme-order-split .order-form-sidebar-inner .order-preview-total {
  font-size: 16px;
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  border-top: 1px solid rgba(201, 169, 110, 0.32);
  margin-top: 8px;
  padding-top: 12px;
}

/* Terms checkbox + submit in the dark sidebar. */
body.theme-order-split .order-form-sidebar-inner .terms-checkbox { color: var(--cream); font-size: 12px; }
body.theme-order-split .order-form-sidebar-inner .terms-checkbox input { accent-color: var(--gold); }
body.theme-order-split .order-form-sidebar-inner .terms-checkbox a {
  color: var(--gold);
  text-decoration: underline;
}
body.theme-order-split .order-form-sidebar-inner .btn-primary {
  width: 100%;
  background: var(--gold);
  color: var(--midnight);
  padding: 14px 24px;
  border-radius: 4px;
}
body.theme-order-split .order-form-sidebar-inner .btn-primary:hover {
  background: var(--gold-light);
  box-shadow: 0 10px 32px rgba(201, 169, 110, 0.35);
}

/* The form's main (bottom) submit button is redundant in split mode -
   the sidebar already has one. Hide on desktop. On mobile <700px the
   sidebar one stays visible (stacked under the form) AND the slim
   sticky CTA bar appears - so the main bottom button is hidden on
   ALL widths in split mode (the mobile sticky bar is the third CTA). */
body.theme-order-split form.form-stack > .btn-primary { display: none; }

/* =========== Mobile sticky CTA bar (split mode only) ===========
   Hidden by default. Shown below 700px as a fixed-to-bottom slim bar
   with total on the left and submit button on the right. Always
   visible while scrolling the form so the visitor never loses the
   total + submit context on small screens. */
.order-mobile-cta { display: none; }
@media (max-width: 699px) {
  body.theme-order-split .order-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: rgba(20, 24, 42, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(201, 169, 110, 0.32);
    padding: 12px 16px;
    align-items: center;
    gap: 12px;
  }
  body.theme-order-split .order-mobile-cta-total {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  body.theme-order-split .order-mobile-cta-total .muted {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cream-dim);
  }
  body.theme-order-split .order-mobile-cta-total strong {
    font-size: 18px;
    color: var(--cream);
    font-family: 'Cormorant Garamond', serif;
  }
  body.theme-order-split .order-mobile-cta .btn-primary {
    padding: 12px 20px;
    font-size: 12px;
    margin: 0;
    background: var(--gold);
    color: var(--midnight);
    border-radius: 4px;
    white-space: nowrap;
  }
  /* Bottom padding on the form so the last fields don't disappear
     under the fixed CTA bar (~64px high + spacing). */
  body.theme-order-split form.form-stack { padding-bottom: 80px; }
  /* Sidebar's inline submit + terms checkbox stay visible on mobile.
     The sticky CTA bar is an additional shortcut, not a replacement -
     tapping it triggers form submit; if terms aren't ticked the
     native HTML5 required-validation focuses the checkbox in the
     sidebar above and shows the browser's "please tick" tooltip. */
}

/* ============================================================
   Social video gallery (product-detail click-to-load embeds)
   Scoped classes (videos-*) so we don't inherit the dark-theme
   .section-title colors that would be invisible on theme-bloom
   (cream on cream). Explicit color variables per theme instead.
   ============================================================ */
.section-videos {
  padding: 72px 0;
  background: rgba(201, 169, 110, 0.04);
  border-top: 1px solid rgba(201, 169, 110, 0.12);
  border-bottom: 1px solid rgba(201, 169, 110, 0.12);
}
.videos-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.videos-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 14px;
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 100px;
  margin-bottom: 20px;
}
.videos-label span { color: var(--gold); margin-right: 4px; }
.videos-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 auto 16px;
  color: var(--ink);
  max-width: 780px;
}
.videos-subtitle {
  font-size: 16px;
  color: rgba(51, 33, 20, 0.7);
  margin: 0 auto 8px;
  max-width: 620px;
  line-height: 1.6;
}

/* Carousel + arrows.  Arrows are inline-block round buttons that
   sit left+right of the horizontally-scrolling gallery.  They
   auto-hide via JS when there's nothing to scroll. */
.videos-carousel-wrap {
  position: relative;
  margin: 36px -8px 0;
  padding: 0 56px;
}
.videos-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(51, 33, 20, 0.15);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, transform 0.15s ease;
}
.videos-arrow:hover {
  background: var(--gold);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.videos-arrow-prev { left: 0; }
.videos-arrow-next { right: 0; }

.video-gallery {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 4px;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
  scrollbar-width: none;
}
.video-gallery::-webkit-scrollbar { display: none; }

/* When gallery content is narrower than the wrap, center it; when
   wider, let it left-align so scrolling reveals the rest. */
@media (max-width: 1100px) {
  .video-gallery { justify-content: flex-start; }
}

/* Trust-signal stat bar under the gallery. Three cells split
   evenly on desktop, stacked on mobile. Left cell is dynamic when
   we have >=5 reviews; middle + right are static claims. */
.videos-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 780px;
  margin: 40px auto 0;
  background: #fff;
  border: 1px solid rgba(51, 33, 20, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(10, 14, 26, 0.05);
}
.videos-stat {
  padding: 20px 16px;
  text-align: center;
  border-right: 1px solid rgba(51, 33, 20, 0.08);
}
.videos-stat:last-child { border-right: 0; }
.videos-stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--gold-dim, #8a7245);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.videos-stat-star {
  color: var(--gold);
  font-size: 22px;
}
.videos-stat-label {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(51, 33, 20, 0.6);
}
@media (max-width: 600px) {
  .videos-stats { grid-template-columns: 1fr; }
  .videos-stat { border-right: 0; border-bottom: 1px solid rgba(51, 33, 20, 0.08); }
  .videos-stat:last-child { border-bottom: 0; }
}
/* theme-night: white card looks jarring on midnight, flip to translucent */
body.theme-night .videos-stats {
  background: rgba(10, 14, 26, 0.6);
  border-color: rgba(201, 169, 110, 0.2);
  box-shadow: none;
}
body.theme-night .videos-stat { border-right-color: rgba(201, 169, 110, 0.15); }
body.theme-night .videos-stat-value { color: var(--gold); }
body.theme-night .videos-stat-label { color: rgba(245, 240, 232, 0.55); }
@media (max-width: 600px) {
  body.theme-night .videos-stat { border-bottom-color: rgba(201, 169, 110, 0.15); }
}

.video-privacy-note {
  margin: 24px auto 0;
  font-size: 11px;
  color: rgba(51, 33, 20, 0.45);
  max-width: 520px;
}

/* Dark-theme override (theme-night: /products/night-reset) - ink
   text is invisible on midnight so flip the palette to cream. */
body.theme-night .section-videos {
  background: rgba(10, 14, 26, 0.5);
  border-color: rgba(201, 169, 110, 0.15);
}
body.theme-night .videos-title { color: var(--cream); }
body.theme-night .videos-subtitle { color: rgba(245, 240, 232, 0.7); }
body.theme-night .videos-arrow {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(201, 169, 110, 0.3);
  color: var(--gold);
}
body.theme-night .videos-arrow:hover { background: var(--gold); color: var(--midnight); }
body.theme-night .video-privacy-note { color: rgba(245, 240, 232, 0.5); }
body.theme-night .video-caption { color: var(--cream); }
.video-gallery::-webkit-scrollbar { height: 6px; }
.video-gallery::-webkit-scrollbar-thumb { background: rgba(201, 169, 110, 0.3); border-radius: 3px; }

.video-card {
  flex: 0 0 auto;
  /* 320px matches Facebook's minimum embed width and gives TikTok /
     Instagram reels enough vertical space to render their internal
     chrome without overflowing. */
  width: 320px;
  scroll-snap-align: start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #0a0e1a;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 110, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.video-card:hover .video-thumb {
  transform: translateY(-2px);
  border-color: var(--gold);
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-thumb-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.15), rgba(10, 14, 26, 0.9));
}
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 14, 26, 0.55);
  border: 0;
  color: var(--gold);
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.video-card:hover .video-play-btn {
  background: rgba(10, 14, 26, 0.85);
  transform: translate(-50%, -50%) scale(1.05);
}
.video-platform-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  background: rgba(10, 14, 26, 0.85);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
  font-weight: 500;
}
.video-caption {
  font-size: 13px;
  color: var(--ink);
  margin: 0;
  padding: 0 4px;
  line-height: 1.4;
}
.video-privacy-note {
  margin-top: 20px;
  font-size: 11px;
  text-align: center;
}
/* Bloom-theme (cream) product page uses ink text on cream instead of gold */
body.theme-bloom .video-caption { color: var(--ink); }
body.theme-bloom .video-thumb { border-color: rgba(51, 33, 20, 0.15); }

/* Mobile: cards fill most of the viewport, one-at-a-time swipe. */
@media (max-width: 700px) {
  .video-card { width: 280px; }
  .video-gallery { gap: 14px; padding: 20px 4px 4px; }
}

/* Phase 5 completion (2026-07-04) - EFSA-mandated food-supplement
   disclaimer under the Bloom benefit-card grid. Muted caption style
   so it reads as a legal footnote, not another marketing claim. */
.benefits-disclaimer {
  max-width: 640px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cream-dim);
  opacity: 0.75;
}
body.theme-bloom .benefits-disclaimer { color: var(--noxera-ink); opacity: 0.65; }

/* === Phase 7 (2026-07-04): Bloom BG above-the-fold reorder ===
   Gated by `.product-inner--boost` which the EJS partial sets only when
   product.slug === 'bloom' && lang === 'bg'. Non-Bloom / non-BG callers
   (home for other products, waitlist, /products/night-reset) fall through
   to the legacy block-flow layout untouched.

   Above-the-fold target order on mobile:
     name → one-liner → bottle → price → tiers/CTA → badges → story
   On ≤667px viewports (iPhone SE, Galaxy S9+) the bottle demotes below
   the CTA so the buy action stays above the fold. Trust badges sit
   below the CTA on every breakpoint - they're anxiety-reduction after
   the offer, not before the price. */

/* Shrink the .product section's top padding in boost mode. Default is
   var(--section-gap) = 120px, which puts a 120px gap between the hero
   bottom and the "ПРОДУКТ" eyebrow. On short 16:9 laptops (1366x768
   Lenovo, the majority of BG desktop traffic) that gap alone pushes
   the price below the fold once you subtract browser chrome (~170px).
   Using :has() so we don't have to add another class in the EJS -
   fine for modern Chrome/Edge/Safari/Firefox. */
.product:has(.product-inner--boost) { padding-top: 40px; }
@media (max-width: 900px) {
  .product:has(.product-inner--boost) { padding-top: 24px; }
}

.product-inner--boost .product-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.product-inner--boost .product-info > .product-badges { order: 8; }
.product-inner--boost .product-info > .supplement-notice { order: 9; }
.product-inner--boost .product-info > .btn-primary { align-self: flex-start; }

.product-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  margin: 12px 0 24px;
  line-height: 1.4;
}
body.theme-bloom .product-headline { color: var(--noxera-gold-2); }

.product-photo--mobile { display: none; }

@media (max-width: 900px) {
  .product-inner--boost .product-info { align-items: center; text-align: center; }
  .product-inner--boost .product-info > .btn-primary { align-self: center; }
  .product-inner--boost .product-visual { display: none; }
  .product-photo--mobile {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto 24px;
    border-radius: 8px;
  }
  /* Tier picker is ~580px tall on mobile (3 tiles stacked) - bigger
     than any phone viewport. Demote below CTA so the buy button hits
     above the fold. Default tier 2 is pre-selected + badged
     "Най-поръчвано", so users who click CTA without picking still get
     the intended default. Users wanting tier 1 or 3 scroll down, pick,
     scroll back up. Desktop (>900px) keeps the standard picker-above-
     CTA flow - there's room for both. */
  .product-inner--boost .product-info > .qty-tiles--product { order: 7; }
}

/* Phase 10.5 (2026-07-13): removed the smallest-phones demotion of
   .product-photo--mobile. Owner brief said "image ABOVE price/CTA
   on mobile 390px" for both Bloom and ONE - the previous rule pushed
   the photo below CTA on iPhone SE / any device ≤ 667px wide.
   Photo now stays at order 0 (right after the headline) on every
   mobile size; the tier picker remains at order 7 below the CTA
   since it's genuinely bulky at 3 stacked tiles. */

/* Long-form product description moves here in boost mode, below the CTA.
   `white-space: pre-line` preserves the DB's \n\n paragraph breaks
   without any parsing. Nothing is truncated - the full source string
   renders intact. */
.product-story {
  padding: 40px 24px 60px;
  max-width: 720px;
  margin: 0 auto;
}
.product-story-text {
  white-space: pre-line;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-body);
  font-weight: 300;
}
body.theme-bloom .product-story-text { color: rgba(28, 23, 22, 0.75); }
@media (max-width: 900px) {
  .product-story { padding: 20px 24px 40px; }
}

/* === Phase 8 (2026-07-10) - Landing rebuild: Присъствие / Разбирам /
   Избирам / Тиха врата. Sits between the hero (top) and the existing
   rich sections (7-step arc, wellness-quote, etc. — kept in current
   order). All copy admin-editable via content_blocks; hardcoded strings
   here are class names only. ============================================ */

/* --- SECTION 2 - ПРИСЪСТВИЕ (founder as support) --- */
.presence {
  padding: 90px 24px 90px;
  background: linear-gradient(180deg, #060812 0%, #0c0f1c 100%);
  color: var(--cream);
}
.presence-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.presence-line {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.55;
  color: rgba(245, 240, 232, 0.85);
  margin: 0 0 14px;
}
.presence-line:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .presence { padding: 60px 24px; }
  .presence-line { font-size: 1.05rem; line-height: 1.6; }
}

/* --- SECTION 3 - РАЗБИРАМ (diagnosis) --- */
.diagnosis {
  padding: 100px 24px 110px;
  background: #0c0f1c;
  color: var(--cream);
  text-align: center;
}
.diagnosis-inner { max-width: 720px; margin: 0 auto; }
.diagnosis-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.25;
  color: var(--cream);
  margin: 0 0 48px;
  text-wrap: balance;
}
.diagnosis-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.diagnosis-item { position: relative; }
.diagnosis-link {
  display: block;
  padding: 20px 24px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.5;
  color: rgba(245, 240, 232, 0.86);
  text-decoration: none;
  border-top: 1px solid rgba(201, 169, 110, 0.15);
  transition: background 0.2s, color 0.2s;
}
.diagnosis-item:last-child .diagnosis-link {
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
}
.diagnosis-link:hover,
.diagnosis-link:focus-visible {
  background: rgba(201, 169, 110, 0.06);
  color: var(--gold);
  outline: none;
}

@media (max-width: 640px) {
  .diagnosis { padding: 70px 20px 80px; }
  .diagnosis-title { margin-bottom: 32px; }
  .diagnosis-link { padding: 16px 12px; font-size: 1rem; }
}

/* --- SECTION 4 - ИЗБИРАМ (three paths, bundle honored) --- */
.paths {
  /* Phase 9 declutter: 100/110 -> 80/90 desktop, 60/70 mobile. The
     paths grid is dense with content already; the outer band was
     the dead space, not the cards. */
  padding: 80px 24px 90px;
  background: linear-gradient(180deg, #0c0f1c 0%, #0a0e1a 100%);
  color: var(--cream);
}
@media (max-width: 700px) {
  .paths { padding: 60px 20px 70px; }
}
.paths-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  /* Desktop: 3 columns, bundle in the middle (honored center). */
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.path-card {
  position: relative;
  padding: 42px 28px 32px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(201, 169, 110, 0.18);
  border-radius: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.path-card:hover {
  border-color: rgba(201, 169, 110, 0.5);
  transform: translateY(-2px);
}
.path-card--bundle {
  background:
    linear-gradient(180deg, rgba(201, 169, 110, 0.08), rgba(201, 169, 110, 0.02));
  border-color: rgba(201, 169, 110, 0.4);
}
.path-card-icon {
  color: var(--gold);
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.path-card-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.path-card-label {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--cream);
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}
.path-card-star {
  color: var(--gold);
  margin-left: 6px;
  font-size: 0.85em;
}
.path-card-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-light, var(--gold));
  margin-bottom: 18px;
}
.path-card-text {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(245, 240, 232, 0.82);
  margin: 0 0 6px;
}
.path-card-subtext {
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(245, 240, 232, 0.6);
  margin: 0 0 26px;
}
.path-card-cta {
  display: inline-block;
  align-self: center;
  padding: 12px 28px;
  border: 1px solid rgba(245, 240, 232, 0.6);
  color: var(--cream);
  background: transparent;
  text-decoration: none;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-top: auto;
}
.path-card-cta:hover {
  background: var(--cream);
  color: var(--midnight, #0a0e1a);
  border-color: var(--cream);
}
.path-card-cta--primary {
  background: var(--gold);
  color: #0a0e1a;
  border-color: var(--gold);
}
.path-card-cta--primary:hover {
  background: var(--gold-light, #d9bd85);
  border-color: var(--gold-light, #d9bd85);
  color: #0a0e1a;
}
.path-card-bridge {
  display: block;
  margin-top: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(201, 169, 110, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.path-card-bridge:hover { color: var(--gold); }

@media (max-width: 900px) {
  /* Mobile: single column, bundle FIRST (top = most-seen honored slot).
     `order` on the flex-item children of the grid rearranges without
     changing DOM order (so a11y traversal keeps Bloom-first for screen
     readers who navigate by DOM). Owner directive: on mobile the bundle
     is the hero card. */
  .paths-grid { grid-template-columns: 1fr; gap: 16px; display: flex; flex-direction: column; }
  .path-card--bundle { order: -1; }
  .path-card { padding: 32px 24px 26px; }
  .path-card-label { font-size: 1.7rem; }
}

/* --- SECTION 5 - ТИХА ВРАТА (soft invitation + email capture) --- */
.soft-close {
  /* Phase 9: 110/120 -> 90/90 to reduce dead space before the moved-up
     philosophy section. Kept generous within the section (email
     capture needs breathing room) - only the outer bands trimmed. */
  padding: 90px 24px 90px;
  background: linear-gradient(180deg, #0a0e1a 0%, #060812 100%);
  color: var(--cream);
  text-align: center;
}
.soft-close-inner { max-width: 560px; margin: 0 auto; }
.soft-close-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.3;
  color: var(--cream);
  margin: 0 0 24px;
  text-wrap: balance;
}
.soft-close-body {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(245, 240, 232, 0.75);
  margin: 0 0 10px;
}
.soft-close-body:last-of-type { margin-bottom: 36px; }
.soft-close-cta {
  display: inline-block;
  padding: 14px 40px;
  border: 1px solid var(--gold);
  color: var(--cream);
  background: transparent;
  text-decoration: none;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.soft-close-cta:hover {
  background: var(--gold);
  color: #0a0e1a;
}
.soft-close-email {
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid rgba(201, 169, 110, 0.15);
}
.soft-close-email-prompt {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(245, 240, 232, 0.65);
  margin: 0 0 20px;
  line-height: 1.5;
}
.soft-close-email-form {
  display: flex;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
  align-items: stretch;
}
.soft-close-email-input {
  flex: 1;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 999px;
  color: var(--cream);
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  min-width: 0;
}
.soft-close-email-input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.05);
}
.soft-close-email-input::placeholder { color: rgba(245, 240, 232, 0.4); }
.soft-close-email-button {
  padding: 12px 22px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 999px;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.soft-close-email-button:hover:not(:disabled) {
  background: var(--gold);
  color: #0a0e1a;
}
.soft-close-email-button:disabled { opacity: 0.5; cursor: default; }
.soft-close-email-status {
  margin-top: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold);
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .soft-close { padding: 70px 20px 80px; }
  .soft-close-email-form { flex-direction: column; }
  .soft-close-email-button { padding: 14px 20px; }
}
/* === end Phase 8 ============================================== */

/* === Phase 9 declutter ========================================
   Sticky "Открий своя ритуал" CTA on the landing. Appears after the
   visitor scrolls past the hero, hides while the soft-close email
   field is in view. z-index sits UNDER the cookie fab (199) so the
   fab always wins if their footprints ever overlap.
   ============================================================== */
.landing-sticky-cta {
  position: fixed;
  z-index: 90;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  padding: 12px 22px;
  background: rgba(10, 14, 26, 0.92);
  border: 1px solid var(--gold);
  border-radius: 40px;
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.landing-sticky-cta.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.landing-sticky-cta:hover {
  background: var(--gold);
  color: #0a0e1a;
}
.landing-sticky-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .landing-sticky-cta {
    /* Mobile: sit above the cookie fab (40x40 at 12/12 = reaches
       ~52px from bottom). 66px bottom clears it with breathing
       room; the pill stays inside the safe thumb zone. Centered
       so it doesn't sit under the fab in the bottom-right corner. */
    bottom: 66px;
    font-size: 13px;
    letter-spacing: 1.2px;
    padding: 11px 18px;
    max-width: calc(100vw - 88px); /* room for the cookie fab on the right */
  }
}
/* === end Phase 9 ============================================== */

/* === Phase 10 - ONE product page (2026-07-11) ==================
   Structural mirror of Bloom's product page adapted for ONE's
   evening/lunar identity. NIGHT PALETTE IS PRESERVED throughout -
   this section only adds layout + typography for the new sections
   the Phase 10 brief introduced. Colors stay on --midnight /
   --cream / --gold. The stars canvas and moon ornament are never
   touched.
   ============================================================== */

/* Product-hero: dark-night variant. Bloom uses a photo backdrop;
   ONE keeps the stars canvas showing through with a soft glow
   plus a moon ornament positioned bottom-right for warmth. Height
   ceiling mirrors Bloom's fix (px cap, not vh) so 16:9 laptops
   keep the CTA above the fold. */
.product-hero--night {
  position: relative;
  z-index: 2;
  /* Phase 10.5 fix (2026-07-13): was 160/60 - too tall, pushed
     section-product (bottle + price + CTA) below the fold on 16:9
     laptops. Owner report: "bottle image appears only after scroll,
     renders huge". Now 96/32 desktop, 72/24 mobile - subtitle +
     body still breathe, but the price/CTA lands above the fold at
     both viewports. Moon ornament stays in place. */
  padding: 96px 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(201, 169, 110, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(201, 169, 110, 0.05) 0%, transparent 55%);
}
.product-hero--night .product-hero-content {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.one-hero-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--gold);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.4px;
  margin: 0 0 20px;
  font-style: italic;
}
.one-hero-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream-dim);
  font-weight: 300;
  margin: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.product-hero--night .product-hero-moon {
  position: absolute;
  right: 8%;
  bottom: 24px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0e8d0, #b89f6a 55%, rgba(184, 159, 106, 0));
  opacity: 0.65;
  filter: blur(0.3px);
  box-shadow: 0 0 40px rgba(201, 169, 110, 0.35);
  pointer-events: none;
}
@media (max-width: 760px) {
  .product-hero--night {
    padding: 72px 20px 24px;
  }
  .product-hero--night .product-hero-moon {
    width: 52px; height: 52px; right: 6%; bottom: 16px;
  }
  .one-hero-body { font-size: 14px; }
}

/* Shared container for the new narrative sections. All sit on the
   dark midnight canvas; each gets a max-width for readable line
   length and generous vertical breathing. */
.one-story,
.one-recognition,
.one-formula-intro,
.one-what-inside,
.one-how-to-take,
.one-small-rituals,
.one-bundle-bridge,
.one-faq-pointer,
.one-final-cta {
  position: relative;
  z-index: 2;
  padding: 80px 24px;
  color: var(--cream);
  text-align: center;
  background: transparent;
}
@media (max-width: 700px) {
  .one-story,
  .one-recognition,
  .one-formula-intro,
  .one-what-inside,
  .one-how-to-take,
  .one-small-rituals,
  .one-bundle-bridge,
  .one-faq-pointer,
  .one-final-cta {
    padding: 56px 20px;
  }
}

/* STORY - single human moment. Reads with lots of air. */
.one-story-inner { max-width: 640px; margin: 0 auto; }
.one-story-p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.7;
  color: var(--cream);
  margin: 0 0 22px;
  font-weight: 300;
  letter-spacing: 0.3px;
}
.one-story-p--close {
  color: var(--gold);
  font-style: italic;
  margin-top: 12px;
}

/* RECOGNITION - three cards, felt-state language, no claims. */
.one-recognition-inner { max-width: 1080px; margin: 0 auto; }
.one-recognition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}
.one-recognition-card {
  background: rgba(15, 21, 40, 0.5);
  border: 1px solid rgba(201, 169, 110, 0.18);
  border-radius: 6px;
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.one-recognition-card:hover {
  border-color: rgba(201, 169, 110, 0.4);
  transform: translateY(-2px);
}
.one-recognition-glyph {
  font-size: 24px;
  color: var(--gold);
  opacity: 0.85;
  line-height: 1;
}
.one-recognition-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--cream);
  margin: 0;
  letter-spacing: 0.4px;
}
.one-recognition-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream-dim);
  margin: 0;
  font-weight: 300;
}
@media (max-width: 900px) {
  .one-recognition-grid { grid-template-columns: 1fr; gap: 16px; }
  .one-recognition-card { padding: 28px 20px; }
}

/* FORMULA intro - lead-in for the ingredients grid below. */
.one-formula-intro { padding-bottom: 24px; }
.one-formula-intro-inner { max-width: 720px; margin: 0 auto; }
.one-formula-intro-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.6;
  color: var(--cream);
  font-style: italic;
  font-weight: 300;
  margin: 0;
}

/* WHAT'S INSIDE - four checklist items in a centered narrow list. */
.one-what-inside-inner { max-width: 560px; margin: 0 auto; }
.one-what-inside-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.one-what-inside-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--cream);
  padding: 12px 18px;
  background: rgba(15, 21, 40, 0.4);
  border: 1px solid rgba(201, 169, 110, 0.12);
  border-radius: 4px;
  text-align: left;
}
.one-check {
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* HOW TO TAKE - 3 numbered steps + a lead line above. */
.one-how-to-take-inner { max-width: 640px; margin: 0 auto; }
.one-how-lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--gold);
  font-style: italic;
  margin: 0 0 32px;
  font-weight: 300;
}
.one-how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: onestep;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}
.one-how-steps li {
  counter-increment: onestep;
  padding: 16px 20px 16px 60px;
  background: rgba(15, 21, 40, 0.35);
  border: 1px solid rgba(201, 169, 110, 0.14);
  border-radius: 4px;
  position: relative;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cream);
}
.one-how-steps li::before {
  content: counter(onestep, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 15px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 1px;
}

/* SMALL RITUALS - five habit lines with distinct glyphs. Signature
   Phase 10 section. Compliance-safe (habit, not effect). */
.one-small-rituals-inner { max-width: 560px; margin: 0 auto; }
.one-small-rituals-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.one-small-rituals-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-radius: 4px;
  background: rgba(15, 21, 40, 0.3);
  border: 1px solid rgba(201, 169, 110, 0.1);
  font-size: 15px;
  color: var(--cream);
  text-align: left;
  line-height: 1.5;
  font-weight: 300;
}
.one-small-rituals-glyph {
  color: var(--gold);
  font-size: 18px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.85;
}

/* BUNDLE BRIDGE - "Complete the ritual" -> /products/bloom. */
.one-bundle-bridge {
  background: linear-gradient(180deg, rgba(201, 169, 110, 0.06) 0%, rgba(10, 14, 26, 0) 100%);
  border-top: 1px solid rgba(201, 169, 110, 0.14);
  border-bottom: 1px solid rgba(201, 169, 110, 0.14);
}
.one-bundle-bridge-inner { max-width: 640px; margin: 0 auto; }
.one-bundle-bridge-glyph { color: var(--gold); margin-bottom: 18px; }
.one-bundle-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  color: var(--gold);
  font-weight: 400;
  margin: 0 0 12px;
  letter-spacing: 0.6px;
  font-style: italic;
}
.one-bundle-body {
  font-size: 15px;
  color: var(--cream-dim);
  line-height: 1.7;
  margin: 0 0 28px;
  font-weight: 300;
}
.one-bundle-cta {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}
.one-bundle-cta:hover { background: var(--gold); color: #0a0e1a; }

/* FAQ pointer - links to /faq rather than duplicating content. */
.one-faq-pointer { padding: 48px 24px; }
.one-faq-pointer-inner { max-width: 640px; margin: 0 auto; }
.one-faq-pointer p {
  font-size: 15px;
  color: var(--cream-dim);
  line-height: 1.6;
  margin: 0;
  font-weight: 300;
}
.one-faq-pointer-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 169, 110, 0.3);
  padding-bottom: 1px;
  margin-left: 4px;
  transition: border-color 0.2s ease;
}
.one-faq-pointer-link:hover { border-bottom-color: var(--gold); }

/* FINAL CTA - a felt line + one calm button. */
.one-final-cta { padding: 100px 24px 120px; }
.one-final-cta-inner { max-width: 640px; margin: 0 auto; }
.one-final-cta-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.5;
  color: var(--cream);
  font-weight: 300;
  font-style: italic;
  margin: 0 0 40px;
  letter-spacing: 0.4px;
}
.one-final-cta-btn { min-width: 220px; }
@media (max-width: 700px) {
  .one-final-cta { padding: 72px 20px 90px; }
}
/* === end Phase 10 ============================================= */

/* === Phase 10.5 fixes (2026-07-13) ============================
   - Cap bottle image in the dark theme so it doesn't render as a
     jarring 480px photo on the ONE page (Bloom's bloom-linen ground
     absorbs a larger photo; ONE's near-black ground doesn't). 320px
     desktop / 180px mobile-boost keeps the bottle intimate.
   - Tighten padding between the new below-fold sections. Owner
     brief: keep breathing room WITHIN sections; cut dead space
     BETWEEN them. Same treatment Phase 9 applied on the landing.
   - Typography for the new About page (story + thesis).
   ============================================================== */

body.theme-night .product-photo { max-width: 320px; }
body.theme-night .product-visual { min-height: 340px; }
@media (max-width: 900px) {
  body.theme-night .product-inner--boost .product-info > .product-photo--mobile {
    max-width: 180px;
    margin: 0 auto 20px;
  }
}

/* Tighter section paddings on the ONE page. Kept in-section
   breathing room; only dead outer bands trimmed. */
.one-story          { padding: 56px 24px; }
.one-recognition    { padding: 64px 24px; }
.one-formula-intro  { padding: 48px 24px 16px; }
.one-small-rituals  { padding: 64px 24px; }
.one-bundle-bridge  { padding: 72px 24px; }
.one-faq-pointer    { padding: 40px 24px; }
.one-final-cta      { padding: 80px 24px 96px; }
@media (max-width: 700px) {
  .one-story          { padding: 40px 20px; }
  .one-recognition    { padding: 48px 20px; }
  .one-formula-intro  { padding: 32px 20px 12px; }
  .one-small-rituals  { padding: 48px 20px; }
  .one-bundle-bridge  { padding: 56px 20px; }
  .one-faq-pointer    { padding: 32px 20px; }
  .one-final-cta      { padding: 60px 20px 72px; }
}

/* /about page - owner-authored founder narrative. Two treatments:
   .about-story  = long prose (paragraphs preserved via pre-line)
   .about-thesis = standalone closing line, larger + italic + gold,
                   with generous whitespace so it reads as the brand
                   thesis, not a paragraph tail. */
.about-page {
  position: relative; z-index: 2;
  padding: 80px 24px 96px;
  color: var(--cream);
  min-height: 60vh;
}
.about-inner { max-width: 680px; margin: 0 auto; }
.about-header { text-align: center; margin-bottom: 56px; }
.about-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 44px);
  color: var(--cream);
  letter-spacing: -0.005em;
  margin: 12px 0 20px;
  text-wrap: balance;
  line-height: 1.15;
}
.about-header .section-divider { margin: 0 auto; }

.about-story {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.75;
  color: rgba(240, 234, 219, 0.88);
  font-weight: 300;
  letter-spacing: 0.15px;
  /* Preserve the \n\n paragraph breaks stored in the DB without any
     server-side parsing. Line breaks (\n alone) also render, which
     matches the owner's intent for the couplets. */
  white-space: pre-line;
  max-width: 620px;
  margin: 0 auto;
}

.about-thesis {
  margin: 88px auto 0;
  max-width: 640px;
  padding: 48px 32px;
  text-align: center;
  border-top: 1px solid rgba(201, 169, 110, 0.22);
  border-bottom: 1px solid rgba(201, 169, 110, 0.22);
}
.about-thesis p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.5;
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.3px;
  text-wrap: balance;
}
@media (max-width: 700px) {
  .about-page { padding: 56px 20px 72px; }
  .about-header { margin-bottom: 40px; }
  .about-story { font-size: 16px; line-height: 1.7; }
  .about-thesis { margin-top: 64px; padding: 36px 20px; }
}
/* === end Phase 10.5 =========================================== */

/* === Phase 10.5 addendum (2026-07-14) =========================
   Compact ingredient-authority list ("Защо Bloom" / "Защо ONE")
   rendered right below the CTA on Bloom + ONE product pages via
   views/partials/section-benefits-quick.ejs. Quiet, elegant, 4
   short lines. Matches each product theme without any bespoke
   colour block.
   ============================================================== */
.benefits-quick {
  list-style: none;
  margin: 22px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.benefits-quick-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--cream);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: 0.1px;
}
.benefits-quick-glyph {
  color: var(--gold);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.9;
  padding-top: 2px;
}
/* Bloom theme: warm ink on linen; use the Bloom gold accent. */
body.theme-bloom .benefits-quick-item { color: var(--noxera-ink); }
body.theme-bloom .benefits-quick-glyph { color: var(--noxera-gold-2); }
@media (max-width: 700px) {
  .benefits-quick { margin: 18px 0 10px; }
  .benefits-quick-item { font-size: 14px; line-height: 1.5; }
}

/* ONE grouped Magnesium claim: header (dose+NRV) + lead + bullet list. */
.benefits-quick--grouped { margin: 22px 0 12px; }
.benefits-quick-header {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 4px;
  letter-spacing: 0.2px;
}
.benefits-quick-lead {
  font-size: 14px;
  color: var(--cream);
  margin: 0 0 8px;
  font-weight: 300;
}
.benefits-quick-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.benefits-quick-bullets li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream);
  font-weight: 300;
}
.benefits-quick-bullets .benefits-quick-glyph { color: var(--gold); font-size: 13px; }
@media (max-width: 700px) {
  .benefits-quick-header { font-size: 14px; }
  .benefits-quick-lead, .benefits-quick-bullets li { font-size: 13px; }
}
/* === end Phase 10.5 addendum ================================= */