/* ── NOCT Design Tokens ── */
:root {
  /* PHASE-1 added — soft yellow CTA */
  --noct-cta:          #ffe8a3;
  --noct-cta-2:        #f8d978;
  --noct-cta-text:     #2d2854;

  --noct-black:         #eadcf3;
  --noct-ink:           #f1e2f2;
  --noct-navy:          #e6d4ef;
  --noct-navy-2:        #ecdcf4;
  --noct-line:          rgba(91,74,135,0.14);
  --noct-line-soft:     rgba(91,74,135,0.08);
  --noct-line-strong:   rgba(91,74,135,0.24);
  --noct-white:         #34295f;
  --noct-text:          rgba(63,51,108,0.92);
  --noct-dim:           rgba(63,51,108,0.65);
  --noct-dim-2:         rgba(63,51,108,0.42);
  --noct-dim-3:         rgba(63,51,108,0.26);
  --noct-accent:        #6f9d86;
  --noct-accent-bright: #83b79b;
  --noct-accent-soft:   rgba(111,157,134,0.16);
  --noct-accent-glow:   rgba(198,168,222,0.40);
  --noct-sky-tint:      rgba(198,168,222,0.30);
  --noct-horizon:       rgba(232,200,222,0.24);
  --noct-sun-glow:      rgba(255,232,163,0.18);
  --noct-warn:          #d4a06b;
  --noct-good:          #6f9d86;
  --font-display:       'Instrument Serif', 'Times New Roman', serif;
  --font-sans:          'Geist', 'Inter', -apple-system, sans-serif;
  --font-mono:          'Geist Mono', 'IBM Plex Mono', monospace;
  --r-1: 4px; --r-2: 10px; --r-3: 18px; --r-pill: 999px;
  --ease:               cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-smooth:        cubic-bezier(0.4, 0, 0.2, 1);
  --tod-transition:     1.2s;
}

[data-tod="morning"] {
  /* PHASE 1 — light, warm peach-lilac morning */
  --noct-black:#eadcf3;--noct-ink:#f8eef0;--noct-navy:#f1dfe4;--noct-navy-2:#f6e7ea;
  --noct-accent:#6f9d86;--noct-accent-bright:#8fbfa6;
  --noct-accent-soft:rgba(111,157,134,0.16);--noct-accent-glow:rgba(245,200,170,0.40);
  --noct-sky-tint:rgba(198,168,222,0.30);--noct-horizon:rgba(255,200,200,0.22);--noct-sun-glow:rgba(255,232,163,0.24);
  --noct-white:#34295f;--noct-text:rgba(64,48,92,0.92);
  --noct-dim:rgba(63,51,108,0.65);--noct-dim-2:rgba(64,48,92,0.42);--noct-dim-3:rgba(64,48,92,0.26);
}
[data-tod="day"] {
  /* PHASE 1 — light, bright lilac day */
  --noct-black:#eadcf3;--noct-ink:#f4ecf8;--noct-navy:#e8def2;--noct-navy-2:#efe6f6;
  --noct-accent:#6f9d86;--noct-accent-bright:#83b79b;
  --noct-accent-soft:rgba(111,157,134,0.16);--noct-accent-glow:rgba(190,170,228,0.40);
  --noct-sky-tint:rgba(198,168,222,0.30);--noct-horizon:rgba(220,200,235,0.20);--noct-sun-glow:rgba(255,238,190,0.18);
  --noct-white:#34295f;--noct-text:rgba(63,51,108,0.92);
  --noct-dim:rgba(63,51,108,0.65);--noct-dim-2:rgba(63,51,108,0.42);--noct-dim-3:rgba(63,51,108,0.26);
}
[data-tod="evening"] {
  /* PHASE 1 — light, pink-lilac evening */
  --noct-black:#eadcf3;--noct-ink:#f3e2f3;--noct-navy:#e8d2ee;--noct-navy-2:#efdcf2;
  --noct-accent:#6f9d86;--noct-accent-bright:#83b79b;
  --noct-accent-soft:rgba(111,157,134,0.16);--noct-accent-glow:rgba(206,168,222,0.42);
  --noct-sky-tint:rgba(198,168,222,0.30);--noct-horizon:rgba(232,190,214,0.24);--noct-sun-glow:rgba(255,228,180,0.18);
  --noct-white:#34295f;--noct-text:rgba(60,46,100,0.92);
  --noct-dim:rgba(63,51,108,0.65);--noct-dim-2:rgba(60,46,100,0.42);--noct-dim-3:rgba(60,46,100,0.26);
}
[data-tod="night"] {
  /* PHASE 1 — light, cool moonlit lilac night */
  --noct-black:#eadcf3;--noct-ink:#ede4f5;--noct-navy:#e0d4ee;--noct-navy-2:#e8def3;
  --noct-accent:#6f9d86;--noct-accent-bright:#83b79b;
  --noct-accent-soft:rgba(111,157,134,0.16);--noct-accent-glow:rgba(180,160,224,0.40);
  --noct-sky-tint:rgba(198,168,222,0.30);--noct-horizon:rgba(200,185,228,0.20);--noct-sun-glow:rgba(238,232,210,0.16);
  --noct-white:#34295f;--noct-text:rgba(58,50,104,0.92);
  --noct-dim:rgba(63,51,108,0.65);--noct-dim-2:rgba(58,50,104,0.40);--noct-dim-3:rgba(58,50,104,0.24);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--noct-black);
  color: var(--noct-text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","cv11";
  letter-spacing: -0.005em;
  overflow-x: hidden;
  transition: background-color var(--tod-transition) var(--ease-smooth),
              color var(--tod-transition) var(--ease-smooth);
}
::selection { background: var(--noct-accent); color: var(--noct-black); }

body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 110% 40% at 50% 0%, var(--noct-sky-tint) 0%, transparent 60%),
    radial-gradient(ellipse 80%  30% at 50% 5%, var(--noct-horizon)  0%, transparent 50%),
    radial-gradient(ellipse 50%  20% at 50% 0%, var(--noct-sun-glow) 0%, transparent 40%);
  transition: background var(--tod-transition) var(--ease-smooth);
}

/* ── Type utilities ── */
.serif  { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
.mono   { font-family: var(--font-mono); }
.italic { font-style: italic; }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--noct-dim); display: flex; align-items: center;
}
.eyebrow-dot::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--noct-accent); margin-right: 10px;
  box-shadow: 0 0 10px var(--noct-accent-glow); flex-shrink: 0;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 16px 28px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease);
  position: relative; user-select: none; white-space: nowrap;
}
.btn-primary { background: var(--noct-white); color: var(--noct-black); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 40px rgba(244,243,239,0.2); }
.btn-primary .btn-arrow { transition: transform .25s var(--ease); }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--noct-text); border-color: var(--noct-line-strong); }
.btn-ghost:hover { background: var(--noct-line-soft); border-color: var(--noct-dim-2); }
.btn-lg { padding: 20px 36px; font-size: 15px; }

/* ── Nav ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100; padding: 20px 40px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.nav.scrolled {
  background: rgba(5,7,13,0.82);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom-color: var(--noct-line);
}
[data-tod="morning"] .nav.scrolled { background: rgba(16,12,10,0.88); }
[data-tod="day"]     .nav.scrolled { background: rgba(5,8,15,0.88); }
[data-tod="evening"] .nav.scrolled { background: rgba(7,6,20,0.88); }
[data-tod="night"]   .nav.scrolled { background: rgba(2,3,6,0.92); }

.nav-logo {
  font-family: var(--font-sans); font-weight: 600;
  letter-spacing: 0.24em; font-size: 14px; color: var(--noct-white);
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-link { font-size: 13px; color: var(--noct-dim); text-decoration: none; transition: color .2s var(--ease); }
.nav-link:hover { color: var(--noct-white); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-time {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--noct-dim-2);
  display: flex; align-items: center; gap: 8px;
}
.nav-time-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--noct-accent); box-shadow: 0 0 8px var(--noct-accent-glow);
  animation: pulse 2.4s var(--ease-smooth) infinite; flex-shrink: 0;
}
.nav-tod-badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--noct-accent-soft); color: var(--noct-accent-bright); background: var(--noct-accent-soft);
}
.nav-cart { padding: 12px 18px; font-size: 13px; gap: 8px; }
.nav-cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--noct-line-soft); border: 1px solid var(--noct-line-strong);
  font-family: var(--font-mono); font-size: 10px; line-height: 1; color: var(--noct-text);
}

@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.55; transform:scale(.8); }
}

/* ── Hamburger ── */
.nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--noct-line-strong);
  border-radius: var(--r-2); cursor: pointer; padding: 0; flex-shrink: 0;
  position: relative; z-index: 110;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav-hamburger:hover { background: var(--noct-line-soft); border-color: var(--noct-dim-2); }
.nav-hamburger-line {
  display: block; width: 18px; height: 1.5px;
  background: var(--noct-text); border-radius: 2px; transform-origin: center;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-hamburger.is-open .nav-hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open .nav-hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open .nav-hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Drawer ── */
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 110; width: min(320px, 88vw);
  background: var(--noct-ink); border-left: 1px solid var(--noct-line);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .38s var(--ease),
              background-color var(--tod-transition) var(--ease-smooth),
              border-color var(--tod-transition) var(--ease-smooth);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--noct-line); flex-shrink: 0;
}
.nav-drawer-tod { display: flex; align-items: center; gap: 8px; }
.nav-drawer-time-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--noct-accent); box-shadow: 0 0 8px var(--noct-accent-glow);
  animation: pulse 2.4s var(--ease-smooth) infinite; flex-shrink: 0;
}
.nav-drawer-close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: transparent;
  border: 1px solid var(--noct-line-strong); border-radius: var(--r-1);
  cursor: pointer; color: var(--noct-dim);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.nav-drawer-close:hover { background: var(--noct-line-soft); border-color: var(--noct-dim-2); color: var(--noct-white); }
.nav-drawer-links { display: flex; flex-direction: column; padding: 12px 0; flex: 1; }
.nav-drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; font-size: 15px; font-weight: 400;
  color: var(--noct-dim); text-decoration: none; letter-spacing: -0.01em;
  border-bottom: 1px solid var(--noct-line-soft);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-drawer-link:last-child { border-bottom: none; }
.nav-drawer-link:hover { color: var(--noct-white); background: var(--noct-line-soft); }
.nav-drawer-link-arrow { font-size: 16px; opacity: 0.3; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.nav-drawer-link:hover .nav-drawer-link-arrow { opacity: 0.8; transform: translateX(3px); }
.nav-drawer-footer {
  padding: 20px 24px; border-top: 1px solid var(--noct-line);
  display: flex; flex-direction: column; gap: 12px; flex-shrink: 0;
}
.nav-drawer-footer .btn { width: 100%; justify-content: center; }
.nav-drawer-footer .btn-ghost  { padding: 14px 20px; font-size: 14px; }
.nav-drawer-footer .btn-primary { padding: 14px 20px; font-size: 14px; }
.nav-drawer-cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--noct-line-soft); border: 1px solid var(--noct-line-strong);
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
  color: var(--noct-text); margin-left: 4px;
}

body.nav-open { overflow: hidden; position: fixed; width: 100%; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .nav { padding: 16px 28px; }
  .nav-time { display: none; }
  .nav-tod-badge { display: none; }
}
@media (max-width: 760px) {
  .nav { padding: 14px 20px; }
  .nav-links     { display: none !important; }
  .nav-tod-badge { display: none !important; }
  .nav-time      { display: none !important; }
  .nav-cart      { display: none !important; }
  #noct-nav-cta  { display: none !important; }
  .nav-hamburger { display: flex; }
}


@media (max-width: 768px) {
  .hero-ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-ctas a {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}


@media (max-width: 768px) {
  .hero-meta {
    display: none !important;
  }
}


/* ── Layout ── */
.container      { width:100%; max-width:1360px; margin:0 auto; padding:0 40px; }
.container-wide { width:100%; max-width:1520px; margin:0 auto; padding:0 40px; }
.section      { position:relative; padding:140px 0; }
.section-tall { padding:180px 0; }
@media (max-width:900px) {
  .section,.section-tall { padding:96px 0; }
  .container,.container-wide { padding:0 24px; }
}

/* ── Section header ── */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:60px; flex-wrap:wrap; }
.sec-head-left { flex:1; max-width:720px; }
.sec-title { font-family:var(--font-display); font-weight:400; font-size:clamp(40px,5vw,72px); line-height:1; letter-spacing:-0.025em; color:var(--noct-white); margin:18px 0 0; }
.sec-title .italic { font-style:italic; color:var(--noct-accent-bright); }
.sec-sub { font-size:16px; color:var(--noct-dim); line-height:1.5; max-width:42ch; margin:0; }
@media (max-width:760px) { .sec-head { flex-direction:column; align-items:flex-start; } }

/* ── Hero ── */
.hero { min-height:100vh; position:relative; overflow:hidden; display:flex; align-items:center; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg-stars {
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,0.6),transparent),
    radial-gradient(1px 1px at 28% 62%,rgba(255,255,255,0.45),transparent),
    radial-gradient(1.5px 1.5px at 47% 22%,rgba(255,255,255,0.7),transparent),
    radial-gradient(1px 1px at 68% 81%,rgba(255,255,255,0.55),transparent),
    radial-gradient(1px 1px at 82% 34%,rgba(255,255,255,0.4),transparent),
    radial-gradient(1.5px 1.5px at 91% 71%,rgba(255,255,255,0.65),transparent),
    radial-gradient(1px 1px at 37% 42%,rgba(255,255,255,0.3),transparent),
    radial-gradient(1px 1px at 7%  88%,rgba(255,255,255,0.5),transparent),
    radial-gradient(1px 1px at 56% 7%, rgba(255,255,255,0.4),transparent);
}
.hero-bg-stars-sm {
  position:absolute; inset:0;
  background-image:
    radial-gradient(0.5px 0.5px at 22% 14%,rgba(255,255,255,0.6),transparent),
    radial-gradient(0.5px 0.5px at 38% 44%,rgba(255,255,255,0.5),transparent),
    radial-gradient(0.5px 0.5px at 58% 62%,rgba(255,255,255,0.55),transparent),
    radial-gradient(0.5px 0.5px at 77% 18%,rgba(255,255,255,0.65),transparent),
    radial-gradient(0.5px 0.5px at 93% 54%,rgba(255,255,255,0.45),transparent),
    radial-gradient(0.5px 0.5px at 15% 73%,rgba(255,255,255,0.5),transparent),
    radial-gradient(0.5px 0.5px at 46% 85%,rgba(255,255,255,0.4),transparent),
    radial-gradient(0.5px 0.5px at 68% 32%,rgba(255,255,255,0.5),transparent);
  opacity:0.6;
  animation:twinkle 8s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:0.35} 50%{opacity:0.7} }
.hero-bg-glow {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, var(--noct-accent-soft) 0%,transparent 50%),
    radial-gradient(ellipse 60% 50% at 15% 20%, var(--noct-sky-tint) 0%,transparent 60%),
    radial-gradient(ellipse 80% 70% at 50% 50%, var(--noct-navy) 0%,var(--noct-black) 70%);
}
.hero-bg-vignette {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 100% 80% at 50% 50%,transparent 40%,var(--noct-black) 100%);
}
.hero-content { position:relative; z-index:2; width:100%; padding-top:120px; padding-bottom:60px; }
.hero-eyebrow { margin-bottom:40px; }
.hero-headline { font-family:var(--font-display); font-weight:400; font-size:clamp(64px,9vw,148px); line-height:0.95; letter-spacing:-0.035em; color:var(--noct-white); margin:0 0 40px; max-width:14ch; }
.hero-headline .accent-word { font-style:italic; color:var(--noct-accent-bright); }
.hero-sub { font-size:clamp(16px,1.4vw,20px); line-height:1.5; color:var(--noct-dim); max-width:52ch; margin:0 0 56px; }
.hero-ctas { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.hero-figure { position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:52%; height:90%; z-index:1; opacity:0.75; mask-image:radial-gradient(ellipse 70% 70% at center,black 40%,transparent 85%); -webkit-mask-image:radial-gradient(ellipse 70% 70% at center,black 40%,transparent 85%); }
.hero-figure svg { width:100%; height:100%; }
.hero-meta { position:absolute; bottom:48px; left:40px; right:40px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; z-index:2; font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; color:var(--noct-dim-2); text-transform:uppercase; }
.hero-meta-item { display:flex; flex-direction:column; gap:6px; }
.hero-meta-label { color:var(--noct-dim-3); font-size:10px; }
.hero-meta-val { color:var(--noct-text); font-size:12px; letter-spacing:0.14em; }
@media (max-width:900px) { .hero-figure{display:none} }
@media (max-width:760px) { .hero-meta{position:static;margin-top:60px;flex-wrap:wrap;padding:0 24px;} }

/* ── Cost section ── */
.cost-list { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--noct-line); border-top:1px solid var(--noct-line); border-bottom:1px solid var(--noct-line); margin-top:80px; }
.cost-cell { background:var(--noct-black); padding:48px 32px; display:flex; flex-direction:column; gap:16px; min-height:280px; transition:background .3s ease; }
.cost-cell:hover { background:var(--noct-ink); }
.cost-num { font-family:var(--font-mono); font-size:11px; color:var(--noct-dim-3); letter-spacing:0.18em; }
.cost-label { font-family:var(--font-display); font-size:42px; font-style:italic; line-height:1; color:var(--noct-white); margin-bottom:8px; }
.cost-desc { font-size:14px; line-height:1.55; color:var(--noct-dim); max-width:32ch; }
.cost-metric { margin-top:auto; font-family:var(--font-mono); font-size:11px; color:var(--noct-accent-bright); letter-spacing:0.1em; padding-top:20px; border-top:1px solid var(--noct-line-soft); }
@media (max-width:900px) { .cost-list{grid-template-columns:1fr 1fr} }
@media (max-width:560px) { .cost-list{grid-template-columns:1fr} }

/* ── Reframe ── */
.reframe { background:var(--noct-ink); position:relative; overflow:hidden; }
.reframe::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,var(--noct-accent-soft) 0%,transparent 40%),radial-gradient(circle at 10% 90%,rgba(198,168,222,0.08) 0%,transparent 40%); pointer-events:none; }
.reframe-container { position:relative; z-index:1; }
.reframe-quote { font-family:var(--font-display); font-size:clamp(44px,6vw,96px); line-height:1.02; letter-spacing:-0.03em; color:var(--noct-white); max-width:22ch; margin:0 auto 40px; text-align:center; }
.reframe-quote .strike { position:relative; color:var(--noct-dim-2); }
.reframe-quote .strike::after { content:''; position:absolute; left:-4%; right:-4%; top:55%; height:2px; background:var(--noct-accent); transform:rotate(-3deg); }
.reframe-quote .reveal { font-style:italic; color:var(--noct-accent-bright); }
.reframe-body { max-width:58ch; margin:0 auto; text-align:center; font-size:17px; line-height:1.6; color:var(--noct-dim); }

/* ── Steps ── */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:72px; }
.step { background:var(--noct-ink); border:1px solid var(--noct-line); border-radius:var(--r-3); padding:40px 36px; display:flex; flex-direction:column; gap:20px; min-height:380px; overflow:hidden; transition:border-color .3s ease,transform .3s ease; }
.step:hover { border-color:var(--noct-accent-soft); transform:translateY(-4px); }
.step-num { font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; color:var(--noct-accent); }
.step-title { font-family:var(--font-display); font-size:36px; font-style:italic; line-height:1.05; color:var(--noct-white); margin:0; }
.step-desc { font-size:14px; line-height:1.6; color:var(--noct-dim); }
.step-viz { margin-top:auto; padding-top:28px; border-top:1px solid var(--noct-line-soft); height:120px; display:flex; align-items:center; justify-content:center; }
@media (max-width:900px) { .steps{grid-template-columns:1fr} }

