/* ============================================================
   Legacy Beyond Power — Stylesheet
============================================================ */

:root {
  --bg: #0a0604;
  --bg-2: #120c08;
  --bg-3: #1a120c;
  --bg-4: #241810;
  --line: #2a1f17;

  --gold: #c9a961;
  --gold-light: #e8d4a0;
  --gold-soft: #8b6f47;
  --gold-dark: #5a4530;

  --cream: #f5ebe0;
  --text: #d8c8b0;
  --text-muted: #8a7965;
  --text-faint: #5a4d3e;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1320px;
  --radius: 4px;
  --transition: cubic-bezier(0.16, 1, 0.3, 1);
}

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

[x-cloak] { display: none !important; }

/* Visually hide content while keeping it discoverable to screen readers and search engines. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Universal keyboard-focus indicator. Only shows on keyboard nav, not mouse clicks. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Honor visitors who prefer reduced motion (vestibular disorders, OS setting). */
@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;
  }
  .announcement-track { animation: none !important; }
}

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  /* No overflow-x here — it would create a scroll container that breaks
     position: sticky on the header. Horizontal overflow is handled by body. */
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative; /* Forms a containing block so off-screen fixed children can't extend the scrollable area */
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================
   Typography
============================ */
h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.05;
  color: var(--cream);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(3rem, 7vw, 6rem); }
h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }

em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

p { color: var(--text); }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gold-soft);
  margin-bottom: 1.5rem;
}

/* ============================
   Layout
============================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

section {
  padding: clamp(5rem, 12vh, 10rem) 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 5rem;
}

.section-header h2 {
  margin-bottom: 1.5rem;
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* ============================
   Buttons
============================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.25rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.5s var(--transition);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -16px rgba(201, 169, 97, 0.6);
}

.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--gold-soft);
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Smaller variant for inline contexts (e.g. product card CTA row). */
.btn-sm {
  padding: 0.75rem 1.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}

/* ============================
   Announcement Bar
============================ */
.announcement {
  background: var(--gold);
  color: var(--bg);
  padding: 0.65rem 0;
  overflow: hidden;
  position: relative;
  z-index: 100;
  border-bottom: 1px solid var(--gold-dark);
}

.announcement-track {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  animation: scroll-left 40s linear infinite;
  font-size: 0.87rem;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.announcement-track span { flex-shrink: 0; }
.announcement-track strong { font-weight: 700; }

@keyframes scroll-left {
  to { transform: translateX(-50%); }
}

/* ============================
   Header
============================ */
.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 1.25rem 0;
  transition: all 0.4s var(--transition);
  background: rgba(10, 6, 4, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
}

.header.is-scrolled {
  background: rgba(10, 6, 4, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(201, 169, 97, 0.15);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo {
  display: inline-flex;
  align-items: center;
}
.logo picture { display: block; }
.logo img {
  display: block;
  height: 64px;
  width: auto;
}
/* Footer uses the square 1:1 Logo 1 variant (not the wide 4:1 header logo) so
   the mark sits balanced in the narrow column instead of stretching across it.
   The img dimensions in the HTML are 1200x1200 — height alone defines render size. */
.footer-brand .logo img { height: 110px; }

.nav-links {
  display: flex;
  gap: 2.5rem;
  margin: 0 auto;
}

.nav-links a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  position: relative;
  padding: 0.5rem 0;
  transition: color 0.3s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: all 0.4s var(--transition);
  transform: translateX(-50%);
}

.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 100; /* Keep the hamburger above the open mobile-nav overlay so the X stays tappable. */
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
}
.hamburger span {
  width: 22px;
  height: 1.5px;
  background: var(--cream);
  transition: all 0.3s;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================
   Hero
============================ */
.hero {
  position: relative;
  width: 100%;
  height: 0;
  /* Source banners are 1920×900, displayed full-bleed (ratio 900/1920 ≈ 46.875%). */
  padding: 0 0 46.875% 0;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

.hero-track {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--transition);
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-dots {
  position: absolute;
  bottom: 2.5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 5;
}
.hero-dot {
  width: 30px;
  height: 2px;
  background: rgba(245, 235, 224, 0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.3s, width 0.3s;
}
.hero-dot.is-active {
  background: var(--gold);
  width: 44px;
}
/* Invisible 44x44 hit area extension for touch — meets Apple HIG minimum. */
.hero-dot::before {
  content: '';
  position: absolute;
  top: -22px;
  bottom: -22px;
  left: -8px;
  right: -8px;
}

.hero-nav-btn {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: all 0.3s;
  background: rgba(10, 6, 4, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.hero-nav-btn:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.hero-nav-btn svg {
  width: 18px;
  height: 18px;
}

.hero-nav {
  position: absolute;
  bottom: 6%;
  right: 4%;
  display: flex;
  gap: 0.5rem;
  z-index: 5;
}

/* ============================
   Section: Collection (Tabs + Cards)
============================ */
.collection {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* Perfume Cards */
.perfume-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.perfume-card {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: all 0.6s var(--transition);
  /* Column flex so the .perfume-info child can grow and pin the CTA to the
     bottom; without this, cards with shorter titles/summaries leave the CTA
     floating mid-card while neighbour cards have it at the bottom. */
  display: flex;
  flex-direction: column;
}

.perfume-card:hover {
  border-color: var(--gold-soft);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.perfume-visual {
  position: relative;
  height: 380px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at center bottom, rgba(201, 169, 97, 0.12), transparent 70%),
    var(--bg-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.perfume-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(201, 169, 97, 0.2), transparent 60%);
  opacity: 0;
  transition: opacity 0.6s;
}
.perfume-card:hover .perfume-glow { opacity: 1; }

.bottle {
  width: 200px;
  height: 320px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.6));
  transition: transform 0.6s var(--transition);
}
.perfume-card:hover .bottle { transform: translateY(-8px) scale(1.04); }

/* Thumb strip below the main bottle image — Alpine swaps the main image on click. */
.perfume-thumbs {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-soft) transparent;
}
.perfume-thumbs::-webkit-scrollbar { height: 4px; }
.perfume-thumbs::-webkit-scrollbar-track { background: transparent; }
.perfume-thumbs::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 2px; }

.thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s;
}
.thumb picture, .thumb img {
  width: 100%;
  height: 100%;
  display: block;
}
.thumb img { object-fit: contain; }
.thumb:hover { border-color: var(--gold-soft); }
.thumb.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.18);
}

.perfume-info {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  /* Grow to fill the rest of the card so the CTA can be margin-top:auto'd
     to the bottom regardless of how tall the content above is. */
  flex: 1;
}

/* min-height = 2 lines so the price below sits at the same Y position
   across all 3 cards even when "Steel Sovereign Silver" or "Black Velvet
   Private Reserve" wrap to a 2nd line while "Gold Edition" stays on 1 line. */
