/* ============================================================
   AURANEST — Luxury Wellness Design System
   ============================================================ */

:root {
  --midnight: #0a0a12;
  --midnight-2: #10101c;
  --indigo: #1a1533;
  --cosmic: #3a2761;
  --cosmic-2: #6b4ba0;
  --ivory: #f4f1fb;
  --ivory-2: #e5ddf2;
  --champagne: #d4b48a;
  --champagne-2: #e6c99a;
  --rose-gold: #d9a49a;
  --smoke: rgba(255,255,255,0.06);
  --line: rgba(212,180,138,0.18);
  --line-dark: rgba(10,10,18,0.12);
  --text-dark: #1a1a24;
  --text-mute: #7a7787;
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-2: cubic-bezier(.65,0,.35,1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
/* Smooth scrolling turns the browser's native history scroll restoration into
   an animation that gets cancelled mid-flight, dumping the visitor at the top
   of the page on Back. main.js sets this class while restoring so the jump is
   instant, then removes it to restore smooth scrolling for normal use. */
html.instant-scroll { scroll-behavior: auto !important; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--text-dark);
  background: var(--ivory);
  line-height: 1.6;
  letter-spacing: 0.004em;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- typography ---------- */
h1, h2, h3, h4, .serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
h1 { font-size: clamp(3rem, 8vw, 7.5rem); }
h2 { font-size: clamp(2.25rem, 4.6vw, 4.25rem); margin-bottom: 0; }
h3 { font-size: clamp(1.6rem, 2.5vw, 2.4rem); }
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 500;
}
.lead { font-size: 1.05rem; color: #34313d; max-width: 56ch; font-weight: 500; }

/* ---------- containers ---------- */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.wrap-tight { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
section { padding: clamp(3.25rem, 6vw, 5.75rem) 0; position: relative; }
.dark { background: var(--midnight); color: var(--ivory); }
.dark .lead, .dark .text-mute { color: rgba(244,241,251,0.6); }
.dark .eyebrow { color: var(--champagne); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1.65rem;
  font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  transition: all 0.5s var(--ease);
  position: relative; overflow: hidden;
  will-change: transform;
}
.btn-primary { background: var(--champagne); color: var(--midnight); }
.btn-primary:hover { background: var(--ivory); transform: translateY(-2px); box-shadow: 0 20px 40px -20px rgba(212,180,138,0.6); }
.btn-ghost { border: 1px solid var(--line); color: currentColor; }
.btn-ghost:hover { background: rgba(212,180,138,0.08); border-color: var(--champagne); }
.btn-dark { background: var(--midnight); color: var(--ivory); }
.btn-dark:hover { background: var(--indigo); }
.btn-arrow::after { content: '→'; transition: transform 0.4s var(--ease); }
.btn-arrow:hover::after { transform: translateX(6px); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.2rem 0;
  transition: all 0.5s var(--ease);
  mix-blend-mode: normal;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}
.nav-logo {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--serif); font-size: 1.9rem;
  letter-spacing: 0.02em;
  color: var(--ivory);
  transition: color 0.5s var(--ease);
  position: relative;
  cursor: pointer;
}
.nav-logo img {
  width: 68px; height: 68px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--champagne), 0 0 24px -6px rgba(212,180,138,0.35);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), filter 0.6s var(--ease);
  position: relative; z-index: 2;
}
.nav-logo::before {
  content: ''; position: absolute; left: -12px; top: -12px;
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,180,138,0.55), rgba(107,75,160,0.35) 45%, transparent 70%);
  filter: blur(18px); opacity: 0; z-index: 1;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
}
.nav-logo:hover::before { opacity: 1; transform: scale(1.25); }
.nav-logo:hover img {
  transform: rotate(8deg) scale(1.06);
  box-shadow: 0 0 0 1px var(--champagne), 0 0 60px -4px rgba(212,180,138,0.85), 0 0 100px -20px rgba(107,75,160,0.7);
  filter: brightness(1.08) saturate(1.1);
}
.nav.solid .nav-logo img { box-shadow: 0 0 0 1px rgba(10,10,18,0.15); }
.nav-links {
  display: flex; gap: 2.2rem;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ivory);
  font-weight: 400;
  transition: color 0.5s var(--ease);
}
.nav-links a { white-space: nowrap; }
.nav-links a { position: relative; padding: 0.3rem 0; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--champagne);
  transition: right 0.5s var(--ease);
}
.nav-links a:hover::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: 1.4rem; color: var(--ivory); transition: color 0.5s var(--ease); }
.nav-cart {
  position: relative;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.nav-cart .count {
  position: absolute; top: -8px; right: -14px;
  background: var(--champagne); color: var(--midnight);
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 0.62rem; display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}

/* nav on light sections */
.nav.solid { background: rgba(244,241,251,0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.nav.solid .nav-logo, .nav.solid .nav-links, .nav.solid .nav-actions { color: var(--midnight); }

.menu-toggle { display: none; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 86vh;
  padding: clamp(5.5rem, 8vw, 7rem) 0 clamp(3rem, 5vw, 4rem);
  color: var(--ivory);
  background: var(--midnight);
  overflow: hidden;
  display: flex; align-items: center;
}
.hero-canvas {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,6,13,0.55) 0%, rgba(16,16,28,0.45) 55%, rgba(26,21,51,0.65) 100%),
    url("/img/hero-bg.jpeg") center/cover no-repeat;
}
.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.83  0 0 0 0 0.7  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35; pointer-events: none; mix-blend-mode: overlay;
}
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
  animation: drift 18s ease-in-out infinite alternate;
}
.hero-orb.o1 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(212,180,138,0.4), transparent 65%); top: -10%; left: -8%; }
.hero-orb.o2 { width: 640px; height: 640px; background: radial-gradient(circle, rgba(107,75,160,0.5), transparent 65%); bottom: -20%; right: -10%; animation-delay: -6s; }
.hero-orb.o3 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(217,164,154,0.4), transparent 65%); top: 40%; right: 25%; animation-delay: -12s; }
@keyframes drift {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px, -60px) scale(1.15); }
}

.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--champagne); opacity: 0.6;
  animation: float 12s linear infinite;
}
@keyframes float {
  0% { transform: translateY(100vh) scale(0.4); opacity: 0; }
  15% { opacity: 0.7; }
  100% { transform: translateY(-10vh) scale(1.4); opacity: 0; }
}

