/** Shopify CDN: Minification failed

Line 1725:0 Unexpected "}"

**/
/* =============================================================
   STR8NASTY THEME — theme.css
   Compiled from React/Vite source to vanilla CSS for Shopify OS2
   All values forensically verified against React source.
   ============================================================= */

/* ─── Custom Properties ─────────────────────────────────────── */
:root {
  --gold-primary: #b8922a;
  --gold-mid: #c9a94b;
  --gold-light: #d4b96a;
  --gold-dark: #a07a1e;
  --gold-pale: #e8d5a3;
  --gold-rich: #bf9f3a;
  --cream: #f0ece4;
  --cream-warm: #ede8df;
  --cream-cool: #e8e4dc;
  --black-base: #0a0a0a;
  --black-rich: #0d0d0d;
  --black-warm: #111111;
  --black-soft: #1a1a1a;
  --black-mid: #242424;
  --stone: #2a2a2a;
  --obsidian: #141414;
  --charcoal: #1e1e1e;

  --app-font-sans: 'Jost', system-ui, -apple-system, sans-serif;
  --app-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --app-font-display: 'Oswald', 'Impact', 'Arial Narrow', sans-serif;

  --transition-fast: 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-mid: 0.32s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow: 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-spring: 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-height: 72px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.sn-body {
  background-color: var(--black-base);
  color: var(--cream);
  font-family: var(--app-font-sans);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100dvh;
  cursor: none;
}

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

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #070707; }
::-webkit-scrollbar-thumb { background: var(--gold-primary); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-mid); }
* { scrollbar-width: thin; scrollbar-color: var(--gold-primary) #070707; }

/* ─── Selection ──────────────────────────────────────────────── */
::selection { background: var(--gold-mid); color: #0a0a0a; }
::-moz-selection { background: var(--gold-mid); color: #0a0a0a; }

/* ─── Focus ──────────────────────────────────────────────────── */
:focus-visible { outline: 1.5px solid var(--gold-mid); outline-offset: 3px; border-radius: 1px; }

/* ─── Scroll Progress Bar ────────────────────────────────────── */
#sn-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-mid), var(--gold-light));
  z-index: 9999;
  transition: width 0.06s linear;
}

/* ─── Custom Cursor ──────────────────────────────────────────── */
#sn-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; }

/* Precision dot — small square, snaps to exact mouse position */
#sn-cursor-dot {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--gold-mid);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
}

/* Square tracer — trails behind at lerp 0.14; metallic luxury finish */
#sn-cursor-ring {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 4px;
  border: 1.5px solid rgba(185,146,42,0.55);
  transform: translate(-50%, -50%);
  overflow: hidden;
  transition:
    width  0.18s cubic-bezier(0.34,1.2,0.64,1),
    height 0.18s cubic-bezier(0.34,1.2,0.64,1),
    border-color 0.18s ease,
    box-shadow   0.18s ease;
  /* Depth: top-edge highlight (brushed metal), bottom-edge shadow, ambient glow */
  box-shadow:
    0 0 6px  rgba(185,146,42,0.14),
    inset 0  1px 0 rgba(255,240,180,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.22);
}

/* Reflective shimmer layer — sweeps diagonally, visible only while moving */
#sn-cursor-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(
    115deg,
    transparent          0%,
    rgba(255,240,180,0)  38%,
    rgba(255,240,180,.10) 50%,
    rgba(255,240,180,0)  62%,
    transparent          100%
  );
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
/* Shimmer activates while cursor is in motion */
#sn-cursor.sn-cursor-moving #sn-cursor-ring::after { opacity: 1; }

/* Hover state — 5–8% size increase, sharper/brighter metallic */
body.sn-cursor-hovering #sn-cursor-ring {
  width: 30px; height: 30px;
  border-color: rgba(201,169,75,0.78);
  box-shadow:
    0 0 10px rgba(185,146,42,0.22),
    inset 0  1px 0 rgba(255,240,180,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.28);
}

/* ─── Keyframe Animations ────────────────────────────────────── */

/*
 * goldFoil — React exact:
 *   0%–78% static at -200% (resting state)
 *   78%→84% sweeps to 0% center  (sweep begins)
 *   84%→90% sweeps to 200% center (sweep completes)
 *   90%–100% static at 200% (holds after sweep)
 * Character: one visible sweep every 18s, rests 78% of cycle.
 */
@keyframes goldFoil {
  0%,  78%  { background-position: -200% center; opacity: 0.88; }
  84%        { background-position:    0% center; opacity: 1;    }
  90%        { background-position:  200% center; opacity: 1;    }
  100%       { background-position:  200% center; opacity: 0.88; }
}

@keyframes goldShimmer {
  0%   { opacity: 0.85; background-position: -200% center; }
  60%  { background-position: 200% center; opacity: 1; }
  100% { background-position: 200% center; opacity: 1; }
}

/*
 * snMetallicSweep — React exact:
 *   Starts far left (-160%), fades in at 1.5%, traverses to 280%,
 *   fades out at 12%, rests for remainder of 24s cycle.
 */
@keyframes snMetallicSweep {
  0%     { opacity: 0; transform: translateX(-160%) skewX(-20deg); }
  1.5%   { opacity: 1; transform: translateX(-160%) skewX(-20deg); }
  10%    { opacity: 1; transform: translateX(280%)  skewX(-20deg); }
  12%    { opacity: 0; transform: translateX(280%)  skewX(-20deg); }
  13%,
  100%   { opacity: 0; transform: translateX(280%)  skewX(-20deg); }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(200%) skewX(-12deg); }
}

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

@keyframes subtlePulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.85; }
}

/*
 * fogDriftA / fogDriftB — React exact:
 *   Both animate transform AND background-position simultaneously.
 *   Layer A: 26s, drifts right + slight upward rise.
 *   Layer B: 34s, drifts left + slight upward rise, -14s phase offset.
 *   animation-direction: alternate prevents snap-reset.
 *   background-size: 130% 130% on the layers gives overflow buffer
 *   so background-position shift moves the gradient texture itself.
 */
@keyframes fogDriftA {
  from {
    transform: translateX(0%) translateY(0%) scale(1.00);
    background-position: 15% 35%;
  }
  to {
    transform: translateX(5%) translateY(-1.5%) scale(1.04);
    background-position: 58% 68%;
  }
}
@keyframes fogDriftB {
  from {
    transform: translateX(0%) translateY(0%) scale(1.02);
    background-position: 82% 22%;
  }
  to {
    transform: translateX(-6%) translateY(-1.8%) scale(1.00);
    background-position: 38% 54%;
  }
}

/*
 * ambientBreath — approximates React's Framer Motion opacity oscillation
 *   on hero ambient light blobs. React uses spring physics; this uses
 *   ease-in-out which is the closest CSS equivalent.
 *   Layer A: full cycle 0.8→0.15→0.8 opacity.
 *   Layer B: runs in reverse (counter-phase).
 */
/*
 * ambientBreath — React exact:
 *   Layer A animate({ opacity: [1,0] }) repeatType:'reverse' duration:16
 *   Layer B animate({ opacity: [0,1] }) repeatType:'reverse' duration:16
 *   → Both 32s full cycles. A starts at opacity 1; B starts at 0
 *   (achieved by animation-delay: -16s, placing B at the 50% keyframe).
 */
@keyframes ambientBreath {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes eqBar1 {
  0%,100% { height: 6px;  }
  25%     { height: 14px; }
  50%     { height: 4px;  }
  75%     { height: 10px; }
}
@keyframes eqBar2 {
  0%,100% { height: 14px; }
  25%     { height: 4px;  }
  50%     { height: 12px; }
  75%     { height: 6px;  }
}
@keyframes eqBar3 {
  0%,100% { height: 8px;  }
  25%     { height: 12px; }
  50%     { height: 16px; }
  75%     { height: 4px;  }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes scaleInX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes scaleInY {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes clipReveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0% 0 0 0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(110%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(110%); }
}
@keyframes drawerIn    { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes navDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes overlayIn   { from { opacity: 0; } to { opacity: 1; } }
/*
 * playerIn — React exact: initial={{ opacity:0, y:16, scale:0.96 }}
 * translateY(16px) keeps the player within the viewport during the 1s delay
 * (was 24px which equalled the bottom offset, dropping the player to 0px clearance).
 */
@keyframes playerIn    { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/*
 * badgePop — React exact:
 *   type:'spring', stiffness:400, damping:20 (ζ≈0.5, underdamped ~8% overshoot).
 *   initial: scale(0.6) opacity:0 → animate: scale(1) opacity:1
 *   Keyframes + cubic-bezier together reproduce the spring character.
 */
@keyframes badgePop {
  0%   { transform: scale(0.6) translate(-50%,-50%); opacity: 0; }
  55%  { transform: scale(1.18) translate(-50%,-50%); opacity: 1; }
  78%  { transform: scale(0.93) translate(-50%,-50%); opacity: 1; }
  100% { transform: scale(1)    translate(-50%,-50%); opacity: 1; }
}

/*
 * drawerLinkIn — React exact:
 *   initial: { opacity:0, x:20 }, animate: { opacity:1, x:0 }
 *   transition: { duration:0.4, delay: i*0.07+0.15 }  (delay set inline)
 */
@keyframes drawerLinkIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Animation helpers (JS-driven IntersectionObserver) ─────── */
.sn-animate-fade-up   { opacity: 0; transform: translateY(28px); }
.sn-animate-fade-in   { opacity: 0; }
.sn-animate-scale-in  { opacity: 0; transform: scale(0.8); }
.sn-animate-scale-in-x { transform: scaleX(0); transform-origin: left; }
.sn-animate-scale-in-y { transform: scaleY(0); transform-origin: top; }

/*
 * React easing [0.16,1,0.3,1] is a named cubic-bezier, not a spring.
 * Durations from React source: fadeUp 0.9–1.1s, fadeIn 1.4s (trust line),
 * scaleIn 2s (SN mark), scaleInX 1.2s (gold rule). All override-able via --duration.
 */
.sn-animate-fade-up.sn-is-visible    { animation: fadeUp   var(--duration,0.9s)  cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--delay,0s); }
.sn-animate-fade-in.sn-is-visible    { animation: fadeIn   var(--duration,1.4s)  ease-out                   both; animation-delay: var(--delay,0s); }
.sn-animate-scale-in.sn-is-visible   { animation: scaleIn  var(--duration,2s)    cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--delay,0s); }
.sn-animate-scale-in-x.sn-is-visible { animation: scaleInX var(--duration,1.2s)  cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--delay,0s); }
.sn-animate-scale-in-y.sn-is-visible { animation: scaleInY var(--duration,1.2s)  cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--delay,0s); }