.perfume-info h3 { margin-bottom: 0; font-size: 1.7rem; line-height: 1.2; min-height: 2.4em; }
.perfume-info > p { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

/* Pills row at the top of each card (Unisex / 50 ml / Custom Edition Available). */
.perfume-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(201, 169, 97, 0.07);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 999px;
  line-height: 1;
}
.pill svg { width: 12px; height: 12px; flex: 0 0 12px; color: var(--gold); }
.pill-link {
  color: var(--gold);
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.pill-link:hover {
  background: rgba(201, 169, 97, 0.18);
  border-color: var(--gold);
  color: var(--cream);
}

.perfume-summary {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

/* Top/Heart/Base notes table. */
.fragrance-notes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.fragrance-notes th,
.fragrance-notes td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.fragrance-notes tr:last-child th,
.fragrance-notes tr:last-child td {
  border-bottom: none;
}
.fragrance-notes th {
  color: var(--gold);
  font-family: var(--serif);
  letter-spacing: 0.04em;
  width: 5.5rem;
}
.fragrance-notes td { color: var(--cream); }

.perfume-cta {
  display: flex;
  gap: 0.75rem;
  /* Auto-push to the bottom of .perfume-info so all 3 cards' CTAs line up
     horizontally, even when title/summary/notes content above differs in height. */
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.perfume-cta .btn {
  flex: 1 1 0;
  padding: 0.85rem 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  justify-content: center;
  white-space: nowrap;
  min-width: 0;
}

/* Below the 3-col → 2-col breakpoint the card is wide enough to keep buttons side-by-side.
   But at the 3-col stage (≈ 900-1200px desktop), the cards are narrow and the two-button row
   gets cramped — stack the CTA in those few pixels of overlap. */
@media (max-width: 1200px) and (min-width: 901px) {
  .perfume-cta { flex-direction: column; }
  .perfume-cta .btn { white-space: normal; }
}

.price {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold);
}

/* ============================
   Customize Section
============================ */
.customize {
  background:
    radial-gradient(ellipse at center top, rgba(201, 169, 97, 0.06), transparent 70%),
    var(--bg);
}

.customizer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4rem;
}

.customizer-preview {
  position: relative;
}

.preview-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.preview-tabs button {
  padding: 0.65rem 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: all 0.3s;
}
.preview-tabs button.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

.preview-stage {
  background:
    radial-gradient(ellipse at center, rgba(201, 169, 97, 0.12), transparent 60%);
  padding: 2rem;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  min-height: 440px;
}

.bottle-preview svg, .box-preview svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.7));
}
.box-preview svg { max-width: 420px; }

.customizer-controls h3 {
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.customizer-controls > p {
  color: var(--text-muted);
  margin-bottom: 2.5rem;
}

.control-step {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  padding-left: 3rem;
}

.control-step:last-of-type { border-bottom: none; }

.step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--gold);
}

.control-step label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 1rem;
}

.scent-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.scent-pills button {
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 50px;
  font-size: 0.78rem;
  color: var(--text);
  transition: all 0.3s;
}
.scent-pills button:hover { border-color: var(--gold-soft); }
.scent-pills button.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

.upload-zone {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.upload-zone:hover {
  border-color: var(--gold);
  background: rgba(201, 169, 97, 0.04);
  color: var(--cream);
}
.upload-zone svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--gold); }

.upload-error {
  margin-top: 0.65rem;
  font-size: 0.8rem;
  color: #e08a72;
}

.control-step input[type="text"] {
  width: 100%;
  padding: 1rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--cream);
  transition: border 0.3s;
}
.control-step input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
}

.customizer-footer {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.customizer-price .label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.customizer-price .amount {
  font-family: var(--serif);
  font-size: 1.85rem;
  color: var(--gold);
}

/* ============================
   Coupons
============================ */
.coupons {
  background: var(--bg-2);
}

.coupon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.coupon-card {
  display: flex;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-4));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: all 0.5s var(--transition);
}

.coupon-card::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--bg-2);
  border-radius: 50%;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
}

.coupon-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -24px rgba(201, 169, 97, 0.3);
}

.coupon-card.featured {
  border-color: var(--gold-soft);
  background: linear-gradient(135deg, var(--bg-4), #2e2118);
}

.coupon-left {
  width: 35%;
  background:
    radial-gradient(circle at center, rgba(201, 169, 97, 0.15), transparent 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  border-right: 1.5px dashed var(--line);
  position: relative;
}

.coupon-discount {
  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 0.9;
  color: var(--gold);
  font-weight: 500;
}

.coupon-label {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: 0.5rem;
}

.coupon-right {
  flex: 1;
  padding: 2rem;
}

.coupon-tag {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.coupon-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg);
  border: 1px dashed var(--gold-soft);
  border-radius: var(--radius);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1rem;
}
.coupon-code span:first-child {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}
.coupon-code button {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  transition: all 0.3s;
}
.coupon-code button:hover {
  background: var(--gold);
  color: var(--bg);
}

.coupon-right p { font-size: 0.85rem; color: var(--text-muted); }
/* Cream highlight on EXCLUSIVE CODE so the keyword pops against the muted body copy. */
.coupon-right p strong { color: var(--cream); font-weight: 600; letter-spacing: 0.04em; }

.coupons-cta {
  text-align: center;
  margin-top: 3rem;
  color: var(--text-muted);
}
.coupons-cta a {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 2px;
  transition: border 0.3s;
}
.coupons-cta a:hover { border-color: var(--gold); }

/* ============================
   Customized Editions Showcase
============================ */
.customized-editions {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.ce-tabs {
  display: inline-flex;
  position: relative;
  margin: 0 auto 3.5rem;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 50px;
  padding: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}
.ce-tabs button {
  padding: 0.75rem 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 50px;
  transition: all 0.4s var(--transition);
  white-space: nowrap;
}
.ce-tabs button:hover { color: var(--cream); }
.ce-tabs button.active {
  background: var(--gold);
  color: var(--bg);
}

.ce-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.ce-card {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.5s var(--transition);
}
.ce-card:hover {
  border-color: var(--gold-soft);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
}
.ce-card picture {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-3);
}
.ce-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.6s var(--transition);
}
.ce-card:hover img { transform: scale(1.04); }