.hero-3d {
  position: absolute; right: 12vw; top: 50%;
  transform: translateY(-92%);
  width: min(45vw, 620px); aspect-ratio: 1;
  perspective: 1200px;
  pointer-events: auto;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.8s var(--ease), filter 0.8s var(--ease);
}
.hero-3d::before,
.hero-3d::after {
  content: '';
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(230,201,154,0.28);
  border-radius: 50%;
  transform: rotateX(64deg) rotateZ(-18deg);
  filter: drop-shadow(0 0 24px rgba(212,180,138,0.24));
  animation: crystalOrbit 12s linear infinite;
}
.hero-3d::after {
  inset: 23%;
  transform: rotateX(70deg) rotateZ(32deg);
  border-color: rgba(217,164,154,0.22);
  animation-duration: 16s;
  animation-direction: reverse;
}
.hero-3d:hover { filter: brightness(1.16) saturate(1.18); }
.hero-3d:hover .crystal-3d { animation-duration: 4.5s; }
.hero-3d:hover .crystal-glow {
  inset: -35%;
  background: radial-gradient(circle, rgba(212,180,138,0.88), rgba(217,164,154,0.5) 40%, transparent 70%);
  filter: blur(30px);
  animation-duration: 1.6s;
}
.hero-3d:hover .crystal-core {
  transform: rotateX(10deg) rotateY(-12deg) rotateZ(-3deg) scale(1.06);
  box-shadow:
    inset 0 0 80px rgba(255,255,255,0.38),
    inset 0 -45px 90px rgba(58,39,97,0.42),
    0 85px 150px -26px rgba(212,180,138,0.8),
    0 0 110px rgba(217,164,154,0.38);
}
.crystal-3d {
  position: absolute; inset: 8%;
  transform-style: preserve-3d;
  animation: crystalHover 7s ease-in-out infinite;
}
.crystal-core {
  position: absolute;
  inset: 9%;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 91% 18%, 100% 56%, 76% 100%, 24% 100%, 0 56%, 9% 18%);
  background:
    linear-gradient(130deg, rgba(255,255,255,0.62) 0 8%, transparent 8% 22%, rgba(255,255,255,0.22) 22% 24%, transparent 24%),
    linear-gradient(58deg, rgba(212,180,138,0.72), rgba(217,164,154,0.42) 34%, rgba(107,75,160,0.6) 62%, rgba(244,241,251,0.78)),
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.58), transparent 44%);
  box-shadow:
    inset 0 0 70px rgba(255,255,255,0.32),
    inset 0 -36px 80px rgba(58,39,97,0.36),
    0 65px 120px -34px rgba(107,75,160,0.86);
  overflow: hidden;
  isolation: isolate;
  transform: rotateX(7deg) rotateY(-9deg);
  transition: transform 0.8s var(--ease), box-shadow 0.8s var(--ease);
}
.crystal-core::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.28) 50%, transparent 50.5%),
    linear-gradient(30deg, transparent 50%, rgba(10,10,18,0.18) 50.4%, transparent 51%),
    linear-gradient(150deg, transparent 47%, rgba(255,255,255,0.2) 47.5%, transparent 48.2%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.crystal-core::after {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -80%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.78), transparent);
  transform: rotate(18deg);
  animation: crystalSweep 4.8s var(--ease) infinite;
}
.crystal-logo {
  width: 81.2%;
  height: 81.2%;
  object-fit: contain;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 14px rgba(244,241,251,0.68))
    drop-shadow(0 18px 24px rgba(58,39,97,0.34));
  transform: translateZ(38px);
}
.crystal-shard {
  position: absolute;
  width: 18%;
  height: 24%;
  clip-path: polygon(50% 0, 100% 34%, 72% 100%, 26% 100%, 0 34%);
  background: linear-gradient(150deg, rgba(244,241,251,0.76), rgba(212,180,138,0.42), rgba(107,75,160,0.34));
  box-shadow: inset 0 0 28px rgba(255,255,255,0.34), 0 20px 40px -18px rgba(212,180,138,0.7);
  opacity: 0.88;
  animation: shardHover 5.8s ease-in-out infinite;
}
.crystal-shard.s1 { top: 3%; left: 14%; transform: rotate(-22deg) scale(0.74); animation-delay: -0.8s; }
.crystal-shard.s2 { top: 7%; right: 10%; transform: rotate(29deg) scale(0.64); animation-delay: -2.1s; }
.crystal-shard.s3 { right: 2%; bottom: 18%; transform: rotate(18deg) scale(0.52); animation-delay: -1.5s; }
.crystal-shard.s4 { left: 1%; bottom: 21%; transform: rotate(-35deg) scale(0.58); animation-delay: -3.2s; }
.crystal-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--champagne-2);
  box-shadow: 0 0 18px var(--champagne-2), 0 0 34px rgba(217,164,154,0.55);
  animation: sparkDrift 3.8s ease-in-out infinite;
}
.crystal-spark.sp1 { top: 18%; left: 8%; animation-delay: -0.6s; }
.crystal-spark.sp2 { top: 24%; right: 6%; animation-delay: -1.7s; }
.crystal-spark.sp3 { bottom: 16%; left: 20%; animation-delay: -2.8s; }
.crystal-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(circle, rgba(212,180,138,0.35), transparent 60%);
  filter: blur(40px);
  animation: pulse 4s ease-in-out infinite;
}
@keyframes crystalHover {
  0%, 100% { transform: translate3d(0, -12px, 0) rotateY(-11deg) rotateZ(-1.5deg); }
  50% { transform: translate3d(0, 16px, 0) rotateY(13deg) rotateZ(2.5deg); }
}
@keyframes crystalOrbit { to { transform: rotateX(64deg) rotateZ(342deg); } }
@keyframes crystalSweep {
  0%, 36% { left: -80%; opacity: 0; }
  48% { opacity: 0.86; }
  66%, 100% { left: 132%; opacity: 0; }
}
@keyframes shardHover {
  0%, 100% { translate: 0 -7px; filter: brightness(1); }
  50% { translate: 0 9px; filter: brightness(1.2); }
}
@keyframes sparkDrift {
  0%, 100% { transform: translate3d(0,0,0) scale(0.7); opacity: 0.35; }
  50% { transform: translate3d(12px,-18px,0) scale(1.2); opacity: 1; }
}
@keyframes pulse { 50% { opacity: 0.6; transform: scale(1.05); } }

.hero-content {
  position: relative; z-index: 3;
  max-width: 590px;
  padding-top: 3.5rem;
  padding-left: clamp(1.25rem, 3vw, 3rem);
  padding-right: 1rem;
  margin-right: auto;
  margin-left: clamp(2rem, 8vw, 9rem);
  text-align: left;
}
.hero h1 {
  margin: 1rem 0 1rem;
  font-weight: 300;
}
.hero h1 .em { font-style: italic; color: var(--champagne); }
.hero-sub { max-width: 42ch; color: rgba(244,241,251,0.75); margin-bottom: 1.55rem; font-size: 1.02rem; }
.hero-content .eyebrow {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  font-weight: 500;
  font-style: italic;
  color: #f5e6c8;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 18px rgba(212,180,138,0.35);
  text-transform: none;
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(212,180,138,0.45);
  border-radius: 999px;
  background: rgba(10,10,18,0.28);
  backdrop-filter: blur(6px);
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
/* ---------- marquee ---------- */
.marquee {
  overflow: hidden; padding: 0.65rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--midnight); color: var(--ivory-2);
  font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.4rem);
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex; gap: 3rem;
  animation: marquee 40s linear infinite;
}
.marquee span::before { content: '✦'; color: var(--champagne); margin-right: 3rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- section headers ---------- */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 2rem; margin-bottom: clamp(1.6rem, 3vw, 3.25rem);
  flex-wrap: wrap;
}
.section-head .title { max-width: 20ch; }
.section-head .aside { max-width: 34ch; }

/* ---------- crystal showcase ---------- */
.showcase { background: var(--midnight); color: var(--ivory); overflow: hidden; }
.showcase-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.showcase-copy {
  position: sticky;
  top: 120px;
}
.showcase-copy .lead {
  margin: 0.9rem 0 0;
  color: rgba(244,241,251,0.64);
}
.showcase-grid {
  display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.showcase-card {
  background: var(--midnight);
  padding: 2rem 1.6rem;
  position: relative;
  transition: all 0.6s var(--ease);
  overflow: hidden;
  cursor: pointer;
}
.showcase-card:hover { background: linear-gradient(180deg, #16112a, #0a0a12); }
.showcase-img {
  aspect-ratio: 1; margin: 0 auto 1rem; max-width: 170px;
  position: relative;
  transition: transform 1.2s var(--ease);
}
.showcase-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: drop-shadow(0 30px 40px rgba(107,75,160,0.5)); }
.showcase-card:hover .showcase-img { transform: rotate(8deg) scale(1.05); }
.showcase-card h4 { font-size: 1.6rem; margin: 0 0 0.4rem; }
.showcase-card .energy {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--champagne); margin-bottom: 1rem;
}
.showcase-card p { color: rgba(244,241,251,0.6); font-size: 0.9rem; margin: 0 0 1rem; }
.showcase-card .link {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--champagne);
  display: inline-flex; gap: 0.6rem; align-items: center;
  opacity: 0; transform: translateY(10px);
  transition: all 0.5s var(--ease);
}
.showcase-card:hover .link { opacity: 1; transform: translateY(0); }

/* ---------- editorial collection ---------- */
.editorial-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.editorial-copy {
  position: sticky;
  top: 120px;
}
.editorial-copy .btn { margin-top: 1.1rem; }
.editions-label {
  color: var(--midnight);
  font-weight: 900;
  letter-spacing: 0.32em;
  font-size: 0.86rem;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}
.editorial {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 1.35rem; align-items: stretch;
}
.editorial-hero {
  position: relative; aspect-ratio: 5/4; overflow: hidden; border-radius: 4px;
}
.editorial-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.editorial-hero:hover img { transform: scale(1.06); }
.editorial-hero .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,18,0) 22%,
    rgba(10,10,18,0.28) 46%,
    rgba(10,10,18,0.66) 68%,
    rgba(10,10,18,0.88) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2rem; color: var(--ivory);
}
.editorial-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }
.editorial-card {
  position: relative; overflow: hidden; border-radius: 4px;
  aspect-ratio: 16/9;
}
.editorial-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.editorial-card:hover img { transform: scale(1.08); }
.editorial-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,18,0) 18%,
    rgba(10,10,18,0.3) 44%,
    rgba(10,10,18,0.68) 70%,
    rgba(10,10,18,0.9) 100%);
  padding: 1.35rem 1.5rem; display: flex; flex-direction: column; justify-content: end;
  color: var(--ivory);
}
.editorial h3 { font-size: clamp(1.4rem, 2vw, 2rem); margin: 0 0 0.3rem; }