/*
 * sn-reveal — product cards + section headers. React: y:40→0, ease [0.16,1,0.3,1], 0.85s.
 * sn-reveal-clip — image column. React: opacity 0→1 + clipPath inset(0 100% 0 0)→inset(0 0% 0 0), ease [0.16,1,0.3,1], 1.3s.
 *   Direction: horizontal wipe from right (right inset 100%→0%), matching React source exactly.
 */
.sn-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1); transition-delay: var(--reveal-delay, 0ms); }
.sn-reveal.sn-visible { opacity: 1; transform: none; }

.sn-reveal-clip { opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease; }
.sn-reveal-clip.sn-visible { opacity: 1; clip-path: inset(0 0% 0 0); }

/*
 * sn-richtext — wrapper for Shopify richtext field output.
 * Shopify wraps richtext content in <p>, <strong>, <em>, <a>, <ul>, <li>.
 * Styles on the container div cascade into these tags; only margin and
 * link colour need explicit overrides. When no formatting is applied the
 * output is a plain <p> that renders identically to the old <p> element.
 */
.sn-richtext > p   { margin: 0 0 1.5em; }
.sn-richtext > p:last-child { margin-bottom: 0; }
.sn-richtext > ul,
.sn-richtext > ol  { margin: 0 0 1.5em; padding-left: 1.4em; }
.sn-richtext > ul:last-child,
.sn-richtext > ol:last-child { margin-bottom: 0; }
.sn-richtext li    { margin-bottom: 0.4em; }
.sn-richtext strong { font-weight: 600; }
.sn-richtext em    { font-style: italic; }
.sn-richtext a     { color: var(--gold-mid); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.sn-richtext a:hover { color: var(--gold-light); }

/*
 * sn-brand-story-col — Brand Story / Origin image column.
 * Progressive enhancement: image is VISIBLE by default (no JS required).
 * JS adds .sn-clip-armed to enable the clip reveal animation.
 * If JS never runs the image remains fully visible.
 */
.sn-brand-story-col { opacity: 1; }
.sn-brand-story-col.sn-clip-armed { opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease; }
.sn-brand-story-col.sn-clip-armed.sn-visible { opacity: 1; clip-path: inset(0 0% 0 0); }

@media (max-width: 767px) {
  .sn-brand-story-col.sn-clip-armed { clip-path: none !important; opacity: 1 !important; }
}

/* ─── Gold Foil ──────────────────────────────────────────────── */
/*
 * React source (index.css) exact gradient:
 *   13 stops at 110deg, size 300% auto, animation goldFoil 18s ease-in-out infinite.
 *   Deep shadow stops (#5e4208, #7a5c10) create real metallic depth relief.
 *   Bright near-white peak (#faefc4 at 50%) mimics physical gold foil specular.
 */
.gold-foil-accent {
  background: linear-gradient(
    110deg,
    #5e4208  0%,
    #7a5c10  6%,
    #9a7225  14%,
    var(--gold-primary) 26%,
    var(--gold-light)   38%,
    #ecdca0  45%,
    #faefc4  50%,
    #ecdca0  55%,
    var(--gold-light)   62%,
    var(--gold-primary) 74%,
    #9a7225  86%,
    #7a5c10  94%,
    #5e4208  100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldFoil 18s ease-in-out infinite;
}

.text-gold-shimmer {
  background: linear-gradient(
    105deg,
    var(--gold-primary) 0%,
    var(--gold-light)   35%,
    #e8d08a             50%,
    var(--gold-light)   65%,
    var(--gold-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3s ease forwards;
  animation-delay: 0.6s;
}

/* ─── Metallic Sweep ─────────────────────────────────────────── */
/*
 * React exact: width 60%, height 120%, top -10%, mix-blend-mode overlay.
 * Overlay blend means the sweep BRIGHTENS existing gold pixels rather
 * than laying an opaque white bar on top.
 * Duration 24s cycle, rest from 13%–100%.
 */
.sn-mark-wrap--shimmer { position: relative; overflow: hidden; }
.sn-metallic-sweep {
  position: absolute;
  top: -10%;
  left: 0;
  width: 60%;
  height: 120%;
  background: linear-gradient(
    105deg,
    transparent             5%,
    rgba(255,248,220,0.0)  20%,
    rgba(255,248,220,0.7)  45%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,248,220,0.7)  55%,
    rgba(255,248,220,0.0)  80%,
    transparent            95%
  );
  mix-blend-mode: overlay;
  animation: snMetallicSweep 24s ease-in-out infinite;
  animation-delay: var(--sweep-delay, 0s);
  pointer-events: none;
}

/* ─── Background Utilities ───────────────────────────────────── */
/*
 * bg-marble — React exact (index.css):
 *   base #080808 + two perpendicular repeating-linear-gradient veins
 *   (hairline opacity ≤0.025) + radial gold undertones + depth gradient.
 *   Shopify previously used plain radial gradients with no veining.
 */
.bg-marble {
  background-color: #080808;
  background-image:
    /* Warm gold tint layer */
    radial-gradient(ellipse at 20% 80%, rgba(185,146,42,0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(185,146,42,0.03) 0%, transparent 50%),
    /* Fine veining — light wisps at 118° */
    linear-gradient(118deg,
      transparent 0%,
      transparent 28%,
      rgba(255,255,255,0.025) 28.5%,
      rgba(255,255,255,0.018) 29%,
      transparent 30%,
      transparent 56%,
      rgba(255,255,255,0.015) 56.5%,
      transparent 57.5%,
      transparent 100%
    ),
    /* Cross-grain veins at 62° */
    linear-gradient(62deg,
      transparent 0%,
      transparent 40%,
      rgba(255,255,255,0.012) 40.8%,
      transparent 42%,
      transparent 70%,
      rgba(255,255,255,0.020) 70.6%,
      rgba(255,255,255,0.010) 71.2%,
      transparent 72%,
      transparent 100%
    ),
    /* Subtle depth gradient */
    radial-gradient(ellipse at 50% 50%, rgba(22,22,22,0.6) 0%, rgba(4,4,4,1) 100%);
}

/*
 * bg-hero-gradient — React exact to-top gradient:
 *   rgba(7,7,7,0.90) 0% → rgba(7,7,7,0.55) 30% → rgba(7,7,7,0.15) 60% → transparent 100%
 */
.bg-hero-gradient {
  background: linear-gradient(
    to top,
    rgba(7,7,7,0.90)  0%,
    rgba(7,7,7,0.55)  30%,
    rgba(7,7,7,0.15)  60%,
    transparent       100%
  );
}

/*
 * concrete-texture — React exact (index.css):
 *   Two perpendicular repeating-linear-gradient hairlines.
 *   0° stripes at opacity 0.007, 90° stripes at opacity 0.004.
 *   Reads as architectural surface texture, not visible pattern.
 *   (Previously used SVG feTurbulence filter — different technique.)
 */
.concrete-texture {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(255,255,255,0.007) 3px,
      rgba(255,255,255,0.007) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 10px,
      rgba(255,255,255,0.004) 10px,
      rgba(255,255,255,0.004) 11px
    );
}

/* ─── Gold Rules ─────────────────────────────────────────────── */
/* React index.css: gold-rule is centred bilateral fade, opacity 0.4 */
.gold-rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-mid), transparent);
  opacity: 0.4;
}
/* React index.css: gold-rule-left starts from left, opacity 0.5 */
.gold-rule-left {
  height: 1px;
  background: linear-gradient(to right, var(--gold-mid), transparent);
  opacity: 0.5;
}

/* ─── Button ─────────────────────────────────────────────────── */
/* React: Jost sans, 0.66rem, 0.26em LS, 16px 40px padding */
.btn-luxury {
  display: inline-block;
  padding: 16px 40px;
  background: transparent;
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  font-family: var(--app-font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--transition-mid), border-color var(--transition-mid), box-shadow var(--transition-mid), transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.btn-luxury::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, var(--gold-primary) 0%, var(--gold-light) 50%, var(--gold-primary) 100%);
  transform: translateX(-105%);
  transition: transform 0.52s cubic-bezier(0.16,1,0.3,1);
  z-index: -1;
}
.btn-luxury:hover::before { transform: translateX(0); }
.btn-luxury:hover {
  color: #0a0a0a !important;
  border-color: var(--gold-light) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(185,146,42,0.18);
}
.btn-luxury span, .btn-luxury > * { position: relative; z-index: 2; }
.btn-luxury[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(184,146,42,0.3);
}

/* ─── Corner Accents ─────────────────────────────────────────── */
.sn-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--gold-primary);
  border-style: solid;
  opacity: 0.6;
  pointer-events: none;
}
.sn-corner--tl { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.sn-corner--tr { top: 10px; right: 10px; border-width: 1px 1px 0 0; }
.sn-corner--bl { bottom: 10px; left: 10px; border-width: 0 0 1px 1px; }
.sn-corner--br { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }

/* ─── Editorial Label Row ────────────────────────────────────── */
.sn-editorial-label-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  justify-content: center;
}
.sn-editorial-label-row--left { justify-content: flex-start; }
.sn-editorial-label { font-family: var(--app-font-display); font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-mid); white-space: nowrap; }
.sn-editorial-rule { flex: 1; max-width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-primary) 50%, transparent); opacity: 0.4; }
.sn-editorial-num { font-family: var(--app-font-display); font-size: 0.65rem; letter-spacing: 0.2em; color: var(--gold-dark); opacity: 0.6; }