.ce-meta {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--line);
}
.ce-meta h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--cream);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}
.ce-meta p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.ce-note {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.ce-note a {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 1px;
}
.ce-note a:hover { border-color: var(--gold); }


/* ============================
   Academy (Coming Soon)
============================ */
.academy {
  background: var(--bg);
}

.academy-card {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  background:
    radial-gradient(ellipse at center top, rgba(201, 169, 97, 0.1), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 5rem 3rem;
  position: relative;
}

.badge {
  display: inline-block;
  background: var(--gold);
  color: var(--bg);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  margin-bottom: 2rem;
}

.academy-card h2 { margin-bottom: 1.5rem; }
.academy-card > p {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto 2.5rem;
}
/* Intro paragraph only — uppercase with two cream highlight words. */
.academy-card > p.academy-intro {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.academy-card > p.academy-intro strong {
  color: var(--cream);
  font-weight: 500;
}

.academy-collab {
  margin-bottom: 2.5rem;
}

.collab-logo {
  padding: 1.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 500;
  color: #fff;
  background: var(--bg-2);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.4;
}
.collab-logo picture { display: block; }
.collab-logo img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.form-note {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ============================
   Cart page (/cart.html) — empty state + line items + summary aside
   Page header is the shared .page-header pattern used by policy/cart/checkout.
============================ */
.cart-page {
  padding: 8rem 0 6rem;
  background: var(--bg);
  color: var(--cream);
  min-height: 70vh;
  /* Mobile safety: prevent any nested element (long IBAN, fixed-width QR,
     etc.) from triggering horizontal scroll on the entire page. */
  overflow-x: hidden;
}
.cart-page .page-header { text-align: center; margin-bottom: 3.5rem; }
.cart-page .page-header .eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.cart-page .page-header h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}
.cart-page .page-header h1 em { font-style: italic; color: var(--gold); }

/* Empty cart state */
.cart-empty {
  text-align: center;
  padding: 3rem 1rem;
  max-width: 480px;
  margin: 0 auto;
}
.cart-empty svg {
  width: 64px;
  height: 64px;
  color: var(--gold);
  opacity: 0.6;
  margin-bottom: 1.5rem;
}
.cart-empty h2 {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  margin: 0 0 0.75rem;
  color: var(--cream);
}
.cart-empty p {
  color: var(--text-muted);
  margin: 0 0 2rem;
  line-height: 1.6;
}

/* Populated cart grid — items on the left, summary on the right (sticky). */
.cart-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3rem;
  align-items: start;
}
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Each line item */
.cart-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  align-items: start;
}
.cart-item-thumb {
  display: block;
  width: 120px;
  aspect-ratio: 4 / 5;
  background: var(--bg-3);
  border-radius: 6px;
  overflow: hidden;
}
.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-item-details h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  color: var(--cream);
}
.cart-item-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cart-item-custom {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 0.3rem;
}
.cart-item-custom strong { color: var(--cream); font-weight: 500; }
.cart-item-price {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--gold);
  margin-top: 0.6rem;
}
.cart-item-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
}
.cart-item-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.cart-item-qty button {
  width: 32px;
  height: 36px;
  background: transparent;
  color: var(--cream);
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cart-item-qty button:hover:not(:disabled) { background: rgba(201, 169, 97, 0.1); color: var(--gold); }
.cart-item-qty button:disabled { opacity: 0.3; cursor: not-allowed; }
.cart-item-qty input {
  width: 44px;
  height: 36px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.92rem;
  -moz-appearance: textfield;
}
.cart-item-qty input::-webkit-outer-spin-button,
.cart-item-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-item-line-total {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--cream);
  font-weight: 500;
}
.cart-item-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-item-remove svg { width: 18px; height: 18px; }
.cart-item-remove:hover { color: #e07d5a; background: rgba(224, 125, 90, 0.08); }

/* Order summary aside (sticky on desktop) */
.cart-summary {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  position: sticky;
  top: 6rem;
}
.cart-summary h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--cream);
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.7rem 0;
  font-size: 0.95rem;
  color: var(--cream);
}
.cart-summary-row.cart-summary-note {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.cart-summary-row.cart-summary-total {
  border-top: 1px solid var(--line);
  margin-top: 0.5rem;
  padding-top: 1rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold);
  font-weight: 500;
}
.cart-summary-note-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 1rem 0 1.5rem;
}
/* Free-shipping badge in the summary row. */
.cart-summary-free {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.1em;
}
/* Inline shipping-rates reference shown on /checkout under the totals block. */
.cart-summary-shipping-rates {
  margin: 1.25rem 0 1.5rem;
  padding: 0.85rem 1rem;
  background: rgba(201, 169, 97, 0.05);
  border: 1px solid rgba(201, 169, 97, 0.15);
  border-radius: 6px;
}
.cart-summary-shipping-rates p {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}
.cart-summary-shipping-rates ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.cart-summary-shipping-rates li { padding: 0.15rem 0; }
.cart-summary-shipping-rates strong { color: var(--cream); }
.cart-summary .btn-block {
  display: block;
  width: 100%;
  text-align: center;
}
.cart-summary-continue {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: color 0.2s;
}
.cart-summary-continue:hover { color: var(--gold); }

/* Mobile — stack everything, hide sticky behaviour */
@media (max-width: 900px) {
  .cart-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cart-summary { position: static; }
}

/* ----------------------------------------------------------------
   Checkout page extensions on top of cart-page/grid above.
---------------------------------------------------------------- */
.checkout-form { display: flex; flex-direction: column; gap: 2rem; }
.checkout-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  background: var(--bg-2);
}
.checkout-section legend {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--cream);
  padding: 0 0.6rem;
  margin-left: -0.6rem;
}
.checkout-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.checkout-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
.checkout-form .checkout-full { margin-top: 1rem; }
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form select,
.checkout-form textarea {
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--cream);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
}
.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-3);
}
.checkout-form textarea { resize: vertical; min-height: 80px; }
.checkout-note {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0.75rem 0 1rem;
}
.checkout-note strong { color: var(--cream); font-weight: 500; }
/* Per-field hint under inputs — small, muted, non-uppercase. */
.checkout-field-note {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  margin-top: 0.5rem;
  line-height: 1.55;
}

.checkout-discount-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
}
.checkout-discount-row input {
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
}
.checkout-discount-row .btn { padding: 0 1.5rem; }

.checkout-discount-applied {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.12), rgba(201, 169, 97, 0.04));
  border: 1px solid rgba(201, 169, 97, 0.35);
  color: var(--cream);
  padding: 0.85rem 1rem;
  border-radius: 6px;
  font-size: 0.88rem;
}
.checkout-discount-applied svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
.checkout-discount-applied strong { color: var(--gold); font-weight: 600; }
.checkout-discount-remove {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.checkout-discount-remove:hover { color: var(--cream); background: rgba(201, 169, 97, 0.1); }

.checkout-error {
  color: #e07d5a;
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}
.checkout-error-block {
  text-align: center;
  padding: 0.85rem;
  background: rgba(224, 125, 90, 0.08);
  border: 1px solid rgba(224, 125, 90, 0.3);
  border-radius: 6px;
}

.checkout-payment-features {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.checkout-payment-features li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: var(--cream);
}
.checkout-payment-features svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; }

.checkout-submit {
  font-size: 0.85rem;
  padding: 1.2rem 2rem;
  letter-spacing: 0.22em;
}
.checkout-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.checkout-tos {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0.5rem 0 0;
  line-height: 1.6;
}
.checkout-tos a { color: var(--gold); border-bottom: 1px solid var(--gold-soft); }
.checkout-tos a:hover { border-color: var(--gold); }

/* Order summary line items on the right */
.checkout-summary { padding: 1.5rem; }
.checkout-summary-items {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 320px;
  overflow-y: auto;
}
.checkout-summary-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.75rem;
  align-items: center;
}
.checkout-summary-item picture {
  width: 56px;
  aspect-ratio: 4 / 5;
  background: var(--bg-3);
  border-radius: 4px;
  overflow: hidden;
  display: block;
}
.checkout-summary-item img { width: 100%; height: 100%; object-fit: contain; }
.checkout-summary-item-details { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.checkout-summary-item-name {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--cream);
  line-height: 1.3;
}
.checkout-summary-item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.checkout-summary-item-custom {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}
.checkout-summary-item-price {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--cream);
  white-space: nowrap;
}
/* Inline "remove" ✕ on each /checkout summary line. Sits to the right of the price. */
.checkout-summary-item-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.4rem;
  transition: color 0.2s, background 0.2s;
}
.checkout-summary-item-remove svg { width: 14px; height: 14px; }
.checkout-summary-item-remove:hover {
  color: #e07d5a;
  background: rgba(224, 125, 90, 0.1);
}