/* keep editorial overlay copy legible over bright product photography */
.editorial .overlay h3 {
  color: #fff;
  text-shadow: 0 1px 2px rgba(10,10,18,0.5), 0 2px 14px rgba(10,10,18,0.65);
}
.editorial .overlay .eyebrow {
  color: #f0d9a8;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(10,10,18,0.6), 0 2px 10px rgba(10,10,18,0.7);
}
.editorial .overlay p {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 2px rgba(10,10,18,0.5), 0 2px 12px rgba(10,10,18,0.6);
}

/* ---------- journey timeline ---------- */
.journey { background: var(--midnight); color: var(--ivory); overflow: hidden; }
.journey-track {
  display: flex; gap: 3rem;
  padding: 2rem 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.journey-track::-webkit-scrollbar { display: none; }
.journey-step {
  flex: 0 0 clamp(280px, 22vw, 360px);
  scroll-snap-align: center;
  position: relative;
  padding: 2rem;
  border-left: 1px solid var(--line);
}
.journey-step .num {
  font-family: var(--serif); font-size: 4.5rem; font-style: italic;
  color: var(--champagne); line-height: 1; margin-bottom: 1.5rem; opacity: 0.6;
}
.journey-step h3 { font-size: 2rem; margin: 0 0 1rem; }
.journey-step p { color: rgba(244,241,251,0.6); font-size: 0.98rem; }

/* ---------- services ---------- */
.services-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.services-copy {
  position: sticky;
  top: 120px;
}
.services-copy .lead {
  margin-top: 0.9rem;
}
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.service-card {
  padding: 2.1rem 1.8rem;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  color: var(--ivory);
  display: flex; flex-direction: column; justify-content: end;
  transition: transform 0.7s var(--ease);
}
/* Scrim + photo live here so both cards share one measured overlay; each
   variant only supplies --service-photo.

   The flat 0.78-0.90 ramp kept text at 6-13:1 but buried the artwork: both
   photos are pale watercolours, so a uniform scrim that heavy reads as a grey
   block. Text occupies 15-89% of the card height, so the scrim cannot simply
   be dropped. Instead the ramp is lightened to 0.34-0.72 and the per-element
   legibility is carried locally by text-shadow (below), which darkens only the
   pixels immediately behind each glyph rather than the whole image. */
.service-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  transition: transform 1.5s var(--ease);
  background:
    linear-gradient(180deg,
      rgba(10,10,18,0.34) 0%,
      rgba(10,10,18,0.44) 14%,
      rgba(10,10,18,0.56) 58%,
      rgba(10,10,18,0.72) 100%),
    var(--service-photo, none) center/cover;
}
/* Local contrast for text sitting directly on the artwork. The tight 1px halo
   plus a wider soft drop keeps edges crisp on the light watercolour areas. */
.service-card .eyebrow,
.service-card h3,
.service-card p {
  text-shadow:
    0 1px 2px rgba(10,10,18,0.92),
    0 2px 10px rgba(10,10,18,0.72);
}
.service-card .eyebrow { color: #e8cfa6; }
.service-card:hover::before { transform: scale(1.08); }
.service-card > * { position: relative; z-index: 1; }
.service-card.tarot { --service-photo: url('/img/tarot-consultation.jpg'); }
.service-card.numerology {
  --service-photo: url('/img/numerology-card.jpg');
}
.service-card h3 { font-size: 2.25rem; margin: 0 0 0.55rem; }
.service-card p { color: rgba(244,241,251,0.75); max-width: 40ch; }
.service-card .btn { align-self: flex-start; margin-top: 1rem; }

/* ---------- why us glass panels ---------- */
.why {
  background: var(--midnight);
  color: var(--ivory);
  overflow: hidden;
  position: relative;
  padding: clamp(2.8rem, 5vw, 4.5rem) 0;
}
.why::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(107,75,160,0.35), transparent 60%);
}
.why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  position: relative;
}
.why .section-head {
  margin-bottom: clamp(1rem, 1.9vw, 1.8rem);
}
.why .section-head .title {
  max-width: none;
}
.why h2 {
  white-space: nowrap;
  font-size: clamp(2.1rem, 4.3vw, 4rem);
}
.glass {
  padding: 1.45rem 1.35rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 4px;
  backdrop-filter: blur(20px);
  transition: all 0.6s var(--ease);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: ''; position: absolute; top: 0; left: -50%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(212,180,138,0.14), transparent);
  transition: left 0.9s var(--ease);
}
.glass:hover::before { left: 120%; }
.glass:hover { border-color: var(--champagne); transform: translateY(-6px); }
.glass .icon {
  width: 36px; height: 36px; margin-bottom: 0.75rem;
  border-radius: 50%; border: 1px solid var(--champagne);
  display: flex; align-items: center; justify-content: center;
  color: var(--champagne); font-family: var(--serif); font-size: 1.3rem; font-style: italic;
}
.glass h4 { font-size: 1.28rem; margin: 0 0 0.35rem; }
.glass p { color: rgba(244,241,251,0.6); font-size: 0.88rem; margin: 0; }

/* ---------- product grid ---------- */
.pgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
.bestsellers-section .section-head {
  margin-bottom: clamp(1.1rem, 2vw, 2rem);
}
.bestsellers-section .section-head .title {
  max-width: none;
}
.bestsellers-section h2 {
  white-space: nowrap;
  font-size: clamp(2.1rem, 4.3vw, 4rem);
}
.pcard {
  position: relative;
  transition: transform 0.6s var(--ease);
  display: block;
}
.pcard-img {
  aspect-ratio: 1; overflow: hidden; border-radius: 6px;
  background: var(--ivory-2);
  position: relative;
}
.pcard-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.pcard:hover { transform: translateY(-8px); }
.pcard:hover .pcard-img img { transform: scale(1.08) rotate(-1deg); }
.pcard-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10,10,18,0.35));
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.pcard:hover .pcard-img::after { opacity: 1; }
.pcard-add {
  position: absolute; bottom: 1.2rem; left: 50%;
  transform: translate(-50%, 20px);
  opacity: 0;
  padding: 0.7rem 1.4rem; background: var(--ivory); color: var(--midnight);
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.5s var(--ease);
  white-space: nowrap;
  z-index: 2;
}
.pcard:hover .pcard-add { opacity: 1; transform: translate(-50%, 0); }
.pcard-body { padding: 0.8rem 0.2rem 0; }
.pcard h4 { font-size: 1.3rem; margin: 0 0 0.3rem; font-family: var(--serif); font-weight: 600; }
.pcard .cat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--midnight);
  background: linear-gradient(135deg, rgba(230,201,154,0.18), rgba(212,180,138,0.06));
  border: 1px solid var(--champagne);
  border-left: 3px solid var(--champagne);
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  border-radius: 2px;
  margin-bottom: 0.55rem;
  box-shadow: 0 2px 10px -4px rgba(212,180,138,0.4), inset 0 0 0 1px rgba(255,255,255,0.35);
}
.pcard .cat::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--champagne);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--champagne-2);
  flex: 0 0 6px;
}
.pcard .price { margin-top: 0.35rem; font-size: 1rem; font-weight: 600; color: var(--text-dark); }
.dark .pcard h4, .dark .pcard .price { color: var(--ivory); }
/* Raw stone is quoted as a rate per 100gms rather than a flat item price, so the
   unit rides alongside the figure everywhere the price appears. */
.price-unit {
  margin-left: 0.4rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}
.dark .price-unit { color: rgba(244,241,251,0.6); }
.pdp-info .price .price-unit { font-size: 0.85rem; letter-spacing: 0.12em; }
.dark .pcard .cat {
  color: var(--champagne-2);
  background: linear-gradient(135deg, rgba(230,201,154,0.14), rgba(10,10,18,0.4));
  border-color: var(--champagne);
  box-shadow: 0 2px 12px -4px rgba(212,180,138,0.35), inset 0 0 0 1px rgba(212,180,138,0.15);
}

