/*
Theme Name: Cozma Prima PreFinal
Theme URI: https://cozmaprima.com
Description: Custom child theme of X for the Cozma Prima brand — ceremonial wellness.
Author: Cozma Prima
Author URI: https://cozmaprima.com
Template: x
Text Domain: cozmaprima-prefinal
Version: 1.0.0

*/
/* ============================================================
   COZMA PRIMA — styles.css
   Visual language: space-black, gold, cinematic, ritualistic
   Font swap: replace @import lines to change typefaces
   ============================================================ */

/* ─── TOKENS ─────────────────────────────────────── */
:root {
  color-scheme: dark;
  --black:      #050508;
  --deep:       #080810;
  --gold:       #c9a84c;
  --gold-light: #e8c97a;
  --gold-dim:   #7a5e28;
  --white:      #f5f0e8;
  --mist:       rgba(245,240,232,0.06);
  --border:     rgba(201,168,76,0.18);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Josefin Sans', 'Gill Sans', sans-serif;

  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: clip;   /* on html, NOT body — body overflow traps position:fixed */
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-display);
}

img { display: block; width: 100%; }
a { text-decoration: none; color: inherit; }

/* Starfield — fixed behind entire page, never affects layout */
#starCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1s;
}

/* ─── ORBITAL CURSOR ─────────────────────────────── */
@media (pointer: fine) {
  body { cursor: none; }
}
.cursor-orbital {
  position: fixed;
  top: 0; left: 0;
  width: 80px; height: 80px;
  pointer-events: none;
  z-index: 9999;
  /* canvas positioned by JS */
}

/* ─── NAV ────────────────────────────────────────── */
/* WordPress: becomes header.php template part */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 2rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  mix-blend-mode: normal;
  transition: background 0.6s var(--ease-smooth);
}
.nav.scrolled {
  background: rgba(5,5,8,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1.2rem 4rem;
}
.nav__logo {
  display: block;
  text-decoration: none;
  line-height: 1;
}
.nav__logo img {
  height: 13px;
  width: auto;
  display: block;
  /* SVG fill white via CSS filter */
  filter: brightness(0) invert(1);
}
.nav__logo:hover { color: var(--gold-light); }
.nav__links {
  display: flex;
  gap: 3rem;
  list-style: none;
}
.nav__links a {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: 0.805rem; /* 15% bigger */
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.55);
  transition: color 0.3s;
}
.nav__links a:hover { color: var(--gold); }

/* ─── BUTTONS ────────────────────────────────────── */
.hero__cta .btn,
.contact__cta-wrap .btn,
.btn {
  display: inline-block !important;
  font-family: var(--font-ui) !important;
  font-weight: 200 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.8rem !important;
  border: 1px solid #e8450a !important;
  color: #e8450a !important;
  background: transparent !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  cursor: none;
  position: relative;
  overflow: hidden;
  transition: color 0.4s;
  text-decoration: none !important;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #e8450a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
  z-index: -1;
  border-radius: 50px;
}
.btn:hover { color: var(--black) !important; }
.btn:hover::before { transform: scaleX(1); }

.btn--ghost {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: rgba(245,240,232,0.45);
  position: relative;
}
.btn--ghost::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: rgba(245,240,232,0.3);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.btn--ghost:hover::after { transform: scaleX(1); }
.btn--ghost:hover { color: var(--white); }

/* ─── SECTION LABEL ──────────────────────────────── */
.section-label {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: 0.78rem; /* 30% bigger */
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 2rem;
}

/* ─── REVEAL ANIMATION (JS-driven) ──────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.2s; }
.reveal-delay-2 { transition-delay: 0.4s; }
.reveal-delay-3 { transition-delay: 0.6s; }

/* ─── 1. HERO ─────────────────────────────────────
   WordPress: becomes front-page hero template part
   200vh height gives scroll space for pinned animations.
   ─────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 130vh;           /* reduced — handpill appears sooner */
  background: var(--black);
}

/* Sticky inner — holds everything pinned while parent scrolls */
.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  /* background-image set via inline style in front-page.php */
  background-size: cover;
  background-position: 25% center; /* keeps figure visible */
  opacity: 0.5;
  transform: scale(1.1);   /* starts zoomed in, JS zooms out to 1.0 */
  transform-origin: center;
  will-change: transform, opacity;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(5,5,8,0.6) 70%),
              linear-gradient(to bottom, transparent 30%, var(--black) 85%);
  pointer-events: none;
}

/* Orbital overlay — fixed, full viewport.
   z-index: 3 keeps it above section solid backgrounds during the zoom-through.
   JS fades opacity to 0 after the transition completes — no ghost artifacts.
   Below nav (z-index: 100) and section interactive content (z-index: 10+). */
#orbitalOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99; /* below nav(100), above all slides */
}

#orbitalCanvas {
  display: block;
  position: absolute;
  inset: 0;
}

.hero__orbital { display: none; }

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  /* No will-change — it creates a stacking context that traps position:fixed children */
}

.hero__eyebrow {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: 0.65rem;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out) 0.4s forwards;
}

.hero__title {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  border: none;
  padding: 0;
  will-change: opacity;
}

/* SVG wordmark — scales to fit viewport width */
.hero__title-svg {
  width: clamp(280px, 72vw, 1100px);
  height: auto;
  display: block;
  overflow: visible;
}

/* All letter groups — white fill, JS drives translateX for spread */
.hero__letter {
  fill: var(--white);
  transform-origin: center center;
  will-change: transform;
}

.hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  letter-spacing: 0.2em;
  color: rgba(245,240,232,0.4);
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-out) 0.9s forwards;
}

.hero__cta {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  padding-top: clamp(10rem, 18vw, 20rem);
  gap: 2.8rem;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  animation: fadeIn 1.2s var(--ease-out) 1.1s forwards;
}

.hero__cta a {
  pointer-events: auto;
}

.hero__scroll-hint {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
  opacity: 0;
  animation: fadeIn 1s var(--ease-out) 2s forwards;
}
.hero__scroll-hint span {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
}
.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--gold-dim), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* ─── 2. SCROLL TRANSITION ───────────────────────── */
/* This section is purely JS/scroll-driven, no extra markup needed */

/* ─── 2. HANDPILL / RITUAL SLIDE ─────────────────
   Pure black background. Centered PNG fades + scales
   in on scroll-into-view. Mouse drives RGB channel
   split via layered image copies (desktop only).
   ─────────────────────────────────────────────── */
.ritual {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(5,5,8,0.82); /* semi-transparent so orbital/lockup show through */
  margin-top: -1px;
  z-index: 5;              /* above fixed video (z-index 2) — acts as curtain */
}

/* Hard black fill — ensures no bleed from hero above */
.ritual__black {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75); /* semi-transparent */
  pointer-events: none;
}

/* Image stack — all three PNGs sit on top of each other */
.ritual__handpill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* Entrance state: slightly zoomed in, invisible */
  opacity: 0;
  transform: scale(1.10);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.ritual__handpill.is-visible {
  opacity: 1;
  transform: scale(1.0);
}

/* All three images share the same footprint */
.ritual__handpill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* fills height, crops sides */
  object-position: center;
  display: block;
}

/* Main layer — sits in flow to size the container */
.ritual__handpill-main {
  position: relative !important;
  opacity: 1;
  mix-blend-mode: normal;
}

/* RGB split layers.
   mix-blend-mode: screen adds light. With brightness(0.35) each layer
   contributes a dim pure color. Where all three overlap at the same pixel
   they add toward white — but each alone reads as R, G, or B.
   The main layer (normal blend, full opacity) shows the full B&W image underneath. */
/* RGB layers use pre-tinted PNGs (handpill-r/g/b.png).
   Pure screen blend — no filters needed. White pixels in source
   become pure R, G, or B. Where all three overlap = white. */
.ritual__handpill-r,
.ritual__handpill-g,
.ritual__handpill-b {
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
}

/* Text content — centered, above image */
.ritual__content {
  position: relative;
  z-index: 10;
  max-width: 600px;
  margin: 0 auto;
  padding: 8rem 4rem;
  text-align: center;
  /* Sits at bottom of the slide */
  align-self: flex-end;
  margin-bottom: 6rem;
}

.ritual__headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 2.5rem;
}

.ritual__body {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.84rem; /* 20% smaller, elegant */
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: rgba(245,240,232,0.5);
  margin-bottom: 4rem;
  padding: 0 1.5rem;
}

/* ─── 4. VIDEO SECTION ───────────────────────────
   Pinned 100vh. Fades in/out via IntersectionObserver.
   ─────────────────────────────────────────────── */
/* ─── 3. VIDEO SECTION ───────────────────────────
   Architecture:
   - .video-section is a tall scroll spacer (300vh).
   - .video-section__fixed-bg is position:fixed behind everything.
   - As ritual (previous section) scrolls up it acts like a curtain
     revealing the fixed video underneath.
   - JS maps scroll progress to video.currentTime.
   - Words appear over the video during playback.
   - When this section scrolls off, story is revealed below.
   ─────────────────────────────────────────────── */
.video-section {
  position: relative;
  height: 300vh;           /* tall scroll spacer */
  background: transparent; /* transparent — fixed video shows through */
  margin-top: 0;
  z-index: 1;
}