@media (max-width: 600px) {
  .checkout-row { grid-template-columns: 1fr; gap: 0.85rem; }
  .checkout-section { padding: 1.25rem; }
  .checkout-discount-row { grid-template-columns: 1fr; }
  .checkout-summary-items { max-height: 240px; }
}

/* ----------------------------------------------------------------
   Thank-you page — centred confirmation card with steps + actions.
---------------------------------------------------------------- */
.thank-you-page .container {
  display: flex;
  justify-content: center;
}
.thank-you-card {
  max-width: 640px;
  width: 100%;
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3rem 2.5rem;
}
.thank-you-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.thank-you-icon svg {
  width: 80px;
  height: 80px;
  color: var(--gold);
}
.thank-you-card .eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.thank-you-card h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--cream);
}
.thank-you-card h1 em { font-style: italic; color: var(--gold); }
.thank-you-lead {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 2rem;
  font-size: 1rem;
}
.thank-you-details {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
}
.thank-you-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
  font-size: 0.9rem;
}
.thank-you-detail-row span { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; }
.thank-you-detail-row strong {
  font-family: var(--serif);
  color: var(--cream);
  font-size: 1.05rem;
  font-weight: 500;
}
.thank-you-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  text-align: left;
  counter-reset: tysteps;
}
.thank-you-steps li {
  counter-increment: tysteps;
  position: relative;
  padding: 1rem 0 1rem 3rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.thank-you-steps li:last-child { border-bottom: none; }
.thank-you-steps li::before {
  content: counter(tysteps);
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.35);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.thank-you-steps li strong { color: var(--cream); font-weight: 500; }
.thank-you-actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.thank-you-support {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}
.thank-you-support a { color: var(--gold); border-bottom: 1px solid var(--gold-soft); }
.thank-you-support a:hover { border-color: var(--gold); }

@media (max-width: 600px) {
  .thank-you-card { padding: 2rem 1.5rem; }
  .thank-you-actions .btn { width: 100%; }
}
@media (max-width: 600px) {
  .cart-page { padding: 6rem 0 4rem; }
  .cart-item {
    grid-template-columns: 90px 1fr;
    padding: 1rem;
    gap: 1rem;
  }
  .cart-item-thumb { width: 90px; }
  .cart-item-controls {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
  }
  .cart-item-details h3 { font-size: 1.1rem; }
}

/* ============================
   Size selector pill toggle — used on collection cards (replaces the static
   "50 ml" pill) and on product detail pages above Add to Cart.
   Behaviour comes from inline setSize() + window.cardSize state.
============================ */
.pill-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-2);
  vertical-align: middle;
}
.pill-toggle button {
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.pill-toggle button:hover { color: var(--cream); }
.pill-toggle button.is-active {
  background: var(--gold);
  color: var(--bg);
  font-weight: 600;
}
/* When the toggle replaces a .pill in the perfume-pills row, it sits inline. */
.perfume-pills .pill-toggle { padding: 0; }

/* On product detail pages: a labeled row above Add to Cart.
   `flex-basis: 100%` makes the size row take its own line inside the
   .product-detail-actions flex container, so the Add-to-Cart button
   below it matches the size of the sibling CTAs instead of stretching. */
.product-size-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
  flex-basis: 100%;
}
.product-size-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================
   Cart icon (header) + toast
   The header cart link sits to the LEFT of the hamburger. Badge appears
   only when count > 0. The toast is a fixed bottom-right pill that
   slides in after add-to-cart, auto-dismisses after ~2.4s.
============================ */
.cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--cream);
  border: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.cart-icon svg { width: 22px; height: 22px; }
.cart-icon:hover {
  color: var(--gold);
  border-color: rgba(201, 169, 97, 0.35);
  background: rgba(201, 169, 97, 0.05);
}
.cart-icon-badge {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(10, 6, 4, 0.85);
}
[x-cloak] { display: none !important; }

/* Toast — fixed bottom-right slide-in confirmation. */
.cart-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.15), rgba(201, 169, 97, 0.05));
  border: 1px solid rgba(201, 169, 97, 0.4);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100vw - 3rem);
}
.cart-toast svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
@media (max-width: 600px) {
  .cart-toast {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    font-size: 0.85rem;
  }
}

/* ============================
   Footer
============================ */
.footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 5rem 0 2rem;
}

.footer-grid {
  display: grid;
  /* 6 columns: brand (wider) + Shop + Support + Legal + Contact + Stay Connected. */
  grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 1.2fr 1.2fr;
  gap: 2.25rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--line);
}
/* Vertical dividers between footer columns (skip the last column). Subtle gold-tint
   line that matches the existing border-bottom on the grid. */
.footer-grid > * + * {
  position: relative;
}
.footer-grid > * + *::before {
  content: '';
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: -1.125rem;  /* half of the 2.25rem gap */
  width: 1px;
  background: rgba(201, 169, 97, 0.12);
}

.footer-contact p,
.footer-contact address {
  font-size: 0.9rem;
  /* Same muted text colour as the Shop / Support / Legal columns so the whole
     footer reads as one consistent block (was briefly cream — reverted 2026-06-12). */
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  font-style: normal;
  line-height: 1.55;
}
.footer-contact a {
  color: var(--text-muted);
  transition: color 0.3s;
}
.footer-contact a:hover { color: var(--gold); }

/* Iconified contact rows — small gold-tinted SVG at start, content right of it. */
.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.footer-contact-row svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--gold);
  opacity: 0.85;
}
.footer-contact-row > span,
.footer-contact-row > a {
  flex: 1 1 auto;
  min-width: 0;
}
/* (Removed 2026-06-12 — Address 1/2 bold labels stripped, so the strong
   override is no longer needed. Kept the class on the wrapper for layout.) */

.footer-brand .logo { margin-bottom: 1.5rem; }
.footer-brand p {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 320px;
  margin-bottom: 2rem;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}

.socials a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: all 0.3s;
}
.socials a:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  transform: translateY(-3px);
}
.socials svg { width: 18px; height: 18px; }

.footer-col h3 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  font-family: var(--sans);
  font-weight: 500;
}

.footer-col ul li { margin-bottom: 0.85rem; }
.footer-col a {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--gold); }

.footer-col p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.footer-form {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.footer-form input {
  flex: 1;
  padding: 0.85rem 1rem;
  background: transparent;
  border: none;
  color: var(--cream);
}
.footer-form input:focus { outline: none; }
.footer-form button {
  width: 48px;
  background: var(--gold);
  color: var(--bg);
  font-size: 1.2rem;
  transition: background 0.3s;
}
.footer-form button:hover { background: var(--gold-light); }

/* Inline success state for the footer subscribe form */
.footer-success {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: var(--radius);
  background: rgba(201, 169, 97, 0.06);
  color: var(--cream);
  font-size: 0.85rem;
}
.footer-success svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 1rem;
}
.payment-note { color: var(--gold); }