/* ---------- shop category filters ---------- */
.shop-layout {
  display: grid;
  grid-template-columns: minmax(230px, 290px) 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.shop-filter {
  position: sticky;
  top: 110px;
  padding: 1.6rem;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.12)),
    radial-gradient(circle at 20% 0%, rgba(212,180,138,0.18), transparent 42%);
  box-shadow: 0 30px 70px -55px rgba(10,10,18,0.45);
}
.shop-filter-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line-dark);
}
.shop-filter h3 {
  margin: 0.45rem 0 0;
  font-size: 1.65rem;
}
.filter-clear {
  margin-top: 0.2rem;
  color: var(--text-mute);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.35s var(--ease);
}
.filter-clear:hover { color: var(--midnight); }
.filter-list {
  display: grid;
  gap: 0.25rem;
  max-height: 56vh;
  overflow: auto;
  padding-right: 0.35rem;
  scrollbar-width: thin;
}
.filter-option {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.72rem 0.55rem;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-dark);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.filter-option:hover {
  background: rgba(10,10,18,0.04);
  transform: translateX(3px);
}
.filter-option.all {
  margin-bottom: 0.75rem;
  background: rgba(10,10,18,0.035);
}
.filter-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.filter-option .box {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(10,10,18,0.28);
  border-radius: 5px;
  position: relative;
  background: rgba(244,241,251,0.7);
  transition: all 0.3s var(--ease);
}
.filter-option .box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--midnight);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s var(--ease);
}
.filter-option input:checked + .box {
  background: var(--champagne);
  border-color: var(--champagne);
  box-shadow: 0 0 0 4px rgba(212,180,138,0.18);
}
.filter-option input:checked + .box::after { transform: rotate(45deg) scale(1); }
.filter-option span:not(.box) {
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}
.filter-option em {
  min-width: 1.8rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(10,10,18,0.06);
  color: var(--text-mute);
  font-style: normal;
  font-size: 0.72rem;
  text-align: center;
}
.filter-children {
  display: grid;
  gap: 0.25rem;
  margin: 0.15rem 0 0.35rem 1.4rem;
  padding-left: 0.7rem;
  border-left: 1px solid rgba(10,10,18,0.08);
  grid-column: 1 / -1;
}
.filter-children[hidden] { display: none; }
.filter-option.filter-child {
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
}
.shop-products { min-width: 0; }
.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line-dark);
}
.shop-toolbar p {
  margin: 0.35rem 0 0;
  font-family: var(--serif);
  font-size: 1.45rem;
}
.active-filters {
  max-width: 42ch;
  color: var(--text-mute);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: right;
}
.shop-grid .pcard.is-hidden { display: none; }
.shop-empty {
  display: none;
  padding: 4rem 2rem;
  border: 1px dashed var(--line-dark);
  border-radius: 10px;
  text-align: center;
  background: rgba(10,10,18,0.025);
}
.shop-empty.show { display: block; }
.shop-empty h3 {
  margin: 0 0 0.75rem;
  font-size: 2rem;
}
.shop-empty p {
  margin: 0;
  color: var(--text-mute);
}

/* ---------- testimonials ---------- */
.testimonials-section {
  background: linear-gradient(180deg, #ded1ef 0%, #c8b6df 100%);
  border-top: 1px solid rgba(58,39,97,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.testimonials-section .section-head,
.atelier-section .section-head {
  margin-bottom: clamp(1.1rem, 2vw, 2rem);
}
.testimonials-section .eyebrow {
  color: var(--cosmic);
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}
/* Scoped away from .service-card: these cards sit on dark photographic
   backgrounds, where the plum --cosmic eyebrow and its white text-shadow
   dropped the price line to ~4.1:1. The section heading keeps the plum. */
.services-layout .eyebrow:not(.service-card .eyebrow),
.bestsellers-section .eyebrow {
  color: var(--cosmic);
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}
/* Price/duration line on the photo cards: champagne, as elsewhere on dark. */
.service-card .eyebrow {
  color: var(--champagne);
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(10,10,18,0.55);
}
.atelier-section .eyebrow {
  color: var(--champagne);
  font-weight: 500;
  text-shadow: none;
}
.testimonials-section .section-head .title,
.atelier-section .section-head .title {
  max-width: none;
}
.testimonials-section h2 {
  white-space: nowrap;
  font-size: clamp(2.1rem, 4.3vw, 4rem);
}
.atelier-section h2 {
  max-width: 36ch;
  white-space: normal;
  font-size: clamp(1.85rem, 3.2vw, 3.25rem);
}
.testi { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.1rem; }
.testi-card {
  padding: 2rem 1.7rem; border: 1px solid var(--line-dark); border-radius: 4px;
  background: linear-gradient(180deg, var(--ivory), #dfd5ef);
}
.testi-card .portrait {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem;
  filter: grayscale(0.15);
}
.testi-card .quote { font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; margin: 0 0 1rem; font-style: italic; }
.testi-card .who { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-mute); }

/* ---------- instagram masonry ---------- */
.atelier-section {
  background: var(--midnight);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.atelier-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212,180,138,0.25), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(107,75,160,0.35), transparent 60%);
  pointer-events: none;
}
.atelier-section .wrap { position: relative; z-index: 1; }
.atelier-section h2 { color: var(--ivory); }
.gram {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.gram > * { min-width: 0; }
/* Linked tiles wrap the figure in an anchor; unlinked tiles are the figure. */
.gram a.gram-item {
  display: block; text-decoration: none; color: inherit;
  border-radius: 6px; outline: none;
}
.gram a.gram-item:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}
.gram figure {
  margin: 0; position: relative; overflow: hidden; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(10, 10, 18, 0.28);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.gram a.gram-item:hover figure {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(10, 10, 18, 0.42);
}
.gram img {
  display: block; width: 100%; height: clamp(180px, 18vw, 255px);
  object-fit: cover; transition: transform 1.2s var(--ease);
}
.gram figure:hover img { transform: scale(1.06); }
.gram .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: end;
  padding: 1.9rem 1rem 0.85rem;
  background: linear-gradient(180deg, rgba(10, 10, 18, 0) 0%, rgba(10, 10, 18, 0.62) 45%, rgba(10, 10, 18, 0.88) 100%);
  color: #fff; font-size: 0.7rem; line-height: 1.45;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  transition: background 0.5s var(--ease);
}
.gram figure:hover .caption {
  background: linear-gradient(180deg, rgba(10, 10, 18, 0) 0%, rgba(10, 10, 18, 0.72) 45%, rgba(10, 10, 18, 0.95) 100%);
}
@media (max-width: 900px) {
  .gram { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (max-width: 520px) {
  .gram { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* ---------- newsletter ---------- */
.newsletter {
  background: var(--midnight); color: var(--ivory); overflow: hidden;
  position: relative;
}
.newsletter::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212,180,138,0.25), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(107,75,160,0.35), transparent 60%);
}
.newsletter-inner { position: relative; text-align: center; max-width: 720px; margin: 0 auto; }
.newsletter form {
  display: flex; gap: 0.6rem; margin-top: 1.6rem;
  max-width: 480px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}
.newsletter input {
  flex: 1; background: transparent; border: none; color: var(--ivory);
  padding: 0.9rem 1.2rem; font-family: inherit; font-size: 0.95rem;
  outline: none;
}
.newsletter input::placeholder { color: rgba(244,241,251,0.4); }

/* ---------- footer ---------- */
footer {
  background: var(--midnight-2); color: rgba(244,241,251,0.7); padding: 3.6rem 0 1.6rem;
  border-top: 1px solid var(--line);
}
footer .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.2rem; }
footer h5 { font-family: var(--serif); font-size: 1.1rem; color: var(--ivory); margin: 0 0 0.8rem; font-weight: 400; letter-spacing: 0.04em; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.88rem; }
footer a:hover { color: var(--champagne); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244,241,251,0.5);
}
.foot-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.foot-logo img { width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 0 0 1px var(--champagne), 0 0 24px -6px rgba(212,180,138,0.4); }
.foot-logo span { font-family: var(--serif); font-size: 1.9rem; color: var(--ivory); }