/* ─── Magnetic button wrapper ────────────────────────────────── */
/* JS wraps each .btn-luxury in this span; spring applies transform to the button */
.sn-magnetic { display: inline-block; position: relative; }

/* ─── Cart badge spring pop ──────────────────────────────────── */
/* React: key={count} re-mounts span on each change → spring from scale(0.6)/opacity:0 */
.sn-nav__cart-count.sn-pop {
  animation: badgePop 0.4s ease-out both;
}

/*
 * Trust line — React animates to opacity:0.82 (not 1).
 * Override animation-name so the keyframe lands at 0.82.
 */
@keyframes fadeInTrust {
  from { opacity: 0; }
  to   { opacity: 0.82; }
}
.sn-hero__trust.sn-is-visible { animation-name: fadeInTrust; }

/* ─── Responsive container ───────────────────────────────────── */
.sn-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px)  { .sn-container { padding: 0 24px; } }
@media (min-width: 1280px) { .sn-container { padding: 0 24px; } }

/* ══════════════════════════════════════════════════════════════
   HEADER / NAV
   ══════════════════════════════════════════════════════════════ */
.sn-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  z-index: 1000;
  transition: background var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
}
/*
 * React scrolled state: rgba(7,7,7,0.96), blur(12px) — no saturate.
 * Threshold: scrollY > 80px (fixed in theme.js).
 * Previously: rgba(10,10,10,0.85), blur(20px) saturate(1.4) — wrong.
 */
.sn-nav[data-scrolled="true"] {
  background: rgba(7,7,7,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(185,146,42,0.18);
  box-shadow: 0 4px 32px rgba(0,0,0,0.5);
}
.sn-nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.sn-nav__brand { display: flex; align-items: center; gap: 0.75rem; }
.sn-nav__wordmark { display: flex; flex-direction: column; line-height: 1; }
.sn-nav__wordmark-name { font-family: var(--app-font-display); font-size: 1.05rem; letter-spacing: 0.1em; }
.sn-nav__wordmark-byline { font-family: var(--app-font-sans); font-size: 0.55rem; letter-spacing: 0.25em; color: var(--gold-mid); opacity: 0.7; text-transform: uppercase; margin-top: 0.15rem; }

/*
 * React nav links: gap-7 = 28px (1.75rem). Previously 0.25rem = 4px — 7× too tight.
 */
.sn-nav__links { display: none; align-items: center; gap: 1.75rem; }
@media (min-width: 900px) { .sn-nav__links { display: flex; } }
.sn-nav__link {
  position: relative;
  font-family: var(--app-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.72);
  padding: 0.35rem 0;
  transition: color var(--transition-fast);
}
.sn-nav__link:hover { color: var(--gold-light); }
.sn-nav__link--active { color: var(--gold-mid); }
.sn-nav__link-underline {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--gold-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-mid);
}
.sn-nav__link:hover .sn-nav__link-underline,
.sn-nav__link--active .sn-nav__link-underline { transform: scaleX(1); }

.sn-nav__controls { display: flex; align-items: center; gap: 0.75rem; }
.sn-nav__cart-btn {
  position: relative;
  display: flex; align-items: center;
  color: rgba(240,236,228,0.75);
  padding: 0.4rem;
  transition: color var(--transition-fast);
}
.sn-nav__cart-btn:hover { color: var(--gold-light); }
/* React: cart badge uses Jost sans, not Oswald. Fixed. */
.sn-nav__cart-count {
  position: absolute;
  top: 0; right: 0;
  min-width: 16px; height: 16px;
  background: var(--gold-primary);
  color: #0a0a0a;
  font-size: 0.55rem;
  font-weight: 700;
  font-family: var(--app-font-sans);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.sn-nav__cart-count.sn-visible { display: flex; }
.sn-nav__hamburger { display: flex; align-items: center; color: rgba(240,236,228,0.75); padding: 0.4rem; }
.sn-nav__hamburger svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .sn-nav__hamburger { display: none; } }

/* Mobile drawer — slides from RIGHT to match React */
.sn-nav__overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 1001;
  opacity: 0;
}
.sn-nav__overlay.sn-open { display: block; animation: overlayIn 0.3s ease forwards; }

/*
 * React drawer: bg #080808, padding 28px 32px, width min(320px,100vw).
 * Border-left: 1px solid rgba(185,146,42,0.2).
 * Easing: type:'tween', duration:0.45, ease:[0.32,0,0.18,1] — React exact.
 */
.sn-nav__drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(340px, 90vw);
  height: 100dvh;
  background: #080808;
  border-left: 1px solid rgba(185,146,42,0.2);
  z-index: 1002;
  display: flex; flex-direction: column;
  padding: 28px 32px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.32,0,0.18,1);
}
.sn-nav__drawer.sn-open { transform: translateX(0); }

/*
 * Drawer link slide-in — React exact:
 *   initial: { opacity:0, x:20 }, animate: { opacity:1, x:0 }, duration: 0.4s
 *   delay: i*0.07+0.15s set via animation-delay inline in liquid.
 */
.sn-nav__drawer.sn-open .sn-nav__drawer-link {
  animation: drawerLinkIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: var(--link-delay, 0.15s);
}

/*
 * React drawer header: mb-16 = 64px. Previously 2.5rem = 40px.
 */
.sn-nav__drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 64px; }
.sn-nav__close-btn { color: rgba(240,236,228,0.6); padding: 0.35rem; }
.sn-nav__close-btn svg { width: 22px; height: 22px; }

/*
 * React drawer links: gap-9 = 36px between each link.
 * Previously gap: 0 with divider borders — different structure.
 * Drawer link font: Jost 0.75rem (inline style in liquid overrides
 * any class; the class here is set to match to avoid cascade conflict).
 */
.sn-nav__drawer-links { display: flex; flex-direction: column; gap: 36px; flex: 1; }
.sn-nav__drawer-link {
  display: block;
  font-family: var(--app-font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}
.sn-nav__drawer-link:hover { color: var(--gold-mid); }
.sn-nav__drawer-footer { margin-top: 2rem; }
.sn-nav__drawer-byline { font-size: 0.6rem; letter-spacing: 0.2em; color: rgba(240,236,228,0.3); text-transform: uppercase; margin-top: 0.75rem; }

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.sn-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  padding: 0;
}
.sn-hero__bg-wrap {
  position: absolute; inset: -10%;
  will-change: transform;
}
/*
 * React: background image has NO explicit opacity — full opacity image
 * with gradient overlays providing legibility. Previously opacity: 0.32
 * which double-darkened the hero (bg dimmed THEN gradient applied).
 */
.sn-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  filter: contrast(1.08) saturate(0.85);
}
.sn-hero__fog-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.08;
  pointer-events: none;
  z-index: 2;
}
.sn-hero__fog-layer { pointer-events: none; }

/*
 * Fog drift classes — React exact:
 *   animation-direction: alternate prevents visible snap-reset.
 *   background-size: 130% 130% gives overflow so bg-position animation
 *   shifts the gradient texture itself (second axis of motion).
 *   Layer B phase-offset: animation-delay: -14s.
 */
.sn-hero-fog-drift-a, .hero-fog-drift-a {
  animation: fogDriftA 13s ease-in-out infinite alternate;
  will-change: transform, background-position;
  background-size: 130% 130%;
}
.sn-hero-fog-drift-b, .hero-fog-drift-b {
  animation: fogDriftB 17s ease-in-out infinite alternate;
  will-change: transform, background-position;
  background-size: 130% 130%;
  animation-delay: -7s;
}

/* Hero content column — full height flex column: SN mark at top, editorial at bottom-left */
.sn-hero__content-col {
  position: relative; z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 24px 80px;
  min-height: 100dvh;
}
/*
 * React exact: SNMark is inside a flex row with justifyContent:'center'
 * spanning the full content-column width (max-w-7xl). Replicate by
 * stretching the mark element across the column and centering within it.
 */
.sn-hero__mark {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  justify-content: center;
}

/* Editorial text block pushed to bottom-left via margin-top: auto
 * React: no gap — each element has its own explicit marginTop inline. */
.sn-hero__editorial {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 760px;
}
/* React: no padding on headline-wrap — corners positioned relative to tight box */
.sn-hero__headline-wrap {
  position: relative;
  display: inline-block;
  padding: 0;
}
/* React h1: lineHeight 1.05, children stacked by display:block — no flex gap */
.sn-hero__h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

/*
 * Brand name: React exact — Oswald 700, clamp(3.1rem,6.6vw,7.4rem),
 *   letter-spacing 0.04em, line-height 0.92, margin-bottom 0.32em.
 *   Previously: weight 800, letter-spacing 0.06em, line-height 1 — all wrong.
 */