/* ============================
   Responsive
============================ */
/* Footer collapse — 6 cols at desktop ≥1200, 3 cols at tablet, 2 cols at small tablet,
   single column at phone (handled in 600px block below). */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem 2.5rem;
  }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablet — clean 2-column grid before collapsing to a single column on phones. */
@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(10, 6, 4, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transform: translateX(100%);
    /* Hide when closed so horizontal panning on mobile can't reveal the off-screen menu. */
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.5s var(--transition), visibility 0s linear 0.5s;
    margin: 0;
  }
  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.5s var(--transition), visibility 0s linear 0s;
  }
  .nav-links a { font-size: 1rem; }

  .hamburger { display: flex; }

  .customizer {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 2.5rem 1.75rem;
  }

  .perfume-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .coupon-grid {
    grid-template-columns: 1fr;
  }

  .ce-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .perfume-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .container { padding: 0 1.25rem; }
  section { padding: 4rem 0; }
  .section-header { margin-bottom: 3rem; }

  .announcement-track { animation-duration: 25s; gap: 2rem; }

  /* Smaller header logo on phones so the wide 4:1 lockup doesn't crowd the
     hamburger on narrow screens (320–360px). Footer logo is square so a
     single 110px size works on all widths — no override needed there. */
  .logo img { height: 52px; }

  .academy-card { padding: 3rem 1.5rem; }

  /* Footer collapses to a single column on phones so the "Stay In Touch"
     column doesn't end up floating alone in half the row. */
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3rem; }
  /* Hide the vertical column dividers on mobile — they'd render as a stray
     vertical line between stacked rows when the grid collapses to 1 column. */
  .footer-grid > * + *::before { display: none; }
  .footer-brand { grid-column: auto; }

  .footer-bottom { flex-direction: column; text-align: center; }

  .coupon-card { flex-direction: column; }
  .coupon-left { width: 100%; border-right: none; border-bottom: 1.5px dashed var(--line); padding: 1.75rem 1rem; }
  /* Decorative perforation cutout was positioned for the desktop horizontal
     split — hide it once the card stacks vertically. */
  .coupon-card::before { display: none; }
  .coupon-discount { font-size: 3.25rem; }

  .nav-links { padding: 0; }

  /* Hero slider arrows shrink + tuck into the corner so they stop covering
     the customized photo artwork on the right side of the banner. */
  .hero-nav { bottom: 3%; right: 3%; gap: 0.35rem; }
  .hero-nav-btn { width: 34px; height: 34px; }
  .hero-nav-btn svg { width: 14px; height: 14px; }

  /* Customizer preview no longer reserves desktop-sized vertical space. */
  .preview-stage { min-height: 320px; padding: 1.25rem; }
  .bottle-preview svg { max-width: 220px; }
  .box-preview svg    { max-width: 320px; }

  /* Perfume cards: trim the visual area + bottle so cards aren't oversized. */
  .perfume-visual { height: 300px; }
  .perfume-info   { padding: 1.5rem; }
  .perfume-info h3 { font-size: 1.6rem; }

  /* Customizer controls breathe better at narrow widths. */
  .customizer-controls h3 { font-size: 1.6rem; }
  .control-step { padding-left: 2.75rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; }
  .customizer-price .amount { font-size: 1.5rem; }

  /* Disclaimer block doesn't need 1.75rem horizontal padding on a phone. */
  .disclaimer { padding: 1.25rem; font-size: 0.8rem; margin-top: 2.5rem; }

  /* Per-perfume thumb strip — slightly tighter on phones. */
  .perfume-thumbs { padding: 0.75rem 0.85rem; gap: 0.4rem; }
  .thumb { width: 48px; height: 48px; padding: 3px; }

  /* Customized Editions — single column, more breathable spacing. */
  .ce-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .ce-tabs { margin-bottom: 2.5rem; gap: 0.15rem; padding: 0.3rem; }
  .ce-tabs button { padding: 0.6rem 1.1rem; font-size: 0.65rem; letter-spacing: 0.14em; }
  .ce-card picture { aspect-ratio: 4 / 5; }
  .ce-meta { padding: 1rem 1.25rem 1.25rem; }
  .ce-meta h3 { font-size: 1.1rem; }
}

/* Override the .bottle width/height defaults so the bottle PNG sits inside its
   container responsively rather than being stretched to a fixed 200×320 box. */
img.bottle {
  width: auto;
  height: auto;
  max-width: 92%;
  max-height: 100%;
  object-fit: contain;
}

/* Disclaimer block in Customize section (per client RTF — IMPORTANT NOTE 1) */
.disclaimer {
  margin: 3.5rem auto 0;
  max-width: 880px;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}
.disclaimer strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
}

/* ============================
   Policy pages (privacy / refund / shipping / terms)
============================ */
.policy-body .header {
  background: var(--bg-2);
  border-bottom: 1px solid rgba(201, 169, 97, 0.22);
}
.policy-body .header.is-scrolled {
  background: var(--bg-2);
  border-bottom: 1px solid rgba(201, 169, 97, 0.25);
}

.policy-page {
  padding: 4rem 0 5rem;
  min-height: 70vh;
}

.policy-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.policy-header .eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.policy-header h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 0.85rem;
  color: var(--text);
}
.policy-header h1 em {
  font-style: italic;
  color: var(--gold);
}
.policy-updated {
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.policy-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0 auto 3rem;
  max-width: 760px;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.3);
}
.policy-toc a {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.7rem 1rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: calc(var(--radius) - 4px);
  transition: all 0.3s;
}
.policy-toc a:hover {
  color: var(--text);
}
.policy-toc a.active {
  background: var(--gold);
  color: var(--bg);
  font-weight: 500;
}

.policy-content {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--sans);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.75;
}
.policy-content > p:first-of-type {
  font-size: 1.08rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.policy-content h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--gold);
  margin: 2.5rem 0 1rem;
  letter-spacing: 0.01em;
}
.policy-content p {
  margin-bottom: 1.1rem;
  color: var(--text);
}
.policy-content ul,
.policy-content ol {
  margin: 0 0 1.4rem 1.25rem;
  padding-left: 0.75rem;
}
.policy-content li {
  margin-bottom: 0.6rem;
  color: var(--text);
}
.policy-content li::marker {
  color: var(--gold);
}
.policy-content strong {
  color: var(--text);
  font-weight: 600;
}
.policy-content em {
  color: var(--text-muted);
  font-style: italic;
}
.policy-content a:not(.btn) {
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 169, 97, 0.3);
  transition: border-color 0.3s;
}
.policy-content a:not(.btn):hover {
  border-bottom-color: var(--gold);
}

.policy-contact {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.25);
}
.policy-contact li {
  margin-bottom: 0.5rem;
}
.policy-contact li:last-child {
  margin-bottom: 0;
}

/* Policy page responsive */
@media (max-width: 700px) {
  .policy-page { padding: 5.5rem 0 3.5rem; }
  .policy-toc {
    flex-direction: column;
    gap: 0.25rem;
  }
  .policy-toc a { padding: 0.7rem 1rem; }
  .policy-content { font-size: 0.95rem; }
  .policy-content h2 { font-size: 1.35rem; }
  .policy-contact { padding: 1.25rem; }
}