/* ---------- page hero (interior) ---------- */
.page-hero {
  padding: clamp(9rem, 16vw, 14rem) 0 clamp(4rem, 8vw, 7rem);
  color: var(--ivory); position: relative; overflow: hidden;
  background: var(--midnight);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(107,75,160,0.45), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(212,180,138,0.2), transparent 60%);
}
.page-hero .wrap { position: relative; }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
/* --bg-pos lets a page aim the crop window when the source photo is taller
   than the hero band (default centre is unchanged for existing heroes). */
.page-hero.imaged::before {
  background:
    linear-gradient(180deg, rgba(10,10,18,0.35), rgba(10,10,18,0.7)),
    var(--bg) var(--bg-pos, center)/cover;
}
/* The shop hero photo is a pale, high-key scene, so the standard .imaged
   scrim (0.35 -> 0.70) leaves the champagne heading at ~1.7:1. This variant
   deepens the scrim toward the lower-left, where all the copy sits, and lets
   it fall away to the right so the crystals stay visible. Measured worst-case
   over the actual photo: crumbs 4.9:1, h1 em 5.1:1, lead 6.4:1. */
.page-hero.imaged.imaged-light::before {
  background:
    linear-gradient(100deg,
      rgba(10,10,18,0.60) 0%,
      rgba(10,10,18,0.16) 55%,
      rgba(10,10,18,0) 78%),
    linear-gradient(180deg,
      rgba(10,10,18,0.30) 0%,
      rgba(10,10,18,0.56) 30%,
      rgba(10,10,18,0.88) 100%),
    var(--bg) var(--bg-pos, center)/cover;
}
.crumbs { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--champagne); margin-bottom: 1.5rem; }

/* Rounded pill matching the home hero's "The Auranest Collection · 2026"
   eyebrow: serif italic inside a 999px champagne-bordered capsule. The hero
   version is light-on-dark; inverted here for the light page background, where
   champagne text would only reach 1.76:1. */
.crumbs-row { display: block; }
.crumbs-light {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 0.2rem 0.6rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: none;
  color: var(--cosmic);
  padding: 0.42rem 1.15rem;
  border: 1px solid rgba(212,180,138,0.55);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(230,201,154,0.14), rgba(244,241,251,0.65));
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px -8px rgba(212,180,138,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
  margin-bottom: 1.5rem;
  max-width: 100%;
}
.crumbs-light a {
  color: var(--cosmic);
  text-decoration: none;
  transition: color 0.45s var(--ease);
}
.crumbs-light a:hover { color: var(--midnight); }
.crumbs-light .sep { color: #b9945f; font-style: normal; }
/* Current page carries the emphasis, as the hero's year does. */
.crumbs-light .current { color: var(--midnight); font-weight: 600; }

/* ---------- product page ---------- */
.pdp {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(4rem, 8vw, 7rem) 0;
  /* Trimmed from the top padding: the buy row and the "Related pieces."
     heading below were stacking two full section paddings between them. */
  padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
}
/* Pulls the related grid up toward the product it belongs to. */
.pdp-related { padding-top: clamp(1.75rem, 3.25vw, 3rem); }
.pdp-gallery { display: grid; gap: 1rem; }
.pdp-hero {
  aspect-ratio: 4/5; overflow: hidden; border-radius: 6px; background: var(--ivory-2);
  position: relative;
}
.pdp-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pdp-hero:hover img { transform: scale(1.05); }
.pdp-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.pdp-thumbs img { aspect-ratio: 1; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.7; transition: opacity 0.3s; }
.pdp-thumbs img:hover, .pdp-thumbs img.active { opacity: 1; }

.pdp-info { position: sticky; top: 100px; align-self: start; }
.pdp-info .cat {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--midnight);
  background: linear-gradient(135deg, rgba(230,201,154,0.18), rgba(212,180,138,0.08));
  border: 1px solid var(--champagne);
  border-left: 3px solid var(--champagne);
  padding: 0.55rem 1.1rem 0.55rem 0.9rem;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 4px 18px -6px rgba(212,180,138,0.55), inset 0 0 0 1px rgba(255,255,255,0.4);
  background-clip: padding-box;
}
.pdp-info .cat::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--champagne);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--champagne-2);
  flex: 0 0 8px;
}
.pdp-info .cat::after {
  content: '';
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--champagne), transparent);
  margin-left: 0.25rem;
}
.pdp-info h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); margin: 1rem 0 1.2rem; font-weight: 600; }
.pdp-info .price { font-size: 1.6rem; font-family: var(--serif); margin-bottom: 2rem; font-weight: 600; }
.pdp-desc { color: var(--text-dark); margin-bottom: 2.5rem; font-size: 1.05rem; line-height: 1.7; font-weight: 500; }
/* Benefits imported from the crystal reference sheets. */
.pdp-benefits {
  margin-bottom: 2.5rem; padding: 1.8rem 2rem;
  background: rgba(10,10,18,0.03); border-radius: 4px;
  border-left: 2px solid var(--champagne);
}
.pdp-benefits-head { margin-bottom: 1.2rem; }
.pdp-benefits-head .eyebrow { color: var(--text-mute); }
.pdp-benefits-head h4 {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
  margin: 0.5rem 0 0; line-height: 1.35;
}
.pdp-benefits-head h4 em {
  font-style: italic; font-weight: 400; color: var(--text-mute); font-size: 0.95em;
}
.pdp-benefits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.pdp-benefits li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.95rem; line-height: 1.6; color: var(--text-dark);
}
.pdp-benefits li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--champagne);
}

.pdp-attrs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem;
  padding: 2rem 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  margin-bottom: 2rem;
}
.pdp-attrs dt { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 0.3rem; }
.pdp-attrs dd { margin: 0 0 0.8rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.pdp-qty {
  display: inline-flex; align-items: center; gap: 1rem;
  border: 1px solid var(--line-dark); border-radius: 999px;
  padding: 0.4rem 1rem; margin-right: 1rem;
}
.pdp-qty button { width: 28px; height: 28px; font-size: 1rem; }
.pdp-buy { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- cart drawer ---------- */
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(10,10,18,0.5);
  opacity: 0; pointer-events: none; z-index: 199;
  transition: opacity 0.4s var(--ease);
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--ivory); z-index: 200;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
  display: flex; flex-direction: column;
  box-shadow: -30px 0 60px -20px rgba(10,10,18,0.3);
}
.drawer.open { transform: translateX(0); }
.drawer header {
  padding: 1.6rem 2rem; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line-dark);
}
.drawer header h3 { font-family: var(--serif); font-size: 1.4rem; margin: 0; }
.drawer-items { flex: 1; overflow-y: auto; padding: 1rem 2rem; }
.drawer-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-dark); align-items: center; }
.drawer-item img { width: 80px; height: 96px; object-fit: cover; border-radius: 4px; }
.drawer-item .name { font-family: var(--serif); font-size: 1.05rem; }
.drawer-item .qtybox { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; font-size: 0.85rem; }
.drawer-item .qtybox button { border: 1px solid var(--line-dark); width: 22px; height: 22px; border-radius: 50%; }
.drawer-item .remove { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); margin-top: 0.4rem; display: inline-block; }
.drawer footer {
  padding: 1.6rem 2rem; border-top: 1px solid var(--line-dark);
  display: grid; gap: 1rem;
}
.drawer footer .total { display: flex; justify-content: space-between; font-family: var(--serif); font-size: 1.4rem; }
.drawer .empty { padding: 4rem 2rem; text-align: center; color: var(--text-mute); }

/* ---------- forms ---------- */
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: #101018; margin-bottom: 0.5rem; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.9rem 1rem;
  border: 1px solid var(--line-dark); border-radius: 4px;
  font-family: inherit; font-size: 1rem;
  background: #fff; color: #07070d;
  font-weight: 600;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--champagne);
  box-shadow: 0 0 0 4px rgba(212,180,138,0.25), 0 16px 36px -28px rgba(10,10,18,0.7);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.booking-wizard {
  padding: clamp(1.2rem, 3vw, 2.4rem);
  border: 1px solid rgba(212,180,138,0.35);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42));
  box-shadow: 0 30px 90px -70px rgba(10,10,18,0.55);
}
.booking-wizard .field input,
.booking-wizard .field textarea,
.booking-wizard .field select {
  background: #fff;
  border: 2px solid rgba(212,180,138,0.6);
  border-radius: 10px;
  color: #05050b;
  font-weight: 700;
}
.booking-wizard .field label,
.booking-wizard h2,
.booking-wizard h4,
.booking-wizard p {
  color: #05050b;
  font-weight: 600;
}