.sn-hero__brand-name {
  font-family: var(--app-font-display);
  font-size: clamp(3.1rem, 6.6vw, 7.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 0.92;
  margin-bottom: 0.32em;
}

/*
 * Hero subtitle — React exact:
 *   clamp(1.3rem, 2.6vw, 2.6rem) — Shopify was using clamp(0.95rem,2vw,1.3rem),
 *   so the max was equal to React's MIN. At 1400px React shows 2.6rem, Shopify showed 1.3rem.
 *   font-style: normal (NOT italic — React does not apply italic here).
 */
.sn-hero__headline {
  font-family: var(--app-font-serif);
  font-style: normal;
  font-size: clamp(1.3rem, 2.6vw, 2.6rem);
  color: rgba(240,236,228,0.7);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/*
 * Corner bracket accents — React exact:
 *   Positioned OUTSIDE the headline wrap: top -10px, left/right -14px.
 *   Previously: top 0, left/right 0 (inside element edges).
 */
/* React exact bracket opacity: rgba(185,146,42,0.38) */
.sn-hero__corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(185,146,42,0.38);
  border-style: solid;
  pointer-events: none;
}
.sn-hero__corner--tl { top: -10px; left: -14px; border-width: 1px 0 0 1px; }
.sn-hero__corner--tr { top: -10px; right: -14px; border-width: 1px 1px 0 0; }

/*
 * Hero body — React exact:
 *   font-family: var(--app-font-serif) = Playfair Display (NOT Jost).
 *   font-size: clamp(0.95rem, 1.8vw, 1.55rem) (NOT fixed 1rem).
 *   line-height: 1.55 (NOT 1.75).
 *   letter-spacing: -0.005em (NOT 0.01em — React tightens slightly).
 *   max-width: 620px (NOT 520px).
 *   color: rgba(240,236,228,0.65).
 */
/* React: marginTop 40px from headline. maxWidth 620px. */
.sn-hero__body {
  font-family: var(--app-font-serif);
  font-size: clamp(0.95rem, 1.8vw, 1.55rem);
  color: rgba(240,236,228,0.65);
  line-height: 1.55;
  max-width: 620px;
  letter-spacing: -0.005em;
  margin-top: 40px;
}
/*
 * React closing p: Playfair Display, clamp(1.05rem,2.2vw,1.85rem), lineHeight 1.4,
 *   letterSpacing -0.01em, marginTop 26px, maxWidth 680px.
 *   Line1: fontWeight 500, color rgba(240,236,228,0.76).
 *   Line2: fontWeight 600, color rgba(240,236,228,0.93), marginTop 3px.
 *   NOT italic, NOT Oswald — both spans inherit the Playfair Display from the p.
 */
.sn-hero__closing {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--app-font-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.85rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 680px;
  margin-top: 26px;
}
.sn-hero__closing-line1 { font-weight: 500; color: rgba(240,236,228,0.76); }
.sn-hero__closing-line2 { font-weight: 600; color: rgba(240,236,228,0.93); }

/*
 * Byline — React exact: font-size 0.74rem, letter-spacing 0.44em,
 *   color rgba(240,236,228,0.41) — near-invisible cream (NOT gold-tinted).
 *   Previously: 0.6rem, 0.35em, rgba(184,146,42,0.5) — all wrong.
 */
/* React: marginTop 22px from closing. */
.sn-hero__byline { font-size: 0.74rem; letter-spacing: 0.44em; color: rgba(240,236,228,0.41); text-transform: uppercase; margin-top: 22px; }

/*
 * Gold rule — React exact: fixed width 140px.
 *   Previously: max-width 380px; width 100% — almost 3× too wide.
 *   transform-origin: left (animates scaleX from left edge).
 */
/*
 * React exact:
 *   background: linear-gradient(to right, var(--gold-primary), transparent)  ← gold→clear, not through-gold
 *   opacity: 0.55 (was 0.4)
 *   margin: 36px 0 — 36px above (from byline) and 36px below (to CTA)
 */
.sn-hero__rule {
  width: 140px;
  max-width: 140px;
  height: 1px;
  background: linear-gradient(to right, var(--gold-primary), transparent);
  opacity: 0.55;
  transform-origin: left;
  margin: 36px 0;
}
.sn-hero__cta-btn { /* inherits .btn-luxury */ }

/*
 * Trust line — React exact: color var(--gold-mid) = #c9a94b gold.
 *   Previously: rgba(240,236,228,0.35) near-invisible cream — wrong color.
 *   text-align not forced; keep flex-start per editorial column alignment.
 */
/*
 * React exact: fontSize 0.69rem, letterSpacing 0.22em, lineHeight 1, marginTop 20px.
 * Separator: margin 0 0.65em, opacity 0.55. textAlign: center (full-width editorial).
 */
.sn-hero__trust {
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-mid);
  line-height: 1;
  user-select: none;
  margin-top: 20px;
}
.sn-hero__trust-sep { margin: 0 0.65em; opacity: 0.55; }
@media (max-width: 479px) {
  .sn-hero__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: .45rem;
    row-gap: .45rem;
    font-size: .56rem;
    letter-spacing: .14em;
    line-height: 1.35;
    text-align: center;
  }
  .sn-hero__trust-sep { margin: 0; }
}

/*
 * Ambient lights — React exact:
 *   Layer A: position absolute inset:0, gradient "ellipse 55% 38% at 18% 35%",
 *            animate({ opacity:[1,0] }) duration:16 repeatType:'reverse' → 32s full cycle.
 *   Layer B: position absolute inset:0, gradient "ellipse 50% 42% at 78% 58%",
 *            animate({ opacity:[0,1] }) duration:16 repeatType:'reverse' → starts at 0
 *            (animation-delay:-16s places it at the 50% keyframe = opacity:0).
 *   Both cover full hero via inset:0 — the radial-gradient positions the glow source.
 *   No filter:blur — React does not blur these layers.
 */
.sn-hero__ambient-a {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 38% at 18% 35%, rgba(185,146,42,0.08) 0%, transparent 65%);
  pointer-events: none; z-index: 2;
  animation: ambientBreath 32s ease-in-out infinite;
}
.sn-hero__ambient-b {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 42% at 78% 58%, rgba(185,146,42,0.065) 0%, transparent 60%);
  pointer-events: none; z-index: 2;
  animation: ambientBreath 32s ease-in-out infinite;
  animation-delay: -16s;
}

/*
 * Hero gradients — React exact:
 *   .sn-hero__gradient: bg-hero-gradient (to top, 90%→55%→15%→transparent).
 *   .sn-hero__vignette-bottom: height 30%, solid rgba(7,7,7,1) → transparent.
 *     Previously height 100% — covered entire hero.
 *   .sn-hero__vignette-centre: dark CENTER (ellipse), transparent outside.
 *     Previously: inverted — dark OUTSIDE, transparent inside. Opposite effect.
 */
.sn-hero__gradient {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(7,7,7,0.90)  0%,
    rgba(7,7,7,0.55)  30%,
    rgba(7,7,7,0.15)  60%,
    transparent       100%
  );
  pointer-events: none; z-index: 3;
}
.sn-hero__vignette-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to top, rgba(7,7,7,1) 0%, transparent 100%);
  pointer-events: none; z-index: 4;
}
.sn-hero__vignette-centre {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 75% at 50% 50%, rgba(4,4,4,0.42) 0%, rgba(4,4,4,0.18) 45%, transparent 72%);
  pointer-events: none; z-index: 3;
}