/* Fixed full-screen video layer — sits at z-index 2, behind ritual (z-index ?) */
.video-section__fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;             /* well above ritual (z-index 5) — words always on top */
  pointer-events: none;
  opacity: 0;              /* JS fades in when section enters view */
  transition: opacity 0.8s var(--ease-smooth);
  will-change: opacity;
}

.video-section__fixed-bg.is-visible {
  opacity: 1;
}

.video-section__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 25%, rgba(5,5,8,0.4) 85%),
    linear-gradient(to bottom, rgba(5,5,8,0.3) 0%, transparent 10%, transparent 90%, rgba(5,5,8,0.3) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ─── 5. STORY SECTION ───────────────────────────
   Two column sticky. Image right + mirrored.
   Text left fades in sequentially on scroll.
   ─────────────────────────────────────────────── */
.story {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  background: var(--black);
  margin-top: 0;
  z-index: 5;              /* above fixed video */
}

/* Image column — right side, fills the grid row */
.story__image-wrap {
  position: relative;
  order: 2;
  height: 100vh;
}

.story__image-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.story__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;               /* JS fades in on scroll */
  transition: opacity 1.2s var(--ease-out);
  will-change: opacity;
}

.story__image.is-visible { opacity: 1; }

.story__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.7);
  transform: scaleX(-1);    /* mirror along vertical axis */
  will-change: transform;
}

/* Gradient bleeds left into text */
.story__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, transparent 50%, var(--black) 100%),
              linear-gradient(to top, var(--black) 0%, transparent 15%);
  pointer-events: none;
  z-index: 1;
}

/* Text column — left side, sticky + scroll-driven reveals */
.story__text {
  order: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0 4rem 0 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  z-index: 2;
}

/* Each text child starts invisible — JS adds .is-visible sequentially */
.story__text .section-label,
.story__text .story__headline,
.story__text .story__divider,
.story__text .story__body {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.story__text .section-label.is-visible,
.story__text .story__headline.is-visible,
.story__text .story__divider.is-visible,
.story__text .story__body.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.story__text .story__headline { transition-delay: 0.1s; }
.story__text .story__divider  { transition-delay: 0.2s; }
.story__text .story__body     { transition-delay: 0.35s; }

.story__headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.625rem, 4.875vw, 5.25rem); /* 25% smaller than 2× */
  color: var(--white);
  margin-bottom: 2.5rem;
  line-height: 1.05;
}

.story__divider {
  width: 60px;
  height: 1px;
  background: var(--gold-dim);
  margin-bottom: 2.5rem;
}

.story__body {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;  /* 2× bigger than original 1rem */
  line-height: 1.75;
  color: rgba(245,240,232,0.6);
}

.story__body p + p { margin-top: 1.4rem; }

/* ─── 6. PRODUCTS / COLLECTION ───────────────────
   WordPress: WooCommerce shop loop / shortcode
   Product cards become WooCommerce product tiles
   ─────────────────────────────────────────────── */
.collection {
  position: relative;
  padding: 6rem 4rem 10rem;
  background: var(--black);
  overflow: hidden;
  margin-top: 0;
}

.collection__bg {
  position: absolute;
  inset: 0;
  /* background-image set via inline style in front-page.php */
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  filter: saturate(0.5);
}

.collection__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.collection__header {
  text-align: center;
  margin-bottom: 6rem;
}

.collection__headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--white);
  margin-bottom: 1.5rem;
}

.collection__subtext {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(245,240,232,0.45);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

.collection__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* WordPress: each .product-card becomes a WooCommerce product .woocommerce-loop-product */
.product-card {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #0c0c14;
  overflow: hidden;
  cursor: none;
  border: 1px solid rgba(201,168,76,0.08);
  transition: border-color 0.4s;
}

.product-card:hover {
  border-color: rgba(201,168,76,0.25);
}

.product-card__visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4rem; /* keep orb above info overlay */
}

/* Coded placeholder product orb */
.product-orb {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.2);
  position: relative;
  transition: transform 0.5s var(--ease-smooth);
}
.product-card:hover .product-orb {
  transform: scale(1.08);
}
.product-orb::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.12);
}
.product-orb::after {
  content: '';
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
  animation: glowPulse 3s ease-in-out infinite;
}

.product-card__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.5rem;
  background: linear-gradient(to top, rgba(5,5,8,0.95) 0%, transparent 100%);
}

.product-card__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.product-card__desc {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 1.5rem;
}

.product-card__badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
  border: 1px solid rgba(245,240,232,0.12);
  padding: 0.4rem 0.8rem;
}