/* ---------- booking steps ---------- */
.stepper {
  display: flex; gap: 0.5rem; margin-bottom: 3rem;
  justify-content: center; flex-wrap: wrap;
}
.stepper .step {
  padding: 0.5rem 1rem; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; color: var(--text-mute);
}
.stepper .step.active { background: var(--midnight); color: var(--ivory); border-color: var(--midnight); }

.booking-session-title {
  white-space: nowrap;
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
}

/* No consultation is pre-selected, so the wizard needs to say so up front and
   flag the omission if Continue is pressed early. */
.service-hint {
  margin: 0 0 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.service-error {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(217, 90, 90, 0.45);
  border-radius: 8px;
  background: rgba(217, 90, 90, 0.08);
  color: #8f3b3b;
  font-size: 0.92rem;
}
.service-error[hidden] { display: none; }
.service-choice.invalid label { border-color: rgba(217, 90, 90, 0.5); }

.service-choice { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem); margin-bottom: 2rem; }
.service-choice label {
  min-height: clamp(360px, 42vw, 500px);
  border: 1px solid rgba(10,10,18,0.12); border-radius: 22px;
  cursor: pointer; transition: all 0.4s var(--ease);
  position: relative; overflow: hidden;
  box-shadow: 0 24px 70px -54px rgba(10,10,18,0.8);
}
/* Keep the radio focusable but invisible; focus is mirrored onto the card below
   so keyboard users can see where they are. */
.service-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.service-choice input:checked + .card-radio {
  border-color: var(--champagne);
  box-shadow: inset 0 0 0 3px var(--champagne), 0 28px 80px -48px rgba(10,10,18,0.9);
}
/* Nothing is pre-selected any more, so the chosen card has to be obvious at a
   glance: lift it, ring it in champagne, and mark it with a tick. */
.service-choice label:has(input:checked) {
  border-color: var(--champagne);
  transform: translateY(-6px);
  box-shadow: 0 30px 80px -46px rgba(10,10,18,0.9);
}
.service-choice label:has(input:checked)::after {
  content: '✓';
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--champagne);
  color: var(--midnight);
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 6px 18px -8px rgba(10,10,18,0.9);
}
.service-choice input:focus-visible + .card-radio {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}
.service-choice label:hover { transform: translateY(-6px); }
.card-radio {
  min-height: 100%;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  border: 1px solid rgba(244,241,251,0.28);
  border-radius: 22px;
  transition: all 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  color: var(--ivory);
  background: var(--midnight);
}
.card-radio::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(10,10,18,0.16), rgba(10,10,18,0.52) 48%, rgba(10,10,18,0.9)),
    var(--service-image) center/cover;
  transition: transform 1.1s var(--ease), filter 0.5s var(--ease);
}
.card-radio::after {
  content: '';
  position: absolute;
  inset: auto 1.2rem 1.2rem 1.2rem;
  height: 42%;
  z-index: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, transparent, rgba(10,10,18,0.42));
  pointer-events: none;
}
.service-choice label:hover .card-radio::before { transform: scale(1.06); filter: saturate(1.08); }
.tarot-option { --service-image: url('/img/tarot-consultation.jpg'); }
.numerology-option { --service-image: url('/img/numerology-card.jpg'); }
.card-radio > * { position: relative; z-index: 1; }
.service-badge {
  align-self: flex-start;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(244,241,251,0.34);
  border-radius: 999px;
  background: rgba(10,10,18,0.42);
  backdrop-filter: blur(10px);
  color: rgba(244,241,251,0.86);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.card-radio h4 { font-family: var(--serif); font-size: clamp(2.5rem, 4.8vw, 4.3rem); line-height: 0.95; margin: 0 0 0.8rem; }
.card-radio p { color: rgba(244,241,251,0.82); margin: 0; font-size: clamp(1rem, 1.4vw, 1.14rem); max-width: 34ch; }
.booking-wizard .card-radio h4,
.booking-wizard .card-radio p {
  color: var(--ivory);
  font-weight: 600;
}

/* ---------- session length (tiered consultations) ---------- */
/* Revealed only when a length-priced consultation is selected. */
.duration-choice { margin: 0 0 2rem; }
.duration-choice[hidden] { display: none; }
.duration-label {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.duration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; }
.duration-option { position: relative; display: block; cursor: pointer; }
.duration-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.duration-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(10,10,18,0.14);
  border-radius: 14px;
  background: #fff;
  transition: all 0.3s var(--ease);
}
.duration-option:hover .duration-card { border-color: rgba(10,10,18,0.4); transform: translateY(-3px); }
.duration-time {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--midnight);
}
.duration-price {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--text-mute);
}
.duration-option input:checked + .duration-card {
  border-color: var(--midnight);
  background: var(--midnight);
  box-shadow: 0 18px 44px -30px rgba(10,10,18,0.9);
}
.duration-option input:checked + .duration-card .duration-time { color: var(--ivory); }
.duration-option input:checked + .duration-card .duration-price { color: var(--champagne); }
.duration-option input:focus-visible + .duration-card {
  outline: 2px solid var(--midnight);
  outline-offset: 3px;
}
.duration-choice.invalid .duration-card { border-color: rgba(217, 90, 90, 0.55); }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; }
.slot { padding: 0.8rem; text-align: center; border: 1px solid var(--line-dark); border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: all 0.3s; }
.slot:hover, .slot.active { background: var(--midnight); color: var(--ivory); border-color: var(--midnight); }

/* ---------- about / founder ---------- */
.founder-portrait {
  width: 100%; border-radius: 6px; display: block;
  /* The source photo is a tall 2:3 portrait; cap it so it does not tower
     over the bio column on wide screens. */
  max-height: 620px; object-fit: cover; object-position: center 22%;
}
.founder-contact {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line-dark);
}
.founder-contact-item p { margin: 0.6rem 0 0; color: var(--text-mute); line-height: 1.7; }
.founder-contact-item a { color: var(--midnight); border-bottom: 1px solid rgba(10,10,18,0.2); }
.founder-contact-item a:hover { border-color: var(--midnight); }

.founder-qr {
  display: flex; align-items: center; gap: 1.5rem; margin-top: 1.75rem;
  padding: 1.25rem; border: 1px solid var(--line-dark); border-radius: 6px;
}
.founder-qr > a { flex: 0 0 auto; display: block; }
/* 160px keeps the QR modules large enough to scan reliably from a screen;
   `contain` avoids cropping the finder patterns at the corners. */
.founder-qr img { width: 160px; height: 160px; object-fit: contain; border-radius: 6px; display: block; background: #fff; }
.founder-qr-text p { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--text-mute); line-height: 1.6; }
.founder-qr-handle {
  display: inline-block; margin-top: 0.5rem; font-family: var(--serif);
  font-size: 1.15rem; color: var(--midnight);
}
.founder-qr-handle:hover { color: var(--indigo); }

@media (max-width: 960px) {
  .about-split { grid-template-columns: 1fr !important; gap: 3rem !important; }
  .founder-portrait { max-height: 520px; }
}
@media (max-width: 520px) {
  .founder-contact { grid-template-columns: 1fr; gap: 1.5rem; }
  .founder-qr { flex-direction: column; align-items: flex-start; }
}

/* ---------- cart lines ---------- */
.cart-line {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 2rem;
  padding: 2rem 0; border-bottom: 1px solid var(--line-dark); align-items: center;
}
.cart-line.is-busy { opacity: 0.55; pointer-events: none; }
.cart-line.is-removing { opacity: 0; transform: translateX(-12px); transition: opacity 0.3s, transform 0.3s; }
.cart-line-img { display: block; }
.cart-line-img img { width: 120px; aspect-ratio: 4/5; object-fit: cover; border-radius: 4px; display: block; }
.cart-line-name { font-family: var(--serif); font-size: 1.4rem; display: block; margin-bottom: 0.4rem; }
.cart-line-meta {
  color: var(--text-mute); font-size: 0.7rem; letter-spacing: 0.24em;
  text-transform: uppercase; margin-bottom: 0.35rem;
}
.cart-line-price-each { font-size: 0.85rem; color: var(--text-mute); margin-bottom: 0.9rem; }
.cart-line-total { font-family: var(--serif); font-size: 1.3rem; white-space: nowrap; }