.sn-hero__scroll-line {
  position: absolute; bottom: 0; right: 3rem;
  z-index: 10;
  width: 1px; height: 64px;
  background: linear-gradient(to bottom, var(--gold-primary), transparent);
  transform-origin: top center;
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════════
   MARQUEE
   React exact:
   — background: #070707 (pure deep black, not rgba(10,10,10,0.9))
   — border: rgba(185,146,42,0.12) (previously 0.2 — 67% more visible)
   — height: 52px ✓
   — speed: 30s ✓
   — color: rgba(185,146,42,0.55) ✓
   — font-size: 0.58rem ✓
   — white-space: pre on track (preserves separator spacing)
   ══════════════════════════════════════════════════════════════ */
.sn-marquee {
  overflow: hidden;
  white-space: nowrap;
  background: #070707;
  border-top: 1px solid rgba(185,146,42,0.12);
  border-bottom: 1px solid rgba(185,146,42,0.12);
  height: 52px;
  display: flex;
  align-items: center;
  position: relative; z-index: 5;
}
.sn-marquee::before, .sn-marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 1; pointer-events: none;
}
.sn-marquee::before { left: 0; background: linear-gradient(to right, #070707, transparent); }
.sn-marquee::after  { right: 0; background: linear-gradient(to left, #070707, transparent); }
.sn-marquee__track {
  display: inline-flex;
  align-items: center;
  white-space: pre;
  animation: marqueeScroll 30s linear infinite;
}
.sn-marquee:hover .sn-marquee__track { animation-play-state: paused; }
.sn-marquee__segment { display: inline-flex; align-items: center; }
.sn-marquee__item {
  font-family: var(--app-font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(185,146,42,0.55);
  padding: 0 0.5rem;
  transition: color 0.2s;
}
.sn-marquee__sep { color: rgba(184,146,42,0.25); margin: 0 0.35rem; font-size: 0.55rem; }

/* ══════════════════════════════════════════════════════════════
   PRODUCT SHOWCASE
   ══════════════════════════════════════════════════════════════ */
/* Section-level padding set inline in liquid; class is reference. */
.sn-products { padding: 140px 24px 160px; }
.sn-products__header { text-align: center; max-width: 680px; margin: 0 auto 80px; }
.sn-products__heading { font-family: var(--app-font-serif); font-size: clamp(2.2rem, 4.5vw, 4rem); font-weight: 700; color: var(--cream); letter-spacing: -0.02em; line-height: 1.04; }
.sn-products__sub { display: flex; flex-direction: column; gap: 0.5rem; }
.sn-products__sub-headline { font-family: var(--app-font-display); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-mid); }
.sn-products__editorial-lines p { font-family: var(--app-font-serif); font-style: italic; font-size: 0.9rem; color: rgba(240,236,228,0.55); }
.sn-products__payoff { font-family: var(--app-font-sans); font-size: 0.8rem; color: rgba(240,236,228,0.6); letter-spacing: 0.04em; }

.sn-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
}
.sn-products__empty { grid-column: 1/-1; text-align: center; padding: 3rem; color: rgba(240,236,228,0.4); font-style: italic; }
.sn-products__view-all { text-align: center; margin-top: 3rem; }

/*
 * Product Card:
 *   overflow:visible so the scent aura (bottom:-32px) shows below the card.
 *   border/shadow controlled by JS spring on fine-pointer; CSS fallback for coarse.
 *   React box-shadow hover: '0 32px 80px rgba(185,146,42,0.16), 0 8px 32px rgba(0,0,0,0.75)'
 */
.sn-product-card {
  position: relative;
  border: 0.5px solid rgba(185,146,42,0.30);
  background: #0f0f0f;
  overflow: visible;
  cursor: pointer;
  transition: border-color var(--transition-mid), box-shadow var(--transition-mid);
}
/* CSS fallback hover for coarse-pointer (touch) devices — JS spring handles fine-pointer */
@media (hover: hover) and (pointer: coarse) {
  .sn-product-card:hover {
    border-color: rgba(185,146,42,0.88);
    box-shadow: 0 32px 80px rgba(185,146,42,0.16), 0 8px 32px rgba(0,0,0,0.75);
    transform: translateY(-4px);
  }
}

/*
 * Scent aura — React exact:
 *   position absolute, bottom:-32px, left:50%, translateX(-50%),
 *   width:85%, height:60px, border-radius:50%, filter:blur(36px).
 *   Colour set per-product by JS from AURA lookup table.
 */
.sn-product-card__aura {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 60px;
  border-radius: 50%;
  filter: blur(36px);
  background: rgba(185,146,42,0.2); /* overridden per-product by JS */
  opacity: 0;
  transition: opacity 0.65s ease;
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) and (pointer: coarse) {
  .sn-product-card:hover .sn-product-card__aura { opacity: 1; }
}

/*
 * Specular sheen — React exact: radial-gradient tracking mouse position,
 *   rgba(255,255,255,0.04) → transparent 55%, position absolute inset:0 z-index:2.
 *   Background-image set by JS per mousemove.
 */
.sn-product-card__specular {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/*
 * Card image aspect — React exact: 4/5 (portrait). Previously 1/1 (square).
 * objectPosition: center 20% (inline in liquid).
 */
.sn-product-card__image-wrap { aspect-ratio: 4 / 5; overflow: hidden; position: relative; background: #060606; }
/* React image hover: scale(1.02), transition 0.8s cubic-bezier(0.16,1,0.3,1) */
.sn-product-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); }
@media (hover: hover) and (pointer: coarse) {
  .sn-product-card:hover .sn-product-card__img { transform: scale(1.02); }
}
.sn-product-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; background: #060606; }

/*
 * Card body — React exact:
 *   padding: 26px 24px, flexDirection: column, alignItems: center, textAlign: center, flexGrow: 1
 *   No gap — children use explicit marginBottom.
 */
.sn-product-card__body { padding: 26px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; flex-grow: 1; }
/* React name: marginBottom 4px */
.sn-product-card__name { font-family: var(--app-font-serif); font-size: 1.55rem; font-weight: 700; letter-spacing: 0.08em; color: var(--cream); margin-bottom: 4px; }
/* React subtitle: 0.55rem, 0.26em LS, rgba(185,146,42,0.45), marginBottom 12px */
.sn-product-card__subtitle { font-size: 0.55rem; letter-spacing: 0.26em; color: rgba(185,146,42,0.45); text-transform: uppercase; font-family: var(--app-font-sans); margin-bottom: 12px; }
/* React desc: 0.92rem, lineHeight 1.82, rgba(240,236,228,0.8), marginBottom 28px, flex 1 */
.sn-product-card__desc { font-family: var(--app-font-serif); font-style: italic; font-size: 0.92rem; color: rgba(240,236,228,0.8); line-height: 1.82; margin-bottom: 28px; flex: 1; }
/* React footer: borderTop 1px solid rgba(185,146,42,0.15), paddingTop 22px */
.sn-product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(185,146,42,0.15); padding-top: 22px; position:relative; width: 100%; z-index:3; }
.sn-product-card__price { font-family: var(--app-font-sans); font-size: 1.05rem; font-weight: 300; letter-spacing: 0.08em; color: var(--cream); }
.sn-product-card__atc { font-size: 0.6rem; letter-spacing: 0.18em; padding: 10px 20px; color: var(--gold-mid); border: 1px solid var(--gold-primary); background: transparent; font-family: var(--app-font-sans); text-transform: uppercase; }
.sn-atc-form { flex-shrink: 0; position:relative; z-index:4; }

/* ══════════════════════════════════════════════════════════════
   BRAND STORY
   ══════════════════════════════════════════════════════════════ */
.sn-brand-story { padding: 140px 24px 160px; overflow: hidden; }
/* React: alignItems flex-start (not center) — text col and image col top-align */
.sn-brand-story__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: flex-start;
}
.sn-brand-story__image-col { display: flex; justify-content: center; flex: 1 1 340px; max-width: 480px; }
.sn-brand-story__image-frame { position: relative; width: min(380px, 90vw); }
.sn-brand-story__image-border {
  position: absolute;
  top: -14px; right: -14px; bottom: 14px; left: 14px;
  border: 1px solid rgba(184,146,42,0.35);
  pointer-events: none; z-index: 0;
  transform: translate(14px, 14px);
}
.sn-brand-story__image-aspect { position: relative; aspect-ratio: 3/4; overflow: hidden; z-index: 1; }
.sn-brand-story__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.sn-brand-story__image-aspect:hover .sn-brand-story__img { transform: scale(1.04); }
/* React: only bottom fade (to top), height 35%, rgba(10,10,10,0.6). No top fade. */
.sn-brand-story__image-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(10,10,10,0.6) 0%, transparent 100%);
}
/* React: flex: 1 1 380px — wider minimum than image col */
.sn-brand-story__text-col { flex: 1 1 380px; }
.sn-brand-story__heading { font-family: var(--app-font-serif); font-size: clamp(2.2rem, 3.8vw, 3.6rem); font-weight: 700; color: var(--cream); margin-bottom: 44px; line-height: 1.04; letter-spacing: -0.02em; }
/* React: color rgba(240,236,228,0.72) — not 0.65 */
.sn-brand-story__para { font-family: var(--app-font-sans); font-size: 1rem; font-weight: 300; color: rgba(240,236,228,0.72); line-height: 1.85; margin-bottom: 0.75rem; }
.sn-brand-story__mantra { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.25rem; border-left: 1px solid rgba(184,146,42,0.35); margin: 1.25rem 0; }
.sn-brand-story__mantra span { font-family: var(--app-font-serif); font-style: italic; font-size: 0.85rem; color: rgba(240,236,228,0.6); }
.sn-brand-story__mantra-payoff { font-style: normal !important; font-family: var(--app-font-display) !important; font-size: 0.8rem !important; letter-spacing: 0.1em; color: rgba(240,236,228,0.85) !important; margin-top: 0.25rem; }
.sn-brand-name-inline { font-style: normal; }
/* Pull quote — React exact: clamp(1.3rem,2.5vw,1.8rem), border-left 2px solid gold-primary, paddingLeft 28px */
.sn-brand-story__pullquote {
  font-family: var(--app-font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: var(--cream);
  line-height: 1.35;
  border-left: 2px solid var(--gold-primary);
  padding-left: 28px;
  margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════
   PACKAGING
   ══════════════════════════════════════════════════════════════ */
.sn-packaging { padding: 140px 24px; background: #060606; }
.sn-packaging__inner { max-width: 1280px; margin: 0 auto; }
.sn-packaging__header { text-align: center; margin-bottom: 80px; }
.sn-packaging__heading { font-family: var(--app-font-serif); font-size: clamp(2rem, 4vw, 3.4rem); color: var(--cream); }
.sn-packaging__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.sn-packaging__card {
  position: relative;
  border: 1px solid rgba(184,146,42,0.22);
  background: rgba(14,14,14,0.8);
  overflow: hidden;
  transition: border-color var(--transition-mid), transform var(--transition-slow);
}
.sn-packaging__card:hover { border-color: rgba(201,169,75,0.45); transform: translateY(-3px); }
.sn-packaging__card-image {
  position: relative;
  width: 100%; aspect-ratio: 4/5;
  border-bottom: 1px solid rgba(184,146,42,0.15);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.75rem;
  background: rgba(10,10,10,0.5);
  overflow: hidden;
}
.sn-packaging__card-img { width: 100%; height: 100%; object-fit: cover; }
/* Corner accents — top-left and top-right only (matches React) */
.sn-packaging__card-corner-tl {
  position: absolute; top: 10px; left: 10px;
  width: 14px; height: 14px;
  border-top: 1px solid rgba(185,146,42,0.4);
  border-left: 1px solid rgba(185,146,42,0.4);
  pointer-events: none;
}
.sn-packaging__card-corner-tr {
  position: absolute; top: 10px; right: 10px;
  width: 14px; height: 14px;
  border-top: 1px solid rgba(185,146,42,0.4);
  border-right: 1px solid rgba(185,146,42,0.4);
  pointer-events: none;
}
.sn-packaging__card-awaiting { font-size: 0.6rem; letter-spacing: 0.2em; color: rgba(240,236,228,0.3); text-transform: uppercase; font-family: var(--app-font-display); }
.sn-packaging__card-body { padding: 24px; }
.sn-packaging__card-label { font-family: var(--app-font-display); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 0.5rem; }
.sn-packaging__card-detail { font-size: 0.78rem; color: rgba(240,236,228,0.5); line-height: 1.7; }
/* React exact: Jost sans, 0.58rem, 0.2em LS, uppercase, gold-mid, marginTop 72px */
.sn-packaging__footer-note { text-align: center; margin-top: 72px; font-family: var(--app-font-sans); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-mid); }

/* Inline-style card image slot — matches React onMouseEnter border + awaiting text transitions */
/*
 * Packaging placeholder windows — animated motion behavior.
 *
 * snPackagingFloat: subtle vertical oscillation on the SN mark while
 * photography is pending. Gives the placeholder windows life without
 * competing with product imagery once it's uploaded.
 * 8px rise over 3.6s — imperceptibly slow, premium feel.
 * Staggered delays (0s / 1.2s / 2.4s) keep the three cards out of phase.
 * Animation pauses on hover (float replaced by scale-up).
 *
 * Card hover lift: the entire image window rises 4px — matches React's
 * spring-driven whileHover translateY behaviour.
 *
 * Gold border + box-shadow glow + SN mark size/opacity — React exact.
 *   border: rgba(185,146,42,0.12) → rgba(185,146,42,0.35)
 *   box-shadow: 0 8px 32px rgba(185,146,42,0.08) on hover
 *   SN mark: scale 1.143 (56→64px), opacity 0.38→0.65
 *   Awaiting label: rgba(185,146,42,0.22) → rgba(185,146,42,0.45)
 * NOTE: sn-mark renders a PNG <img>, not SVG — selectors target img.
 */
@keyframes snPackagingFloat {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-8px); }
}