/* ============================
   New components added 2026-05-11
   (Partner Codes refactor, Academy → WhatsApp waitlist, 5-column footer)
============================ */

/* WhatsApp button — used in Customize support row, Academy CTA, Footer column 1+6. */
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.4s var(--transition);
  text-decoration: none;
}
.whatsapp-btn:hover {
  background: rgba(201, 169, 97, 0.12);
  border-color: var(--gold);
  color: var(--cream);
}
.whatsapp-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.whatsapp-btn-block {
  display: flex;
  width: 100%;
  max-width: 320px;
}

/* Customize section — support helper at the bottom of the controls column. */
.customizer-support {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}
.customizer-support-label {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--cream);
}

/* Academy section — refreshed headings + 4-partner grid + big WA CTA. */
/* Selector deliberately matches `.academy-card > p` specificity so the cream
   color override actually wins over the parent rule's --text-muted. */
.academy-card > p.academy-tagline {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--cream);
  margin: 0.5rem auto 0.75rem;
  max-width: 720px;
}
.academy-collab-heading {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 1.25rem;
  text-align: center;
  letter-spacing: 0.04em;
}
.academy-collab-grid {
  display: grid;
  /* 6 logos arranged in 2 rows × 3 cols (was 4×1 before the 2026-06-10 expansion). */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.academy-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 2.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
}
.academy-cta svg { width: 20px; height: 20px; }
.academy .form-note { margin-top: 1rem; }

/* ============================
   Academy — Official Organizer & Collaborator
   Added 2026-05-30. Two-logo block under the WhatsApp CTA, separated by a
   horizontal divider line. Heading sits over the divider with a centered chip.
============================ */
.academy-organizer {
  margin-top: 3rem;
  padding-top: 2.5rem;
  position: relative;
}
.academy-organizer-heading {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin: 0 0 2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.academy-organizer-heading::before,
.academy-organizer-heading::after {
  content: '';
  flex: 0 1 80px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}
.academy-organizer-heading span { white-space: nowrap; }

.academy-organizer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 720px;
  margin: 0 auto 2rem;
  align-items: end;
}
.organizer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.organizer-label {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: 0.02em;
}
.organizer-card picture { display: block; }
.organizer-card img {
  width: auto;
  height: 130px;
  max-width: 100%;
  object-fit: contain;
}

/* ============================
   Academy sub-sections — Official Organizer (single, centered card),
   Collaborators (3-logo row), Strategic Digital Growth Partners (3-logo row).
   Added 2026-06-10 per client academy redesign mockup.
============================ */
.academy-single-organizer {
  display: flex;
  justify-content: center;
  margin: 0 auto 2rem;
  padding: 1.25rem 1.5rem;
  max-width: 320px;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: var(--radius);
  background: rgba(201, 169, 97, 0.04);
}
.academy-single-organizer img {
  width: auto;
  height: 150px;
  max-width: 100%;
  object-fit: contain;
}

.academy-partner-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 820px;
  margin: 0 auto 2rem;
}
.academy-partner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 130px;
}
.academy-partner-card picture { display: block; }
.academy-partner-card img {
  width: auto;
  height: 90px;
  max-width: 100%;
  object-fit: contain;
}