.cart-qty { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid var(--line-dark); border-radius: 999px; padding: 0.25rem; }
.cart-qty button {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent;
  cursor: pointer; font-size: 1rem; line-height: 1; color: inherit; transition: background 0.25s, color 0.25s;
}
.cart-qty button:hover:not(:disabled) { background: var(--midnight); color: var(--ivory); }
.cart-qty button:disabled { opacity: 0.28; cursor: not-allowed; }
.cart-qty input {
  width: 42px; border: none; background: transparent; text-align: center;
  font-family: var(--serif); font-size: 1rem; color: inherit;
}
.cart-qty input:focus-visible { outline: 1px solid var(--champagne); border-radius: 3px; }

.cart-line-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.85rem; flex-wrap: wrap; }
.cart-remove {
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-mute); transition: color 0.25s;
}
.cart-remove:hover { color: #b4443f; }
.cart-line-note { font-size: 0.72rem; color: var(--champagne); letter-spacing: 0.06em; }
.cart-empty-state { text-align: center; padding: 5rem 0; }

@media (max-width: 640px) {
  .cart-line { grid-template-columns: 88px 1fr; gap: 1.1rem; }
  .cart-line-img img { width: 88px; }
  .cart-line-total { grid-column: 2; text-align: left; }
}

/* ---------- checkout summary ---------- */
.checkout-back { padding-top: clamp(2rem, 4vw, 3.5rem); }
.btn-back::before { content: '←'; transition: transform 0.4s var(--ease); }
.btn-back:hover::before { transform: translateX(-6px); }

.checkout {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem;
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.checkout-back + .checkout { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.summary {
  background: var(--midnight); color: var(--ivory); padding: 2.5rem; border-radius: 8px;
  position: sticky; top: 100px; align-self: start;
}
.summary h3 { color: var(--ivory); }

/* order summary line items */
.summary-item {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.summary-thumb {
  width: clamp(96px, 8vw, 112px);
  aspect-ratio: 4 / 5;
  height: auto;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 5px;
  background: rgba(244, 241, 251, 0.06);
}
.summary-item-info { flex: 1; min-width: 0; font-size: 0.9rem; }
.summary-item-name { font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; }
.summary-item-qty { color: rgba(244, 241, 251, 0.5); font-size: 0.8rem; margin-top: 0.35rem; }
.summary-item-price { font-family: var(--serif); white-space: nowrap; }

.summary .line { display: flex; justify-content: space-between; padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.summary .line:last-child { border-bottom: none; }
.summary .grand { font-family: var(--serif); font-size: 1.6rem; padding-top: 1.5rem; }

.pay-choices { display: flex; gap: 0.75rem; }
.pay-choices label {
  flex: 1; padding: 1rem; border: 1px solid var(--line-dark); border-radius: 6px;
  text-align: center; cursor: pointer; font-size: 0.85rem;
  transition: all 0.3s;
}
.pay-choices input { display: none; }
.pay-choices input:checked + span { color: var(--midnight); font-weight: 500; }
.pay-choices label:has(input:checked) { border-color: var(--midnight); background: var(--ivory-2); }

/* ---------- admin ---------- */
.admin-wrap { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: #06060d; color: var(--ivory); }
.admin-side { padding: 2rem; border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; }
.admin-side .logo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 3rem; font-family: var(--serif); font-size: 1.4rem; }
.admin-side .logo img { width: 36px; height: 36px; border-radius: 50%; }
.admin-side nav { display: grid; gap: 0.4rem; font-size: 0.85rem; }
.admin-side nav a { padding: 0.7rem 1rem; border-radius: 4px; color: rgba(244,241,251,0.6); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; }
.admin-side nav a.active, .admin-side nav a:hover { background: var(--indigo); color: var(--ivory); }
.admin-main { padding: 3rem clamp(2rem, 4vw, 4rem); }
.admin-main h1 { font-size: 2.5rem; margin: 0 0 2rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-bottom: 3rem; }
.stat {
  padding: 2rem; background: linear-gradient(160deg, var(--indigo), var(--midnight-2));
  border-radius: 8px; border: 1px solid var(--line);
}
.stat .label { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244,241,251,0.5); margin-bottom: 0.8rem; }
.stat .value { font-family: var(--serif); font-size: 2.6rem; }
.stat .delta { color: var(--champagne); font-size: 0.8rem; margin-top: 0.5rem; }
.admin-card { background: var(--midnight-2); border: 1px solid var(--line); border-radius: 8px; padding: 2rem; margin-bottom: 1.5rem; }
.admin-card h3 { margin-top: 0; font-family: var(--serif); font-weight: 500; }
.admin-wrap .field label,
.admin-wrap .booking-status-form label {
  color: rgba(244,241,251,0.78);
}
.admin-wrap .field input,
.admin-wrap .field select,
.admin-wrap .field textarea,
.booking-status-form select {
  background: #fff;
  color: #05050b;
  border-color: var(--champagne);
  border-radius: 7px;
  font-weight: 700;
}
.admin-help {
  margin-top: -0.4rem;
  color: rgba(244,241,251,0.68);
  font-weight: 500;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.admin-form-grid .full { grid-column: 1 / -1; }
.admin-filter-row {
  display: flex;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
}
.admin-filter-row .field { min-width: min(320px, 100%); margin-bottom: 0; }
.admin-product-list {
  display: grid;
  gap: 0.9rem;
}
.admin-product-row {
  background: var(--midnight-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.admin-product-row summary {
  display: grid;
  grid-template-columns: 72px minmax(220px, 1fr) minmax(110px, auto) minmax(160px, auto) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}
.admin-product-row summary::-webkit-details-marker { display: none; }
.admin-product-row[open] summary {
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.035);
}
.admin-product-row summary > img,
.mini-editor > img,
.wide-editor > img,
.admin-check img {
  width: 100%;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--line);
}
.admin-product-row summary > img { width: 72px; height: 72px; }
.admin-product-meta strong {
  display: block;
  color: var(--ivory);
  margin-bottom: 0.25rem;
}
.admin-product-meta span {
  color: rgba(244,241,251,0.55);
  font-size: 0.84rem;
}
.admin-product-price {
  color: var(--champagne);
  font-weight: 700;
  white-space: nowrap;
}
.admin-product-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.admin-product-badges span {
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  background: rgba(212,180,138,0.13);
  color: var(--champagne);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.admin-edit-toggle {
  justify-self: end;
  color: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-product-row[open] .admin-edit-toggle {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--midnight);
}
.admin-product-editor { padding: 1.2rem; }
.admin-product-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.stock-list {
  display: grid;
  gap: 0.85rem;
}
.stock-row {
  display: grid;
  grid-template-columns: 74px minmax(220px, 1fr) minmax(140px, 180px) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
}
.stock-row img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.stock-row strong {
  display: block;
  color: var(--ivory);
  margin-bottom: 0.3rem;
}
.stock-row span {
  color: rgba(244,241,251,0.55);
  font-size: 0.84rem;
}
.stock-row .field { margin-bottom: 0; }
.admin-inline-check,
.admin-check {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(244,241,251,0.86);
  font-weight: 600;
}
.admin-edit-grid,
.admin-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.mini-editor {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
}
.mini-editor > img { height: 135px; margin-bottom: 1rem; }
.wide-editor {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 1rem;
}
.wide-editor > img { height: 170px; }
.admin-check {
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
}
.admin-check img {
  width: 54px;
  height: 64px;
  flex: 0 0 54px;
}
.admin-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.admin-shortcuts a {
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.admin-shortcuts a:hover {
  border-color: var(--champagne);
  transform: translateY(-3px);
}
.admin-shortcuts strong {
  display: block;
  color: var(--ivory);
  margin-bottom: 0.45rem;
}
.admin-shortcuts span {
  color: rgba(244,241,251,0.62);
  font-size: 0.92rem;
}
.booking-admin-list { display: grid; gap: 1rem; }
.booking-admin-card {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
}
.booking-admin-card h3 {
  margin: 0.5rem 0;
  color: var(--ivory);
}
/* The consultation type is the first thing staff scan for, so give it the
   champagne treatment rather than burying it in the body copy. */
.booking-admin-card .booking-service {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.35rem 0 0;
}
.booking-service-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--champagne);
}
.booking-service-meta {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,241,251,0.55);
}
.booking-service-missing { color: rgba(240,180,180,0.9); font-style: italic; }
.booking-admin-card p {
  color: rgba(244,241,251,0.72);
  margin: 0.45rem 0;
}
.booking-status-form {
  display: grid;
  align-content: start;
  gap: 0.7rem;
}
.booking-admin-actions { display: grid; gap: 0.7rem; align-content: start; }
.booking-delete-form { display: grid; }
.btn-danger {
  background: transparent;
  color: #f0b4b4;
  border: 1px solid rgba(217, 90, 90, 0.55);
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-danger:hover { background: rgba(217, 90, 90, 0.18); color: #ffd7d7; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244,241,251,0.5); padding: 0.8rem; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 1rem 0.8rem; border-bottom: 1px solid var(--line); }
.pill { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }
.pill.rec { background: rgba(212,180,138,0.15); color: var(--champagne); }
.pill.pend { background: rgba(217,164,154,0.15); color: var(--rose-gold); }
.chart { height: 240px; display: flex; align-items: end; gap: 0.5rem; padding-top: 1rem; }
.chart .bar { flex: 1; background: linear-gradient(180deg, var(--champagne), var(--cosmic-2)); border-radius: 4px 4px 0 0; opacity: 0.85; }
/* A month with no revenue still needs a baseline, or the axis labels would sit
   under empty space with nothing to read them against. */
.chart .bar-empty { background: rgba(244,241,251,0.12); min-height: 2px; opacity: 1; }

/* ---------- utility ---------- */
/* Scroll-in cascade for cards and images. Was 1s with delays up to 0.45s, so a
   four-across grid took ~1.45s to finish settling and the last card still felt
   like it was catching up. Halved to 0.45s with a 0.07s step: the stagger is
   still legible as a cascade but the whole row lands in ~0.66s. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-2 { transition-delay: 0.07s; }
.reveal-3 { transition-delay: 0.14s; }
.reveal-4 { transition-delay: 0.21s; }
.split span { display: inline-block; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav { padding: 0.85rem 0; }
  .nav-inner {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "logo cart"
      "links links";
    gap: 0.75rem 1rem;
  }
  .nav-logo { grid-area: logo; font-size: 1.55rem; gap: 0.75rem; }
  .nav-logo img { width: 52px; height: 52px; }
  .nav-logo::before {
    left: -8px;
    top: -8px;
    width: 68px;
    height: 68px;
  }
  .nav-links {
    grid-area: links;
    justify-content: center;
    gap: clamp(0.8rem, 2.5vw, 1.6rem);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
  }
  .nav-actions {
    grid-area: cart;
    justify-self: end;
  }
}
@media (max-width: 960px) {
  .showcase-layout, .editorial-layout, .services-layout, .editorial, .services-grid, .checkout, .pdp, .service-choice, .field-row { grid-template-columns: 1fr; }
  .showcase-copy, .editorial-copy, .services-copy { position: static; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-filter { position: relative; top: auto; }
  .filter-list { max-height: none; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .admin-product-row summary { grid-template-columns: 64px 1fr; }
  .admin-product-price, .admin-product-badges, .admin-edit-toggle { grid-column: 2; justify-self: start; }
  .wide-editor, .booking-admin-card { grid-template-columns: 1fr; }
  .stock-row { grid-template-columns: 74px 1fr; }
  .stock-row .field, .stock-row .btn { grid-column: 1 / -1; }
  .wide-editor > img { height: 220px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .admin-wrap { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; }
  .hero-3d { display: none; }
  .pdp-info { position: static; }
  .summary { position: static; }
  .summary-thumb { width: 88px; }
}
@media (max-width: 640px) {
  /* A long product name would wrap the capsule into a tall blob, so on narrow
     screens the pill carries the trail only and the product name drops out —
     the <h1> immediately below already states it. */
  .crumbs-light {
    font-size: 0.88rem;
    padding: 0.42rem 1.1rem;
    letter-spacing: 0.08em;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .crumbs-light::-webkit-scrollbar { display: none; }
  /* Hiding .current leaves its preceding separator dangling; drop that too. */
  .crumbs-light .current,
  .crumbs-light .sep:nth-of-type(3) { display: none; }

  .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem 0.8rem;
  }
  .nav-logo {
    min-width: 0;
    font-size: 1.25rem;
  }
  .nav-logo img { width: 44px; height: 44px; }
  .nav-logo span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-links {
    justify-content: flex-start;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 0.55rem 0 0.15rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    flex: 0 0 auto;
    padding: 0.52rem 0.7rem;
    border: 1px solid rgba(244,241,251,0.24);
    border-radius: 999px;
    background: rgba(10,10,18,0.24);
    letter-spacing: 0.14em;
    font-size: 0.62rem;
  }
  .nav.solid .nav-links a {
    border-color: rgba(10,10,18,0.13);
    background: rgba(255,255,255,0.42);
  }
  .nav-links a::after { display: none; }
  .nav-cart {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
  }
  .menu-toggle { display: inline-flex; }
  .foot-grid { grid-template-columns: 1fr; }
  .pdp-attrs { grid-template-columns: 1fr; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .showcase-grid { grid-template-columns: 1fr; }
  .shop-toolbar { align-items: start; flex-direction: column; }
  .active-filters { text-align: left; }
  .newsletter form { flex-direction: column; border-radius: 20px; }
  .newsletter input { text-align: center; }
}

/* ---------- philosophy (dark) ---------- */
/* Sits directly above the dark footer, so this uses the deeper --midnight with a
   cosmic wash to separate it from footer's --midnight-2 rather than blending in. */
.philosophy {
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(58,39,97,0.55) 0%, transparent 60%),
    radial-gradient(90% 80% at 95% 100%, rgba(107,75,160,0.28) 0%, transparent 55%),
    var(--midnight);
  color: var(--ivory);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.philosophy h2 { color: var(--ivory); }
.philosophy .eyebrow { color: var(--champagne); }

.phil-card {
  position: relative;
  padding: 2.1rem 1.75rem 2rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(244,241,251,0.05) 0%, rgba(244,241,251,0.015) 100%);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), background 0.5s var(--ease);
}
.phil-card::before {
  content: "";
  position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
  opacity: 0.35;
  transition: opacity 0.5s var(--ease);
}
.phil-card:hover {
  border-color: rgba(212,180,138,0.42);
  background: linear-gradient(180deg, rgba(244,241,251,0.08) 0%, rgba(244,241,251,0.02) 100%);
  transform: translateY(-4px);
}
.phil-card:hover::before { opacity: 0.85; }

/* The numeral is the anchor of each card, so it gets the serif + champagne
   treatment while the label stays in the uppercase eyebrow voice. */
.phil-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--champagne);
  opacity: 0.55;
  margin-bottom: 0.9rem;
}
.phil-card .phil-label { color: var(--champagne-2); }
.phil-card p {
  margin-top: 0.9rem;
  color: rgba(244,241,251,0.66);
  line-height: 1.75;
}

@media (max-width: 960px) {
  .phil-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
}
@media (max-width: 640px) {
  .phil-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  .phil-card { padding: 1.75rem 1.4rem; }
  .phil-num { font-size: 2.2rem; }
}

/* ---------- booking: fixed-fee service scope panel ---------- */
/* Reveals what a fixed-fee consultation covers, taking the slot the length
   picker occupies for tiered services. */
.service-details {
  margin: 0 0 2rem;
  padding: 1.75rem clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-dark);
  border-left: 2px solid var(--champagne);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(212,180,138,0.07) 0%, rgba(212,180,138,0.02) 100%);
}
.service-details[hidden] { display: none; }
.service-details-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem;
}
.service-details-head h3 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 400;
  margin: 0;
  color: var(--text-dark);
}
.service-details-price {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--cosmic);
  white-space: nowrap;
}
.service-details-intro { margin: 0 0 1.4rem; color: var(--text-mute); line-height: 1.7; }
.service-details-label {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
}
/* Fifteen items in one column would run long, so they flow into columns and
   fall back to a single column on narrow screens. */
.service-details-list {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.55rem 1.75rem;
}
.service-details-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-dark);
}
.service-details-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--champagne);
}
.service-details-outro {
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-mute);
  line-height: 1.7;
}
@media (max-width: 520px) {
  .service-details { padding: 1.4rem 1.15rem; }
  .service-details-list { grid-template-columns: 1fr; }
}