/* ── Quiz ── */
.quiz { background:var(--noct-black); position:relative; overflow:hidden; }
.quiz-inner { display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:center; }
@media (max-width:1000px) { .quiz-inner{grid-template-columns:1fr;gap:48px} }
.quiz-card { background:linear-gradient(180deg,var(--noct-navy) 0%,var(--noct-ink) 100%); border:1px solid var(--noct-line); border-radius:var(--r-3); padding:40px; position:relative; overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,0.4); }
.quiz-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,var(--noct-accent-glow),transparent); }
.quiz-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--noct-line); }
.quiz-label { font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; color:var(--noct-dim); text-transform:uppercase; }
.quiz-progress { display:flex; gap:4px; }
.quiz-progress-bar { width:24px; height:3px; background:var(--noct-line-strong); border-radius:2px; transition:background .3s ease; }
.quiz-progress-bar.active { background:var(--noct-accent); }
.quiz-question { font-family:var(--font-display); font-size:34px; line-height:1.1; color:var(--noct-white); margin:0 0 8px; letter-spacing:-0.02em; }
.quiz-sub { font-size:14px; color:var(--noct-dim); margin:0 0 32px; }
.quiz-options { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.quiz-option { display:flex; align-items:center; gap:16px; padding:18px 22px; background:transparent; border:1px solid var(--noct-line); border-radius:var(--r-2); color:var(--noct-text); font-family:inherit; font-size:15px; cursor:pointer; transition:all .2s ease; text-align:left; width:100%; }
.quiz-option:hover { border-color:var(--noct-dim-2); background:var(--noct-line-soft); }
.quiz-option.selected { border-color:var(--noct-accent); background:var(--noct-accent-soft); color:var(--noct-white); }
.quiz-option-mark { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--noct-dim-2); flex-shrink:0; transition:all .2s ease; position:relative; }
.quiz-option.selected .quiz-option-mark { border-color:var(--noct-accent); background:var(--noct-accent); box-shadow:0 0 0 4px var(--noct-accent-soft); }
.quiz-option.selected .quiz-option-mark::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--noct-black); }
.quiz-continue { width:100%; padding:18px; background:var(--noct-white); color:var(--noct-black); border:none; border-radius:var(--r-pill); font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:all .2s ease; opacity:0.4; pointer-events:none; display:flex; align-items:center; justify-content:center; gap:10px; }
.quiz-continue.enabled { opacity:1; pointer-events:auto; }
.quiz-continue.enabled:hover { transform:translateY(-1px); }
.quiz-copy .eyebrow { margin-bottom:24px; }
.quiz-copy h2 { font-family:var(--font-display); font-size:clamp(40px,5vw,72px); line-height:1; letter-spacing:-0.025em; color:var(--noct-white); margin:0 0 28px; }
.quiz-copy h2 .italic { font-style:italic; color:var(--noct-accent-bright); }
.quiz-copy p { font-size:17px; line-height:1.6; color:var(--noct-dim); margin:0 0 28px; max-width:44ch; }
.quiz-stats { display:flex; gap:40px; margin-top:40px; flex-wrap:wrap; }
.quiz-stat-num { font-family:var(--font-display); font-size:44px; color:var(--noct-white); line-height:1; letter-spacing:-0.02em; }
.quiz-stat-label { font-family:var(--font-mono); font-size:11px; color:var(--noct-dim); letter-spacing:0.14em; text-transform:uppercase; margin-top:8px; max-width:18ch; line-height:1.4; }

/* ── Products ── */
.product-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px; margin-top:72px; }
@media (max-width:900px) { .product-grid{grid-template-columns:1fr} }
.product { background:var(--noct-ink); border:1px solid var(--noct-line); border-radius:var(--r-3); padding:36px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:20px; min-height:520px; transition:border-color .3s ease; text-decoration:none; color:inherit; }
.product:hover { border-color:var(--noct-dim-2); }
.product-visual { height:260px; margin:-12px -12px 0; border-radius:var(--r-2); background:linear-gradient(135deg,var(--noct-navy) 0%,var(--noct-navy-2) 100%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.product-visual::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.4) 100%); }
.product-visual img { width:100%; height:100%; object-fit:cover; }
.product-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; color:var(--noct-accent); text-transform:uppercase; }
.product-name { font-family:var(--font-display); font-size:28px; line-height:1.05; color:var(--noct-white); margin:0; }
.product-desc { font-size:14px; line-height:1.6; color:var(--noct-dim); }
.product-meta { margin-top:auto; padding-top:20px; border-top:1px solid var(--noct-line-soft); display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; }
.product-meta-price { color:var(--noct-white); font-size:14px; }
.product-meta-arrow { color:var(--noct-accent); }
.product--feature .product-visual { height:340px; }

/* ── Trust ── */
.trust { background:var(--noct-ink); border-top:1px solid var(--noct-line); border-bottom:1px solid var(--noct-line); }
.trust-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--noct-line); margin:60px 0; border-top:1px solid var(--noct-line); border-bottom:1px solid var(--noct-line); }
.trust-cell { background:var(--noct-ink); padding:40px 28px; display:flex; flex-direction:column; gap:8px; }
.trust-num { font-family:var(--font-display); font-size:56px; line-height:1; color:var(--noct-white); letter-spacing:-0.02em; }
.trust-num sup { font-size:24px; color:var(--noct-accent-bright); vertical-align:28px; font-style:italic; }
.trust-label { font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; color:var(--noct-dim); text-transform:uppercase; margin-top:4px; }
@media (max-width:900px) { .trust-row{grid-template-columns:1fr 1fr} }
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:60px; }
@media (max-width:900px) { .quotes{grid-template-columns:1fr} }
.quote { display:flex; flex-direction:column; gap:24px; border-left:1px solid var(--noct-line); padding-left:28px; }
.quote-text { font-family:var(--font-display); font-size:22px; line-height:1.35; color:var(--noct-white); margin:0; letter-spacing:-0.01em; }
.quote-meta { display:flex; flex-direction:column; gap:2px; margin-top:auto; }
.quote-name { font-size:13px; color:var(--noct-white); font-weight:500; }
.quote-role { font-family:var(--font-mono); font-size:11px; color:var(--noct-dim); letter-spacing:0.1em; text-transform:uppercase; }

/* ── Final CTA ── */
.final { position:relative; overflow:hidden; background:var(--noct-black); padding:180px 0 140px; }
.final-bg { position:absolute; inset:0; background:radial-gradient(ellipse 80% 100% at 50% 100%,var(--noct-navy-2) 0%,transparent 60%),radial-gradient(ellipse 60% 60% at 50% 40%,var(--noct-accent-soft) 0%,transparent 70%); }
.final-content { position:relative; z-index:1; text-align:center; max-width:880px; margin:0 auto; }
.final-headline { font-family:var(--font-display); font-size:clamp(56px,8vw,128px); line-height:0.95; letter-spacing:-0.035em; color:var(--noct-white); margin:32px 0; }
.final-headline .italic { font-style:italic; color:var(--noct-accent-bright); }
.final-sub { font-size:18px; color:var(--noct-dim); line-height:1.55; margin:0 auto 48px; max-width:44ch; }

/* ── Reveal on scroll ── */
.reveal-on-scroll { opacity:0; transform:translateY(30px); transition:opacity .9s ease,transform .9s ease; }
.reveal-on-scroll.in { opacity:1; transform:translateY(0); }


/* ── Layout ── */
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 900px) { .container { padding: 0 24px; } }

/* ── Footer ── */
.footer {
  border-top: 1px solid var(--noct-line);
  padding: 60px 0 40px;
  background: var(--noct-black);
  position: relative;
  z-index: 2;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand-block {
  max-width: 280px;
}
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.24em;
  font-size: 13px;
  color: var(--noct-white);
  text-decoration: none;
}
.footer-tag {
  font-size: 13px;
  color: var(--noct-dim);
  margin: 12px 0 20px;
  line-height: 1.55;
}
.footer-social {
  display: flex;
  gap: 16px;
  align-items: center;
}
.footer-social-link {
  color: var(--noct-dim-2);
  transition: color .2s var(--ease);
  display: inline-flex;
  align-items: center;
}
.footer-social-link:hover { color: var(--noct-accent-bright); }

.footer-cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 110px;
}
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--noct-dim-2);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.footer-link {
  font-size: 13px;
  color: var(--noct-dim);
  text-decoration: none;
  transition: color .15s var(--ease);
}
.footer-link:hover { color: var(--noct-white); }

.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--noct-line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--noct-dim-2);
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-tod-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--noct-accent-bright);
  text-transform: uppercase;
}

/* ── Sticky CTA ── */
.sticky-cta {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 60;
  background: rgba(5,7,13,0.88);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--noct-line-strong);
  border-radius: var(--r-pill);
  padding: 10px 12px 10px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  transition: transform .4s var(--ease), border-color .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--noct-accent-soft);
  max-width: calc(100vw - 48px);
}
.sticky-cta.visible {
  transform: translateX(-50%) translateY(0);
}
.sticky-cta-text {
  font-size: 13px;
  color: var(--noct-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sticky-cta-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--noct-accent-bright);
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Animated dot — single element, perfectly centred ── */
.sticky-dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
}
/* Solid filled core */
.sticky-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--noct-accent-bright);
}
/* Expanding ring — same geometric centre as ::before */
.sticky-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--noct-accent-bright);
  animation: dot-pulse 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes dot-pulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(3.2); opacity: 0;   }
  100% { transform: scale(3.2); opacity: 0;   }
}
.sticky-cta:not(.visible) .sticky-dot::after {
  animation-play-state: paused;
}

.sticky-cta-btn {
  background: var(--noct-white);
  color: var(--noct-black);
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s var(--ease);
}
.sticky-cta-btn:hover { transform: translateY(-1px); }

@media (max-width: 760px) {
  .footer-cols { gap: 32px; }

  .sticky-cta {
    bottom: 14px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform: translateY(130px);
    padding: 12px;
    border-radius: 22px;
    gap: 12px;
    justify-content: space-between;
    background: rgba(5, 7, 13, 0.94);
    box-shadow:
      0 18px 50px rgba(0,0,0,0.65),
      0 0 0 1px rgba(255,250,255,0.45);
  }

  .sticky-cta.visible {
    transform: translateY(0);
  }

  .sticky-cta-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-size: 13px;
    line-height: 1.25;
  }

  .sticky-cta-time {
    font-size: 9px;
    letter-spacing: 0.16em;
    opacity: 0.9;
  }

  #noct-sticky-line {
    display: block;
    max-width: 100%;
  }

  .sticky-cta-btn {
    flex-shrink: 0;
    padding: 11px 14px;
    font-size: 12px;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .sticky-cta {
    align-items: stretch;
  }

  .sticky-cta-btn {
    padding: 11px 12px;
  }

  .sticky-cta-text {
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .footer-row { flex-direction: column; }
  .footer-brand-block { max-width: 100%; }
}


.noct-shop-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.noct-shop-ctas a {
  display: flex;
  align-items: center;
  justify-content: center;
}


@media (max-width: 768px) {
  .noct-shop-meta {
    display: none !important;
  }
}


:root {
  --noct-black:        #eadcf3;
  --noct-ink:          #f1e2f2;
  --noct-navy:         #e6d4ef;
  --noct-navy-2:       #ecdcf4;
  --noct-line:         rgba(91,74,135,0.14);
  --noct-line-soft:    rgba(91,74,135,0.08);
  --noct-line-strong:  rgba(91,74,135,0.24);
  --noct-white:        #34295f;
  --noct-text:         rgba(63,51,108,0.92);
  --noct-dim:          rgba(63,51,108,0.65);
  --noct-dim-2:        rgba(63,51,108,0.42);
  --noct-dim-3:        rgba(63,51,108,0.26);
  --noct-accent:       #6f9d86;
  --noct-accent-bright:#83b79b;
  --noct-accent-soft:  rgba(111,157,134,0.16);
  --noct-accent-glow:  rgba(198,168,222,0.40);
  --noct-sky-tint:     rgba(198,168,222,0.30);
  --noct-sale:         #6f9d86;
  --font-display:      "Cormorant Garamond", serif;
  --font-body:         "Syne", sans-serif;
  --font-mono:         "DM Mono", monospace;
  --r-2:   18px;
  --r-3:   26px;
  --r-pill:999px;
}

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.noct-shop-hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--noct-black);
  font-family: var(--font-body);
}
.noct-shop-hero-bg { position:absolute; inset:0; z-index:0; }
.noct-shop-hero-bg-stars {
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,0.6),transparent),
    radial-gradient(1px 1px at 28% 62%,rgba(255,255,255,0.45),transparent),
    radial-gradient(1.5px 1.5px at 47% 22%,rgba(255,255,255,0.7),transparent),
    radial-gradient(1px 1px at 68% 81%,rgba(255,255,255,0.55),transparent),
    radial-gradient(1px 1px at 82% 34%,rgba(255,255,255,0.4),transparent),
    radial-gradient(1.5px 1.5px at 91% 71%,rgba(255,255,255,0.65),transparent);
}
.noct-shop-hero-bg-stars-sm {
  position:absolute; inset:0;
  background-image:
    radial-gradient(0.5px 0.5px at 22% 14%,rgba(255,255,255,0.6),transparent),
    radial-gradient(0.5px 0.5px at 38% 44%,rgba(255,255,255,0.5),transparent),
    radial-gradient(0.5px 0.5px at 58% 62%,rgba(255,255,255,0.55),transparent),
    radial-gradient(0.5px 0.5px at 77% 18%,rgba(255,255,255,0.65),transparent);
  opacity:0.6;
  animation:noctTwinkle 8s ease-in-out infinite;
}
@keyframes noctTwinkle { 0%,100%{opacity:0.35} 50%{opacity:0.7} }
.noct-shop-hero-bg-glow {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, var(--noct-accent-soft) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 15% 20%, var(--noct-sky-tint) 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 50% 50%, var(--noct-navy) 0%, var(--noct-black) 70%);
}
.noct-shop-hero-bg-vignette {
  position:absolute; inset:0;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 40%, var(--noct-black) 100%);
}
.noct-shop-hero-content {
  position:relative; z-index:2; width:100%;
  padding-top:120px; padding-bottom:60px;
}
.noct-shop-eyebrow { margin-bottom:40px; }
.noct-shop-headline {
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(64px, 9vw, 148px);
  line-height:0.95;
  letter-spacing:-0.035em;
  color: var(--noct-white);
  margin:0 0 32px;
  max-width:10ch;
}
.noct-shop-headline .accent-word { font-style:italic; color:var(--noct-accent-bright); }
.noct-shop-sub {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height:1.5;
  color:var(--noct-dim);
  max-width:48ch;
  margin:0 0 48px;
}
.noct-shop-ctas { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.noct-shop-figure {
  position:absolute; right:-8%; top:50%;
  transform:translateY(-50%);
  width:52%; height:90%; z-index:1; opacity:0.75;
  mask-image:radial-gradient(ellipse 70% 70% at center, black 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at center, black 40%, transparent 85%);
}
.noct-shop-figure svg { width:100%; height:100%; }
.noct-shop-meta {
  position:absolute; bottom:48px; left:40px; right:40px;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; z-index:2;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.16em; color:var(--noct-dim-2); text-transform:uppercase;
}
.noct-shop-meta-item { display:flex; flex-direction:column; gap:6px; }
.noct-shop-meta-label { color:var(--noct-dim-3); font-size:10px; }
.noct-shop-meta-val { color:var(--noct-text); font-size:12px; letter-spacing:0.14em; }

/* ─── Toolbar ───────────────────────────────────────────────────────────── */
.noct-shop-toolbar {
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(20px);
  background:rgba(7,7,11,0.78);
  border-top:1px solid var(--noct-line);
  border-bottom:1px solid var(--noct-line);
  font-family:var(--font-body);
  overflow:hidden; /* ← add this */
}
.noct-toolbar-inner {
  display:flex; align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:6px 0;
}
.noct-filter-bar {
  display:flex; gap:10px; align-items:center;
  overflow-x:auto; padding:12px 0;
  scrollbar-width:none; flex:1;
  min-width:0; /* prevent flex blowout */
}
.noct-filter-bar::-webkit-scrollbar { display:none; }
.noct-filter-label {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.16em; color:var(--noct-dim);
  text-transform:uppercase; margin-right:6px; white-space:nowrap;
}
.noct-filter-pill {
  display:inline-block;
  background:transparent;
  border:1px solid var(--noct-line);
  color:var(--noct-dim);
  padding:10px 16px;
  border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  text-decoration:none;
  transition:all .2s ease;
}
.noct-filter-pill:hover {
  border-color:var(--noct-dim-2);
  color:var(--noct-white);
  background:var(--noct-line-soft);
}
.noct-filter-pill.active {
  border-color:var(--noct-accent);
  background:var(--noct-accent-soft);
  color:var(--noct-white);
}
.noct-sort-bar {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.noct-sort-select {
  background:var(--noct-navy);
  border:1px solid var(--noct-line);
  color:var(--noct-dim);
  padding:8px 14px;
  border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase;
  cursor:pointer; outline:none;
  appearance:none; -webkit-appearance:none;
  padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(247,247,251,0.4)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  transition:all .2s ease;
}
.noct-sort-select:hover,
.noct-sort-select:focus {
  border-color:var(--noct-accent);
  color:var(--noct-white);
}

/* ─── Shop section ──────────────────────────────────────────────────────── */
.noct-shop-section {
  background:var(--noct-black);
  padding-top:100px; padding-bottom:140px;
  font-family:var(--font-body);
}
.noct-cart-open-btn {
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none;
}
.noct-cart-open-count {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--noct-accent); color:var(--noct-black);
  font-family:var(--font-mono); font-size:10px; font-weight:700;
}

/* ─── Product grid ──────────────────────────────────────────────────────── */
.noct-shop-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px; margin-top:72px;
}
.noct-product-card {
  background:var(--noct-ink);
  border:1px solid var(--noct-line);
  border-radius:var(--r-3);
  padding:28px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:18px;
  min-height:500px;
  transition:border-color .3s ease, transform .3s ease;
}
.noct-product-card:hover {
  border-color:var(--noct-dim-2);
  transform:translateY(-4px);
}
.noct-product-card.hero-product {
  background:linear-gradient(180deg, rgba(20,24,43,1) 0%, rgba(13,16,23,1) 100%);
  border-color:rgba(198,168,222,0.18);
}

/* Badges */
.noct-card-badges { display:flex; gap:8px; flex-wrap:wrap; }
.noct-badge {
  display:inline-flex; align-items:center;
  min-height:30px; padding:0 12px;
  border-radius:var(--r-pill); border:1px solid var(--noct-line);
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:0.14em; text-transform:uppercase;
}
.noct-badge-hero  { border-color:var(--noct-accent); color:var(--noct-accent-bright); background:var(--noct-accent-soft); }
.noct-badge-cat   { color:var(--noct-dim); }
.noct-badge-sale  { border-color:var(--noct-sale); color:var(--noct-sale); background:rgba(109,223,159,0.08); }

/* Product visual / image */
.noct-product-visual {
  height:240px; border-radius:var(--r-2);
  background:linear-gradient(135deg, var(--noct-navy) 0%, var(--noct-navy-2) 100%);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.noct-product-visual::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.42) 100%);
  pointer-events:none;
}
.noct-product-img {
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.noct-product-icon {
  font-family:var(--font-display);
  font-size:72px; line-height:1;
  color:var(--noct-accent-bright); opacity:0.75;
  position:relative; z-index:1;
}
.noct-product-visual-label {
  position:absolute; left:16px; bottom:14px; z-index:1;
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--noct-dim);
}

/* Card text */
.noct-card-category {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--noct-accent);
  margin:0;
}
.noct-card-name {
  font-family:var(--font-display); font-size:30px;
  line-height:1.04; letter-spacing:-0.02em; margin:0;
}
.noct-card-name a { color:var(--noct-white); text-decoration:none; }
.noct-card-name a:hover { color:var(--noct-accent-bright); }
.noct-card-note {
  font-size:14px; line-height:1.6; color:var(--noct-dim); margin:0;
}

/* Card footer */
.noct-card-footer {
  margin-top:auto; padding-top:20px;
  border-top:1px solid var(--noct-line-soft);
  display:flex; justify-content:space-between;
  align-items:flex-end; gap:16px;
}
.noct-card-pricing {
  display:flex; flex-direction:column; gap:4px;
}

/* WooCommerce price override */
.noct-card-pricing .price {
  font-family:var(--font-body); font-weight:700;
  font-size:24px; color:var(--noct-white);
  letter-spacing:-0.02em;
}
.noct-card-pricing .price ins {
  text-decoration:none; color:var(--noct-white);
}
.noct-card-pricing .price del {
  color:var(--noct-dim-2); font-size:16px; font-weight:400;
}
.noct-card-pricing .price .woocommerce-Price-currencySymbol { margin-right:1px; }

.noct-add-btn {
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--noct-line);
  background:transparent; color:var(--noct-white);
  font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s ease; flex-shrink:0;
  text-decoration:none; line-height:1;
}
.noct-add-btn:hover,
.noct-add-btn.added {
  background:var(--noct-accent);
  border-color:var(--noct-accent);
  color:var(--noct-black);
}
.noct-add-btn.noct-out-of-stock {
  opacity:0.35; cursor:not-allowed; pointer-events:none;
}
.noct-stock-badge {
  position:absolute; top:16px; right:16px;
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:#ff6c6c; border:1px solid rgba(255,108,108,0.3);
  background:rgba(255,108,108,0.07);
  padding:4px 10px; border-radius:var(--r-pill);
}

/* ─── Empty state ───────────────────────────────────────────────────────── */
.noct-empty-state {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:120px 24px; gap:20px; text-align:center;
}
.noct-empty-icon { font-size:40px; color:var(--noct-dim-3); }
.noct-empty-state h3 {
  font-family:var(--font-display); font-size:32px;
  font-weight:300; color:var(--noct-white); margin:0;
}
.noct-empty-state p {
  font-family:var(--font-mono); font-size:12px;
  color:var(--noct-dim); letter-spacing:0.1em; margin:0;
}
.noct-empty-state a {
  color:var(--noct-accent); text-decoration:underline;
}