/* ─── 7. TESTIMONIALS ────────────────────────────
   WordPress: custom post type or ACF repeater
   ─────────────────────────────────────────────── */
.testimonials {
  padding: 4rem 4rem 4rem;
  background: var(--black);
  position: relative;
  margin-top: 0;
}

.testimonials::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 80px;
  background: linear-gradient(to bottom, transparent, var(--gold-dim));
}

.testimonials__inner {
  max-width: 960px;
  margin: 0 auto;
}

.testimonials__label {
  text-align: center;
  margin-bottom: 6rem;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem;
}

.testimonial {
  position: relative;
  padding-top: 2rem;
}

.testimonial::before {
  content: '"';
  position: absolute;
  top: -1rem; left: 0;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--gold-dim);
  line-height: 1;
  opacity: 0.4;
}

.testimonial__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.8vw, 2rem); /* 2x */
  line-height: 1.6;
  color: rgba(245,240,232,0.75);
  margin-bottom: 2rem;
  text-align: center;
}

.testimonial__author {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* ─── 8. FINAL CTA / CONTACT ─────────────────────
   Tall scroll container. Content pinned sticky center.
   JS reveals label → headline → subtext → button
   sequentially as scroll progresses.
   ─────────────────────────────────────────────── */
.contact {
  position: relative;
  height: 100vh;            /* exact viewport — no dead space below sticky */
  background: var(--black);
  margin-bottom: 0;
}

.contact__sticky {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.contact__bg {
  position: absolute;
  inset: 0;
  /* background-image set via inline style in front-page.php */
  background-size: cover;
  background-position: 33% center; /* face is left third */
  opacity: 0.3;
  filter: saturate(0.6);
  transition: opacity 1.5s;
}

.contact__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 20%, rgba(5,5,8,0.7) 80%),
    linear-gradient(to bottom, var(--black) 0%, transparent 20%, transparent 80%, var(--black) 100%);
}

.contact__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  padding: 4rem 2rem;
}

/* Each element starts invisible, JS adds .is-visible in sequence */
.contact__content .section-label,
.contact__headline,
.contact__subtext,
.contact__cta-wrap {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.contact__content .section-label.is-visible,
.contact__headline.is-visible,
.contact__subtext.is-visible,
.contact__cta-wrap.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.contact__headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 4.5vw, 3.75rem); /* 25% smaller */
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.contact__subtext {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(245,240,232,0.45);
  margin-bottom: 4rem;
  line-height: 1.7;
}

/* ─── PLANET TOOLTIP ─────────────────────────────── */
.planet-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 9990;
  background: rgba(8, 8, 16, 0.88);
  border: 1px solid rgba(201,168,76,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1.05rem 1.4rem;
  max-width: 392px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s var(--ease-out) 0.5s, transform 0.5s var(--ease-out) 0.5s;
}
.planet-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.planet-tooltip strong {
  display: block;
  font-family: var(--font-ui);
  font-weight: 200;
  font-size: 0.77rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
  margin-bottom: 0.2rem;
}
.planet-tooltip .tt-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.33rem;
  color: var(--white);
  margin-bottom: 0.21rem;
  letter-spacing: 0.05em;
}
.planet-tooltip .tt-sub {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  color: rgba(245,240,232,0.5);
  line-height: 1.4;
}
.planet-tooltip span {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(245,240,232,0.65);
}

/* ─── KEYFRAME ANIMATIONS ────────────────────────── */
@keyframes titleFadeIn {
  from { opacity: 0; letter-spacing: 0.05em; }
  to   { opacity: 1; letter-spacing: 0.15em; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
@keyframes capsuleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(2deg); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.1); }
}
@keyframes orbitalSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── REDUCED MOTION ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: opacity 0.4s; transform: none; }
  .scroll-line { animation: none; }
  .ritual__handpill { transition: opacity 0.4s; }
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}

/* ─── X THEME OVERRIDE ───────────────────────────── */
/* Neutralise any Cornerstone/X background that leaks through */
html, body, body.x-cp, .x-root, #x-root, #canvas, .cs-canvas,
.x-canvas, [id^="canvas"], .x-wrap, #wrapper, #page {
  background: var(--black) !important;
  background-color: var(--black) !important;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — M3 MacBook, ultrawide, iPad, iPhone
   ═══════════════════════════════════════════════════ */

/* ─── ULTRAWIDE (≥1800px) ────────────────────────── */
@media (min-width: 1800px) {
  .nav { padding: 2rem 5vw; }
  .hero__title-svg { width: clamp(900px, 55vw, 1400px); }
  .collection__grid--four { gap: 3px; }
  .testimonials__inner { max-width: 1600px; margin: 0 auto; }
  .story { max-width: 1800px; margin: 0 auto; }
}