/* Placeholder float — staggered per card position */
.sn-reveal:nth-child(1) .sn-packaging__hover-card .sn-mark-wrap { animation: snPackagingFloat 3.6s ease-in-out infinite; animation-delay: 0s; }
.sn-reveal:nth-child(2) .sn-packaging__hover-card .sn-mark-wrap { animation: snPackagingFloat 3.6s ease-in-out infinite; animation-delay: 1.2s; }
.sn-reveal:nth-child(3) .sn-packaging__hover-card .sn-mark-wrap { animation: snPackagingFloat 3.6s ease-in-out infinite; animation-delay: 2.4s; }

/* Card hover: lift window + gold glow */
.sn-packaging__hover-card { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), border-color 0.5s ease, box-shadow 0.5s ease; }
.sn-packaging__hover-card:hover { border-color: rgba(185,146,42,0.35) !important; transform: translateY(-4px); box-shadow: 0 8px 32px rgba(185,146,42,0.08); }
.sn-packaging__hover-card:hover .sn-packaging__awaiting-label { color: rgba(185,146,42,0.45) !important; }
/* SN mark wrapper — pause float, scale up on hover */
.sn-packaging__hover-card .sn-mark-wrap { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.sn-packaging__hover-card:hover .sn-mark-wrap { transform: scale(1.143); animation-play-state: paused; }
/* SN mark image — opacity 0.38→0.65; !important overrides the inline style from the snippet */
.sn-packaging__hover-card .sn-mark-wrap img { transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1); }
.sn-packaging__hover-card:hover .sn-mark-wrap img { opacity: 0.65 !important; }

/* ══════════════════════════════════════════════════════════════
   NEWSLETTER
   ══════════════════════════════════════════════════════════════ */
.sn-newsletter { position: relative; padding: 140px 24px; overflow: hidden; }
.sn-newsletter__depth {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(184,146,42,0.05) 0%, rgba(10,10,10,0.3) 50%, rgba(184,146,42,0.04) 100%);
}
.sn-newsletter__texture { position: absolute; inset: 0; opacity: 0.6; }
.sn-newsletter__corner-glow {
  position: absolute; top: -10%; right: -10%;
  width: 40%; height: 40%;
  background: radial-gradient(ellipse, rgba(184,146,42,0.08) 0%, transparent 70%);
  filter: blur(80px); pointer-events: none;
}
.sn-newsletter__inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.sn-newsletter__mark { margin-bottom: 0.25rem; }
.sn-newsletter__divider { width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-primary), transparent); opacity: 0.5; }
/* React: heading clamp(2rem,4vw,3rem) weight 600 */
.sn-newsletter__heading { font-family: var(--app-font-serif); font-size: clamp(2rem, 4vw, 3rem); color: var(--cream); font-weight: 600; line-height: 1.15; }
.sn-newsletter__body { font-size: 0.9rem; font-weight: 300; color: rgba(240,236,228,0.6); line-height: 1.7; max-width: 420px; }
.sn-newsletter__form-row { display: flex; width: 100%; max-width: 520px; gap: 0; }
/* React: input Jost 0.68rem, padding 21px 20px */
.sn-newsletter__input {
  flex: 1;
  background: rgba(15,15,15,0.9);
  border: 1px solid rgba(184,146,42,0.3);
  border-right: none;
  color: var(--cream);
  font-family: var(--app-font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 21px 20px;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sn-newsletter__input::placeholder { color: rgba(240,236,228,0.3); }
.sn-newsletter__input:focus { border-color: rgba(184,146,42,0.6); background: rgba(184,146,42,0.06); }
/* React: submit Jost 0.65rem, padding 21px 28px */
.sn-newsletter__submit {
  font-family: var(--app-font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 21px 28px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.sn-newsletter__submit:hover { background: var(--gold-primary); color: #0a0a0a; border-color: var(--gold-primary); }
.sn-newsletter__fine-print { font-size: 0.65rem; letter-spacing: 0.1em; color: rgba(240,236,228,0.25); }
.sn-newsletter__success { padding: 1rem 2rem; border: 1px solid rgba(184,146,42,0.3); }
.sn-newsletter__success-msg { font-family: var(--app-font-serif); font-style: italic; color: var(--gold-light); font-size: 1.1rem; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   React exact: padding 80px 24px 40px, background #060606
   ══════════════════════════════════════════════════════════════ */
.sn-footer {
  border-top: 1px solid rgba(184,146,42,0.15);
  padding-top: 80px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
  background: #060606;
}
.sn-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto 64px;
}
/* React: brand wordmark 1.7rem Playfair Display, weight 900, letterSpacing 0.12em, gold-foil-accent */
.sn-footer__brand-name {
  font-family: var(--app-font-serif);
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-bottom: 0.35rem;
}
/* React: byline 0.48rem, letterSpacing 0.44em */
.sn-footer__brand-byline { font-family: var(--app-font-sans); font-size: 0.48rem; letter-spacing: 0.44em; color: rgba(184,146,42,0.5); text-transform: uppercase; }
.sn-footer__nav-col, .sn-footer__social-col { display: flex; flex-direction: column; gap: 16px; }
/* React: footer nav link Jost 0.62rem, letterSpacing 0.2em */
/* React FooterLink default color: rgba(240,236,228,0.55) — not 0.28 */
.sn-footer__link { font-family: var(--app-font-sans); font-size: 0.62rem; letter-spacing: 0.2em; color: rgba(240,236,228,0.55); text-transform: uppercase; transition: color var(--transition-fast); }
.sn-footer__link:hover { color: var(--gold-mid); }
.sn-footer__link--legal { font-size: 0.58rem; opacity: 0.65; }
.sn-footer__policy-divider { height: 1px; background: rgba(184,146,42,0.15); margin: 0.5rem 0; }
/* React social label: 0.6rem, 0.24em LS, var(--gold-mid), marginBottom 6px (0.375rem), Jost sans */
.sn-footer__social-label { font-size: 0.6rem; letter-spacing: 0.24em; color: var(--gold-mid); text-transform: uppercase; margin-bottom: 6px; font-family: var(--app-font-sans); }
/* React: bottom bar padding-top 28px, border rgba(255,255,255,0.04) */
.sn-footer__bottom { max-width: 1280px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.04); padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
/* React copyright: 0.58rem, rgba(240,236,228,0.58) */
.sn-footer__copyright { font-size: 0.58rem; color: rgba(240,236,228,0.58); letter-spacing: 0.18em; text-transform: uppercase; }
/* React tagline: 0.58rem, rgba(185,146,42,0.62), letterSpacing 0.14em */
.sn-footer__tagline { font-size: 0.58rem; letter-spacing: 0.14em; color: rgba(185,146,42,0.62); text-transform: uppercase; }

/* ══════════════════════════════════════════════════════════════
   CART DRAWER
   ══════════════════════════════════════════════════════════════ */
.sn-cart-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  z-index: 2000;
}
.sn-cart-overlay.sn-open { display: block; animation: overlayIn 0.3s ease forwards; }
.sn-cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 100vw);
  height: 100dvh;
  background: rgba(12,12,12,0.98);
  border-left: 1px solid rgba(184,146,42,0.2);
  z-index: 2001;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25,0.1,0.25,1);
  overflow: hidden;
}
.sn-cart-drawer.sn-open { transform: translateX(0); }
.sn-cart-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(184,146,42,0.15);
  flex-shrink: 0;
}
.sn-cart-drawer__title-row { display: flex; align-items: baseline; gap: 0.75rem; }
.sn-cart-drawer__title { font-family: var(--app-font-display); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); }
.sn-cart-drawer__count { font-family: var(--app-font-display); font-size: 0.65rem; color: var(--gold-mid); letter-spacing: 0.1em; }
.sn-cart-drawer__close { color: rgba(240,236,228,0.5); padding: 0.35rem; transition: color var(--transition-fast); }
.sn-cart-drawer__close:hover { color: var(--gold-light); }
.sn-cart-drawer__items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.sn-cart-drawer__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; gap: 0.5rem; }
.sn-cart-drawer__empty-headline { font-family: var(--app-font-display); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,236,228,0.4); }
.sn-cart-drawer__empty-sub { font-family: var(--app-font-serif); font-style: italic; font-size: 0.82rem; color: rgba(240,236,228,0.25); }

/* Cart line item */
.sn-cart-item { display: flex; gap: 1rem; border-bottom: 1px solid rgba(184,146,42,0.1); padding-bottom: 1rem; align-items: flex-start; }
.sn-cart-item__img-wrap { width: 72px; height: 72px; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(184,146,42,0.15); background: var(--obsidian); }
.sn-cart-item__img { width: 100%; height: 100%; object-fit: cover; }
.sn-cart-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.sn-cart-item__title { font-family: var(--app-font-display); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-cart-item__variant { font-size: 0.68rem; color: rgba(240,236,228,0.4); }
.sn-cart-item__price { font-family: var(--app-font-display); font-size: 0.82rem; color: var(--gold-light); }
.sn-cart-item__remove {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.3);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none; border: none;
  cursor: pointer; padding: 0;
  margin-top: 0.25rem;
  transition: color var(--transition-fast);
  align-self: flex-start;
  font-family: var(--app-font-display);
}
.sn-cart-item__remove:hover { color: rgba(240,236,228,0.7); }