/* ─── Pagination ────────────────────────────────────────────────────────── */
.noct-pagination {
  display:flex; gap:10px; justify-content:center;
  align-items:center; margin-top:72px; flex-wrap:wrap;
}
.noct-pagination .page-numbers {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 14px;
  border:1px solid var(--noct-line);
  border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--noct-dim); text-decoration:none;
  transition:all .2s ease;
}
.noct-pagination .page-numbers:hover {
  border-color:var(--noct-accent);
  color:var(--noct-white);
  background:var(--noct-accent-soft);
}
.noct-pagination .page-numbers.current {
  border-color:var(--noct-accent);
  background:var(--noct-accent-soft);
  color:var(--noct-white);
}
.noct-pagination .dots { border:none; pointer-events:none; }

/* ─── WooCommerce toast (added to cart) ─────────────────────────────────── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  display:none !important; /* suppress default WC notices on custom template */
}
/* NOCT-style WC add-to-cart AJAX feedback */
body .added_to_cart { display:none !important; }

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .noct-shop-figure { display:none; }
  .noct-shop-meta {
    position:static; margin-top:60px;
    flex-wrap:wrap; padding:0 24px;
  }
  .noct-toolbar-inner { flex-direction:column; align-items:flex-start; }
  .noct-sort-bar { align-self:flex-end; }
}
@media (max-width: 768px) {
  .noct-shop-grid { grid-template-columns:1fr; }
  .noct-sort-select { font-size:11px; }
}


.woocommerce-form-coupon-toggle,
.woocommerce-info {
  display: none !important;
}

/* ── NOCT-styled WooCommerce notices ─────────────────────────────── */
.woocommerce-notices-wrapper {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: auto;
  min-width: 320px;
  max-width: 560px;
  pointer-events: none;
}
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid rgba(91,74,135,0.14);
  background: rgba(13,16,22,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: rgba(255,255,255,.9);
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  list-style: none;
  margin: 0;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(148,168,255,.1);
  pointer-events: auto;
  animation: noct-notice-in .3s cubic-bezier(.16,1,.3,1) both;
}
.woocommerce-notices-wrapper .woocommerce-message::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a8ff;
  box-shadow: 0 0 14px #94a8ff;
  flex-shrink: 0;
}
.woocommerce-notices-wrapper .woocommerce-error {
  border-color: rgba(255,100,100,.2);
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,100,100,.1);
}
.woocommerce-notices-wrapper .woocommerce-error::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6464;
  box-shadow: 0 0 14px #ff6464;
  flex-shrink: 0;
}
.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-message a {
  color: #c8d4ff;
  text-decoration: none;
  margin-left: auto;
}
@keyframes noct-notice-in {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}


:root{
	--noct-black:#eadcf3;
	--noct-ink:#f1e2f2;
	--noct-ink-2:#e2d2ee;
	--noct-line:rgba(91,74,135,0.14);
	--noct-line-soft:rgba(91,74,135,0.08);
	--noct-line-strong:rgba(91,74,135,0.24);
	--noct-white:#34295f;
	--noct-text:rgba(63,51,108,0.92);
	--noct-dim:rgba(63,51,108,0.65);
	--noct-dim-2:rgba(63,51,108,0.42);
	--noct-accent:#6f9d86;
	--noct-accent-bright:#83b79b;
	--noct-accent-soft:rgba(111,157,134,0.16);
	--noct-navy:#e6d4ef;
	--noct-navy-2:#ecdcf4;
	--font-display:"Instrument Serif", serif;
	--font-body:"Geist", sans-serif;
	--font-mono:"Geist Mono", monospace;
	--r-2:22px;
	--r-3:32px;
	--r-pill:999px;
}

html,
body{
	margin:0;
	padding:0;
	background:#eadcf3;
}

body.page-template-page-cart-noct,
body.page-template-default{
	background:#eadcf3;
}

#page,
.site,
.site-content,
.content-area,
.site-main,
main,
main.site-main,
.entry-content,
.post-content,
.page-content,
article,
.page,
.type-page{
	background:transparent !important;
	margin:0 !important;
	padding:0 !important;
	max-width:none !important;
	box-shadow:none !important;
}

.noct-cart-page-shell{
	background:var(--noct-black);
	min-height:100vh;
	width:100%;
}

.noct-cart-hero,
.noct-cart-wrap{
	background:var(--noct-black);
	color:var(--noct-text);
	font-family:var(--font-body);
}

.noct-container{
	width:100%;
	max-width:1360px;
	margin:0 auto;
	padding:0 40px;
}

.noct-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-family:var(--font-mono);
	font-size:11px;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--noct-accent-bright);
}

.noct-eyebrow:before{
	content:"";
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--noct-accent);
	box-shadow:0 0 18px var(--noct-accent);
}

.noct-cart-hero{
	position:relative;
	overflow:hidden;
	padding:120px 0 70px;
	border-bottom:1px solid var(--noct-line);
	margin-top:0 !important;
}

.noct-cart-hero__bg,
.noct-cart-hero__glow,
.noct-cart-hero__stars,
.noct-cart-hero__vignette{
	position:absolute;
	inset:0;
}

.noct-cart-hero__glow{
	background:
		radial-gradient(ellipse 70% 60% at 50% 110%, rgba(148,168,255,.18) 0%, transparent 55%),
		radial-gradient(circle at 15% 18%, rgba(148,168,255,.08) 0%, transparent 30%);
}

.noct-cart-hero__stars{
	background-image:
		radial-gradient(1px 1px at 14% 22%,rgba(255,255,255,.45),transparent),
		radial-gradient(1px 1px at 40% 12%,rgba(255,255,255,.5),transparent),
		radial-gradient(1px 1px at 78% 26%,rgba(255,255,255,.4),transparent),
		radial-gradient(1px 1px at 65% 72%,rgba(255,255,255,.38),transparent),
		radial-gradient(1px 1px at 24% 68%,rgba(255,255,255,.32),transparent);
	opacity:.8;
}

.noct-cart-hero__vignette{
	background:radial-gradient(ellipse 90% 80% at 50% 50%,transparent 45%,rgba(0,0,0,.7) 100%);
}

.noct-cart-hero__content{
	position:relative;
	z-index:1;
}

.noct-cart-hero__title{
	margin:26px 0 22px;
	font-family:var(--font-display);
	font-size:clamp(52px,8vw,110px);
	line-height:.95;
	letter-spacing:-.04em;
	font-weight:400;
	color:var(--noct-white);
	max-width:11ch;
}

.noct-cart-hero__title span{
	font-style:italic;
	color:var(--noct-accent-bright);
}

.noct-cart-hero__sub{
	max-width:54ch;
	font-size:18px;
	line-height:1.6;
	color:var(--noct-dim);
	margin:0;
}

.noct-cart-hero__meta{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
	margin-top:42px;
}

.noct-cart-hero__meta-item{
	min-width:180px;
	padding:18px 20px;
	border:1px solid var(--noct-line);
	border-radius:18px;
	background:rgba(255,250,255,0.45);
	backdrop-filter:blur(10px);
}

.noct-cart-hero__meta-item .label{
	display:block;
	font-family:var(--font-mono);
	font-size:10px;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--noct-dim-2);
	margin-bottom:8px;
}

.noct-cart-hero__meta-item .value{
	display:block;
	font-size:13px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--noct-white);
}

.noct-cart-wrap{
	padding:56px 0 120px;
	margin-top:0 !important;
}

.noct-cart-layout{
	display:grid;
	grid-template-columns:minmax(0,1.6fr) 400px;
	gap:28px;
	align-items:start;
}

.noct-cart-main,
.noct-cart-side{
	display:flex;
	flex-direction:column;
	gap:28px;
}

.noct-panel{
	background:linear-gradient(180deg, rgba(255,250,255,0.45) 0%, rgba(255,250,255,0.45) 100%);
	border:1px solid var(--noct-line);
	border-radius:32px;
	padding:30px;
}

.noct-panel__head{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:24px;
	padding-bottom:22px;
	margin-bottom:8px;
	border-bottom:1px solid var(--noct-line-soft);
}

.noct-panel__head h2,
.noct-summary h2,
.noct-empty__panel h2{
	margin:14px 0 0;
	font-family:var(--font-display);
	font-weight:400;
	font-size:42px;
	line-height:1;
	letter-spacing:-.03em;
	color:var(--noct-white);
}

.noct-link-muted{
	color:var(--noct-dim);
	text-decoration:none;
	font-size:14px;
}

.noct-link-muted:hover{
	color:var(--noct-white);
}

.noct-cart-items{
	display:flex;
	flex-direction:column;
	gap:18px;
}

.noct-cart-item{
	display:grid;
	grid-template-columns:140px minmax(0,1fr);
	gap:22px;
	padding:22px 0;
	border-bottom:1px solid var(--noct-line-soft);
}

.noct-cart-item:last-child{
	border-bottom:none;
	padding-bottom:4px;
}

.noct-cart-item__media{
	border-radius:24px;
	overflow:hidden;
	background:linear-gradient(135deg,var(--noct-navy),var(--noct-ink-2));
	min-height:140px;
}

.noct-cart-item__media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.noct-cart-item__body{
	display:flex;
	flex-direction:column;
	gap:20px;
	min-width:0;
}

.noct-cart-item__top{
	display:flex;
	justify-content:space-between;
	gap:20px;
}

.noct-cart-item__tag{
	font-family:var(--font-mono);
	font-size:10px;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--noct-accent);
	margin-bottom:10px;
}

.noct-cart-item__title{
	margin:0;
	font-size:28px;
	line-height:1.05;
	font-family:var(--font-display);
	font-weight:400;
	letter-spacing:-.02em;
}

.noct-cart-item__title a{
	color:var(--noct-white);
	text-decoration:none;
}

.noct-cart-item__title a:hover{
	color:var(--noct-accent-bright);
}

.noct-cart-item__meta,
.noct-cart-item__meta *{
	color:var(--noct-dim);
	font-size:13px;
	line-height:1.5;
}

.noct-cart-item__remove .remove{
	color:var(--noct-dim);
	text-decoration:none;
	font-size:13px;
	white-space:nowrap;
}

.noct-cart-item__remove .remove:hover{
	color:#fff;
}

.noct-cart-item__bottom{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:16px;
	align-items:end;
}

.noct-cart-item__price,
.noct-cart-item__qty,
.noct-cart-item__subtotal{
	padding:16px 18px;
	border:1px solid var(--noct-line-soft);
	border-radius:20px;
	background:rgba(255,250,255,0.45);
}

.noct-cart-item__price .label,
.noct-cart-item__qty .label,
.noct-cart-item__subtotal .label{
	display:block;
	font-family:var(--font-mono);
	font-size:10px;
	letter-spacing:.15em;
	text-transform:uppercase;
	color:var(--noct-dim-2);
	margin-bottom:10px;
}

.noct-cart-item__price .value,
.noct-cart-item__subtotal .value{
	color:var(--noct-white);
	font-size:15px;
}

.noct-cart-item .quantity{
	display:inline-flex;
	align-items:center;
}

.noct-cart-item .quantity input.qty{
	width:84px;
	height:46px;
	border-radius:999px;
	border:1px solid var(--noct-line-strong);
	background:var(--noct-black);
	color:var(--noct-white);
	text-align:center;
	padding:0 10px;
}

/* Updating state overlay */
.noct-cart-updating{
	position:relative;
	pointer-events:none;
}
.noct-cart-updating::after{
	content:"Updating...";
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(7,9,13,.6);
	border-radius:32px;
	font-family:var(--font-mono);
	font-size:11px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--noct-accent-bright);
	backdrop-filter:blur(4px);
}

.noct-cart-actions{
	display:flex;
	justify-content:space-between;
	gap:18px;
	flex-wrap:wrap;
	padding-top:20px;
	margin-top:12px;
	border-top:1px solid var(--noct-line-soft);
}

.noct-coupon{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	align-items:center;
}

.noct-coupon .input-text{
	min-width:220px;
	height:50px;
	padding:0 18px;
	border-radius:999px;
	border:1px solid var(--noct-line-strong);
	background:var(--noct-black);
	color:var(--noct-white);
}

.noct-btn,
.noct-summary .checkout-button,
.noct-summary a.checkout-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	min-height:54px;
	padding:0 24px;
	border-radius:999px;
	border:1px solid var(--noct-line-strong);
	text-decoration:none;
	font-size:14px;
	font-weight:500;
	transition:.2s ease;
	cursor:pointer;
	box-shadow:none;
}

.noct-btn--primary,
.noct-summary .checkout-button,
.noct-summary a.checkout-button{
	background:var(--noct-white);
	color:var(--noct-black) !important;
	border-color:transparent;
	width:100%;
}

.noct-btn--primary:hover,
.noct-summary .checkout-button:hover,
.noct-summary a.checkout-button:hover{
	transform:translateY(-1px);
	background:#fff;
}

.noct-btn--ghost{
	background:transparent;
	color:var(--noct-white);
}

.noct-btn--ghost:hover{
	background:rgba(255,250,255,0.45);
	border-color:var(--noct-line-strong);
}

.noct-summary{
	position:sticky;
	top:28px;
}

.noct-summary__sub{
	margin:14px 0 24px;
	font-size:15px;
	line-height:1.6;
	color:var(--noct-dim);
}

.noct-summary__rows{
	display:flex;
	flex-direction:column;
	gap:14px;
	padding:22px 0;
	border-top:1px solid var(--noct-line-soft);
	border-bottom:1px solid var(--noct-line-soft);
}

.noct-summary__row{
	display:flex;
	justify-content:space-between;
	gap:20px;
	font-size:15px;
	color:var(--noct-white);
}

.noct-summary__row--muted{
	color:var(--noct-dim);
	font-size:14px;
}

.noct-summary__row--total{
	padding-top:12px;
	margin-top:4px;
	border-top:1px solid var(--noct-line-soft);
	font-size:18px;
	font-weight:600;
}

.noct-summary__cta{
	padding-top:22px;
}

.noct-summary__trust{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
	margin-top:18px;
}

.noct-trust-item{
	padding:14px 16px;
	border:1px solid var(--noct-line-soft);
	border-radius:18px;
	font-size:13px;
	color:var(--noct-dim);
	background:rgba(255,250,255,0.45);
}

.noct-mini-proof{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
}

.noct-mini-proof__item{
	padding:18px;
	border:1px solid var(--noct-line-soft);
	border-radius:22px;
	background:rgba(255,250,255,0.45);
}

.noct-mini-proof__item .num{
	font-family:var(--font-display);
	font-size:36px;
	line-height:1;
	color:var(--noct-white);
	margin-bottom:10px;
}

.noct-mini-proof__item .label{
	font-family:var(--font-mono);
	font-size:10px;
	line-height:1.5;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--noct-dim);
}

.noct-reco-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
}

.noct-reco{
	display:flex;
	flex-direction:column;
	gap:14px;
	padding:14px;
	border:1px solid var(--noct-line-soft);
	border-radius:24px;
	background:rgba(255,250,255,0.45);
	color:inherit;
	transition:.2s ease;
}

.noct-reco:hover{
	border-color:var(--noct-line-strong);
	transform:translateY(-2px);
}

.noct-reco__img-link{
	display:block;
	text-decoration:none;
}

.noct-reco__img{
	aspect-ratio:1/1;
	border-radius:18px;
	overflow:hidden;
	background:linear-gradient(135deg,var(--noct-navy),var(--noct-ink-2));
}

.noct-reco__img img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .3s ease;
}

.noct-reco:hover .noct-reco__img img{
	transform:scale(1.04);
}

.noct-reco__name{
	color:var(--noct-white);
	font-size:15px;
	line-height:1.35;
}

.noct-reco__price{
	color:var(--noct-dim);
	font-size:13px;
}

.noct-reco__add{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	width:100%;
	padding:12px 16px;
	border-radius:999px;
	border:1px solid var(--noct-line-strong);
	background:transparent;
	color:var(--noct-white);
	font-family:var(--font-mono);
	font-size:11px;
	letter-spacing:.12em;
	text-transform:uppercase;
	text-decoration:none;
	cursor:pointer;
	transition:.2s ease;
	margin-top:auto;
}

.noct-reco__add:hover{
	background:rgba(255,250,255,0.45);
	border-color:rgba(91,74,135,0.22);
}

.noct-reco__add-icon{
	font-size:16px;
	line-height:1;
	color:var(--noct-accent-bright);
	transition:transform .2s ease;
}

.noct-reco__add:hover .noct-reco__add-icon{
	transform:scale(1.3);
}

.noct-reco__add--added{
	background:var(--noct-accent-soft);
	border-color:rgba(148,168,255,.3);
	color:var(--noct-accent-bright);
	pointer-events:none;
}

.noct-reco__add--loading{
	opacity:.6;
	pointer-events:none;
}

.noct-reco__add--loading .noct-reco__add-icon{
	animation:noct-spin .6s linear infinite;
}

@keyframes noct-spin{
	to{ transform:rotate(360deg); }
}

.noct-empty{
	padding:10px 0 0;
}

.noct-empty__panel{
	text-align:center;
	padding:70px 32px;
	max-width:820px;
	margin:0 auto;
}

.noct-empty__panel p{
	max-width:44ch;
	margin:18px auto 0;
	color:var(--noct-dim);
	font-size:16px;
	line-height:1.6;
}

.noct-empty__actions{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:14px;
	margin-top:30px;
}

.woocommerce-cart-form__contents,
.cart_totals,
.cross-sells{
	display:none !important;
}

@media (max-width:1100px){
	.noct-cart-layout{
		grid-template-columns:1fr;
	}
	.noct-summary{
		position:static;
	}
}

@media (max-width:900px){
	.noct-container{
		padding:0 24px;
	}
	.noct-cart-hero{
		padding:100px 0 56px;
	}
	.noct-panel__head h2,
	.noct-summary h2,
	.noct-empty__panel h2{
		font-size:34px;
	}
	.noct-cart-item{
		grid-template-columns:1fr;
	}
	.noct-cart-item__media{
		max-width:220px;
	}
	.noct-cart-item__bottom{
		grid-template-columns:1fr;
	}
	.noct-reco-grid{
		grid-template-columns:1fr;
	}
	.noct-mini-proof{
		grid-template-columns:1fr;
	}
}


.woocommerce-form-coupon-toggle,
.woocommerce-info {
  display: none !important;
}


:root{
	--noct-black:#eadcf3;
	--noct-ink:#f1e2f2;
	--noct-ink-2:#e2d2ee;
	--noct-line:rgba(91,74,135,0.14);
	--noct-line-soft:rgba(91,74,135,0.08);
	--noct-line-strong:rgba(91,74,135,0.24);
	--noct-white:#34295f;
	--noct-text:rgba(63,51,108,0.92);
	--noct-dim:rgba(63,51,108,0.65);
	--noct-dim-2:rgba(63,51,108,0.42);
	--noct-accent:#6f9d86;
	--noct-accent-bright:#83b79b;
	--noct-accent-soft:rgba(111,157,134,0.16);
	--noct-navy:#e6d4ef;
	--noct-navy-2:#ecdcf4;
	--font-display:"Instrument Serif", serif;
	--font-body:"Geist", sans-serif;
	--font-mono:"Geist Mono", monospace;
	--r-2:22px;
	--r-3:32px;
	--r-pill:999px;
}

html,
body{
	margin:0;
	padding:0;
	background:#eadcf3;
}

#page,
.site,
.site-content,
.content-area,
.site-main,
main,
main.site-main,
.entry-content,
.post-content,
.page-content,
article,
.page,
.type-page{
	background:transparent !important;
	margin:0 !important;
	padding:0 !important;
	max-width:none !important;
	box-shadow:none !important;
}

.noct-checkout-page-shell{
	background:var(--noct-black);
	min-height:100vh;
	width:100%;
	color:var(--noct-text);
	font-family:var(--font-body);
}

.noct-container{
	width:100%;
	max-width:1360px;
	margin:0 auto;
	padding:0 40px;
}

.noct-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-family:var(--font-mono);
	font-size:11px;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--noct-accent-bright);
}

.noct-eyebrow:before{
	content:"";
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--noct-accent);
	box-shadow:0 0 18px var(--noct-accent);
}

.noct-checkout-hero{
	position:relative;
	overflow:hidden;
	padding:120px 0 70px;
	border-bottom:1px solid var(--noct-line);
}

.noct-checkout-hero__bg,
.noct-checkout-hero__glow,
.noct-checkout-hero__stars,
.noct-checkout-hero__vignette{
	position:absolute;
	inset:0;
}

.noct-checkout-hero__glow{
	background:
		radial-gradient(ellipse 70% 60% at 50% 110%, rgba(148,168,255,.18) 0%, transparent 55%),
		radial-gradient(circle at 15% 18%, rgba(148,168,255,.08) 0%, transparent 30%);
}