/* ─── M3 MACBOOK / LARGE DESKTOP (1440–1800px) ───── */
@media (min-width: 1440px) and (max-width: 1799px) {
  .hero__title-svg { width: clamp(700px, 62vw, 1100px); }
  .collection__grid--four { grid-template-columns: repeat(4, 1fr); }
}

/* ─── TABLET LANDSCAPE / SMALL DESKTOP (≤1024px) ─── */
@media (max-width: 1024px) {
  .nav { padding: 1.5rem 2.5rem; }
  .nav.scrolled { padding: 1rem 2.5rem; }
  .collection__grid--four { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .contact { height: auto; min-height: 100vh; }
  .contact__sticky { position: relative; height: auto; min-height: 100vh; padding: 6rem 2rem; }
  .contact__content .section-label,
  .contact__headline,
  .contact__subtext,
  .contact__cta-wrap { opacity: 1 !important; transform: none !important; }
}

/* ─── TABLET PORTRAIT / iPad (768–1024px) ────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .ritual__scroll-words { padding: 2rem; }
  .ritual__group--left { left: 5%; width: 42%; }
  .ritual__group--right { left: 52%; width: 44%; }
  .story { grid-template-columns: 1fr 1fr; }
  .video__word { font-size: clamp(2rem, 5vw, 4rem); }
  .collection__grid--four { grid-template-columns: repeat(2, 1fr); }
}

/* ─── MOBILE PORTRAIT (≤768px) ──────────────────── */
@media (max-width: 768px) {
  /* Nav */
  .nav { padding: 1.2rem 1.5rem; }
  .nav__links { display: none; }

  /* Hero — keep figure (left side) always in frame */
  .hero__bg {
    background-position: 20% center; /* pull figure into view */
  }
  .hero__title-svg { width: 88vw; }
  .hero__cta { padding-top: clamp(7rem, 22vw, 11rem); }
  .hero__lockup-eyebrow { font-size: 0.5rem; }
  .hero__lockup-tagline { font-size: 0.45rem; letter-spacing: 0.25em; }

  /* Ritual — show hands + pill center-bottom */
  .ritual { min-height: 100svh; }
  .ritual__handpill img {
    object-position: center 70%; /* hands and pill always visible */
  }
  .ritual__content { padding: 3rem 1.5rem 2rem; }
  .ritual__headline { font-size: clamp(1.8rem, 6vw, 3rem); }
  .ritual__body { font-size: 0.78rem; padding: 0 0.5rem; }
  /* Stack ritual text vertically on mobile */
  .ritual__scroll-words { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ritual__group--left {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
    flex-direction: column;
    align-items: center;
  }
  .ritual__group--right {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 100%;
    text-align: center;
  }

  /* Video */
  .video-section { height: 280vw; min-height: 600px; }
  .video__word { font-size: clamp(2rem, 8vw, 3.5rem); white-space: normal; text-align: center; }

  /* Story: vertical stack */
  .story {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto; min-height: auto;
  }
  .story__image-wrap { order: 1; height: 100vw; width: 100%; }
  .story__image-sticky { position: relative; height: 100%; }
  .story__image { opacity: 1 !important; position: relative; height: 100vw; }
  .story__image img { object-position: center top; }
  .story__image::after { background: linear-gradient(to bottom, transparent 60%, var(--black) 100%); }
  .story__text { order: 2; position: relative; height: auto; min-height: auto; padding: 3rem 1.5rem 4rem; }
  .story__text .section-label,
  .story__text .story__headline,
  .story__text .story__divider,
  .story__text .story__body { opacity: 1 !important; transform: none !important; }
  .story__headline { font-size: clamp(1.8rem, 7vw, 3rem); }
  .story__body { font-size: 1rem; }

  /* Collection */
  .collection { padding: 4rem 1.5rem 6rem; }
  .collection__grid--four { grid-template-columns: 1fr 1fr; }
  .product-card { aspect-ratio: 3/4; }
  .sphere-canvas { max-width: 160px; }

  /* Testimonials */
  .testimonials { padding: 4rem 1.5rem; }
  .testimonials__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .testimonial__text { font-size: clamp(1.1rem, 4vw, 1.6rem); }

  /* Contact — face is left third, focus there */
  .contact__bg {
    background-position: 25% center; /* keep face in frame */
  }
  .contact { height: auto; min-height: 100svh; }
  .contact__sticky { position: relative; min-height: 100svh; padding: 5rem 1.5rem; }
  .contact__headline { font-size: clamp(1.5rem, 7vw, 2.5rem); }
  .contact__content .section-label,
  .contact__headline, .contact__subtext,
  .contact__cta-wrap { opacity: 1 !important; transform: none !important; }

  /* Footer */
  .footer-nav { flex-direction: column; gap: 1.5rem; }
}

/* ─── iPhone / small phones (≤480px) ─────────────── */
@media (max-width: 480px) {
  .hero__title-svg { width: 92vw; }
  .hero__cta { padding-top: clamp(6rem, 24vw, 9rem); }
  .nav { padding: 1rem 1.2rem; }
  /* Hero: pull figure further left for narrow screens */
  .hero__bg { background-position: 15% center; }
  /* Contact: keep face in narrowest view */
  .contact__bg { background-position: 20% center; }
  /* Ritual group stack tighter */
  .ritual__word--h2 { font-size: clamp(1.3rem, 6vw, 2rem); }
  .ritual__word--h3 { font-size: clamp(1.1rem, 5vw, 1.6rem); }
  /* Collection 1-col on very small */
  .collection__grid--four { grid-template-columns: 1fr; }
}

/* ─── LANDSCAPE PHONE ────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero__title-svg { width: 60vw; }
  .ritual { min-height: 150vw; }
  .contact__bg { background-position: 33% center; }
  .video-section { height: 200vw; }
}

/* ═══════════════════════════════════════════════════
   COZMA PRIMA PREFINAL — ADDITIONS
   ═══════════════════════════════════════════════════ */

/* ─── HERO LOCKUP: stacked text block ─────────────── */
/* Fixed overlay — same layer as wordmark but stacked vertically */
.hero__lockup {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  gap: 0;
  text-align: center;
}

.hero__lockup-eyebrow {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: clamp(0.55rem, 1.2vw, 0.8rem);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.2rem;
}

/* The SVG wordmark row — already handled by .hero__title */
/* Spacer between wordmark and tagline */
.hero__lockup-tagline {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: clamp(0.5rem, 1vw, 0.7rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.45);
  margin-top: 2.2rem;
}

/* ─── RITUAL SLIDE: scroll-driven text ────────────── */
.ritual__scroll-words {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
}

/* Left group: Cozmology + Divine Connection — 30% from left, vertically centered */
.ritual__group--left {
  position: absolute;
  left: 8%;
  top: 17.5%;
  transform: translateY(-50%);
  width: 80%;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 2.5rem;
  text-align: left;
  flex-wrap: wrap;
}

/* Right group: Resonance in Ritual + body — 60% from left, vertically centered */
.ritual__group--right {
  position: absolute;
  left: 55%;
  top: 82.5%;
  transform: translateY(-50%);
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.ritual__word {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}

.ritual__word.visible {
  opacity: 1;
  transform: translateY(0);
}

.ritual__word--h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 3.2rem); /* 20% smaller */
  color: var(--white);
  letter-spacing: 0.05em;
  line-height: 1.1;
}

.ritual__word--h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 3.2rem); /* same size as h2 */
  color: rgba(245,240,232,0.65);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* Handpill 50% more transparent */