.academy-organizer-note {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.academy-organizer-note strong { color: var(--cream); font-weight: 500; }

/* Mobile: stack the academy partner rows + tighten the organizer divider. */
@media (max-width: 600px) {
  .academy-organizer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .organizer-card img { height: 110px; }
  .academy-organizer-heading::before,
  .academy-organizer-heading::after { flex: 0 1 30px; }
  /* New 2026-06-10 partner rows + Vision Partners grid collapse on phones. */
  .academy-partner-row { grid-template-columns: 1fr; gap: 0.85rem; max-width: 320px; }
  .academy-partner-card { min-height: 110px; padding: 0.85rem 1rem; }
  .academy-partner-card img { height: 70px; }
  .academy-single-organizer img { height: 120px; }
}
/* Tablet mid-range: shrink the partner-row cards before they get cramped. */
@media (max-width: 900px) and (min-width: 601px) {
  .academy-partner-card img { height: 70px; }
}

/* Partner Codes — placeholder label replaces the old MEXIT3 / MAXIT10 code text.
   Selector intentionally higher-specificity than `.coupon-code span:first-child`. */
.coupon-code .coupon-placeholder,
.coupon-code span.coupon-placeholder {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  flex: 1;
  text-align: center;
  padding: 0.4rem 0;
}

/* Legacy Gallery cards — small inspiration note added 2026-05-10. */
.ce-disclaimer-note {
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  line-height: 1.5;
}
.ce-disclaimer-note strong {
  color: var(--gold);
  font-weight: 500;
}

/* Footer refresh 2026-05-10 — new columns + trust badges + bottom strip. */
.footer-eyebrow {
  display: block;
  margin: 1.25rem 0 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-helper-note {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.footer-hours {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.footer-or {
  display: flex;
  align-items: center;
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}
.footer-or::before,
.footer-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.footer-or span { padding: 0 0.8rem; }
.footer-privacy-note {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.footer-operated-by {
  margin: 0 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Trust badges row under the main footer grid. */
.trust-badges {
  list-style: none;
  margin: 2.5rem 0 1.5rem;
  padding: 1.5rem 1rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-badges li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
}
.trust-badges svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  color: var(--gold);
}
.trust-badges strong {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cream);
  text-transform: uppercase;
}
.trust-badges span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Responsive: stack the 5-up trust row on tablets, full-stack on phones. */
@media (max-width: 1000px) {
  .trust-badges { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .trust-badges {
    grid-template-columns: 1fr;
    padding: 1.25rem;
    gap: 0.85rem;
  }
  .academy-collab-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Product detail pages (silver.html / gold.html / black-velvet.html) */
.product-detail { max-width: 760px; }
.policy-breadcrumb { margin-bottom: 1.5rem; font-size: 0.9rem; }
.policy-breadcrumb a { color: var(--gold); text-decoration: none; }
.policy-breadcrumb a:hover { text-decoration: underline; }
.product-detail-header { margin-bottom: 1.75rem; }
.product-detail-header h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0.25rem 0 0.4rem; }
.product-type { color: var(--text-muted); font-size: 0.9rem; }
.product-detail-pricing {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.price-block { flex: 1; min-width: 180px; }
.price-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.price-block p { margin: 0.2rem 0; font-size: 0.95rem; }
.price-breakdown { color: var(--text-muted); font-size: 0.82rem; }
.product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.product-detail-section { margin-bottom: 2.25rem; }
.product-detail-section h2 {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.fragrance-notes-full th { font-weight: 600; width: 130px; }
.scent-profile-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.scent-profile-list li::before { content: "✦ "; color: var(--gold); font-size: 0.75em; }

/* FAQ page */
.faq-section { margin-bottom: 2.5rem; }
.faq-section > h2 {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}
.faq-item { margin-bottom: 1.5rem; }
.faq-item h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--cream);
}
.policy-note {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--gold);
  font-size: 0.88rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .product-detail-actions { flex-direction: column; }
  .product-detail-pricing { flex-direction: column; gap: 1rem; }
}

/* ============================================================
   PAYMENT OPTIONS — Option B checkout block (2026-06-18)
   Built to match the client's mockup for a multi-method payment
   screen: PayFast + 2 bank accounts + 3 mobile wallets + proof
   upload + transaction-ID field + WhatsApp confirmation banner.
============================================================ */

.checkout-discount-auto {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 0.3rem;
}

.checkout-payment-banner {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: rgba(201, 169, 97, 0.08);
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}
.checkout-payment-banner svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
.checkout-payment-banner p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Each payment method is a <label> with a hidden radio + visible body.
   Clicking anywhere on the card toggles the radio. */
/* Specificity override: `.checkout-form label` uppercases every form-field
   label, but `.payment-option` labels carry brand names + bank titles that
   must keep their real casing (easypaisa, JazzCash, Muhammad Yaseen).
   Selector below has specificity 0-2-1 to win over .checkout-form label (0-2-0). */
.checkout-form label.payment-option {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--cream);
}

.payment-option {
  display: block;
  background: var(--bg-3);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.payment-option:hover { border-color: rgba(201, 169, 97, 0.45); }
.payment-option input[type="radio"] {
  position: absolute;
  top: 0.95rem;
  right: 0.95rem;
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}
.payment-option.is-selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.08), rgba(201, 169, 97, 0.02));
}
.payment-option-body { padding-right: 2rem; }

/* Layout per client mockup: PayFast + bank cards use a horizontal flex with
   radio on the LEFT, content in the middle, QR/logo on the RIGHT (not the
   default TOP-RIGHT radio that the wallet cards use).
   Specificity 0,2,1 to defeat .checkout-form label (0,2,0) which forces
   flex-direction: column on every form label. */
.checkout-form label.payment-option-radio-left {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem;
}
.checkout-form label.payment-option-radio-left input[type="radio"] {
  position: static;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.checkout-form label.payment-option-radio-left .payment-option-body {
  flex: 1;
  min-width: 0;
  padding-right: 0;
}

/* Official PayFast logo (extracted from client mockup) in the right-hand
   slot of the PayFast card. The source PNG/WebP is 82×32 — display at
   roughly the same intrinsic size so it matches the mockup proportions. */
.payment-payfast-logo {
  display: block;
  flex-shrink: 0;
  align-self: center;
}
.payment-payfast-logo img {
  display: block;
  height: 32px;
  width: auto;
}

/* Bank QR placeholder when moved to the RIGHT slot (radio-left layout) —
   becomes a vertical phone-icon block instead of a wide bottom rectangle. */
.checkout-form label.payment-option-radio-left > .payment-qr-placeholder {
  flex-shrink: 0;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 0.5rem;
  width: 90px;
  min-height: 90px;
  font-size: 0.62rem;
  line-height: 1.3;
}
.checkout-form label.payment-option-radio-left > .payment-qr-placeholder svg {
  width: 22px;
  height: 30px;
  color: rgba(201, 169, 97, 0.5);
}
.payment-option-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.payment-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: rgba(201, 169, 97, 0.1);
  border-radius: 6px;
  color: var(--gold);
  flex-shrink: 0;
}
.payment-option-icon svg { width: 20px; height: 20px; }
.payment-option-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: 0.01em;
  /* Allow long titles like "Personal Bank Account (Founder & CEO)" to wrap
     inside a narrow mobile viewport instead of pushing the card off-screen. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.payment-option-head {
  flex-wrap: wrap;
  min-width: 0;
}
.payment-option-tag {
  margin-left: auto;
  background: rgba(56, 142, 60, 0.18);
  color: #7ad889;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}
.payment-option-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Bank account details — a small definition list */
.payment-option-details {
  margin: 0.5rem 0 0.75rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.payment-option-details > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.5rem;
}
.payment-option-details dt {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.payment-option-details dd {
  margin: 0;
  color: var(--cream);
  font-family: var(--sans);
  letter-spacing: 0.01em;
  word-break: break-word;
}

.payment-qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(201, 169, 97, 0.35);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* "OR PAY DIRECTLY USING THE OPTIONS BELOW" divider */
.payment-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.5rem 0 1.25rem 0;
  color: rgba(201, 169, 97, 0.7);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.payment-divider::before,
.payment-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.35), transparent);
}
.payment-divider span { white-space: nowrap; }

.payment-section-heading {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 169, 97, 0.8);
  margin: 1.5rem 0 0.85rem 0;
}