.noct-checkout-hero__stars{
	background-image:
		radial-gradient(1px 1px at 14% 22%,rgba(255,255,255,.45),transparent),
		radial-gradient(1px 1px at 40% 12%,rgba(255,255,255,.5),transparent),
		radial-gradient(1px 1px at 78% 26%,rgba(255,255,255,.4),transparent),
		radial-gradient(1px 1px at 65% 72%,rgba(255,255,255,.38),transparent),
		radial-gradient(1px 1px at 24% 68%,rgba(255,255,255,.32),transparent);
	opacity:.8;
}

.noct-checkout-hero__vignette{
	background:radial-gradient(ellipse 90% 80% at 50% 50%,transparent 45%,rgba(0,0,0,.7) 100%);
}

.noct-checkout-hero__content{
	position:relative;
	z-index:1;
}

.noct-checkout-hero__title{
	margin:26px 0 22px;
	font-family:var(--font-display);
	font-size:clamp(52px,8vw,110px);
	line-height:.95;
	letter-spacing:-.04em;
	font-weight:400;
	color:var(--noct-white);
	max-width:11ch;
}

.noct-checkout-hero__title span{
	font-style:italic;
	color:var(--noct-accent-bright);
}

.noct-checkout-hero__sub{
	max-width:54ch;
	font-size:18px;
	line-height:1.6;
	color:var(--noct-dim);
	margin:0;
}

.noct-checkout-hero__meta{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
	margin-top:42px;
}

.noct-checkout-hero__meta-item{
	min-width:180px;
	padding:18px 20px;
	border:1px solid var(--noct-line);
	border-radius:18px;
	background:rgba(255,250,255,0.45);
	backdrop-filter:blur(10px);
}

.noct-checkout-hero__meta-item .label{
	display:block;
	font-family:var(--font-mono);
	font-size:10px;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--noct-dim-2);
	margin-bottom:8px;
}

.noct-checkout-hero__meta-item .value{
	display:block;
	font-size:13px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--noct-white);
}

.noct-checkout-wrap{
	padding:56px 0 120px;
}

.noct-checkout-layout{
	display:grid;
	grid-template-columns:minmax(0,1.45fr) 420px;
	gap:28px;
	align-items:start;
}

.noct-checkout-main,
.noct-checkout-side{
	display:flex;
	flex-direction:column;
	gap:28px;
}

.noct-panel{
	background:linear-gradient(180deg, rgba(255,250,255,0.45) 0%, rgba(255,250,255,0.45) 100%);
	border:1px solid var(--noct-line);
	border-radius:32px;
	padding:30px;
}

.noct-panel__head{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:24px;
	padding-bottom:22px;
	margin-bottom:8px;
	border-bottom:1px solid var(--noct-line-soft);
}

.noct-panel__head h2,
.noct-summary h2{
	margin:14px 0 0;
	font-family:var(--font-display);
	font-weight:400;
	font-size:42px;
	line-height:1;
	letter-spacing:-.03em;
	color:var(--noct-white);
}

.noct-fields-grid{
	display:block;
}

.noct-fields-grid__full{
	width:100%;
}

.noct-summary{
	position:sticky;
	top:28px;
}

.noct-summary__sub{
	margin:14px 0 24px;
	font-size:15px;
	line-height:1.6;
	color:var(--noct-dim);
}

.noct-review-list{
	display:flex;
	flex-direction:column;
	gap:14px;
	padding-bottom:22px;
	margin-bottom:22px;
	border-bottom:1px solid var(--noct-line-soft);
}

.noct-review-item{
	display:grid;
	grid-template-columns:62px minmax(0,1fr) auto;
	gap:14px;
	align-items:center;
}

.noct-review-item__img{
	width:62px;
	height:62px;
	border-radius:16px;
	overflow:hidden;
	background:linear-gradient(135deg,var(--noct-navy),var(--noct-ink-2));
}

.noct-review-item__img img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.noct-review-item__name{
	color:var(--noct-white);
	font-size:14px;
	line-height:1.35;
}

.noct-review-item__meta{
	color:var(--noct-dim);
	font-size:12px;
	margin-top:4px;
}

.noct-review-item__price{
	color:var(--noct-white);
	font-size:13px;
	text-align:right;
}

.noct-summary__rows{
	display:flex;
	flex-direction:column;
	gap:14px;
	padding:22px 0;
	border-top:1px solid var(--noct-line-soft);
	border-bottom:1px solid var(--noct-line-soft);
}

.noct-summary__row{
	display:flex;
	justify-content:space-between;
	gap:20px;
	font-size:15px;
	color:var(--noct-white);
}

.noct-summary__row--muted{
	color:var(--noct-dim);
	font-size:14px;
}

.noct-summary__row--total{
	padding-top:12px;
	margin-top:4px;
	border-top:1px solid var(--noct-line-soft);
	font-size:18px;
	font-weight:600;
}

.noct-payment-block{
	padding-top:22px;
}

.noct-summary__trust{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
	margin-top:18px;
}

.noct-trust-item{
	padding:14px 16px;
	border:1px solid var(--noct-line-soft);
	border-radius:18px;
	font-size:13px;
	color:var(--noct-dim);
	background:rgba(255,250,255,0.45);
}

/* Coupon panel */
.noct-coupon-panel{
	margin-bottom:28px;
}

.noct-checkout-coupon .woocommerce-info{
	display:none !important;
}

.noct-checkout-coupon .checkout_coupon,
.noct-checkout-coupon .woocommerce-form-coupon{
	display:flex !important;
	gap:12px;
	flex-wrap:wrap;
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	background:transparent !important;
}

.noct-checkout-coupon .woocommerce-form-coupon p,
.noct-checkout-coupon .checkout_coupon p{
	margin:0 !important;
	color:var(--noct-dim);
}

.noct-checkout-coupon .woocommerce-form-coupon > p:first-child,
.noct-checkout-coupon .checkout_coupon > p:first-child{
	width:100%;
	margin-bottom:14px !important;
	font-size:14px;
	line-height:1.6;
	color:var(--noct-dim);
}

.noct-checkout-coupon .form-row{
	margin:0 !important;
	padding:0 !important;
}

.noct-checkout-coupon .form-row-first{
	flex:1;
	min-width:220px;
}

.noct-checkout-coupon .form-row-last{
	width:auto;
}

.noct-checkout-coupon input.input-text{
	height:56px;
	border-radius:999px;
	border:1px solid var(--noct-line-strong);
	background:var(--noct-black);
	color:var(--noct-white);
	padding:0 20px;
}

.noct-checkout-coupon button.button{
	min-height:56px;
	width:auto !important;
	padding:0 28px !important;
	border-radius:999px !important;
	background:transparent !important;
	color:var(--noct-white) !important;
	border:1px solid var(--noct-line-strong) !important;
}

/* Woo checkout field styling */
.noct-checkout-page-shell .woocommerce form .form-row{
	margin:0 0 18px;
	padding:0;
}

.noct-checkout-page-shell .woocommerce form .form-row label{
	display:block;
	margin-bottom:10px;
	font-size:12px;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--noct-dim);
	font-family:var(--font-mono);
}

.noct-checkout-page-shell .woocommerce form .form-row input.input-text,
.noct-checkout-page-shell .woocommerce form .form-row textarea,
.noct-checkout-page-shell .woocommerce form .form-row select,
.noct-checkout-page-shell input.input-text,
.noct-checkout-page-shell textarea,
.noct-checkout-page-shell select{
	width:100%;
	min-height:56px;
	border-radius:18px;
	border:1px solid var(--noct-line-strong);
	background:var(--noct-black);
	color:var(--noct-white);
	padding:16px 18px;
	box-shadow:none;
}

.noct-checkout-page-shell .woocommerce form .form-row textarea{
	min-height:120px;
	resize:vertical;
}

.noct-checkout-page-shell .select2-container--default .select2-selection--single{
	height:56px;
	border-radius:18px;
	border:1px solid var(--noct-line-strong);
	background:var(--noct-black);
}

.noct-checkout-page-shell .select2-container--default .select2-selection--single .select2-selection__rendered{
	color:var(--noct-white);
	line-height:56px;
	padding-left:18px;
}

.noct-checkout-page-shell .select2-container--default .select2-selection--single .select2-selection__arrow{
	height:56px;
	right:10px;
}

.noct-checkout-page-shell .woocommerce-checkout-review-order-table{
	display:none !important;
}

.noct-checkout-page-shell #payment{
	background:transparent !important;
	border:none !important;
	margin-top:0 !important;
}

.noct-checkout-page-shell #payment ul.payment_methods{
	border:none !important;
	padding:0 !important;
	margin:0 0 18px !important;
}

.noct-checkout-page-shell #payment ul.payment_methods li{
	padding:14px 16px;
	border:1px solid var(--noct-line-soft);
	border-radius:18px;
	background:rgba(255,250,255,0.45);
	margin-bottom:10px;
}

.noct-checkout-page-shell #payment div.payment_box{
	background:rgba(255,250,255,0.45) !important;
	color:var(--noct-dim) !important;
	border-radius:16px;
	margin-top:12px;
}

.noct-checkout-page-shell #payment div.payment_box:before{
	display:none;
}

.noct-checkout-page-shell .place-order{
	padding:0 !important;
	margin-top:18px !important;
}

.noct-checkout-page-shell .button,
.noct-checkout-page-shell #place_order{
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	gap:10px;
	min-height:56px;
	width:100%;
	padding:0 24px !important;
	border-radius:999px !important;
	border:none !important;
	background:var(--noct-white) !important;
	color:var(--noct-black) !important;
	font-size:14px !important;
	font-weight:600 !important;
	box-shadow:none !important;
	text-transform:none !important;
}

.noct-checkout-page-shell .button:hover,
.noct-checkout-page-shell #place_order:hover{
	transform:translateY(-1px);
	background:#fff !important;
}

.noct-checkout-page-shell .woocommerce-info,
.noct-checkout-page-shell .woocommerce-error,
.noct-checkout-page-shell .woocommerce-message{
	background:rgba(255,250,255,0.45);
	color:var(--noct-white);
	border:1px solid var(--noct-line-soft);
	border-radius:18px;
	padding:18px 20px;
	margin:0 0 24px;
}

.noct-checkout-page-shell .woocommerce-info::before,
.noct-checkout-page-shell .woocommerce-error::before,
.noct-checkout-page-shell .woocommerce-message::before{
	display:none !important;
}

@media (max-width:1100px){
	.noct-checkout-layout{
		grid-template-columns:1fr;
	}
	.noct-summary{
		position:static;
	}
}

@media (max-width:900px){
	.noct-container{
		padding:0 24px;
	}
	.noct-checkout-hero{
		padding:100px 0 56px;
	}
	.noct-panel__head h2,
	.noct-summary h2{
		font-size:34px;
	}
}


/* ════════════════════════════════════════════════════
   NOCT EDUCATION PAGE — DESIGN TOKENS
════════════════════════════════════════════════════ */
:root {
  --noct-black:        #eadcf3;
  --noct-ink:          #f1e2f2;
  --noct-navy:         #e6d4ef;
  --noct-navy-2:       #ecdcf4;
  --noct-line:         rgba(91,74,135,0.14);
  --noct-line-soft:    rgba(91,74,135,0.08);
  --noct-line-strong:  rgba(91,74,135,0.24);
  --noct-white:        #34295f;
  --noct-text:         rgba(63,51,108,0.92);
  --noct-dim:          rgba(63,51,108,0.65);
  --noct-dim-2:        rgba(63,51,108,0.42);
  --noct-dim-3:        rgba(63,51,108,0.26);
  --noct-accent:       #6f9d86;
  --noct-accent-bright:#83b79b;
  --noct-accent-soft:  rgba(111,157,134,0.16);
  --noct-accent-glow:  rgba(198,168,222,0.40);
  --noct-warn:         #d4a06b;
  --noct-warn-bright:  #e8a08a;
  --noct-warn-soft:    rgba(196,132,107,0.12);
  --font-display:      "Cormorant Garamond", serif;
  --font-mono:         "Space Mono", monospace;
  --r-2: 8px;
  --r-3: 12px;
  --r-pill: 999px;
}

/* ════════════════════════════════════════════════════
   THEME OVERRIDE — hide theme header/footer, kill wrapper constraints
   Remove the display:none rules below if you want your theme header/footer.
════════════════════════════════════════════════════ */
.site-header, #masthead, header.site-header,
.ast-header-wrap, .main-header-bar,
.header-main, .site-branding { display: none !important; }

.site-footer, #colophon, footer.site-footer,
.ast-footer-wrap { display: none !important; }

body {
  background: #eadcf3 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site, .site-content, .site-main, #main, #content,
.content-area, .ast-container, .ast-columns-grid,
article.page, .entry-content, .page-content,
.post-content, .wp-block-group,
.is-layout-constrained > :not(.alignwide):not(.alignfull) {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════
   NOCT PAGE BASE
════════════════════════════════════════════════════ */
.noct-page {
  background: var(--noct-black);
  color: var(--noct-text);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.noct-page *, .noct-page *::before, .noct-page *::after { box-sizing: border-box; }

/* Global theme bleed reset inside .noct-page */
.noct-page a, .noct-page a:link, .noct-page a:visited, .noct-page a:hover {
  color: inherit;
  text-decoration: none;
}
.noct-page p { margin: 0; padding: 0; font-family: var(--font-mono); }
.noct-page h1, .noct-page h2, .noct-page h3,
.noct-page h4, .noct-page h5, .noct-page h6 {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  color: var(--noct-white) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}
.noct-page img { max-width: 100%; height: auto; display: block; }
.noct-page ul, .noct-page ol { list-style: none; margin: 0; padding: 0; }
.noct-page strong { font-weight: 700; }

/* ── Layout ── */
.noct-page .container      { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 40px; }
.noct-page .container-wide { width: 100%; max-width: 1520px; margin: 0 auto; padding: 0 40px; }
.noct-page .section        { position: relative; padding: 140px 0; width: 100%; display: block; }

/* ── Eyebrow ── */
.noct-page .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--noct-dim);
}
.noct-page .eyebrow-dot::before,
.noct-page .eyebrow-warn::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--noct-accent); flex-shrink: 0; display: inline-block;
}
.noct-page .eyebrow-warn::before { background: var(--noct-warn); }

/* ── Buttons — !important on colour defeats theme a{color} cascade ── */
.noct-page .btn {
  display: inline-flex !important; align-items: center; gap: 10px;
  font-family: var(--font-mono) !important; font-size: 12px !important;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none !important; border-radius: var(--r-pill);
  cursor: pointer; border: none; transition: all .25s ease;
  line-height: 1 !important; padding: 18px 36px;
}
.noct-page .btn-primary,
.noct-page .btn-primary:link,
.noct-page .btn-primary:visited,
.noct-page .btn-primary:hover  { background: var(--noct-white) !important; color: #080810 !important; }
.noct-page .btn-primary:hover  { transform: translateY(-2px); }
.noct-page .btn-ghost,
.noct-page .btn-ghost:link,
.noct-page .btn-ghost:visited  { background: transparent !important; color: var(--noct-text) !important; border: 1px solid var(--noct-line-strong); padding: 16px 32px; }
.noct-page .btn-ghost:hover    { border-color: var(--noct-dim-2); color: var(--noct-white) !important; }
.noct-page .btn-warn,
.noct-page .btn-warn:link,
.noct-page .btn-warn:visited,
.noct-page .btn-warn:hover     { background: var(--noct-warn) !important; color: #080810 !important; }
.noct-page .btn-warn:hover     { transform: translateY(-2px); }
.noct-page .btn-arrow          { flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   NAV
════════════════════════════════════════════════════ */
.noct-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  padding: 24px 40px; display: flex; justify-content: space-between;
  align-items: center; border-bottom: 1px solid transparent;
  transition: border-color .4s ease, background .4s ease;
}
.noct-nav.scrolled { background: rgba(8,8,16,0.92); backdrop-filter: blur(16px); border-color: var(--noct-line); }
.noct-nav-logo,
.noct-nav-logo:link,
.noct-nav-logo:visited { font-family: var(--font-display); font-size: 22px; font-style: italic; color: var(--noct-white) !important; letter-spacing: 0.02em; }
.noct-nav-cta,
.noct-nav-cta:link,
.noct-nav-cta:visited {
  padding: 12px 24px; background: transparent !important;
  border: 1px solid var(--noct-line-strong); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--noct-text) !important;
  transition: all .2s ease;
}
.noct-nav-cta:hover { border-color: var(--noct-accent); color: var(--noct-white) !important; }

/* ════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════ */
.noct-page .page-hero {
  min-height: 90vh; display: flex; align-items: center;
  position: relative; overflow: hidden; padding-top: 100px;
}
.noct-page .page-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(196,132,107,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 50% 50%, var(--noct-navy) 0%, var(--noct-black) 70%);
}
.noct-page .page-hero-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 22%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 45% 15%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 72% 38%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 88% 12%, rgba(255,255,255,0.55), transparent),
    radial-gradient(0.5px 0.5px at 28% 55%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.5px 0.5px at 60% 70%, rgba(255,255,255,0.35), transparent);
  animation: noct-twinkle 10s ease-in-out infinite;
}
@keyframes noct-twinkle { 0%,100%{opacity:0.4} 50%{opacity:0.8} }
.noct-page .page-hero-content { position: relative; z-index: 1; width: 100%; }
.noct-page .hero-flag {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 48px; padding: 10px 20px;
  background: var(--noct-warn-soft);
  border: 1px solid rgba(196,132,107,0.25); border-radius: var(--r-pill);
}
.noct-page .hero-flag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--noct-warn-bright);
  animation: noct-pulse-warn 2s ease-in-out infinite;
}
@keyframes noct-pulse-warn {
  0%,100% { box-shadow: 0 0 0 0 rgba(196,132,107,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(196,132,107,0); }
}
.noct-page .hero-flag-text {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--noct-warn-bright);
}
.noct-page .page-hero-headline {
  font-family: var(--font-display) !important; font-weight: 300 !important;
  font-size: clamp(56px,8vw,128px) !important; line-height: 0.92 !important;
  letter-spacing: -0.03em; color: var(--noct-white) !important;
  margin: 0 0 40px !important; max-width: 18ch; padding: 0 !important;
}
.noct-page .page-hero-headline em { font-style: italic; color: var(--noct-warn-bright) !important; }
.noct-page .page-hero-sub {
  font-size: 16px; line-height: 1.7; color: var(--noct-dim);
  max-width: 50ch; margin: 0 0 56px;
}
.noct-page .hero-bottom-strip {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 40px; display: flex; justify-content: space-between;
  align-items: center; border-top: 1px solid var(--noct-line); z-index: 2;
  flex-wrap: wrap; gap: 16px;
}
.noct-page .strip-item { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--noct-dim-3); text-transform: uppercase; }
.noct-page .strip-item span { color: var(--noct-dim-2); }

/* ════════════════════════════════════════════════════
   SECTION HEADERS
════════════════════════════════════════════════════ */
.noct-page .sec-head  { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 72px; flex-wrap: wrap; }
.noct-page .sec-title {
  font-family: var(--font-display) !important; font-weight: 300 !important;
  font-size: clamp(36px,5vw,68px) !important; line-height: 1.0 !important;
  letter-spacing: -0.025em; color: var(--noct-white) !important;
  margin: 16px 0 0 !important; padding: 0 !important;
}
.noct-page .sec-title em     { font-style: italic; color: var(--noct-warn-bright) !important; }
.noct-page .sec-sub          { font-size: 15px; line-height: 1.65; color: var(--noct-dim); max-width: 44ch; margin: 0; }
.noct-page .section-number   { font-family: var(--font-mono); font-size: 120px; font-weight: 700; color: rgba(255,250,255,0.45); line-height: 1; position: absolute; top: 60px; right: 40px; letter-spacing: -0.05em; pointer-events: none; user-select: none; }