.ritual__handpill-main { opacity: 0.5 !important; }

/* ─── VIDEO SLIDE: scroll words ────────────────────── */
.video__words {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  text-align: center;
}

.video__word {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 6rem);
  letter-spacing: 0.08em;
  color: var(--white);
  opacity: 0;
  /* No translateY — words stack at same origin, kerning drives the reveal */
  transition: opacity 0.9s var(--ease-out);
  line-height: 1.15;
  position: absolute; /* stack all words on same point */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-shadow:
    0 2px 40px rgba(0,0,0,0.9),
    0 0 80px rgba(0,0,0,0.7),
    0 1px 4px rgba(0,0,0,1);
}

.video__word.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── PRODUCTS: 4-column grid ──────────────────────── */
.collection__grid--four {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .collection__grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .collection__grid--four { grid-template-columns: 1fr; }
}

/* Sphere orb colour variants */
.product-orb--i   { border-color: rgba(201,168,76,0.3); }
.product-orb--ii  { border-color: rgba(80,180,200,0.3); }
.product-orb--iii { border-color: rgba(180,80,200,0.3); }
.product-orb--iv  { border-color: rgba(100,220,140,0.3); }


/* ─── NAV CART INLINE ──── */
.nav__links .menu-item-type-custom a,
.nav__links li a[href*="cart"],
.nav__links .cart-contents {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* ─── SPHERE COLOR THEMING ──── */
:root {
  --sphere-i:   #c0392b;   /* red */
  --sphere-ii:  #f0c040;   /* yellow */
  --sphere-iii: #27ae60;   /* green */
  --sphere-iv:  #8e44ad;   /* purple */
}
.product-card[data-sphere="I"]   { border-color: rgba(192,57,43,0.2); }
.product-card[data-sphere="II"]  { border-color: rgba(240,192,64,0.2); }
.product-card[data-sphere="III"] { border-color: rgba(39,174,96,0.2); }
.product-card[data-sphere="IV"]  { border-color: rgba(142,68,173,0.2); }

.product-card[data-sphere="I"]:hover   { border-color: rgba(192,57,43,0.5); }
.product-card[data-sphere="II"]:hover  { border-color: rgba(240,192,64,0.5); }
.product-card[data-sphere="III"]:hover { border-color: rgba(39,174,96,0.5); }
.product-card[data-sphere="IV"]:hover  { border-color: rgba(142,68,173,0.5); }

/* Sphere orb color variants */
.product-orb[data-sphere="I"]::after   { background: radial-gradient(circle, rgba(192,57,43,0.25) 0%, transparent 70%); }
.product-orb[data-sphere="II"]::after  { background: radial-gradient(circle, rgba(240,192,64,0.25) 0%, transparent 70%); }
.product-orb[data-sphere="III"]::after { background: radial-gradient(circle, rgba(39,174,96,0.25) 0%, transparent 70%); }
.product-orb[data-sphere="IV"]::after  { background: radial-gradient(circle, rgba(142,68,173,0.25) 0%, transparent 70%); }

.product-card:hover .product-orb { transform: scale(1.18); }

/* Blend list inside card */
.product-blends {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.75rem;
  color: rgba(245,240,232,0.45);
  margin-top: 0.5rem;
  line-height: 1.6;
}
.product-blends li { list-style: none; padding: 0; }
.product-blends li + li { margin-top: 0.2rem; }

/* ─── SPHERE LABEL IN CARD ─── */
.product-card__sphere-label {
  font-family: var(--font-ui);
  font-weight: 200;
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* ─── SPHERE CANVAS CARDS ─────────────────────────── */
.sphere-canvas {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 1;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  cursor: none;
}
.product-card:hover .sphere-canvas {
  transform: scale(1.18);
}
.product-card__visual {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── FOOTER ──────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 5;
  background: var(--black);
  padding: 2rem 3rem;
  border-top: 1px solid rgba(201,168,76,0.1);
}
.footer-nav {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
}
.footer-nav a {
  font-family: var(--font-ui);
  font-weight: 100;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-nav a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════
   GLOBAL PAGES — WooCommerce + Inner Pages
   Applies to: shop, product, cart, checkout, account,
   and any non-front-page WordPress template.
   ═══════════════════════════════════════════════════ */

/* ─── GLOBAL PAGE BODY ────────────────────────────── */
body.cp-global,
body.cp-woocommerce,
body:not(.cp-front-page) {
  background: var(--black) !important;
  background-color: var(--black) !important;
  color: rgba(245,240,232,0.75);
  font-family: var(--font-display);
  padding-top: 80px; /* clear fixed nav */
}

.cp-page-wrap {
  min-height: 100vh;
  padding: 4rem 4vw 6rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* ─── NAV GLOBAL (non-front-page) ─────────────────── */
.nav--global {
  background: rgba(5,5,8,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201,168,76,0.08);
}

/* Cart icon in nav */
.nav__cart {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(245,240,232,0.55);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
}
.nav__cart:hover { color: var(--gold); }
.nav__cart svg { display: block; }
.nav__cart-count {
  font-family: var(--font-ui);
  font-size: 0.55rem;
  font-weight: 200;
  letter-spacing: 0.1em;
  color: #e8450a;
  position: absolute;
  top: -6px;
  right: -8px;
}
.nav__cart-count--empty { display: none; }

/* ─── BREADCRUMB ──────────────────────────────────── */
.cp-breadcrumb {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 100;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
  margin-bottom: 3rem;
}
.cp-breadcrumb ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cp-breadcrumb a { color: rgba(245,240,232,0.3); text-decoration: none; transition: color 0.3s; }
.cp-breadcrumb a:hover { color: var(--gold); }
.breadcrumb__sep { opacity: 0.3; margin: 0 0.25rem; }

/* ─── WOOCOMMERCE GLOBAL OVERRIDES ───────────────────
   Typography, colours, and spacing that apply to all
   WC pages — shop loop, single product, cart, checkout,
   account. We override WooCommerce's default blue/grey
   palette with Cozma Prima's black/gold/red system.
   ─────────────────────────────────────────────────── */

/* Headings */
.cp-wc-main h1,
.cp-wc-main h2,
.cp-wc-main h3,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.02em;
}

/* ─── SHOP LOOP ───────────────────────────────────── */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
  list-style: none;
  padding: 0;
}

.woocommerce ul.products li.product {
  background: #0c0c14;
  border: 1px solid rgba(201,168,76,0.08);
  transition: border-color 0.4s;
  position: relative;
  overflow: hidden;
}
.woocommerce ul.products li.product:hover {
  border-color: rgba(201,168,76,0.25);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  display: block;
  opacity: 0.85;
  transition: opacity 0.4s;
}
.woocommerce ul.products li.product:hover a img { opacity: 1; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--white);
  padding: 1.5rem 1.5rem 0.5rem;
  letter-spacing: 0.05em;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 100;
  letter-spacing: 0.3em;
  color: var(--gold);
  padding: 0 1.5rem 1.5rem;
}

/* ─── SINGLE PRODUCT ─────────────────────────────── */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.woocommerce div.product .woocommerce-product-gallery { border: none; }

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--white);
  margin-bottom: 1rem;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(245,240,232,0.55);
  margin-bottom: 2rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 100;
  letter-spacing: 0.35em;
  color: var(--gold);
  margin-bottom: 2rem;
  display: block;
}