.sn-cart-drawer__footer { flex-shrink: 0; padding: 1.25rem 1.5rem; border-top: 1px solid rgba(184,146,42,0.15); display: flex; flex-direction: column; gap: 0.75rem; }
.sn-cart-drawer__subtotal-row { display: flex; justify-content: space-between; font-family: var(--app-font-display); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
#sn-cart-subtotal { color: var(--gold-light); }
.sn-cart-drawer__taxes-note { font-size: 0.65rem; color: rgba(240,236,228,0.3); text-align: center; }
.sn-cart-drawer__checkout { width: 100%; text-align: center; display: block; }

/* ══════════════════════════════════════════════════════════════
   MUSIC PLAYER
   ══════════════════════════════════════════════════════════════ */
/*
 * Music player position — React exact: fixed, bottom 28px, right 28px.
 * z-index 9000: above navbar (~1000) and all page content, below custom
 * cursor (9998) and scroll progress bar (9999).
 * Safe-area fallback: iOS home-indicator adds ~34px to bottom on notch
 * devices; max() keeps 28px on desktop and adds clearance on mobile.
 * Animation easing/duration matches React framer-motion values exactly:
 *   initial={{ opacity:0, y:16, scale:0.96 }}
 *   transition={{ duration:0.9, ease:[0.16,1,0.3,1] }}
 * (was spring cubic-bezier(0.34,1.56,0.64,1) 1s which pushed the player
 *  24px below its anchor during the fill-backwards delay, clipping on mobile)
 */
.sn-music {
  position: fixed;
  bottom: 28px;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px));
  right: 28px;
  z-index: 9000;
  width: 260px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0;
  /* opacity:0 hides the element during the delay without a fill-backwards
     translateY push that would clip the pill below the safe-area edge.
     animation-fill-mode:forwards keeps the final opacity:1/transform state. */
  opacity: 0;
  animation: playerIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.8s forwards;
}
.sn-music[data-desktop-position="bottom-left"] {
  right: auto;
  left: 28px;
}
/* Top positions sit below the 72px navigation bar so they never cover its links. */
.sn-music[data-desktop-position="top-right"] {
  top: 92px;
  bottom: auto;
  right: 28px;
}
.sn-music[data-desktop-position="top-left"] {
  top: 92px;
  bottom: auto;
  right: auto;
  left: 28px;
}
/* Mobile: lift player above browser chrome (toolbar, home indicator).
   88px clears Chrome's ~56px bottom bar plus breathing room.
   env(safe-area-inset-bottom) adds iOS notch clearance on top of that. */
@media (max-width: 767px) {
  .sn-music {
    top: auto;
    bottom: 16px;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
    right: 16px;
    left: auto;
    width: auto;
    z-index: 9500;
  }
  .sn-music[data-desktop-position="bottom-left"] { left: 16px; right: auto; }
  .sn-music[data-mobile-visibility="hidden"] { display: none; }
  .sn-music__pill {
    min-width: 0;
    gap: .45rem;
    padding: .45rem .6rem;
  }
  .sn-music__track,
  .sn-music__expand-btn,
  .sn-music__panel { display: none !important; }
  .sn-music__play-btn { padding: .15rem; }
}
body.sn-cart-open .sn-music,
body.sn-menu-open .sn-music {
  opacity: 0 !important;
  pointer-events: none;
  }
body.sn-has-music-player { padding-bottom: 64px; }
@media (max-width: 767px) {
  body.sn-has-music-player { padding-bottom: 72px; }
}
}
.sn-music__pill {
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(12,12,12,0.92);
  border: 1px solid rgba(184,146,42,0.28);
  border-radius: 50px;
  padding: 0.6rem 0.9rem 0.6rem 0.65rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  min-width: 220px;
  cursor: pointer;
}
.sn-music__play-btn { display: flex; align-items: center; justify-content: center; color: var(--gold-mid); flex-shrink: 0; padding: 0.2rem; }
.sn-music__track { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0.05rem; }
.sn-music__title { font-family: var(--app-font-display); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-music__artist { font-size: 0.52rem; letter-spacing: 0.1em; color: rgba(184,146,42,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-music__expand-btn { display: flex; align-items: center; color: rgba(184,146,42,0.5); padding: 0.2rem; transition: color var(--transition-fast), transform var(--transition-fast); }
.sn-music__expand-btn:hover { color: var(--gold-mid); }
.sn-music[data-expanded="true"] .sn-music__expand-btn { transform: rotate(180deg); }

/* EQ / Play icon toggle */
.sn-music__eq-icon { display: none; }
.sn-music__play-icon { display: block; }
.sn-music[data-playing="true"] .sn-music__eq-icon { display: block; }
.sn-music[data-playing="true"] .sn-music__play-icon { display: none; }

/* EQ bar animations */
.sn-eq-bar { transform-origin: bottom; }
.sn-music[data-playing="true"] .sn-eq-bar--1 { animation: eqBar1 0.8s ease-in-out infinite; }
.sn-music[data-playing="true"] .sn-eq-bar--2 { animation: eqBar2 0.65s ease-in-out infinite; }
.sn-music[data-playing="true"] .sn-eq-bar--3 { animation: eqBar3 0.95s ease-in-out infinite; }

/* Expanded panel — sits above the pill (first in DOM); stretches to container width */
.sn-music__panel {
  background: rgba(12,12,12,0.95);
  border: 1px solid rgba(184,146,42,0.25);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  padding: 1rem 1.1rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
  flex-direction: column; gap: 0.75rem;
}
.sn-music[data-expanded="true"] .sn-music__panel { display: flex; }

/* When expanded, flatten pill's top corners to join panel seamlessly */
.sn-music[data-expanded="true"] .sn-music__pill {
  border-radius: 0 0 12px 12px;
  border-top: 1px solid rgba(184,146,42,0.10);
}
.sn-music__panel-header { display: flex; align-items: center; gap: 0.65rem; }
.sn-music__panel-title { font-family: var(--app-font-display); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--cream); text-transform: uppercase; }
.sn-music__panel-artist { font-size: 0.55rem; letter-spacing: 0.1em; color: rgba(184,146,42,0.55); text-transform: uppercase; }

.sn-music__progress-wrap { cursor: pointer; padding: 0.4rem 0; }
.sn-music__progress-track { position: relative; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; }
.sn-music__progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--gold-dark), var(--gold-mid)); border-radius: 2px; width: 0%; }
.sn-music__progress-thumb { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); width: 10px; height: 10px; background: var(--gold-mid); border-radius: 50%; opacity: 0; transition: opacity var(--transition-fast); }
.sn-music__progress-wrap:hover .sn-music__progress-thumb { opacity: 1; }
.sn-music__time-row { display: flex; justify-content: space-between; }
.sn-music__time { font-size: 0.58rem; color: rgba(240,236,228,0.3); font-family: var(--app-font-display); letter-spacing: 0.1em; }

.sn-music__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.sn-music__ctrl-btn { display: flex; align-items: center; color: rgba(240,236,228,0.45); padding: 0.3rem; transition: color var(--transition-fast); }
.sn-music__ctrl-btn:hover { color: var(--gold-mid); }
.sn-music__ctrl-btn--main { width: 38px; height: 38px; border: 1px solid rgba(184,146,42,0.35); border-radius: 50%; justify-content: center; color: var(--gold-mid); }
.sn-music__ctrl-btn--main:hover { background: rgba(184,146,42,0.12); color: var(--gold-light); }
.sn-mute-line { display: none; }
.sn-music[data-muted="true"] .sn-mute-line { display: block; }

/* ══════════════════════════════════════════════════════════════
   PREP OIL PAGE
   React exact: hero min-height 72vh, padding 88px 24px 100px
   ══════════════════════════════════════════════════════════════ */
.sn-prep-oil { padding-top: var(--nav-height); }
.sn-prep-oil__hero {
  min-height: 72vh;
  padding: 88px 24px 100px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.sn-prep-oil__hero-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
/* React H1: clamp(2.4rem,5.5vw,5.2rem), lineHeight 1.06, letterSpacing -0.02em */
.sn-prep-oil__hero-heading { font-family: var(--app-font-serif); font-size: clamp(2.4rem, 5.5vw, 5.2rem); color: var(--cream); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 36px; }
/* React italic subtitle: clamp(1.22rem,2.4vw,1.72rem) */
.sn-prep-oil__hero-subtitle { font-family: var(--app-font-serif); font-style: italic; font-size: clamp(1.22rem, 2.4vw, 1.72rem); color: rgba(240,236,228,0.65); line-height: 1.6; }
.sn-prep-oil__hero-body { font-family: var(--app-font-sans); font-size: 0.9rem; color: rgba(240,236,228,0.6); line-height: 1.75; }
.sn-prep-oil__section-heading { font-family: var(--app-font-serif); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--cream); margin-bottom: 1.25rem; }
.text-center { text-align: center; }
.sn-prep-oil__why { padding: 4rem 1.5rem; }
.sn-prep-oil__why-inner { max-width: 680px; margin: 0 auto; }
.sn-prep-oil__why-body { font-size: 0.88rem; color: rgba(240,236,228,0.6); line-height: 1.8; }

.sn-prep-oil__ritual { padding: 100px 24px; background: rgba(12,12,12,0.6); }
.sn-prep-oil__ritual-inner { max-width: 1000px; margin: 0 auto; }
/* React step grid: 2px gap between steps */
.sn-prep-oil__steps { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 2.5rem; }
@media (min-width: 640px)  { .sn-prep-oil__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sn-prep-oil__steps { grid-template-columns: repeat(4, 1fr); } }
/* React step card: padding 48px 40px, position relative for ghost number */
.sn-prep-oil__step {
  position: relative;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 48px 40px;
  border: 1px solid rgba(184,146,42,0.18);
  background: rgba(12,12,12,0.8);
  overflow: hidden;
}
/* Ghost number: 7rem, rgba(185,146,42,0.06), top -8px, right 20px */
.sn-prep-oil__step-ghost {
  position: absolute;
  top: -8px; right: 20px;
  font-family: var(--app-font-display);
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(185,146,42,0.06);
  pointer-events: none;
  user-select: none;
}
/* Corner accent: 32px × 32px, TL only on step cards */
.sn-prep-oil__step-corner {
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 32px;
  border-top: 1px solid rgba(185,146,42,0.4);
  border-left: 1px solid rgba(185,146,42,0.4);
  pointer-events: none;
}
/* React step label: clamp(0.85rem,1.4vw,1.05rem), letterSpacing 0.22em */
.sn-prep-oil__step-number { font-family: var(--app-font-display); font-size: 2rem; letter-spacing: 0.05em; line-height: 1; color: var(--gold-mid); }
.sn-prep-oil__step-label { font-family: var(--app-font-display); font-size: clamp(0.85rem, 1.4vw, 1.05rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream); }
/* React step body: clamp(1.06rem,1.8vw,1.26rem), lineHeight 1.7 */
.sn-prep-oil__step-body { font-family: var(--app-font-sans); font-size: clamp(1.06rem, 1.8vw, 1.26rem); color: rgba(240,236,228,0.65); line-height: 1.7; }
.sn-prep-oil__pulse-points { margin-top: 0.5rem; }
.sn-prep-oil__pulse-label { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.5rem; font-family: var(--app-font-display); }
.sn-prep-oil__pulse-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sn-prep-oil__pulse-tag { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; background: rgba(184,146,42,0.1); border: 1px solid rgba(184,146,42,0.25); padding: 0.2rem 0.5rem; color: rgba(240,236,228,0.55); font-family: var(--app-font-display); }