/* ════════════════════════════════════════════════════
   S01 — SLEEP 8 HOURS
════════════════════════════════════════════════════ */
.noct-page #s01 { background: var(--noct-black) !important; border-bottom: 1px solid var(--noct-line); }
.noct-page .s01-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.noct-page .s01-grid > * { min-width: 0; }
.noct-page .s01-body p { font-size: 15px; line-height: 1.8; color: var(--noct-dim); margin-bottom: 20px; }
.noct-page .s01-body p strong { color: var(--noct-text); font-weight: 700; }
.noct-page .mechanism-box { background: var(--noct-ink); border: 1px solid var(--noct-line); border-radius: var(--r-3); padding: 32px; margin-top: 40px; }
.noct-page .mechanism-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--noct-accent); text-transform: uppercase; margin-bottom: 16px; display: block; }
.noct-page .mechanism-text { font-size: 14px; line-height: 1.7; color: var(--noct-dim); margin: 0; }
.noct-page .mechanism-text strong { color: var(--noct-accent-bright); font-weight: 700; }
.noct-page .sleep-cycle-visual { background: var(--noct-ink); border: 1px solid var(--noct-line); border-radius: var(--r-3); padding: 36px; position: sticky; top: 100px; }
.noct-page .visual-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--noct-dim-3); text-transform: uppercase; margin-bottom: 24px; display: block; }
.noct-page .cycle-chart { width: 100%; height: 180px; }
.noct-page .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--noct-line); border-top: 1px solid var(--noct-line); margin-top: 28px; }
.noct-page .stat-cell { background: var(--noct-ink); padding: 24px 20px; display: flex; flex-direction: column; gap: 6px; }
.noct-page .stat-num { font-family: var(--font-display); font-size: 44px; font-style: italic; line-height: 1; color: var(--noct-warn-bright); letter-spacing: -0.02em; }
.noct-page .stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--noct-dim); text-transform: uppercase; line-height: 1.4; }

/* ════════════════════════════════════════════════════
   S02 — NIGHT ROUTINE
════════════════════════════════════════════════════ */
.noct-page #s02 { background: var(--noct-ink) !important; }
.noct-page .ritual-list { display: flex; flex-direction: column; border: 1px solid var(--noct-line); border-radius: var(--r-3); overflow: hidden; margin-bottom: 60px; }
.noct-page .ritual-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 32px; align-items: center; padding: 28px 36px; border-bottom: 1px solid var(--noct-line); transition: background .25s; }
.noct-page .ritual-item:last-child { border-bottom: none; }
.noct-page .ritual-item:hover { background: rgba(255,250,255,0.45); }
.noct-page .ritual-time { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--noct-dim-2); }
.noct-page .ritual-problem { font-size: 15px; color: var(--noct-text); }
.noct-page .ritual-problem strong { color: var(--noct-white); font-weight: 700; }
.noct-page .ritual-impact { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--noct-warn); text-align: right; white-space: nowrap; }
.noct-page .s02-body { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.noct-page .s02-body > * { min-width: 0; }
.noct-page .s02-text p { font-size: 15px; line-height: 1.8; color: var(--noct-dim); margin-bottom: 20px; }
.noct-page .s02-text p strong { color: var(--noct-text); font-weight: 700; }
.noct-page .product-nudge {
  background: var(--noct-navy); border: 1px solid var(--noct-line);
  border-radius: var(--r-3); padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; text-decoration: none !important; transition: border-color .25s; flex-wrap: wrap;
}
.noct-page .product-nudge:hover { border-color: rgba(107,123,196,0.4); }
.noct-page .nudge-left { flex: 1; min-width: 0; }
.noct-page .nudge-tag  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--noct-accent) !important; text-transform: uppercase; margin-bottom: 8px; display: block; }
.noct-page .nudge-name { font-family: var(--font-display); font-size: 24px; font-style: italic; color: var(--noct-white) !important; line-height: 1.1; margin-bottom: 6px; display: block; }
.noct-page .nudge-desc { font-size: 13px; color: var(--noct-dim); line-height: 1.5; }
.noct-page .nudge-price { font-family: var(--font-display); font-size: 32px; color: var(--noct-white) !important; line-height: 1; letter-spacing: -0.02em; flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   CTA BAND
════════════════════════════════════════════════════ */
.noct-page .cta-band { padding: 100px 0; background: var(--noct-navy-2) !important; border-top: 1px solid var(--noct-line); border-bottom: 1px solid var(--noct-line); position: relative; overflow: hidden; }
.noct-page .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(107,123,196,0.12) 0%, transparent 60%); pointer-events: none; }
.noct-page .cta-band-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
.noct-page .cta-band-copy h2 { font-family: var(--font-display) !important; font-size: clamp(40px,5vw,72px) !important; font-weight: 300 !important; line-height: 1.0 !important; letter-spacing: -0.03em; color: var(--noct-white) !important; margin: 16px 0 0 !important; }
.noct-page .cta-band-copy h2 em { font-style: italic; color: var(--noct-accent-bright) !important; }
.noct-page .cta-band-copy p { font-size: 15px; color: var(--noct-dim); margin-top: 20px; max-width: 44ch; }
.noct-page .cta-band-right { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ════════════════════════════════════════════════════
   S03 — PUFFY & TIRED
════════════════════════════════════════════════════ */
.noct-page #s03 { background: var(--noct-black) !important; }
.noct-page .symptom-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-bottom: 72px; }
.noct-page .symptom-card { background: var(--noct-ink); border: 1px solid var(--noct-line); border-radius: var(--r-3); padding: 36px 28px; display: flex; flex-direction: column; gap: 16px; transition: border-color .25s; }
.noct-page .symptom-card:hover { border-color: rgba(196,132,107,0.3); }
.noct-page .symptom-icon { width: 40px; height: 40px; border-radius: var(--r-2); background: var(--noct-warn-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.noct-page .symptom-title  { font-family: var(--font-display) !important; font-size: 26px !important; font-style: italic; color: var(--noct-white) !important; line-height: 1.1 !important; margin: 0 !important; }
.noct-page .symptom-desc   { font-size: 13px; line-height: 1.65; color: var(--noct-dim); }
.noct-page .symptom-metric { margin-top: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--noct-warn); text-transform: uppercase; border-top: 1px solid var(--noct-line-soft); padding-top: 16px; }
.noct-page .s03-explain { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.noct-page .s03-explain > * { min-width: 0; }
.noct-page .s03-text p { font-size: 15px; line-height: 1.8; color: var(--noct-dim); margin-bottom: 20px; }
.noct-page .s03-text p strong { color: var(--noct-text); font-weight: 700; }
.noct-page .cortisol-chart { background: var(--noct-ink); border: 1px solid var(--noct-line); border-radius: var(--r-3); padding: 32px; }

/* ════════════════════════════════════════════════════
   S04 — ENVIRONMENT
════════════════════════════════════════════════════ */
.noct-page #s04 { background: var(--noct-ink) !important; }
.noct-page .env-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.noct-page .env-grid > * { min-width: 0; }
.noct-page .env-item { display: flex; align-items: flex-start; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--noct-line); }
.noct-page .env-item:last-child { border-bottom: none; }
.noct-page .env-status { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; background: var(--noct-warn-soft); }
.noct-page .env-item-title { font-family: var(--font-display) !important; font-size: 20px !important; font-style: italic; color: var(--noct-white) !important; margin-bottom: 6px !important; line-height: 1.2 !important; display: block; }
.noct-page .env-item-desc  { font-size: 13px; line-height: 1.65; color: var(--noct-dim); display: block; }
.noct-page .env-item-fix   { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--noct-accent); text-transform: uppercase; margin-top: 8px; display: block; }
.noct-page .env-products   { display: flex; flex-direction: column; gap: 16px; }
.noct-page .env-product {
  background: var(--noct-navy); border: 1px solid var(--noct-line);
  border-radius: var(--r-3); padding: 24px 28px;
  text-decoration: none !important; transition: border-color .25s;
  display: flex; flex-direction: column; gap: 10px;
}
.noct-page .env-product:hover { border-color: var(--noct-accent); }
.noct-page .env-product-tag   { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--noct-accent) !important; text-transform: uppercase; }
.noct-page .env-product-name  { font-family: var(--font-display) !important; font-size: 22px !important; font-style: italic; color: var(--noct-white) !important; line-height: 1.1 !important; margin: 0 !important; }
.noct-page .env-product-row   { display: flex; justify-content: space-between; align-items: center; }
.noct-page .env-product-desc  { font-size: 13px; color: var(--noct-dim); line-height: 1.5; max-width: 28ch; }
.noct-page .env-product-price { font-family: var(--font-display); font-size: 28px; color: var(--noct-white) !important; letter-spacing: -0.02em; flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   S05 — ROOT CAUSE
════════════════════════════════════════════════════ */
.noct-page #s05 { background: var(--noct-black) !important; }
.noct-page .truth-reveal { background: var(--noct-ink); border: 1px solid var(--noct-line); border-radius: var(--r-3); padding: 60px; margin-bottom: 72px; position: relative; overflow: hidden; }
.noct-page .truth-reveal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--noct-warn), transparent); }
.noct-page .truth-reveal-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--noct-dim-3); text-transform: uppercase; margin-bottom: 32px; display: block; }
.noct-page .truth-quote { font-family: var(--font-display) !important; font-size: clamp(30px,4vw,52px) !important; font-weight: 300 !important; line-height: 1.15 !important; color: var(--noct-white) !important; letter-spacing: -0.02em; max-width: 32ch; margin: 0 !important; }
.noct-page .truth-quote em { font-style: italic; color: var(--noct-warn-bright) !important; }
.noct-page .root-causes { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--noct-line); border: 1px solid var(--noct-line); border-radius: var(--r-3); overflow: hidden; margin-bottom: 72px; }
.noct-page .cause-cell  { background: var(--noct-black); padding: 40px 28px; display: flex; flex-direction: column; gap: 14px; }
.noct-page .cause-num   { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--noct-dim-3); }
.noct-page .cause-title { font-family: var(--font-display) !important; font-size: 28px !important; font-style: italic; color: var(--noct-white) !important; line-height: 1.1 !important; margin: 0 !important; font-weight: 300 !important; }
.noct-page .cause-desc  { font-size: 13px; line-height: 1.65; color: var(--noct-dim); }
.noct-page .cause-fix   { margin-top: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--noct-accent-bright); text-transform: uppercase; padding-top: 16px; border-top: 1px solid var(--noct-line-soft); }
.noct-page .s05-body { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.noct-page .s05-body > * { min-width: 0; }
.noct-page .s05-text p { font-size: 15px; line-height: 1.8; color: var(--noct-dim); margin-bottom: 20px; }
.noct-page .s05-text p strong { color: var(--noct-text); font-weight: 700; }
.noct-page .bundle-card { background: linear-gradient(180deg, var(--noct-navy) 0%, var(--noct-ink) 100%); border: 1px solid var(--noct-line); border-radius: var(--r-3); padding: 40px; position: relative; overflow: hidden; }
.noct-page .bundle-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(160,174,232,0.25), transparent); }
.noct-page .bundle-tag  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--noct-accent); text-transform: uppercase; margin-bottom: 16px; display: block; }
.noct-page .bundle-name { font-family: var(--font-display) !important; font-size: 36px !important; font-style: italic; color: var(--noct-white) !important; line-height: 1.05 !important; margin-bottom: 12px !important; }
.noct-page .bundle-desc { font-size: 14px; line-height: 1.65; color: var(--noct-dim); margin-bottom: 28px; }
.noct-page .bundle-includes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.noct-page .bundle-item { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--noct-text); }
.noct-page .bundle-dot  { width: 4px; height: 4px; border-radius: 50%; background: var(--noct-accent); flex-shrink: 0; }
.noct-page .bundle-price-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.noct-page .bundle-price { font-family: var(--font-display); font-size: 52px; font-style: italic; color: var(--noct-white); letter-spacing: -0.02em; line-height: 1; }
.noct-page .bundle-price-label { font-size: 13px; color: var(--noct-dim); }

/* ════════════════════════════════════════════════════
   FINAL CTA
════════════════════════════════════════════════════ */
.noct-page .final-cta { padding: 180px 0 140px; position: relative; overflow: hidden; background: var(--noct-black) !important; }
.noct-page .final-cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 90% at 50% 100%, var(--noct-navy-2) 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 50% 50%, var(--noct-warn-soft) 0%, transparent 70%); }
.noct-page .final-cta-stars { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.4), transparent), radial-gradient(1.5px 1.5px at 55% 20%, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 80% 45%, rgba(255,255,255,0.35), transparent); }
.noct-page .final-cta-content { position: relative; z-index: 1; text-align: center; max-width: 800px; margin: 0 auto; }
.noct-page .final-headline { font-family: var(--font-display) !important; font-size: clamp(60px,10vw,140px) !important; font-weight: 300 !important; line-height: 0.92 !important; letter-spacing: -0.04em; color: var(--noct-white) !important; margin: 28px 0 32px !important; }
.noct-page .final-headline em { font-style: italic; color: var(--noct-warn-bright) !important; }
.noct-page .final-sub  { font-size: 16px; color: var(--noct-dim); line-height: 1.7; max-width: 46ch; margin: 0 auto 48px; }
.noct-page .final-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════
   FOOTER STRIP
════════════════════════════════════════════════════ */
.noct-footer-strip { padding: 32px 40px; border-top: 1px solid var(--noct-line); background: var(--noct-black) !important; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.noct-footer-brand { font-family: var(--font-display); font-size: 18px; font-style: italic; color: var(--noct-dim); letter-spacing: 0.02em; }
.noct-footer-note  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--noct-dim-3); text-transform: uppercase; }

/* ════════════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════════════ */
.noct-page .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.noct-page .reveal.in { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .noct-page .s01-grid,
  .noct-page .s02-body,
  .noct-page .s03-explain,
  .noct-page .env-grid,
  .noct-page .s05-body   { grid-template-columns: 1fr; gap: 48px; }
  .noct-page .symptom-grid { grid-template-columns: 1fr 1fr; }
  .noct-page .root-causes  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .noct-page .container, .noct-page .container-wide { padding: 0 24px; }
  .noct-page .section { padding: 96px 0; }
  .noct-page .ritual-item { grid-template-columns: 1fr; gap: 8px; }
  .noct-page .ritual-impact { text-align: left; }
  .noct-page .hero-bottom-strip { display: none; }
  .noct-nav { padding: 20px 24px; }
  .noct-footer-strip { padding: 24px; }
}
@media (max-width: 640px) {
  .noct-page .symptom-grid { grid-template-columns: 1fr; }
  .noct-page .root-causes  { grid-template-columns: 1fr; }
  .noct-page .stat-row { grid-template-columns: 1fr; }
}


/* ─── NOCT Design Tokens ────────────────────────────── */
  :root {
    --bg:           #eadcf3;
    --bg-soft:      #f1e2f2;
    --bg-card:      #f3e6f6;
    --border:       rgba(91,74,135,0.14);
    --border-hover: rgba(91,74,135,0.24);
    --accent:       #6f9d86;
    --accent-light: #83b79b;
    --accent-glow:  rgba(198,168,222,0.15);
    --text-primary: #34295f;
    --text-secondary: rgba(63,51,108,0.65);
    --text-muted:   rgba(63,51,108,0.42);
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Syne', sans-serif;
    --font-mono:    'DM Mono', monospace;
  }

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

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ─── Noise texture overlay ─────────────────────────── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
  }

  /* ─── Hero ──────────────────────────────────────────── */
  .priv-hero {
    position: relative;
    padding: 120px 40px 80px;
    text-align: center;
    overflow: hidden;
  }

  .priv-hero::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(198,168,222,0.08) 0%, transparent 70%);
    pointer-events: none;
  }

  .priv-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
    display: block;
    opacity: 0;
    animation: fadeUp 0.7s ease forwards 0.1s;
  }

  .priv-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.0;
    color: var(--text-primary);
    opacity: 0;
    animation: fadeUp 0.7s ease forwards 0.25s;
  }

  .priv-hero h1 em {
    font-style: italic;
    color: var(--accent-light);
  }

  .priv-hero-meta {
    margin-top: 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    opacity: 0;
    animation: fadeUp 0.7s ease forwards 0.4s;
  }

  .priv-hero-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    margin: 40px auto 0;
    opacity: 0;
    animation: fadeUp 0.7s ease forwards 0.55s;
  }

  /* ─── Layout ────────────────────────────────────────── */
  .priv-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px 120px;
    position: relative;
    z-index: 1;
  }

  /* ─── Sticky Nav ────────────────────────────────────── */
  .priv-nav {
    position: sticky;
    top: 80px;
    height: fit-content;
    padding-right: 40px;
    padding-top: 4px;
  }

  .priv-nav-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
    display: block;
  }

  .priv-nav a {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 6px 0 6px 14px;
    border-left: 1px solid var(--border);
    margin-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
    line-height: 1.4;
  }

  .priv-nav a:hover,
  .priv-nav a.active {
    color: var(--accent-light);
    border-left-color: var(--accent);
  }

  /* ─── Content ───────────────────────────────────────── */
  .priv-content {
    border-left: 1px solid var(--border);
    padding-left: 60px;
  }

  .priv-section {
    padding: 48px 0;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .priv-section.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .priv-section:last-child { border-bottom: none; }

  .priv-section-number {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 12px;
    display: block;
  }

  .priv-section h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 24px;
    letter-spacing: 0.01em;
  }

  .priv-section h2 em {
    font-style: italic;
    color: var(--accent-light);
  }

  .priv-section p {
    color: var(--text-secondary);
    font-size: 14.5px;
    line-height: 1.8;
    margin-bottom: 16px;
    max-width: 640px;
  }

  .priv-section p:last-child { margin-bottom: 0; }

  /* ─── Info Cards ────────────────────────────────────── */
  .priv-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
    max-width: 640px;
  }

  .priv-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 20px;
    transition: border-color 0.2s;
  }

  .priv-card:hover { border-color: var(--border-hover); }

  .priv-card-icon {
    font-size: 18px;
    margin-bottom: 10px;
    display: block;
  }

  .priv-card-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
    display: block;
  }

  .priv-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
  }

  /* ─── Data Table ────────────────────────────────────── */
  .priv-table {
    width: 100%;
    max-width: 640px;
    border-collapse: collapse;
    margin-top: 24px;
    font-size: 13px;
  }

  .priv-table th {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    padding: 8px 16px 8px 0;
    border-bottom: 1px solid var(--border);
  }

  .priv-table td {
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid rgba(198,168,222,0.06);
    color: var(--text-secondary);
    vertical-align: top;
    line-height: 1.6;
  }

  .priv-table td:first-child {
    color: var(--text-primary);
    font-weight: 500;
    width: 38%;
  }

  .priv-table tr:last-child td { border-bottom: none; }

  /* ─── Rights List ───────────────────────────────────── */
  .priv-rights {
    list-style: none;
    margin-top: 24px;
    max-width: 640px;
  }

  .priv-rights li {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(198,168,222,0.06);
  }

  .priv-rights li:last-child { border-bottom: none; }

  .priv-rights-badge {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 3px 8px;
    height: fit-content;
    margin-top: 2px;
    white-space: nowrap;
  }

  .priv-rights-text {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.7;
  }

  .priv-rights-text strong {
    color: var(--text-primary);
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
  }

  /* ─── Contact Block ─────────────────────────────────── */
  .priv-contact-block {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 28px 32px;
    margin-top: 24px;
    max-width: 480px;
    position: relative;
    overflow: hidden;
  }

  .priv-contact-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 100%;
    background: linear-gradient(to bottom, var(--accent), transparent);
  }

  .priv-contact-block p {
    margin-bottom: 12px;
    font-size: 14px;
  }

  .priv-contact-block a {
    color: var(--accent-light);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 13px;
  }

  .priv-contact-block a:hover { text-decoration: underline; }

  /* ─── Cookie Tag Inline ─────────────────────────────── */
  .tag-inline {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 1px 7px;
    margin: 0 2px;
  }

  /* ─── Footer strip ──────────────────────────────────── */
  .priv-footer-strip {
    border-top: 1px solid var(--border);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeUp 0.6s ease forwards 0.8s;
  }

  .priv-footer-strip .logo {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-primary);
  }

  .priv-footer-strip span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
  }

  /* ─── Animations ────────────────────────────────────── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ─── Responsive ────────────────────────────────────── */
  @media (max-width: 860px) {
    .priv-layout {
      grid-template-columns: 1fr;
      padding: 0 24px 80px;
    }
    .priv-nav { display: none; }
    .priv-content { border-left: none; padding-left: 0; }
    .priv-hero { padding: 80px 24px 60px; }
    .priv-card-grid { grid-template-columns: 1fr; }
    .priv-footer-strip { padding: 32px 24px; flex-direction: column; gap: 12px; text-align: center; }
  }


#noctMainAtc {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 32px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  outline: none !important;
  background: linear-gradient(160deg, rgba(91,74,135,0.16) 0%, rgba(255,250,255,0.45) 60%), #9c8cff !important;
  box-shadow: inset 0 1px 0 rgba(91,74,135,0.22), inset 0 -1px 0 rgba(0,0,0,0.18), 0 4px 16px rgba(198,168,222,0.22), 0 1px 3px rgba(0,0,0,0.3) !important;
  color: #0d0b1a !important;
  font-family: "Syne", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-font-smoothing: antialiased !important;
  position: relative !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  transition: background 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