/* ─── BUTTONS — WooCommerce inherits pill/red-orange ─ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order {
  font-family: var(--font-ui) !important;
  font-weight: 200 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.8rem !important;
  border: 1px solid #e8450a !important;
  color: #e8450a !important;
  background: transparent !important;
  border-radius: 50px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: color 0.4s, background 0.4s !important;
  cursor: pointer !important;
  display: inline-block !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #payment #place_order:hover {
  background: #e8450a !important;
  color: var(--black) !important;
}

/* Disabled state */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* ─── QUANTITY INPUT ──────────────────────────────── */
.woocommerce .quantity .qty {
  background: transparent;
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-align: center;
  width: 64px;
  padding: 0.6rem;
  border-radius: 4px;
}

/* ─── CART PAGE ───────────────────────────────────── */
.woocommerce table.cart,
.woocommerce-cart table.cart {
  border-collapse: collapse;
  width: 100%;
}

.woocommerce table.cart th,
.woocommerce table.cart td {
  border-top: 1px solid rgba(201,168,76,0.08);
  padding: 1.5rem;
  color: rgba(245,240,232,0.75);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  vertical-align: middle;
}

.woocommerce table.cart th {
  color: rgba(245,240,232,0.3);
  font-weight: 100;
}

.woocommerce table.cart .product-name a {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: none;
}