.sn-prep-oil__tips { padding: 4rem 24px; }
.sn-prep-oil__tips-inner { max-width: 1000px; margin: 0 auto; }
.sn-prep-oil__tips-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .sn-prep-oil__tips-grid { grid-template-columns: repeat(3, 1fr); } }
/* React tip card: padding 40px 36px, corner accents TL + BR */
.sn-prep-oil__tip {
  position: relative;
  padding: 40px 36px;
  border: 1px solid rgba(184,146,42,0.18);
  background: rgba(14,14,14,0.8);
  display: flex; flex-direction: column; gap: 0.75rem;
  overflow: hidden;
}
/* TL corner */
.sn-prep-oil__tip-corner-tl {
  position: absolute; top: 0; left: 0;
  width: 20px; height: 20px;
  border-top: 1px solid rgba(185,146,42,0.4);
  border-left: 1px solid rgba(185,146,42,0.4);
  pointer-events: none;
}
/* BR corner (React uses TL + BR on tip cards, TL only on step cards) */
.sn-prep-oil__tip-corner-br {
  position: absolute; bottom: 0; right: 0;
  width: 20px; height: 20px;
  border-bottom: 1px solid rgba(185,146,42,0.4);
  border-right: 1px solid rgba(185,146,42,0.4);
  pointer-events: none;
}
/* React tip title: 0.76rem, letterSpacing 0.24em */
.sn-prep-oil__tip-title { font-family: var(--app-font-display); font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-mid); }
/* React tip body: 1.1rem, lineHeight 1.75 */
.sn-prep-oil__tip-body { font-family: var(--app-font-sans); font-size: 1.1rem; color: rgba(240,236,228,0.65); line-height: 1.75; }

/* React CTA: padding 120px 24px 140px */
.sn-prep-oil__cta { padding: 120px 24px 140px; text-align: center; }
.sn-prep-oil__cta-inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
/* React CTA heading: clamp(1.6rem,3.5vw,3rem) */
.sn-prep-oil__cta-heading { font-family: var(--app-font-serif); font-size: clamp(1.6rem, 3.5vw, 3rem); color: var(--cream); }
.sn-prep-oil__cta-body { font-size: 0.88rem; color: rgba(240,236,228,0.55); line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════
   OUR STORY PAGE
   Identical hero spec to Prep Oil page (confirmed in audit).
   ══════════════════════════════════════════════════════════════ */
.sn-our-story { padding-top: var(--nav-height); }
.sn-our-story__hero {
  min-height: 72vh;
  padding: 88px 24px 100px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.sn-our-story__hero-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.sn-our-story__hero-heading { font-family: var(--app-font-serif); font-size: clamp(2.4rem, 5.5vw, 5.2rem); color: var(--cream); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 36px; }
.sn-our-story__hero-subtitle { font-family: var(--app-font-serif); font-style: italic; font-size: clamp(1.22rem, 2.4vw, 1.72rem); color: rgba(240,236,228,0.65); line-height: 1.6; }
.sn-our-story__hero-body { font-size: 0.9rem; color: rgba(240,236,228,0.6); line-height: 1.75; }
.sn-our-story__chapter { padding: 4rem 24px; }
.sn-our-story__chapter-inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.sn-our-story__chapter-heading { font-family: var(--app-font-serif); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--cream); }
.sn-our-story__chapter-body { font-size: 0.88rem; color: rgba(240,236,228,0.6); line-height: 1.8; }
.sn-our-story__chapter--mindset { background: rgba(12,12,12,0.6); }
.sn-our-story__divider { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.sn-our-story__statement { padding: 4rem 24px; background: rgba(8,8,8,0.7); text-align: center; }
.sn-our-story__statement-inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.sn-our-story__statement-text { font-family: var(--app-font-serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); color: rgba(240,236,228,0.75); line-height: 1.4; }
.sn-our-story__cta { padding: 5rem 24px; text-align: center; }
.sn-our-story__cta-inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.sn-our-story__cta-heading { font-family: var(--app-font-serif); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--cream); }
.sn-our-story__cta-body { font-size: 0.88rem; color: rgba(240,236,228,0.55); line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════
   404 PAGE
   ══════════════════════════════════════════════════════════════ */
.sn-404 {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--nav-height) 1.5rem 2rem;
  text-align: center;
}
.sn-404__inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; max-width: 480px; }
.sn-404__rule-top, .sn-404__rule-bottom { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-primary), transparent); opacity: 0.5; }
.sn-404__num { font-family: var(--app-font-display); font-size: clamp(3rem, 10vw, 6rem); letter-spacing: 0.15em; line-height: 1; }
.sn-404__heading { font-family: var(--app-font-serif); font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--cream); line-height: 1.4; }
.sn-404__body { font-size: 0.85rem; color: rgba(240,236,228,0.5); }
.sn-404__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; margin-top: 0.5rem; }
.sn-404__link { font-family: var(--app-font-display); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(184,146,42,0.7); text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════════ */
.sn-contact { padding: calc(var(--nav-height) + 4rem) 24px 5rem; }
.sn-contact__inner { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.sn-contact__heading { font-family: var(--app-font-serif); font-size: clamp(2rem, 4vw, 3rem); color: var(--cream); }
.sn-contact__body { font-size: 0.88rem; color: rgba(240,236,228,0.55); line-height: 1.75; }
.sn-contact__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.sn-contact__field { display: flex; flex-direction: column; gap: 0.4rem; }
.sn-contact__field--full { grid-column: 1/-1; }
.sn-contact__field label { font-family: var(--app-font-display); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); }
.sn-contact__field input,
.sn-contact__field textarea {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(184,146,42,0.25);
  color: var(--cream);
  font-family: var(--app-font-sans);
  font-size: 0.85rem;
  padding: 0.75rem 1rem;
  outline: none;
  resize: vertical;
  transition: border-color var(--transition-fast);
}
.sn-contact__field input:focus,
.sn-contact__field textarea:focus { border-color: rgba(184,146,42,0.5); }
.sn-contact__success { padding: 1rem 1.5rem; border: 1px solid rgba(184,146,42,0.3); color: var(--gold-light); font-family: var(--app-font-serif); font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ══════════════════════════════════════════════════════════════ */
.sn-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14,14,14,0.95);
  border: 1px solid rgba(184,146,42,0.3);
  color: var(--cream);
  font-family: var(--app-font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  z-index: 9000;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  animation: toastIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
  backdrop-filter: blur(12px);
}
.sn-toast.sn-toast--exit { animation: toastOut 0.28s ease forwards; }

/* ══════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════ */
.sn-pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 3rem; }
.sn-pagination__btn { font-family: var(--app-font-display); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-mid); padding: 0.5rem 1.25rem; border: 1px solid rgba(184,146,42,0.3); transition: background var(--transition-fast), color var(--transition-fast); }
.sn-pagination__btn:hover { background: rgba(184,146,42,0.1); }
.sn-pagination__info { font-size: 0.7rem; color: rgba(240,236,228,0.35); letter-spacing: 0.1em; }

/* ══════════════════════════════════════════════════════════════
   SPLIT HEADLINE — React exact
   wordVariants: hidden { opacity:0, y:'0.35em' } → visible { opacity:1, y:'0em' }
   duration: 0.75s, delay: i * 0.055s (55ms per word — set via --word-delay in JS)
   ease: [0.16,1,0.3,1], viewport margin: '-40px'
   ══════════════════════════════════════════════════════════════ */
.sn-split-headline { line-height: 1.2; }
.sn-split-headline .sn-word { display: inline-block; overflow: hidden; }
.sn-split-headline .sn-word span {
  display: inline-block;
  transform: translateY(0.35em);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.16,1,0.3,1), opacity 0.75s cubic-bezier(0.16,1,0.3,1);
  transition-delay: var(--word-delay, 0ms);
}
.sn-split-headline.sn-visible .sn-word span { transform: translateY(0); opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .sn-marquee__track { animation: none; }
  .sn-reveal, .sn-animate-fade-up, .sn-animate-fade-in, .sn-animate-scale-in { opacity: 1 !important; transform: none !important; }
  .sn-reveal-clip { opacity: 1 !important; clip-path: none !important; }
  .sn-brand-story-col.sn-clip-armed { opacity: 1 !important; clip-path: none !important; }
  #sn-cursor { display: none; }
  .gold-foil-accent, .text-gold-shimmer { animation: none !important; background-position: 0% center !important; }
  .hero-fog-drift-a, .hero-fog-drift-b,
  .sn-hero-fog-drift-a, .sn-hero-fog-drift-b { animation: none !important; }
  .sn-hero__ambient-a, .sn-hero__ambient-b { animation: none !important; opacity: 0.5 !important; }
}

/* ══════════════════════════════════════════════════════════════
   SHOPIFY FORM ERRORS
   ══════════════════════════════════════════════════════════════ */
.errors ul { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.errors li { font-size: 0.75rem; color: #e07070; font-family: var(--app-font-sans); }