#noctMainAtc:hover {
  background: linear-gradient(160deg, rgba(91,74,135,0.18) 0%, rgba(255,250,255,0.45) 60%), #d3cbff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.14), 0 8px 28px rgba(198,168,222,0.38), 0 2px 6px rgba(0,0,0,0.25) !important;
  transform: translateY(-2px) !important;
  color: #0d0b1a !important;
}
#noctMainAtc:active {
  transform: translateY(0) scale(0.985) !important;
  transition-duration: 0.08s !important;
}
#noctMainAtc:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}
#noctMainAtc svg {
  display: block !important;
  flex-shrink: 0 !important;
  fill: none !important;
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
#noctMainAtc:hover svg {
  transform: translateX(3px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NOCT DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
.noct-product-page {
  --noct-black:          #eadcf3;
  --noct-ink:            #f1e2f2;
  --noct-navy:           #e6d4ef;
  --noct-navy-2:         #ecdcf4;
  --noct-line:           rgba(91,74,135,0.14);
  --noct-line-soft:      rgba(91,74,135,0.08);
  --noct-line-mid:       rgba(91,74,135,0.12);
  --noct-white:          #34295f;
  --noct-text:           rgba(63,51,108,0.92);
  --noct-dim:            rgba(63,51,108,0.65);
  --noct-dim-2:          rgba(63,51,108,0.42);
  --noct-dim-3:          rgba(63,51,108,0.26);
  --noct-accent:         #6f9d86;
  --noct-accent-bright:  #83b79b;
  --noct-accent-soft:    rgba(111,157,134,0.16);
  --noct-accent-glow:    rgba(198,168,222,0.40);
  --noct-sale:           #6f9d86;
  --noct-danger:         #ff6c6c;
  --font-display:        "Cormorant Garamond", Georgia, serif;
  --font-body:           "Syne", system-ui, sans-serif;
  --font-mono:           "DM Mono", "Courier New", monospace;
  --r-sm:    12px;
  --r-md:    18px;
  --r-lg:    26px;
  --r-pill:  999px;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --shadow:  0 24px 60px rgba(0,0,0,0.6);
}

/* ─── BASE ──────────────────────────────────────────────────────── */
.noct-product-page * { box-sizing: border-box; }
.noct-product-page {
  background: var(--noct-black);
  color: var(--noct-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.noct-product-page .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ─── STARS ─────────────────────────────────────────────────────── */
.noct-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.noct-stars-lg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 9% 15%,  rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 24% 68%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.5px 1.5px at 44% 28%, rgba(255,255,255,.60), transparent),
    radial-gradient(1px 1px at 61% 82%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 76% 44%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 89% 72%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 35% 52%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 52% 11%, rgba(255,255,255,.50), transparent);
}
.noct-stars-sm {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(.5px .5px at 17% 38%, rgba(255,255,255,.50), transparent),
    radial-gradient(.5px .5px at 32% 77%, rgba(255,255,255,.45), transparent),
    radial-gradient(.5px .5px at 58% 55%, rgba(255,255,255,.50), transparent),
    radial-gradient(.5px .5px at 74% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(.5px .5px at 91% 47%, rgba(255,255,255,.40), transparent);
  animation: noctTwinkle 9s ease-in-out infinite;
}
@keyframes noctTwinkle { 0%,100%{opacity:.35} 50%{opacity:.75} }

/* ─── STICKY BAR ────────────────────────────────────────────────── */
.noct-sticky-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 60px;
  backdrop-filter: blur(20px) saturate(1.4);
  background: rgba(7,7,11,0.82);
  border-bottom: 1px solid var(--noct-line);
  transform: translateY(-100%);
  transition: transform .4s var(--ease);
}
.noct-sticky-bar.is-visible { transform: translateY(0); }
.noct-sticky-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.noct-sticky-product { display: flex; flex-direction: column; gap: 3px; }
.noct-sticky-name { font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: -0.02em; color: var(--noct-white); line-height: 1; }
.noct-sticky-price { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--noct-accent); }
.noct-sticky-price .price { font-family: var(--font-mono); font-size: 10px; color: var(--noct-accent); }
.noct-sticky-price del { display: none; }
.noct-sticky-atc {
  background: var(--noct-accent); border: none; color: var(--noct-black);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 22px; border-radius: var(--r-pill); cursor: pointer;
  white-space: nowrap; display: flex; align-items: center; gap: 8px;
  transition: background .2s, transform .2s;
}
.noct-sticky-atc:hover { background: var(--noct-accent-bright); transform: translateY(-1px); }

/* ─── REVEAL ────────────────────────────────────────────────────── */
.noct-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.noct-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ─── EYEBROW DOT ───────────────────────────────────────────────── */
.noct-eyebrow-dot {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--noct-accent); margin-bottom: 20px;
}
.noct-eyebrow-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--noct-accent);
  animation: noctDotPulse 2.4s ease-in-out infinite; flex-shrink: 0;
}
@keyframes noctDotPulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(1.5); } }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.noct-hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 80px; padding-bottom: 100px; z-index: 1; }
.noct-hero-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.noct-hero-glow-left { position: absolute; left: 0; top: 20%; width: 50%; height: 60%; background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(103,131,214,.08), transparent 70%); }
.noct-hero-glow-right { position: absolute; right: 0; top: 30%; width: 50%; height: 60%; background: radial-gradient(ellipse 50% 70% at 80% 40%, rgba(198,168,222,.07), transparent 65%); }
.noct-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; width: 100%; }

/* Gallery */
.noct-gallery { display: flex; flex-direction: column; gap: 14px; }
.noct-gallery-stage { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(150deg, var(--noct-navy) 0%, var(--noct-ink) 100%); border: 1px solid var(--noct-line); aspect-ratio: 1 / 1.05; }
.noct-gallery-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.noct-gallery-slide.active { opacity: 1; pointer-events: auto; }
.noct-gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.noct-gallery-stage:hover .noct-gallery-img { transform: scale(1.025); }
.noct-gallery-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: linear-gradient(150deg, var(--noct-navy) 0%, var(--noct-ink) 100%); }
.noct-gallery-placeholder-glyph { font-family: var(--font-display); font-size: 80px; color: rgba(198,168,222,.3); animation: noctFloat 6s ease-in-out infinite; }
@keyframes noctFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.noct-gallery-placeholder-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--noct-dim-3); }
.noct-gallery-sale-badge { position: absolute; top: 18px; left: 18px; z-index: 2; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--noct-sale); background: rgba(109,223,159,.1); border: 1px solid rgba(109,223,159,.3); padding: 5px 12px; border-radius: var(--r-pill); }
.noct-gallery-oos { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(7,7,11,.72); font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--noct-danger); }
.noct-gallery-material { position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 2; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--noct-dim-2); background: linear-gradient(to top, rgba(7,7,11,.7), transparent); padding: 24px 0 4px; }
.noct-gallery-cat { position: absolute; top: 18px; right: 18px; z-index: 2; }
.noct-gallery-cat span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--noct-dim-3); background: rgba(7,7,11,.6); padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--noct-line); backdrop-filter: blur(8px); }
.noct-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.noct-gallery-thumb { width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--noct-line); background: var(--noct-navy); cursor: pointer; padding: 0; transition: border-color .2s; position: relative; }
.noct-gallery-thumb::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--noct-accent); transform: scaleX(0); transition: transform .2s; }
.noct-gallery-thumb.active, .noct-gallery-thumb:hover { border-color: var(--noct-accent); }
.noct-gallery-thumb.active::after { transform: scaleX(1); }
.noct-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.noct-gallery-thumb:hover .noct-thumb-img { transform: scale(1.08); }

/* Product details */
.noct-product-details { display: flex; flex-direction: column; gap: 0; padding-top: 8px; }
.noct-product-meta-bar { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--noct-dim-3); margin-bottom: 20px; }
.noct-product-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--noct-accent); margin-bottom: 14px; }
.noct-product-title { font-family: var(--font-display); font-size: clamp(48px, 5.5vw, 80px); font-weight: 300; line-height: .95; letter-spacing: -.035em; color: var(--noct-white); margin-bottom: 24px; }
.noct-product-lede { font-size: 16px; line-height: 1.75; color: var(--noct-dim); margin-bottom: 32px; max-width: 50ch; }
.noct-product-lede p { margin: 0 0 12px; }
.noct-product-lede p:last-child { margin: 0; }
.noct-product-lede strong { color: var(--noct-text); font-weight: 500; }

/* Price */
.noct-price-block { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.noct-price-display .price { font-family: var(--font-body); font-size: 42px; font-weight: 700; letter-spacing: -.035em; color: var(--noct-white); line-height: 1; }
.noct-price-display .price ins { text-decoration: none; color: var(--noct-white); }
.noct-price-display .price del { color: var(--noct-dim-3); font-size: 22px; font-weight: 400; margin-right: 8px; }
.noct-price-display .price .woocommerce-Price-currencySymbol { font-size: .6em; vertical-align: super; margin-right: 2px; }
.noct-price-save-chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--noct-sale); background: rgba(109,223,159,.08); border: 1px solid rgba(109,223,159,.25); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }

/* ── ATC FORM ── */
.noct-atc-form { margin-bottom: 24px; }
.noct-qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.noct-qty-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--noct-dim); flex-shrink: 0; }
.noct-qty-ctrl { display: inline-flex; align-items: center; border: 1px solid var(--noct-line); border-radius: var(--r-pill); overflow: hidden; background: transparent; }
.noct-qty-btn { width: 38px; height: 38px; background: transparent; border: none; color: var(--noct-dim); font-size: 20px; line-height: 1; cursor: pointer; transition: all .2s; font-family: var(--font-body); display: flex; align-items: center; justify-content: center; }
.noct-qty-btn:hover { color: var(--noct-white); background: var(--noct-line-soft); }
.noct-qty-input { width: 44px; text-align: center; background: transparent; border: none; color: var(--noct-white); font-family: var(--font-mono); font-size: 14px; -moz-appearance: textfield; outline: none; }
.noct-qty-input::-webkit-inner-spin-button, .noct-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── CTA ROW — single full-width button, no wishlist ── */
.noct-cta-row {
  display: flex;
  width: 100%;
}

/* ── ATC BUTTON ── */
.noct-product-page .noct-atc-btn {
  /* reset */
  appearance: none; -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  border: none; outline: none; text-shadow: none;
  /* layout — full width, single button */
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  /* sizing */
  padding: 0 32px; height: 58px;
  border-radius: var(--r-pill);
  /* surface — layered gradient for depth */
  background:
    linear-gradient(160deg,
      rgba(91,74,135,0.16) 0%,
      rgba(255,250,255,0.45)  60%
    ),
    var(--noct-accent);
  /* inner glow border */
  box-shadow:
    inset 0 1px 0 rgba(91,74,135,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 16px rgba(198,168,222,0.22),
    0 1px 3px rgba(0,0,0,0.3);
  /* type */
  color: #0d0b1a;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  /* motion */
  transition:
    background .3s var(--ease),
    box-shadow .3s var(--ease),
    transform  .25s var(--ease);
  will-change: transform;
  position: relative;
  overflow: hidden;
}

/* shimmer sweep on hover */
.noct-product-page .noct-atc-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(91,74,135,0.18) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0s;
}
.noct-product-page .noct-atc-btn:hover::before {
  transform: translateX(100%);
  transition: transform .55s var(--ease);
}

.noct-product-page .noct-atc-btn:hover {
  background:
    linear-gradient(160deg,
      rgba(91,74,135,0.18) 0%,
      rgba(255,250,255,0.45)  60%
    ),
    var(--noct-accent-bright);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 8px 28px rgba(198,168,222,0.38),
    0 2px 6px rgba(0,0,0,0.25);
  transform: translateY(-2px);
  color: #0d0b1a;
}

.noct-product-page .noct-atc-btn:active {
  transform: translateY(0) scale(0.985);
  box-shadow:
    inset 0 1px 0 rgba(91,74,135,0.16),
    inset 0 2px 4px rgba(0,0,0,0.2),
    0 2px 8px rgba(198,168,222,0.18);
  transition-duration: .08s;
}

.noct-product-page .noct-atc-btn.is-added {
  background:
    linear-gradient(160deg, rgba(91,74,135,0.14) 0%, transparent 60%),
    var(--noct-sale);
  box-shadow:
    inset 0 1px 0 rgba(91,74,135,0.20),
    0 4px 16px rgba(109,223,159,0.28);
  color: #07150e;
}

.noct-atc-arrow {
  flex-shrink: 0;
  transition: transform .3s var(--ease);
}
.noct-product-page .noct-atc-btn:hover svg {
  transform: translateX(3px);
}

.noct-oos-notice { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--noct-danger); padding: 14px 0; }
.noct-oos-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--noct-danger); flex-shrink: 0; animation: noctDotPulse 1.8s ease-in-out infinite; }

/* Variable product */
.noct-variable-form .variations { border: none; width: 100%; margin-bottom: 16px; }
.noct-variable-form .variations td, .noct-variable-form .variations th { padding: 8px 0; border: none; background: none; text-align: left; }
.noct-variable-form .variations label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--noct-dim); }
.noct-variable-form .variations select { background: var(--noct-navy); border: 1px solid var(--noct-line); color: var(--noct-text); padding: 10px 16px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; outline: none; cursor: pointer; transition: border-color .2s; min-width: 180px; -webkit-appearance: none; appearance: none; }
.noct-variable-form .variations select:focus { border-color: var(--noct-accent); }
.noct-variable-form .single_add_to_cart_button { background: var(--noct-accent); border: none; color: var(--noct-black); font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 16px 32px; border-radius: var(--r-pill); cursor: pointer; transition: background .2s; }
.noct-variable-form .single_add_to_cart_button:hover { background: var(--noct-accent-bright); }
.noct-variable-form .reset_variations { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--noct-dim-3); text-decoration: none; display: inline-block; margin-top: 8px; }

/* Trust bar */
.noct-trust-bar { list-style: none; padding: 0; margin: 0; display: flex; gap: 0; flex-wrap: wrap; border-top: 1px solid var(--noct-line-soft); padding-top: 20px; margin-bottom: 24px; }
.noct-trust-bar li { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--noct-dim-3); padding: 8px 20px 8px 0; }
.noct-trust-bar li svg { color: var(--noct-accent); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2 — STORY BEATS
   ═══════════════════════════════════════════════════════════════════════════ */
.noct-story { position: relative; z-index: 1; padding: 130px 0; border-top: 1px solid var(--noct-line); }
.noct-story-header { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 72px; }
.noct-story-premise { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--noct-dim-3); max-width: 44ch; line-height: 1.7; }
.noct-beats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--noct-line); border-radius: var(--r-lg); overflow: hidden; }
.noct-beat { padding: 52px 40px 48px; border-right: 1px solid var(--noct-line); position: relative; overflow: hidden; transition: background .35s; }
.noct-beat:last-child { border-right: none; }
.noct-beat:hover { background: rgba(198,168,222,.03); }
.noct-beat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--noct-accent), transparent); opacity: 0; transition: opacity .35s; }
.noct-beat:hover::before { opacity: 1; }
.noct-beat-index { position: absolute; right: 28px; bottom: 24px; font-family: var(--font-display); font-size: 80px; font-weight: 300; line-height: 1; color: rgba(198,168,222,.07); pointer-events: none; transition: color .35s; }
.noct-beat:hover .noct-beat-index { color: rgba(198,168,222,.1); }
.noct-beat-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--noct-accent); margin-bottom: 24px; }
.noct-beat-headline { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 400; line-height: 1.05; letter-spacing: -.025em; color: var(--noct-white); margin-bottom: 20px; }
.noct-beat-headline em { font-style: italic; color: var(--noct-accent-bright); }
.noct-beat-body { font-size: 14px; line-height: 1.8; color: var(--noct-dim); font-family: var(--font-body); position: relative; z-index: 1; }
.noct-beat-rule { width: 24px; height: 1px; background: var(--noct-accent-soft); margin-top: 28px; transition: width .35s var(--ease); }
.noct-beat:hover .noct-beat-rule { width: 48px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3 — EDITORIAL
   ═══════════════════════════════════════════════════════════════════════════ */
.noct-editorial { position: relative; z-index: 1; padding: 100px 0; border-top: 1px solid var(--noct-line); }
.noct-editorial-grid { display: grid; grid-template-columns: 200px 1fr; gap: 80px; align-items: start; }
.noct-editorial-anchor { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; position: sticky; top: 80px; }
.noct-editorial-sigil { font-family: var(--font-display); font-size: 64px; font-weight: 300; line-height: 1; color: rgba(198,168,222,.18); animation: noctFloat 8s ease-in-out infinite; }
.noct-editorial-body { font-size: 16px; line-height: 1.85; color: var(--noct-dim); max-width: 70ch; }
.noct-editorial-body h2, .noct-editorial-body h3 { font-family: var(--font-display); font-weight: 300; color: var(--noct-white); letter-spacing: -.025em; margin: 40px 0 16px; }
.noct-editorial-body h2 { font-size: 40px; line-height: 1.05; }
.noct-editorial-body h3 { font-size: 28px; line-height: 1.1; }
.noct-editorial-body p { margin: 0 0 20px; }
.noct-editorial-body p:last-child { margin: 0; }
.noct-editorial-body strong { color: var(--noct-text); font-weight: 500; }
.noct-editorial-body em { color: var(--noct-accent-bright); }
.noct-editorial-body ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.noct-editorial-body ul li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--noct-dim); }
.noct-editorial-body ul li::before { content: '◈'; color: var(--noct-accent); font-size: 11px; margin-top: 3px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4 — SCIENCE
   ═══════════════════════════════════════════════════════════════════════════ */
.noct-science { position: relative; z-index: 1; padding: 120px 0; border-top: 1px solid var(--noct-line); background: linear-gradient(180deg, transparent 0%, rgba(17,22,42,.4) 40%, rgba(17,22,42,.4) 60%, transparent 100%); }
.noct-science-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.noct-science-headline { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 62px); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; color: var(--noct-white); margin-bottom: 28px; }
.noct-science-headline em { font-style: italic; color: var(--noct-accent-bright); }
.noct-science-prose { font-size: 15px; line-height: 1.85; color: var(--noct-dim); max-width: 46ch; }
.noct-science-stats { display: flex; flex-direction: column; gap: 12px; }
.noct-stat { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 28px 32px; border: 1px solid var(--noct-line); border-radius: var(--r-md); background: rgba(7,7,11,.5); transition: border-color .3s, transform .35s var(--ease); }
.noct-stat:hover { border-color: rgba(198,168,222,.28); transform: translateX(6px); }
.noct-stat-number { font-family: var(--font-display); font-size: 54px; font-weight: 300; line-height: .9; color: var(--noct-accent-bright); letter-spacing: -.04em; }
.noct-stat-unit { font-family: var(--font-mono); font-size: 14px; color: var(--noct-accent); vertical-align: super; margin-left: 3px; }
.noct-stat-label { font-size: 14px; line-height: 1.55; color: var(--noct-dim); margin: 0; font-family: var(--font-body); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5 — MATERIALS
   ═══════════════════════════════════════════════════════════════════════════ */
.noct-material { position: relative; z-index: 1; padding: 120px 0; border-top: 1px solid var(--noct-line); }
.noct-material-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.noct-material-headline { font-family: var(--font-display); font-size: clamp(36px, 4vw, 56px); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; color: var(--noct-white); }
.noct-material-headline em { font-style: italic; color: var(--noct-accent-bright); }
.noct-material-prose { font-size: 15px; line-height: 1.85; color: var(--noct-dim); margin-bottom: 24px; }
.noct-material-line-fallback { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--noct-dim-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6 — ROUTINE
   ═══════════════════════════════════════════════════════════════════════════ */
.noct-routine { position: relative; z-index: 1; padding: 120px 0; border-top: 1px solid var(--noct-line); }
.noct-routine-header { margin-bottom: 72px; }
.noct-routine-headline { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; color: var(--noct-white); }
.noct-routine-headline em { font-style: italic; color: var(--noct-accent-bright); }
.noct-routine-timeline { display: flex; flex-direction: column; gap: 0; }
.noct-routine-step { display: grid; grid-template-columns: 100px 1fr; gap: 0; border-bottom: 1px solid var(--noct-line); padding: 40px 0; position: relative; transition: background .3s; }
.noct-routine-step:first-child { border-top: 1px solid var(--noct-line); }
.noct-routine-step::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(198,168,222,.04); transition: width .4s var(--ease); }
.noct-routine-step:hover::before { width: 100%; }
.noct-routine-node { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--noct-accent); display: flex; align-items: flex-start; padding-top: 4px; position: relative; z-index: 1; }
.noct-routine-content { position: relative; z-index: 1; }
.noct-routine-title { font-family: var(--font-display); font-size: 30px; font-weight: 400; line-height: 1.1; letter-spacing: -.025em; color: var(--noct-white); margin-bottom: 12px; }
.noct-routine-body { font-size: 15px; line-height: 1.75; color: var(--noct-dim); max-width: 64ch; font-family: var(--font-body); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7 — REVIEWS
   ═══════════════════════════════════════════════════════════════════════════ */
.noct-reviews { position: relative; z-index: 1; padding: 120px 0; border-top: 1px solid var(--noct-line); }
.noct-reviews-header { margin-bottom: 60px; }
.noct-reviews-headline { font-family: var(--font-display); font-size: clamp(38px, 4.5vw, 58px); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; color: var(--noct-white); }
.noct-reviews-headline em { font-style: italic; color: var(--noct-accent-bright); }
.noct-reviews #reviews { background: none; border: none; }
.noct-reviews #reviews h2, .noct-reviews .woocommerce-Reviews-title { display: none; }
.noct-reviews ol.commentlist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.noct-reviews ol.commentlist li.comment { background: var(--noct-ink); border: 1px solid var(--noct-line); border-radius: var(--r-md); padding: 32px 28px; position: relative; overflow: hidden; transition: border-color .3s, transform .35s var(--ease); }
.noct-reviews ol.commentlist li.comment:hover { border-color: var(--noct-dim-3); transform: translateY(-4px); }
.noct-reviews ol.commentlist li.comment::before { content: '"'; position: absolute; top: 8px; right: 18px; font-family: var(--font-display); font-size: 88px; font-weight: 300; line-height: 1; color: rgba(198,168,222,.07); pointer-events: none; }
.noct-reviews .comment-text { border: none; padding: 0; background: none; }
.noct-reviews .star-rating { font-size: 12px; color: var(--noct-accent-bright); margin-bottom: 16px; float: none; }
.noct-reviews .description p { font-family: var(--font-display); font-size: 20px; font-weight: 300; line-height: 1.45; letter-spacing: -.01em; color: var(--noct-white); margin: 0 0 20px; }
.noct-reviews p.meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--noct-dim-3); border: none; padding: 0; background: none; }
.noct-reviews p.meta strong { color: var(--noct-dim-2); font-weight: 400; }
.noct-reviews .woocommerce-review__photo { display: none; }
.noct-reviews #review_form_wrapper { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--noct-line); }
.noct-reviews #reply-title { font-family: var(--font-display); font-size: 32px; font-weight: 300; color: var(--noct-white); letter-spacing: -.025em; margin-bottom: 24px; }
.noct-reviews .comment-form input, .noct-reviews .comment-form textarea { background: var(--noct-navy); border: 1px solid var(--noct-line); color: var(--noct-text); padding: 12px 18px; border-radius: var(--r-md); font-family: var(--font-body); font-size: 14px; width: 100%; outline: none; transition: border-color .2s; }
.noct-reviews .comment-form input:focus, .noct-reviews .comment-form textarea:focus { border-color: var(--noct-accent); }
.noct-reviews .comment-form label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--noct-dim-2); display: block; margin-bottom: 6px; }
.noct-reviews .comment-form-comment textarea { min-height: 120px; resize: vertical; }
.noct-reviews #submit { background: var(--noct-accent); border: none; color: var(--noct-black); font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 13px 28px; border-radius: var(--r-pill); cursor: pointer; transition: background .2s; }
.noct-reviews #submit:hover { background: var(--noct-accent-bright); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8 — CLOSING CTA
   ═══════════════════════════════════════════════════════════════════════════ */