.woocommerce table.cart .product-price,
.woocommerce table.cart .product-subtotal {
  color: var(--gold);
}

.cart-collaterals {
  margin-top: 3rem;
  border-top: 1px solid rgba(201,168,76,0.08);
  padding-top: 3rem;
}

.cart_totals h2 {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
  margin-bottom: 1.5rem;
}

.cart_totals table {
  width: 100%;
  border-collapse: collapse;
}

.cart_totals table th,
.cart_totals table td {
  padding: 1rem 0;
  border-top: 1px solid rgba(201,168,76,0.06);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
}

.cart_totals table .order-total th,
.cart_totals table .order-total td {
  color: var(--gold);
  font-size: 0.75rem;
  border-top: 1px solid rgba(201,168,76,0.2);
  padding-top: 1.5rem;
}

/* ─── CHECKOUT ────────────────────────────────────── */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout h3#order_review_heading {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
  margin: 2.5rem 0 1.5rem;
  font-weight: 100;
}

.woocommerce form .form-row label {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.35);
  display: block;
  margin-bottom: 0.5rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,76,0.15);
  color: rgba(245,240,232,0.85);
  font-family: var(--font-display);
  font-size: 0.9rem;
  padding: 0.9rem 1.2rem;
  width: 100%;
  border-radius: 2px;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: rgba(201,168,76,0.4);
}

#order_review {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(201,168,76,0.08);
  padding: 2rem;
  border-radius: 2px;
}

/* ─── ACCOUNT PAGES ───────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: auto;
  float: none;
  margin-bottom: 3rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 0;
  border-bottom: 1px solid rgba(201,168,76,0.08);
  padding-bottom: 1.5rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.35);
  text-decoration: none;
  transition: color 0.3s;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--gold);
}

/* ─── NOTICES / MESSAGES ──────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  border-radius: 2px;
  border-left: 2px solid var(--gold);
  background: rgba(201,168,76,0.05);
  color: rgba(245,240,232,0.75);
  list-style: none;
}

.woocommerce-error {
  border-color: #e8450a;
  background: rgba(232,69,10,0.05);
}

/* Remove WC default blue */
.woocommerce-message::before,
.woocommerce-info::before { display: none; }