/* Mobile wallet grid — 3 columns on desktop, 1 column on narrow phones */
.payment-mobile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.payment-option-wallet {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 1rem 0.85rem;
}
.payment-option-wallet input[type="radio"] {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}
.payment-wallet-brand {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
  padding-right: 1.5rem;
}
.payment-wallet-brand em { font-style: normal; }
.payment-wallet-easypaisa { color: #00a651; }
.payment-wallet-jazzcash  { color: #e30613; }
.payment-wallet-jazzcash em { color: #f7941d; }
.payment-wallet-upaisa    { color: #fac211; }
.payment-wallet-upaisa em { color: #c9a961; font-weight: 500; }
.payment-wallet-number {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}
.payment-option-wallet .payment-qr-placeholder {
  padding: 1.5rem 0.5rem;
  font-size: 0.72rem;
}

/* Payment-proof drag-drop block — only shown when a direct method is picked */
.payment-proof-block {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.payment-proof-drop {
  border: 2px dashed rgba(201, 169, 97, 0.4);
  border-radius: 8px;
  padding: 2rem 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s, border-color 0.2s;
  margin-bottom: 1rem;
}
.payment-proof-drop.is-dragging {
  background: rgba(201, 169, 97, 0.08);
  border-color: var(--gold);
}
.payment-proof-drop.has-file {
  padding: 1rem;
  text-align: left;
}
.payment-proof-empty svg {
  width: 40px;
  height: 40px;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.payment-proof-empty p {
  margin: 0 0 0.85rem 0;
  font-size: 0.88rem;
  color: var(--cream);
}
.payment-proof-empty p span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.payment-proof-pick {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0.55rem 1.4rem;
  font-size: 0.85rem;
}
.payment-proof-meta {
  margin: 0.85rem 0 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.payment-proof-filled {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.payment-proof-filled img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.payment-proof-filled svg {
  width: 40px;
  height: 40px;
  color: var(--gold);
  flex-shrink: 0;
}
.payment-proof-filled-meta {
  flex: 1;
  min-width: 0;
}
.payment-proof-filled-meta strong {
  display: block;
  color: var(--cream);
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.payment-proof-filled-meta span {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.payment-proof-clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.payment-proof-clear:hover { color: #e07d5a; background: rgba(224, 125, 90, 0.1); }

.payment-transaction-id {
  margin-top: 0.5rem;
}
.payment-optional {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* WhatsApp banner — sits below the proof upload as a backup channel */
.payment-whatsapp-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.12), rgba(37, 211, 102, 0.04));
  border: 1px solid rgba(37, 211, 102, 0.35);
  border-radius: 6px;
  text-decoration: none;
  color: var(--cream);
  transition: background 0.2s, border-color 0.2s;
}
.payment-whatsapp-banner:hover {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(37, 211, 102, 0.08));
  border-color: rgba(37, 211, 102, 0.55);
}
.payment-whatsapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}
.payment-whatsapp-icon svg { width: 22px; height: 22px; }
.payment-whatsapp-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}
.payment-whatsapp-text strong { color: var(--cream); font-weight: 500; }
.payment-whatsapp-text span  { color: var(--text-muted); font-size: 0.78rem; }
.payment-whatsapp-btn {
  background: #25d366;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Submit button — adapt to the new lock icon + full-caps label */
.checkout-submit svg {
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
  vertical-align: text-bottom;
}

/* Upsell nudge in the order summary when a partner code is applied
   but the cart hasn't crossed the next tier yet. */
.cart-summary-upsell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: rgba(201, 169, 97, 0.08);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--cream);
  margin: 0.5rem 0;
}
.cart-summary-upsell svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}
.cart-summary-row small {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 0.15rem;
}

/* Thank-you direct-payment reminder block */
.thank-you-direct-payment {
  margin: 1.5rem 0 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.1), rgba(37, 211, 102, 0.03));
  border: 1px solid rgba(37, 211, 102, 0.35);
  border-radius: 8px;
  text-align: left;
}
.thank-you-direct-payment h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--cream);
  margin: 0 0 0.6rem 0;
}
.thank-you-direct-payment p {
  margin: 0 0 1rem 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.thank-you-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.thank-you-whatsapp svg { width: 18px; height: 18px; }
.thank-you-whatsapp:hover {
  background: #1faa55;
  border-color: #1faa55;
}

@media (max-width: 700px) {
  .payment-mobile-grid { grid-template-columns: 1fr; }
  .payment-option-details > div { grid-template-columns: 110px 1fr; gap: 0.4rem; }
  .payment-whatsapp-banner { flex-wrap: wrap; }
  .payment-whatsapp-btn { width: 100%; text-align: center; margin-top: 0.4rem; }

  /* Mobile fix: the horizontal radio-left layout (PayFast + bank cards) overflows
     375px viewports because radio + body + fixed-width-90px QR/logo can't fit.
     Stack vertically instead — radio inline-block on its own row, content full
     width, QR/logo becomes a full-width strip at the bottom. */
  .checkout-form label.payment-option-radio-left {
    flex-direction: column;
    gap: 0.75rem;
  }
  .checkout-form label.payment-option-radio-left > .payment-qr-placeholder {
    width: 100%;
    min-height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
    text-align: left;
  }
  .checkout-form label.payment-option-radio-left > .payment-qr-placeholder svg {
    width: 18px;
    height: 24px;
  }
  /* PayFast logo: align left on its own row instead of crowding the right edge */
  .payment-payfast-logo {
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .payment-option-details > div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  }
  .payment-option-details > div:last-child { border-bottom: none; }
}

/* Aggressive containment for narrow mobile viewports — prevents long IBANs,
   bank names, and titles from pushing the card off-screen. Applied with
   higher specificity than parent .checkout-form label rules to guarantee win. */
@media (max-width: 600px) {
  .checkout-form .payment-option,
  .checkout-form .payment-option-body,
  .checkout-form .payment-option-head,
  .checkout-form .payment-option-details,
  .checkout-form .payment-option-details > div,
  .checkout-form .payment-option-details dd,
  .checkout-form .payment-option-title,
  .checkout-form .payment-qr-placeholder,
  .checkout-form .payment-qr-placeholder span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Force single-column dl on narrow mobile — dt above, dd below */
  .checkout-form .payment-option-details > div {
    display: block;
  }
  .checkout-form .payment-option-details dt {
    display: block;
    font-size: 0.72rem;
    margin-bottom: 0.15rem;
  }
  .checkout-form .payment-option-details dd {
    display: block;
    margin-bottom: 0.5rem;
  }
  /* Card title can't fit next to bank icon at 375px — force title to
     wrap to a new full-width line below the icon. */
  .checkout-form .payment-option-head {
    align-items: flex-start;
  }
  .checkout-form .payment-option-title {
    flex: 1 1 100%;
    font-size: 0.95rem;
    line-height: 1.3;
  }
  .checkout-form .payment-option-icon {
    width: 28px;
    height: 28px;
  }
  .checkout-form .payment-option-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================
   PRE-ORDER SOFT LAUNCH (2026) — banner, card ribbons, struck pricing.
   Everything here is gated by .preorder-active on <html>, which the inline
   head script sets only until 14 Aug 2026. When the class is absent the
   banner, ribbons and "now" prices all disappear and cards fall back to the
   plain original price — so the promo turns itself off with no manual edit.
   ============================================================ */
.preorder-banner { display: none; margin: 0 0 46px; }
.preorder-active .preorder-banner { display: block; }
.preorder-frame {
  position: relative;
  text-align: center;
  padding: clamp(24px, 4vw, 40px) clamp(18px, 4vw, 40px);
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(201,169,97,.10), transparent 60%),
    var(--bg-2);
  box-shadow: 0 0 0 1px rgba(201,169,97,.12) inset, 0 30px 70px -45px rgba(0,0,0,.9);
}
.preorder-frame::before {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid rgba(201,169,97,.30);
  border-radius: 9px; pointer-events: none;
}
.preorder-kicker {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4.5vw, 2.5rem);
  line-height: 1.04; margin: 0;
  color: var(--gold-light);
  letter-spacing: .02em; text-transform: uppercase; font-weight: 600;
}
.preorder-sub {
  margin: .55rem 0 0; color: var(--cream);
  letter-spacing: .16em; text-transform: uppercase;
  font-size: clamp(.82rem, 2.2vw, 1.05rem); font-weight: 500;
}
.preorder-tiers {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 22px auto 0; max-width: 840px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: rgba(10,6,4,.4);
}
.preorder-tiers span {
  flex: 1 1 auto; min-width: 108px; padding: 12px 14px;
  color: var(--text); font-size: .88rem; font-weight: 600; letter-spacing: .06em;
  border-right: 1px solid var(--line); white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
}
.preorder-tiers span:last-child { border-right: 0; }
.preorder-cta { margin-top: 24px; }

/* Card "Pre-Order Offer" ribbon */
.perfume-card { position: relative; }
.preorder-ribbon { display: none; }
.preorder-active .preorder-ribbon {
  display: inline-flex; align-items: center; gap: 6px;
  position: absolute; top: 14px; left: 14px; z-index: 4;
  padding: 6px 12px 6px 10px; border-radius: 6px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #160f06; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 8px 20px -10px rgba(201,169,97,.7);
}
.preorder-ribbon svg { width: 13px; height: 13px; }

/* Card pricing: plain original by default; struck original + gold "now" during pre-order */
.perfume-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-original, .price-now { font-family: var(--serif); }
.price-original { font-size: 1.5rem; color: var(--gold); }
.price-now { display: none; font-size: 1.5rem; color: var(--gold-light); font-weight: 600; }
.preorder-active .price-now { display: inline; }
.preorder-active .price-original {
  font-size: 1.05rem; color: var(--text-muted);
  text-decoration: line-through; text-decoration-color: var(--gold-soft);
}

/* Pre-order text inside the announcement ticker — shown only while promo is live */
.preorder-only { display: none; }
.preorder-active .preorder-only { display: inline; }