.noct-closing { position: relative; z-index: 1; padding: 140px 0; border-top: 1px solid var(--noct-line); overflow: hidden; }
.noct-closing-ambient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 30% 50%, rgba(198,168,222,.07) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 75% 40%, rgba(103,131,214,.06) 0%, transparent 55%); }
.noct-closing-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.noct-closing-headline { font-family: var(--font-display); font-size: clamp(52px, 6.5vw, 96px); font-weight: 300; line-height: .95; letter-spacing: -.04em; color: var(--noct-white); margin-bottom: 28px; }
.noct-closing-headline em { font-style: italic; color: var(--noct-accent-bright); }
.noct-closing-prose { font-size: 16px; line-height: 1.8; color: var(--noct-dim); max-width: 46ch; }
.noct-closing-purchase { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.noct-closing-price .price { font-family: var(--font-body); font-size: 52px; font-weight: 700; letter-spacing: -.04em; color: var(--noct-white); line-height: 1; }
.noct-closing-price .price ins { text-decoration: none; }
.noct-closing-price .price del { color: var(--noct-dim-3); font-size: 26px; font-weight: 400; }
.noct-closing-price .price .woocommerce-Price-currencySymbol { font-size: .55em; vertical-align: super; }
.noct-closing-save { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--noct-sale); background: rgba(109,223,159,.08); border: 1px solid rgba(109,223,159,.25); padding: 4px 10px; border-radius: var(--r-pill); display: inline-block; margin-top: 6px; }
.noct-closing-atc { display: inline-flex; align-items: center; gap: 12px; background: var(--noct-white); border: none; color: var(--noct-black); font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 18px 36px; border-radius: var(--r-pill); cursor: pointer; text-decoration: none; transition: background .25s, transform .25s var(--ease), box-shadow .25s; }
.noct-closing-atc:hover { background: var(--noct-accent-bright); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(198,168,222,.25); }
.noct-closing-oos { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--noct-danger); }
.noct-closing-note { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--noct-dim-3); margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9 — RELATED
   ═══════════════════════════════════════════════════════════════════════════ */
.noct-related { position: relative; z-index: 1; padding: 80px 0 120px; border-top: 1px solid var(--noct-line); }
.noct-related-header { margin-bottom: 48px; }
.noct-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.noct-related-card { background: var(--noct-ink); border: 1px solid var(--noct-line); border-radius: var(--r-lg); padding: 28px; text-decoration: none; display: flex; flex-direction: column; gap: 14px; transition: border-color .3s, transform .35s var(--ease); }
.noct-related-card:hover { border-color: var(--noct-dim-3); transform: translateY(-5px); }
.noct-related-visual { height: 200px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--noct-navy) 0%, var(--noct-navy-2) 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.noct-related-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.noct-related-card:hover .noct-related-img { transform: scale(1.04); }
.noct-related-placeholder { font-family: var(--font-display); font-size: 48px; color: rgba(198,168,222,.25); }
.noct-related-cat { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--noct-accent); }
.noct-related-name { font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; color: var(--noct-white); margin: 0; }
.noct-related-price .price { font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--noct-white); }
.noct-related-price .price ins { text-decoration: none; }
.noct-related-price .price del { color: var(--noct-dim-3); font-size: 14px; font-weight: 400; }

/* ─── TOAST ─────────────────────────────────────────────────────── */
.noct-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--noct-navy); border: 1px solid var(--noct-line-mid); color: var(--noct-white); padding: 14px 24px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; z-index: 9999; pointer-events: none; transition: transform .35s var(--ease), opacity .35s; opacity: 0; white-space: nowrap; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); }
.noct-toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.noct-toast::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--noct-sale); flex-shrink: 0; }

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .noct-hero-grid        { grid-template-columns: 1fr; gap: 52px; }
  .noct-gallery          { max-width: 560px; margin: 0 auto; width: 100%; }
  .noct-beats            { grid-template-columns: 1fr; }
  .noct-beat             { border-right: none; border-bottom: 1px solid var(--noct-line); }
  .noct-beat:last-child  { border-bottom: none; }
  .noct-science-grid     { grid-template-columns: 1fr; gap: 60px; }
  .noct-material-strip   { grid-template-columns: 1fr; gap: 40px; }
  .noct-editorial-grid   { grid-template-columns: 1fr; gap: 40px; }
  .noct-editorial-anchor { position: static; }
  .noct-closing-inner    { grid-template-columns: 1fr; gap: 52px; }
  .noct-related-grid     { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .noct-product-page .container { padding: 0 20px; }
  .noct-product-title    { font-size: 48px; }
  /* ATC button is already full-width — no extra overrides needed */
  .noct-related-grid     { grid-template-columns: 1fr; }
  .noct-sticky-inner     { padding: 0 20px; }
  .noct-closing-headline { font-size: 52px; }
  .noct-routine-step     { grid-template-columns: 72px 1fr; }
  .noct-beat             { padding: 36px 28px; }
  .noct-product-meta-bar { display: none; }
}


	/* Force NOCT button over any theme button resets */
.noct-product-page .noct-cta-row .single_add_to_cart_button,
.noct-product-page button.button.alt,
.noct-product-page .noct-atc-btn {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 58px;
  padding: 0 32px;
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, rgba(91,74,135,0.16) 0%, rgba(255,250,255,0.45) 60%), var(--noct-accent);
  box-shadow: inset 0 1px 0 rgba(91,74,135,0.22), inset 0 -1px 0 rgba(0,0,0,0.18), 0 4px 16px rgba(198,168,222,0.22);
  color: #0d0b1a;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s var(--ease), transform .25s var(--ease);
}


:root {
  --noct-black:#eadcf3;
  --noct-ink:#f1e2f2;
  --noct-navy:#e6d4ef;
  --noct-navy-2:#ecdcf4;
  --noct-line:rgba(91,74,135,0.14);
  --noct-line-strong:rgba(91,74,135,0.24);
  --noct-white:#34295f;
  --noct-text:rgba(63,51,108,0.92);
  --noct-dim:rgba(63,51,108,0.65);
  --noct-dim-2:rgba(63,51,108,0.42);
  --noct-accent:#6f9d86;
  --noct-accent-bright:#83b79b;
  --noct-warn:#d4a06b;
  --noct-warn-bright:#e8a08a;
  --font-display:"Cormorant Garamond",serif;
  --font-mono:"Space Mono",monospace;
}

.site-header,#masthead,header.site-header,.site-footer,#colophon,footer.site-footer {
  display:none!important;
}

body {
  background:var(--noct-black)!important;
  margin:0!important;
}

.site,.site-content,.site-main,#main,#content,.content-area,article.page,.entry-content {
  max-width:none!important;
  width:100%!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
}

.noct-page {
  background:var(--noct-black);
  color:var(--noct-text);
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1.7;
  overflow:hidden;
}

.noct-page * { box-sizing:border-box; }

.noct-page a {
  color:inherit;
  text-decoration:none;
}

.container {
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 40px;
}

.noct-nav {
  position:fixed;
  inset:0 0 auto 0;
  z-index:9999;
  padding:24px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid transparent;
  transition:.3s ease;
}

.noct-nav.scrolled {
  background:rgba(8,8,16,.92);
  backdrop-filter:blur(16px);
  border-color:var(--noct-line);
}

.noct-logo {
  font-family:var(--font-display);
  font-size:24px;
  font-style:italic;
  color:var(--noct-white)!important;
}

.noct-nav-link {
  border:1px solid var(--noct-line-strong);
  border-radius:999px;
  padding:12px 22px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--noct-text)!important;
}

.hero {
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  padding:120px 0 80px;
}

.hero-bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%,rgba(196,132,107,.10),transparent 60%),
    radial-gradient(ellipse 80% 70% at 50% 40%,var(--noct-navy),var(--noct-black) 70%);
}

.stars {
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1px 1px at 15% 22%,rgba(255,255,255,.55),transparent),
    radial-gradient(1px 1px at 45% 15%,rgba(255,255,255,.65),transparent),
    radial-gradient(1px 1px at 72% 38%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 88% 12%,rgba(255,255,255,.55),transparent);
  opacity:.7;
}

.hero-inner {
  position:relative;
  z-index:1;
}

.flag {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 20px;
  border:1px solid rgba(196,132,107,.25);
  border-radius:999px;
  background:rgba(196,132,107,.12);
  color:var(--noct-warn-bright);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:44px;
}

.flag-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--noct-warn-bright);
  box-shadow:0 0 18px rgba(232,160,138,.6);
}

.hero h1 {
  font-family:var(--font-display)!important;
  font-weight:300!important;
  color:var(--noct-white)!important;
  font-size:clamp(58px,9vw,138px)!important;
  line-height:.9!important;
  letter-spacing:-.04em;
  max-width:9ch;
  margin:0 0 40px!important;
}

.hero h1 em {
  color:var(--noct-warn-bright);
  font-style:italic;
}

.hero p {
  max-width:54ch;
  color:var(--noct-dim);
  font-size:16px;
  margin:0 0 52px;
}

.btn-row {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:18px 34px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:.25s ease;
}

.btn-primary {
  background:var(--noct-white);
  color:#080810!important;
}

.btn-ghost {
  border:1px solid var(--noct-line-strong);
  color:var(--noct-text)!important;
}

.section {
  padding:130px 0;
  border-top:1px solid var(--noct-line);
  position:relative;
}

.section.alt {
  background:var(--noct-ink);
}

.eyebrow {
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--noct-dim);
  margin-bottom:18px;
}

.section h2 {
  font-family:var(--font-display)!important;
  font-weight:300!important;
  color:var(--noct-white)!important;
  font-size:clamp(40px,5vw,72px)!important;
  line-height:1!important;
  letter-spacing:-.03em;
  margin:0 0 24px!important;
}

.section h2 em {
  color:var(--noct-accent-bright);
  font-style:italic;
}

.section-sub {
  max-width:52ch;
  color:var(--noct-dim);
  margin-bottom:70px;
}

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

.system-card {
  background:linear-gradient(180deg,var(--noct-navy),var(--noct-ink));
  border:1px solid var(--noct-line);
  border-radius:14px;
  padding:34px;
  min-height:520px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

.system-card.featured {
  border-color:rgba(160,174,232,.35);
}

.system-tag {
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--noct-accent-bright);
  margin-bottom:22px;
}

.system-card h3 {
  font-family:var(--font-display)!important;
  font-weight:300!important;
  font-style:italic;
  color:var(--noct-white)!important;
  font-size:38px!important;
  line-height:1!important;
  margin:0 0 16px!important;
}

.system-desc {
  color:var(--noct-dim);
  font-size:14px;
  margin-bottom:30px;
}

.includes {
  display:flex;
  flex-direction:column;
  gap:13px;
  margin:0 0 34px;
  padding:0;
  list-style:none;
}

.includes li {
  display:flex;
  gap:12px;
  font-size:13px;
  color:var(--noct-text);
}

.includes li::before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--noct-accent);
  flex-shrink:0;
  margin-top:10px;
}

.card-footer {
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid var(--noct-line);
}

.price {
  font-family:var(--font-display);
  font-size:52px;
  font-style:italic;
  color:var(--noct-white);
  line-height:1;
  margin-bottom:10px;
}

.price-note {
  font-size:12px;
  color:var(--noct-dim);
}

.timeline {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--noct-line);
  border-radius:14px;
  overflow:hidden;
}

.step {
  padding:34px 28px;
  border-right:1px solid var(--noct-line);
  background:var(--noct-black);
}

.step:last-child {
  border-right:none;
}

.step-num {
  font-size:10px;
  letter-spacing:.18em;
  color:var(--noct-dim-2);
  text-transform:uppercase;
  margin-bottom:18px;
}

.step-title {
  font-family:var(--font-display);
  font-size:28px;
  font-style:italic;
  color:var(--noct-white);
  line-height:1.1;
  margin-bottom:12px;
}

.step p {
  color:var(--noct-dim);
  font-size:13px;
  margin:0;
}

.final {
  text-align:center;
  padding:150px 0;
  position:relative;
}

.final h2 {
  font-family:var(--font-display)!important;
  font-size:clamp(60px,9vw,130px)!important;
  font-weight:300!important;
  line-height:.9!important;
  color:var(--noct-white)!important;
  margin:0 0 34px!important;
}

.final h2 em {
  color:var(--noct-warn-bright);
  font-style:italic;
}

.final p {
  max-width:48ch;
  margin:0 auto 44px;
  color:var(--noct-dim);
}

.footer-strip {
  border-top:1px solid var(--noct-line);
  padding:28px 40px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  color:var(--noct-dim-2);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.reveal {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease,transform .8s ease;
}

.reveal.in {
  opacity:1;
  transform:translateY(0);
}

@media(max-width:1000px) {
  .system-grid,
  .timeline {
    grid-template-columns:1fr;
  }

  .step {
    border-right:none;
    border-bottom:1px solid var(--noct-line);
  }

  .step:last-child {
    border-bottom:none;
  }
}

@media(max-width:700px) {
  .container {
    padding:0 24px;
  }

  .noct-nav {
    padding:20px 24px;
  }

  .hero {
    min-height:90vh;
  }

  .section {
    padding:90px 0;
  }

  .system-card {
    min-height:auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1 — PALETTE OVERRIDE LAYER (added, removes nothing)
   Fixes the black/white variable semantic flip for CTAs, accent chips,
   selection and selected-state ink. Colour-only; layout untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Primary / purchase CTAs -> soft yellow */
.btn-primary,
.sticky-cta-btn,
.quiz-continue,
.noct-btn--primary,
.noct-summary .checkout-button,
.noct-summary a.checkout-button,
.noct-checkout-page-shell #place_order,
.noct-variable-form .single_add_to_cart_button,
.noct-closing-atc {
  background: linear-gradient(180deg, var(--noct-cta) 0%, var(--noct-cta-2) 100%) !important;
  color: var(--noct-cta-text) !important;
  border-color: transparent !important;
}
.btn-primary:hover,
.sticky-cta-btn:hover,
.quiz-continue:hover,
.noct-btn--primary:hover,
.noct-summary .checkout-button:hover,
.noct-checkout-page-shell #place_order:hover,
.noct-variable-form .single_add_to_cart_button:hover,
.noct-closing-atc:hover {
  box-shadow: 0 12px 40px rgba(248,217,120,0.45) !important;
}
.btn-primary .btn-arrow { color: var(--noct-cta-text); }

/* Ghost / secondary buttons -> transparent lavender-glass outline */
.btn-ghost {
  background: rgba(255,250,255,0.30);
  color: var(--noct-white);
  border-color: var(--noct-line-strong);
}
.btn-ghost:hover {
  background: rgba(255,250,255,0.50);
  border-color: var(--noct-dim-2);
}

/* Accent-filled utility chips: keep sage fill, force legible cream ink */
.noct-cart-open-count,
.noct-add-btn:hover,
.noct-add-btn.added,
.noct-reviews #submit {
  color: #fbf7ff !important;
}

/* Selected quiz option inner dot sat on a light disc -> sage */
.quiz-option.selected .quiz-option-mark::after { background: var(--noct-accent) !important; }

/* Text selection: sage wash + light ink (was dark page-bg ink) */
::selection { background: var(--noct-accent); color: #fbf7ff; }

/* PHASE 1 — product-page ATC buttons -> soft yellow CTA */
#noctMainAtc,
.noct-product-page .noct-atc-btn {
  background: linear-gradient(180deg, var(--noct-cta) 0%, var(--noct-cta-2) 100%) !important;
  color: var(--noct-cta-text) !important;
}
#noctMainAtc:hover,
.noct-product-page .noct-atc-btn:hover {
  background: linear-gradient(180deg, #ffedb5 0%, var(--noct-cta-2) 100%) !important;
  box-shadow: 0 8px 28px rgba(248,217,120,0.45) !important;
}
/* .noct-page primary button (more specific + !important) -> yellow */
.noct-page .btn-primary,
.noct-page .btn-primary:link,
.noct-page .btn-primary:visited,
.noct-page .btn-primary:hover {
  background: linear-gradient(180deg, var(--noct-cta) 0%, var(--noct-cta-2) 100%) !important;
  color: var(--noct-cta-text) !important;
}

/* PHASE 1 — product sticky-bar ATC -> soft yellow CTA */
.noct-sticky-atc {
  background: linear-gradient(180deg, var(--noct-cta) 0%, var(--noct-cta-2) 100%) !important;
  color: var(--noct-cta-text) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 — MOONLIT LAVENDER PALETTE PASS
   Colour-only override layer. Layout untouched.
   Goal: closer to the supplied pearl/lavender reference, fix dark scrolled nav,
   remove leftover black glass, keep CTA warm yellow and accent muted sage.
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
[data-tod="morning"],
[data-tod="day"],
[data-tod="evening"],
[data-tod="night"] {
  --noct-cta:          #ffe8a3;
  --noct-cta-2:        #f8d978;
  --noct-cta-text:     #2d2854;

  --noct-black:        #f3edf8;
  --noct-ink:          #fbf7fc;
  --noct-ink-2:        #eee4f5;
  --noct-navy:         #e8dcf4;
  --noct-navy-2:       #ddcfef;

  --noct-line:         rgba(56, 43, 94, 0.14);
  --noct-line-soft:    rgba(56, 43, 94, 0.08);
  --noct-line-strong:  rgba(56, 43, 94, 0.22);
  --noct-line-mid:     rgba(56, 43, 94, 0.12);

  --noct-white:        #312955;
  --noct-text:         rgba(49, 41, 85, 0.92);
  --noct-dim:          rgba(49, 41, 85, 0.66);
  --noct-dim-2:        rgba(49, 41, 85, 0.44);
  --noct-dim-3:        rgba(49, 41, 85, 0.28);

  --noct-accent:       #6f9d86;
  --noct-accent-bright:#6f9d86;
  --noct-accent-soft:  rgba(111, 157, 134, 0.16);
  --noct-accent-glow:  rgba(111, 157, 134, 0.26);
  --noct-sky-tint:     rgba(198, 168, 222, 0.22);
  --noct-horizon:      rgba(255, 250, 255, 0.62);
  --noct-sun-glow:     rgba(255, 232, 163, 0.26);
  --noct-sale:         #6f9d86;
  --noct-warn:         #c69462;
  --noct-warn-bright:  #c69462;
  --noct-warn-soft:    rgba(198, 148, 98, 0.13);

  --bg:                #f3edf8;
  --bg-soft:           #fbf7fc;
  --bg-card:           rgba(255, 250, 255, 0.56);
  --border:            rgba(56, 43, 94, 0.14);
  --border-hover:      rgba(56, 43, 94, 0.24);
  --accent:            #6f9d86;
  --accent-light:      #6f9d86;
  --accent-glow:       rgba(111, 157, 134, 0.20);
  --text-primary:      #312955;
  --text-secondary:    rgba(49, 41, 85, 0.66);
  --text-muted:        rgba(49, 41, 85, 0.44);
}

html,
body,
body.page-template-page-cart-noct,
body.page-template-default {
  background: #f3edf8 !important;
}

body::before {
  background:
    radial-gradient(ellipse 110% 42% at 50% 0%, rgba(255,250,255,0.48) 0%, transparent 62%),
    radial-gradient(ellipse 88% 34% at 50% 4%, rgba(198,168,222,0.20) 0%, transparent 54%),
    radial-gradient(ellipse 52% 22% at 50% 0%, rgba(255,232,163,0.16) 0%, transparent 44%) !important;
}

/* Main fixed nav — fixes the black scrolled bar and missing/low-contrast text. */
.nav.scrolled,
[data-tod="morning"] .nav.scrolled,
[data-tod="day"] .nav.scrolled,
[data-tod="evening"] .nav.scrolled,
[data-tod="night"] .nav.scrolled,
.noct-nav.scrolled {
  background: rgba(248, 242, 251, 0.86) !important;
  backdrop-filter: blur(24px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
  border-bottom-color: rgba(56, 43, 94, 0.12) !important;
  box-shadow: 0 14px 44px rgba(56, 43, 94, 0.08) !important;
}

.nav-logo,
.nav-logo:link,
.nav-logo:visited,
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-cart,
.noct-nav-logo,
.noct-nav-logo:link,
.noct-nav-logo:visited,
.noct-logo,
.noct-nav-link,
.noct-nav-link:link,
.noct-nav-link:visited {
  color: var(--noct-white) !important;
}

.nav-link:hover,
.noct-nav-link:hover {
  color: var(--noct-accent) !important;
}

.nav-cart,
.nav-hamburger,
.noct-nav-link,
.noct-nav-cta,
.noct-nav-cta:link,
.noct-nav-cta:visited {
  background: rgba(255, 250, 255, 0.42) !important;
  border-color: rgba(56, 43, 94, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55) !important;
}

.nav-cart-count,
.nav-drawer-cart-count {
  background: rgba(56, 43, 94, 0.08) !important;
  border-color: rgba(56, 43, 94, 0.12) !important;
  color: var(--noct-white) !important;
}

.nav-tod-badge {
  color: #5f8f78 !important;
  border-color: rgba(111, 157, 134, 0.22) !important;
  background: rgba(111, 157, 134, 0.10) !important;
}

.nav-time,
.nav-drawer-link,
.nav-drawer-close {
  color: var(--noct-dim) !important;
}

.nav-drawer {
  background: rgba(248, 242, 251, 0.96) !important;
  border-left-color: rgba(56, 43, 94, 0.12) !important;
  box-shadow: -24px 0 80px rgba(56, 43, 94, 0.12) !important;
}

.nav-drawer-header,
.nav-drawer-footer,
.nav-drawer-link {
  border-color: rgba(56, 43, 94, 0.10) !important;
}

/* Hero/glow sections — fuller pearl/lavender, less grey. */
.hero-bg-glow,
.noct-shop-hero-bg-glow,
.noct-page .hero-bg {
  background:
    radial-gradient(ellipse 80% 58% at 62% 100%, rgba(111, 157, 134, 0.10) 0%, transparent 52%),
    radial-gradient(ellipse 66% 52% at 18% 18%, rgba(198, 168, 222, 0.24) 0%, transparent 60%),
    radial-gradient(ellipse 86% 72% at 50% 48%, var(--noct-navy) 0%, var(--noct-black) 72%) !important;
}

.hero-bg-vignette,
.noct-shop-hero-bg-vignette {
  background: radial-gradient(ellipse 100% 82% at 50% 50%, transparent 46%, rgba(243,237,248,0.72) 100%) !important;
}

.hero-bg-stars,
.hero-bg-stars-sm,
.noct-shop-hero-bg-stars,
.noct-shop-hero-bg-stars-sm,
.stars {
  opacity: 0.42 !important;
}

/* Glass cards and panels. */
.cost-cell,
.step,
.quiz-card,
.product,
.noct-product-card,
.noct-panel,
.noct-cart-hero__meta-item,
.noct-cart-item__price,
.noct-cart-item__qty,
.noct-cart-item__subtotal,
.noct-trust-item,
.noct-mini-proof__item,
.noct-reco,
.trust-cell {
  background: rgba(255, 250, 255, 0.48) !important;
  border-color: rgba(56, 43, 94, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.50) !important;
}

.cost-cell:hover,
.step:hover,
.product:hover,
.noct-product-card:hover,
.noct-reco:hover {
  background: rgba(255, 250, 255, 0.62) !important;
  border-color: rgba(56, 43, 94, 0.20) !important;
}

.cost-list,
.trust-row {
  background: rgba(56, 43, 94, 0.12) !important;
  border-color: rgba(56, 43, 94, 0.12) !important;
}

.reframe,
.trust {
  background: linear-gradient(180deg, #fbf7fc 0%, #f1e7f7 100%) !important;
}

/* Shop/product dark leftovers. */
.noct-shop-toolbar {
  background: rgba(248, 242, 251, 0.88) !important;
  border-top-color: rgba(56, 43, 94, 0.10) !important;
  border-bottom-color: rgba(56, 43, 94, 0.12) !important;
  box-shadow: 0 16px 44px rgba(56, 43, 94, 0.06) !important;
}

.noct-filter-pill,
.noct-sort-select,
.noct-variable-form .variations select,
.noct-reviews .comment-form input,
.noct-reviews .comment-form textarea {
  background-color: rgba(255, 250, 255, 0.52) !important;
  border-color: rgba(56, 43, 94, 0.14) !important;
  color: var(--noct-text) !important;
}

.noct-filter-pill.active,
.noct-pagination .page-numbers.current,
.noct-pagination .page-numbers:hover {
  background: rgba(111, 157, 134, 0.14) !important;
  border-color: rgba(111, 157, 134, 0.34) !important;
  color: var(--noct-white) !important;
}

.noct-product-card.hero-product {
  background: linear-gradient(180deg, rgba(255,250,255,0.58) 0%, rgba(238,228,245,0.76) 100%) !important;
  border-color: rgba(56, 43, 94, 0.14) !important;
}

.product-visual::after,
.noct-product-visual::after {
  background: radial-gradient(ellipse at center, transparent 46%, rgba(49,41,85,0.10) 100%) !important;
}

/* Cart/checkout hero overlays. */
.noct-cart-hero__glow,
.noct-checkout-hero__glow {
  background:
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(198,168,222,0.24) 0%, transparent 58%),
    radial-gradient(circle at 15% 18%, rgba(255,232,163,0.11) 0%, transparent 32%) !important;
}

.noct-cart-hero__vignette,
.noct-checkout-hero__vignette {
  background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 48%, rgba(243,237,248,0.64) 100%) !important;
}

.noct-cart-updating::after {
  background: rgba(248, 242, 251, 0.74) !important;
  color: var(--noct-accent) !important;
}

/* Product page has local variables, so override them locally too. */
.noct-product-page {
  --noct-black:          #f3edf8;
  --noct-ink:            #fbf7fc;
  --noct-navy:           #e8dcf4;
  --noct-navy-2:         #ddcfef;
  --noct-line:           rgba(56, 43, 94, 0.14);
  --noct-line-soft:      rgba(56, 43, 94, 0.08);
  --noct-line-mid:       rgba(56, 43, 94, 0.12);
  --noct-white:          #312955;
  --noct-text:           rgba(49, 41, 85, 0.92);
  --noct-dim:            rgba(49, 41, 85, 0.66);
  --noct-dim-2:          rgba(49, 41, 85, 0.44);
  --noct-dim-3:          rgba(49, 41, 85, 0.28);
  --noct-accent:         #6f9d86;
  --noct-accent-bright:  #6f9d86;
  --noct-accent-soft:    rgba(111, 157, 134, 0.16);
  --noct-accent-glow:    rgba(111, 157, 134, 0.24);
  --noct-sale:           #6f9d86;
  --noct-danger:         #c85d6a;
  --shadow:              0 24px 60px rgba(56, 43, 94, 0.12);
}

.noct-gallery-stage,
.noct-gallery-placeholder,
.noct-related-visual {
  background: linear-gradient(150deg, var(--noct-navy) 0%, var(--noct-ink) 100%) !important;
}

.noct-gallery-oos {
  background: rgba(248, 242, 251, 0.78) !important;
}

.noct-gallery-material {
  background: linear-gradient(to top, rgba(248,242,251,0.86), transparent) !important;
}

.noct-gallery-cat span {
  background: rgba(255,250,255,0.56) !important;
  color: var(--noct-dim) !important;
}

.noct-stat {
  background: rgba(255,250,255,0.46) !important;
}

/* Sticky CTA — no more black pill on a light site. */
.sticky-cta {
  background: rgba(248, 242, 251, 0.90) !important;
  border-color: rgba(56, 43, 94, 0.14) !important;
  box-shadow: 0 18px 58px rgba(56, 43, 94, 0.12), inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

.sticky-cta-text {
  color: var(--noct-text) !important;
}

@media (max-width: 760px) {
  .sticky-cta {
    background: rgba(248, 242, 251, 0.94) !important;
    box-shadow: 0 18px 50px rgba(56,43,94,0.16), inset 0 1px 0 rgba(255,255,255,0.62) !important;
  }
}

/* Woo notices — light glass instead of black toast. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.noct-toast {
  background: rgba(248, 242, 251, 0.94) !important;
  color: var(--noct-text) !important;
  border-color: rgba(56, 43, 94, 0.14) !important;
  box-shadow: 0 12px 44px rgba(56,43,94,0.12), inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-message a {
  color: var(--noct-accent) !important;
}

/* CTA polish kept from Phase 1, but matched to the reference. */
.btn-primary,
.sticky-cta-btn,
.quiz-continue,
.noct-btn--primary,
.noct-summary .checkout-button,
.noct-summary a.checkout-button,
.noct-checkout-page-shell #place_order,
.noct-variable-form .single_add_to_cart_button,
.noct-closing-atc,
#noctMainAtc,
.noct-product-page .noct-atc-btn,
.noct-sticky-atc,
.noct-page .btn-primary,
.noct-page .btn-primary:link,
.noct-page .btn-primary:visited {
  background: linear-gradient(180deg, #fff1bc 0%, #ffe08a 100%) !important;
  color: var(--noct-cta-text) !important;
  border-color: rgba(255,255,255,0.55) !important;
  box-shadow: 0 12px 36px rgba(248,217,120,0.24), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

.btn-primary:hover,
.sticky-cta-btn:hover,
.quiz-continue:hover,
.noct-btn--primary:hover,
.noct-summary .checkout-button:hover,
.noct-checkout-page-shell #place_order:hover,
.noct-variable-form .single_add_to_cart_button:hover,
.noct-closing-atc:hover,
#noctMainAtc:hover,
.noct-product-page .noct-atc-btn:hover,
.noct-sticky-atc:hover,
.noct-page .btn-primary:hover {
  background: linear-gradient(180deg, #fff5cf 0%, #ffe08a 100%) !important;
  box-shadow: 0 16px 44px rgba(248,217,120,0.34), inset 0 1px 0 rgba(255,255,255,0.78) !important;
}

.btn-ghost,
.noct-btn--ghost,
.noct-reco__add,
.noct-add-btn {
  background: rgba(255,250,255,0.34) !important;
  color: var(--noct-white) !important;
  border-color: rgba(56,43,94,0.16) !important;
}

.btn-ghost:hover,
.noct-btn--ghost:hover,
.noct-reco__add:hover,
.noct-add-btn:hover {
  background: rgba(255,250,255,0.56) !important;
  border-color: rgba(56,43,94,0.24) !important;
}

::selection {
  background: rgba(111, 157, 134, 0.30) !important;
  color: var(--noct-white) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 3 — BACKGROUND + REVEAL REPAIR PASS
   Small targeted fixes after visual QA.
   - Fixes inline .reveal word collision inside the reframe headline.
   - Replaces harsh dark/pink ambient fallback backgrounds with soft pearl/lavender.
   - Softens/removes star fields on audit/system areas where they looked noisy.
   - Adds subtle motion to the hero illustration without changing layout.
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
[data-tod="morning"],
[data-tod="day"],
[data-tod="evening"],
[data-tod="night"] {
  --noct-black:        #f6f0f8;
  --noct-ink:          #fbf8fd;
  --noct-ink-2:        #f0e7f6;
  --noct-navy:         #eee4f7;
  --noct-navy-2:       #e4d7f0;
  --noct-sky-tint:     rgba(208, 188, 232, 0.18);
  --noct-horizon:      rgba(255, 250, 255, 0.72);
  --noct-sun-glow:     rgba(255, 232, 163, 0.18);
}

html,
body,
body.page-template-page-cart-noct,
body.page-template-default,
.noct-page,
.noct-shop-hero,
.noct-shop-section,
.noct-cart-page-shell,
.noct-checkout-page-shell,
.quiz,
.section,
.section-tall,
.final,
.footer,
.noct-footer-strip {
  background-color: var(--noct-black) !important;
}

/* Global ambient canvas: soft pearl/lavender, not dark grey/pink. */
body::before {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background:
    radial-gradient(ellipse 84% 52% at 82% 20%, rgba(225, 213, 244, 0.52) 0%, transparent 58%),
    radial-gradient(ellipse 92% 58% at 50% 100%, rgba(255, 250, 255, 0.72) 0%, rgba(239, 229, 247, 0.36) 48%, transparent 72%),
    linear-gradient(180deg, #fbf8fd 0%, #f7f0fa 48%, #f3eaf7 100%) !important;
}

/* Generic hero/system background blocks were still creating the old dark-to-pink wash. */
.hero-bg,
.noct-page .hero-bg,
.noct-shop-hero-bg-glow,
.hero-bg-glow,
.intro-bg {
  background:
    radial-gradient(ellipse 60% 48% at 78% 34%, rgba(222, 210, 244, 0.58) 0%, transparent 64%),
    radial-gradient(ellipse 92% 46% at 50% 106%, rgba(255, 250, 255, 0.82) 0%, rgba(236, 226, 247, 0.42) 46%, transparent 72%),
    linear-gradient(180deg, #fbf8fd 0%, #f7f0fa 54%, #f3eaf7 100%) !important;
}

.hero-bg-vignette,
.noct-shop-hero-bg-vignette {
  background: radial-gradient(ellipse 100% 86% at 50% 50%, transparent 54%, rgba(246, 240, 248, 0.62) 100%) !important;
}

/* Audit/test screens: force the same clean canvas as the reference, with no heavy star wash. */
#screen-intro,
#screen-question,
#screen-loading,
#screen-results,
.noct-quiz-page,
.noct-audit-page,
body.page-template-page-audit,
body.page-template-audit,
body[class*="audit"] {
  background:
    radial-gradient(ellipse 58% 46% at 78% 34%, rgba(222, 210, 244, 0.54) 0%, transparent 64%),
    radial-gradient(ellipse 92% 46% at 50% 106%, rgba(255, 250, 255, 0.82) 0%, rgba(236, 226, 247, 0.42) 46%, transparent 72%),
    linear-gradient(180deg, #fbf8fd 0%, #f7f0fa 54%, #f3eaf7 100%) !important;
}

.intro-stars,
.hero-bg-stars,
.hero-bg-stars-sm,
.noct-shop-hero-bg-stars,
.noct-shop-hero-bg-stars-sm,
.stars,
.noct-page .stars {
  opacity: 0.12 !important;
}

/* If the audit/system page uses the generic .hero class, keep its canvas light too. */
.noct-page .hero,
.noct-page .section,
.noct-page #s01,
.noct-page #s03,
.noct-page #s05,
.noct-page .final-cta {
  background: transparent !important;
}

.noct-page .section.alt,
.reframe,
.trust {
  background: linear-gradient(180deg, rgba(255,250,255,0.68) 0%, rgba(240,231,246,0.54) 100%) !important;
}

/* Cards should read as soft glass, not grey boxes. */
.opt-btn,
.icon-grid-tile,
.binary-card,
.tap-card,
.slider-wrap,
.rhythm-window-wrap,
.quiz-card,
.cost-cell,
.step,
.product,
.noct-product-card,
.system-card,
.protocol-card,
.truth-reveal,
.noct-page .cause-cell,
.noct-page .bundle-card {
  background: rgba(255, 250, 255, 0.58) !important;
  border-color: rgba(56, 43, 94, 0.12) !important;
  box-shadow: 0 18px 54px rgba(56, 43, 94, 0.045), inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

/* Fix the broken inline reveal word in "Sleep isn't a habit. It's a system.".
   The later generic .reveal scroll animation was hiding inline text spans. */
.reframe-quote .reveal,
.reframe-quote span.reveal,
h2.reframe-quote .reveal {
  opacity: 1 !important;
  transform: none !important;
  display: inline !important;
  font-style: italic !important;
  color: var(--noct-accent-bright) !important;
  transition: color .3s ease !important;
}

/* Keep normal scroll-reveal behavior everywhere else. */
.reveal-on-scroll,
.noct-reveal,
.noct-page .reveal:not(.reframe-quote .reveal) {
  will-change: opacity, transform;
}

/* Subtle hero illustration motion, close to the reference without changing markup. */
.hero-figure,
.noct-shop-figure {
  animation: noctHeroFloat 8s ease-in-out infinite;
  transform-origin: center;
}

.hero-figure svg,
.noct-shop-figure svg {
  animation: noctHeroBreathe 10s ease-in-out infinite;
}

@keyframes noctHeroFloat {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(calc(-50% - 10px)) translateX(-4px); }
}

@keyframes noctHeroBreathe {
  0%, 100% { opacity: 0.74; filter: blur(0px); }
  50%      { opacity: 0.88; filter: blur(0.2px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-figure,
  .noct-shop-figure,
  .hero-figure svg,
  .noct-shop-figure svg {
    animation: none !important;
  }
}

/* Mobile keeps the same light audit canvas. */
@media (max-width: 760px) {
  body::before,
  #screen-intro,
  #screen-question,
  #screen-loading,
  #screen-results {
    background:
      radial-gradient(ellipse 78% 42% at 70% 25%, rgba(222, 210, 244, 0.46) 0%, transparent 66%),
      radial-gradient(ellipse 120% 42% at 50% 104%, rgba(255, 250, 255, 0.82) 0%, rgba(236, 226, 247, 0.42) 48%, transparent 74%),
      linear-gradient(180deg, #fbf8fd 0%, #f7f0fa 54%, #f3eaf7 100%) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   OVERRIDES — locked Thea-green accent + light product-page canvas
   Appended last so it wins the cascade. Nothing above is modified.
   ════════════════════════════════════════════════════════════════════ */

/* 1 ── Accent forced to Thea green (#C3DBC5) at every time-of-day ────── */
:root,
[data-tod="morning"],
[data-tod="day"],
[data-tod="evening"],
[data-tod="night"],
.noct-page,
.noct-product-page {
  --noct-accent:        #C3DBC5 !important;
  --noct-accent-bright: #C3DBC5 !important;
  --noct-accent-soft:   rgba(195, 219, 197, 0.18) !important;
  --noct-accent-glow:   rgba(195, 219, 197, 0.42) !important;
}

/* 2 ── Product page: drop the star wash ─────────────────────────────── */
.noct-product-page .noct-stars,
.noct-product-page .noct-stars-lg,
.noct-product-page .noct-stars-sm,
body.single-product .noct-stars,
body.woocommerce .noct-stars {
  display: none !important;
}

/* 3 ── Product page: same light pearl-lavender canvas as the landing ── */
html,
body.single-product,
body.woocommerce,
body.woocommerce-page {
  background: #f3edf8 !important;
}

.noct-product-page {
  background:
    radial-gradient(ellipse 84% 52% at 82% 20%, rgba(225, 213, 244, 0.52) 0%, transparent 58%),
    radial-gradient(ellipse 92% 58% at 50% 100%, rgba(255, 250, 255, 0.72) 0%, rgba(239, 229, 247, 0.36) 48%, transparent 72%),
    linear-gradient(180deg, #fbf8fd 0%, #f7f0fa 48%, #f3eaf7 100%) !important;
  background-attachment: fixed !important;
}