/* ==========================================================================
   Bee Exquisite — design system v4
   Modern-CSS upgrade layer. Loads AFTER main.css.

   Everything here is progressive: each block is wrapped in @supports or
   degrades to the v3 look, so the site stays correct in older browsers.

   1.  Registered custom properties (@property) — animatable, typed
   2.  OKLCH colour engine — perceptual ramps derived from the live theme
   3.  Fluid modular type scale
   4.  Spatial system — fluid space, optical shadows, materials
   5.  Container queries — components that adapt to their box, not the page
   6.  :has() logic
   7.  Scroll-driven animation (animation-timeline)
   8.  View Transitions
   9.  Motion primitives — reveal, magnetic, tilt, parallax, shine
   10. Editorial components — lookbook, viewer, advisor
   ========================================================================== */

/* ---------------------------------------------------------------- 1. @property
   Typed custom properties can be interpolated by the compositor. This is what
   lets gradients, glows and 3-D tilts animate at 60fps instead of snapping. */

@property --mx      { syntax: '<length>';     inherits: true;  initial-value: 0px; }
@property --my      { syntax: '<length>';     inherits: true;  initial-value: 0px; }
@property --px      { syntax: '<number>';     inherits: true;  initial-value: 0.5; }
@property --py      { syntax: '<number>';     inherits: true;  initial-value: 0.5; }
@property --tilt-x  { syntax: '<angle>';      inherits: false; initial-value: 0deg; }
@property --tilt-y  { syntax: '<angle>';      inherits: false; initial-value: 0deg; }
@property --shine   { syntax: '<percentage>'; inherits: false; initial-value: -30%; }
@property --sweep   { syntax: '<angle>';      inherits: false; initial-value: 120deg; }
@property --lift    { syntax: '<length>';     inherits: false; initial-value: 0px; }
@property --glow    { syntax: '<number>';     inherits: false; initial-value: 0; }
@property --reveal  { syntax: '<number>';     inherits: false; initial-value: 0; }
@property --dash    { syntax: '<number>';     inherits: false; initial-value: 0; }

/* ------------------------------------------------------- 2. OKLCH colour engine
   OKLCH is perceptually uniform: equal lightness steps *look* equal, which sRGB
   HSL does not manage. Relative colour syntax derives the whole ramp from the
   single accent the staff portal controls, so a colour change in admin
   regenerates a coherent scale rather than one flat tint. */

@supports (color: oklch(from red l c h)) {
  /* :root:root outranks the runtime theme block the staff portal injects,
     so the derived ramp wins where supported and falls back where not */
  :root:root {
    /* tonal ramp derived from the live accent */
    --a-95: oklch(from var(--accent) 97% calc(c * 0.22) h);
    --a-90: oklch(from var(--accent) 94% calc(c * 0.34) h);
    --a-80: oklch(from var(--accent) 88% calc(c * 0.55) h);
    --a-70: oklch(from var(--accent) 80% calc(c * 0.78) h);
    --a-60: oklch(from var(--accent) 72% c h);
    --a-50: oklch(from var(--accent) 64% c h);
    --a-40: oklch(from var(--accent) 54% calc(c * 1.02) h);
    --a-30: oklch(from var(--accent) 44% calc(c * 0.95) h);
    --a-20: oklch(from var(--accent) 33% calc(c * 0.82) h);

    /* plum ramp — same trick on the dark brand colour */
    --d-70: oklch(from var(--plum) 62% calc(c * 0.9) h);
    --d-50: oklch(from var(--plum) 44% c h);
    --d-30: oklch(from var(--plum) 28% c h);
    --d-20: oklch(from var(--plum) 20% c h);
    --d-10: oklch(from var(--plum) 13% calc(c * 0.9) h);

    /* analogous accents for charts, badges and the lookbook */
    --hue-warm: oklch(from var(--accent) 70% calc(c * 1.1) calc(h - 26));
    --hue-cool: oklch(from var(--accent) 66% calc(c * 0.9) calc(h + 168));
    --hue-rose: oklch(from var(--accent) 74% calc(c * 0.85) calc(h + 44));

    /* materials */
    --glass:      color-mix(in oklab, var(--paper) 62%, transparent);
    --glass-dark: color-mix(in oklab, var(--plum) 58%, transparent);
    --veil:       color-mix(in oklab, var(--plum) 88%, transparent);
    --hairline:   color-mix(in oklab, var(--ink) 12%, transparent);
    --hairline-on-dark: color-mix(in oklab, #fff 18%, transparent);

    /* the signature gold — a real metallic ramp, not a two-stop fade */
    --gold-grad: linear-gradient(var(--sweep),
      var(--a-90) 0%, var(--a-60) 18%, var(--a-40) 38%,
      var(--a-80) 52%, var(--a-50) 68%, var(--a-90) 100%);
    --gold-edge: linear-gradient(180deg,
      color-mix(in oklab, var(--a-90) 80%, transparent),
      color-mix(in oklab, var(--a-30) 55%, transparent));
  }
}

/* --------------------------------------------------- 3. Fluid modular type scale
   One scale, interpolated against the viewport. No breakpoint jumps: type grows
   continuously from 360px to 1600px. Ratio 1.22 on mobile, 1.29 at desktop, so
   headlines gain presence on large screens without shouting on small ones. */

:root {
  --f-min: 16;      /* px at 360  */
  --f-max: 18;      /* px at 1600 */
  --vw-min: 360;
  --vw-max: 1600;
  --fluid: calc((100vw - (var(--vw-min) * 1px)) / (var(--vw-max) - var(--vw-min)));

  --step--2: clamp(0.694rem, 0.68rem + 0.08vw, 0.75rem);
  --step--1: clamp(0.833rem, 0.81rem + 0.14vw, 0.938rem);
  --step-0:  clamp(1rem, 0.97rem + 0.17vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.14rem + 0.31vw, 1.45rem);
  --step-2:  clamp(1.44rem, 1.33rem + 0.55vw, 1.87rem);
  --step-3:  clamp(1.728rem, 1.53rem + 0.94vw, 2.41rem);
  --step-4:  clamp(2.074rem, 1.74rem + 1.56vw, 3.11rem);
  --step-5:  clamp(2.488rem, 1.94rem + 2.5vw, 4.01rem);
  --step-6:  clamp(2.986rem, 2.12rem + 3.92vw, 5.17rem);
  --step-7:  clamp(3.583rem, 2.24rem + 6.03vw, 6.67rem);

  /* optical leading — big type needs tighter leading than body copy */
  --lh-display: 0.98;
  --lh-head: 1.08;
  --lh-body: 1.62;

  /* optical letter-spacing */
  --ls-display: -0.032em;
  --ls-head: -0.018em;
  --ls-micro: 0.22em;
}

body { font-size: calc(var(--step-0) * var(--type-scale)); }

h1 { font-size: var(--step-6); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--step-4); line-height: var(--lh-head); }
h3 { font-size: var(--step-1); }

.display   { font-size: var(--step-7); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.lede      { font-size: var(--step-1); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.micro     { font-size: var(--step--2); letter-spacing: var(--ls-micro); text-transform: uppercase; font-weight: 800; }

/* optical alignment: hanging punctuation and real ligatures */
h1, h2, .display { text-wrap: balance; font-feature-settings: "liga" 1, "kern" 1, "calt" 1; }
p, .lede { text-wrap: pretty; }
.tnum { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- 4. Spatial system */

:root {
  --sp-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --sp-2xs: clamp(0.5rem, 0.48rem + 0.11vw, 0.63rem);
  --sp-xs:  clamp(0.75rem, 0.71rem + 0.17vw, 0.94rem);
  --sp-s:   clamp(1rem, 0.95rem + 0.22vw, 1.25rem);
  --sp-m:   clamp(1.5rem, 1.43rem + 0.34vw, 1.88rem);
  --sp-l:   clamp(2rem, 1.9rem + 0.45vw, 2.5rem);
  --sp-xl:  clamp(3rem, 2.85rem + 0.67vw, 3.75rem);
  --sp-2xl: clamp(4rem, 3.6rem + 1.79vw, 6rem);
  --sp-3xl: clamp(6rem, 5.2rem + 3.57vw, 10rem);

  /* optical shadow set — light from above, tinted with the brand dark rather
     than neutral black, which is what stops shadows looking muddy */
  --sh-0: 0 1px 1px color-mix(in oklab, var(--plum) 6%, transparent);
  --sh-1: 0 1px 2px color-mix(in oklab, var(--plum) 8%, transparent),
          0 4px 12px color-mix(in oklab, var(--plum) 6%, transparent);
  --sh-2: 0 2px 4px color-mix(in oklab, var(--plum) 8%, transparent),
          0 12px 28px color-mix(in oklab, var(--plum) 10%, transparent);
  --sh-3: 0 4px 8px color-mix(in oklab, var(--plum) 10%, transparent),
          0 28px 72px color-mix(in oklab, var(--plum) 22%, transparent);
  --sh-glow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent),
             0 8px 30px color-mix(in oklab, var(--accent) 26%, transparent);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: linear(
    0, .0085 1.2%, .0339 2.5%, .1276 5%, .2745 7.6%, .4657 10.4%, .6721 13.2%,
    .8544 15.9%, .9856 18.5%, 1.0533 20.9%, 1.0731 23.3%, 1.0577 26%,
    1.0243 29.2%, .9938 33.1%, .9853 36.5%, .9906 42.3%, 1.0018 51%, 1.0044 62%, 1);
  --dur-fast: .18s;
  --dur: .42s;
  --dur-slow: .8s;
}

/* ------------------------------------------------------- 5. Container queries
   A product card no longer asks "how wide is the screen"; it asks "how wide am
   I". The same card is therefore correct in a 4-up grid, a 2-up grid, a drawer,
   a comparison tray and the basket — with no page-level breakpoints. */

.p-grid, .cat-grid, .look-grid, .rail { container-type: inline-size; }
.p-card, .cat-card { container-type: inline-size; container-name: card; }

@container card (max-width: 230px) {
  .p-card .p-body { padding: var(--sp-xs); }
  .p-card h3 { font-size: var(--step--1); }
  .p-card .p-meta, .p-card .p-swatches { display: none; }
  .p-card .p-price { font-size: var(--step-0); }
}
@container card (min-width: 340px) {
  .p-card .p-body { padding: var(--sp-m) var(--sp-s) var(--sp-s); }
  .p-card h3 { font-size: var(--step-1); }
  .p-card .p-quick { inset-inline: var(--sp-s); }
}

/* --------------------------------------------------------------- 6. :has() logic
   Style a parent from its children — removes a pile of JS class toggling. */

/* a card containing a sold-out badge dims its own imagery */
.p-card:has(.badge.sold) .p-media { filter: saturate(.35) opacity(.72); }

/* the header goes solid the moment a drawer, modal or search overlay is open */
body:has(.drawer.open, .modal.open, .search-ov.open) .hdr { background: var(--paper); box-shadow: var(--sh-1); }

/* forms show their submit as ready only when every required field is filled */
form:has(input:invalid) .btn[type="submit"] { --glow: 0; }
form:not(:has(input:invalid)) .btn[type="submit"] { --glow: 1; }

/* a filter bar that has any active chip grows a clear-all affordance */
.filters:has(.chip.on) .filter-clear { opacity: 1; pointer-events: auto; }
.filter-clear { opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }

/* a gallery whose thumb is focused keeps the focus ring above the image */
.gal:has(.gal-thumbs button:focus-visible) .gal-main { z-index: 0; }

/* ------------------------------------------------- 7. Scroll-driven animation
   These run on the compositor off the scroll position itself — no scroll
   listeners, no layout thrash, and they stay in sync during a fling scroll in a
   way JS-driven reveals never quite do. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* the core reveal: rise + fade as an element enters the viewport */
    .rise {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    @keyframes rise-in {
      from { opacity: 0; transform: translateY(2.2rem) scale(.985); filter: blur(4px); }
      to   { opacity: 1; transform: none; filter: none; }
    }

    /* staggered children — each item gets its own range offset */
    .stagger > * {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }

    /* parallax depth inside a fixed-height frame */
    .par-media img, .par-media canvas {
      animation: par linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
    @keyframes par { from { transform: translateY(-6%) scale(1.14); } to { transform: translateY(6%) scale(1.14); } }

    /* a reading-progress rule that tracks the article itself */
    .read-bar {
      animation: read-grow linear both;
      animation-timeline: scroll(root block);
      transform-origin: 0 50%;
    }
    @keyframes read-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* section headings whose rule draws itself in */
    .eyebrow::after {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 90%;
    }
    @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .eyebrow::after { transform-origin: 0 50%; }

    /* the lookbook: spreads that scale and settle as they take the stage */
    .look-spread {
      animation: spread-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    @keyframes spread-in {
      from { opacity: .3; transform: scale(.9) translateY(4rem); border-radius: var(--r-xl); }
      to   { opacity: 1; transform: none; border-radius: 0; }
    }

    /* sticky product imagery that cross-fades between angles as you scroll */
    .seq-frame {
      animation: seq linear both;
      animation-timeline: view(block);
      animation-range: cover;
    }
    @keyframes seq { from { opacity: 0; } 12%, 88% { opacity: 1; } to { opacity: 0; } }
  }
}

/* JS fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise, .stagger > *, .look-spread { opacity: 0; transform: translateY(2rem); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
    .rise.seen, .stagger > .seen, .look-spread.seen { opacity: 1; transform: none; }
  }
}

/* ------------------------------------------------------------ 8. View Transitions
   Cross-document transitions make navigating feel like one continuous app
   rather than a series of page loads. The named elements morph between pages —
   click a product and its photo flies into the product page. */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) { animation-duration: .5s; }
  ::view-transition-old(root) { animation: vt-out .32s var(--ease-in-out) both; }
  ::view-transition-new(root) { animation: vt-in .46s var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-8px) scale(.995); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(14px) scale(.995); } }

  /* the morphing pair — product photo and title carry across the navigation */
  ::view-transition-group(hero-media),
  ::view-transition-group(hero-title) { animation-duration: .58s; animation-timing-function: var(--ease-out); }
  ::view-transition-image-pair(hero-media) { isolation: auto; }
  ::view-transition-old(hero-media),
  ::view-transition-new(hero-media) { animation: none; mix-blend-mode: normal; height: 100%; overflow: clip; }

  /* persistent chrome never animates. Each element needs its own name —
     view-transition-name must be unique in the document. */
  .hdr     { view-transition-name: chrome-header; }
  .mob-bar { view-transition-name: chrome-mobnav; }
  .toasts  { view-transition-name: chrome-toasts; }
  ::view-transition-group(chrome-header),
  ::view-transition-group(chrome-mobnav),
  ::view-transition-group(chrome-toasts) { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------- 9. Motion primitives */

/* magnetic — the button leans toward the cursor, then springs back */
.mag {
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
  transform: translate3d(calc(var(--mx) * .28), calc(var(--my) * .28), 0);
}
@media (prefers-reduced-motion: reduce) { .mag { transform: none; } }

/* tilt — a card that responds to the pointer in three dimensions */
.tilt {
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(var(--lift));
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.tilt > * { transform: translateZ(24px); }
@media (prefers-reduced-motion: reduce) { .tilt { transform: none; } .tilt > * { transform: none; } }

/* spotlight — a soft light that follows the cursor across a surface */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
  background: radial-gradient(38rem 38rem at calc(var(--px) * 100%) calc(var(--py) * 100%),
    color-mix(in oklab, var(--a-90, #F2D89B) 30%, transparent), transparent 62%);
}
.spot:hover::after, .spot:focus-within::after { opacity: 1; }

/* shine — a specular sweep that crosses metallic surfaces on hover */
.shine { position: relative; overflow: hidden; isolation: isolate; }
.shine::before {
  content: ""; position: absolute; inset: -40% -10%; z-index: 1; pointer-events: none;
  background: linear-gradient(102deg, transparent 42%,
    color-mix(in oklab, #fff 62%, transparent) 50%, transparent 58%);
  transform: translateX(var(--shine));
  transition: --shine .78s var(--ease-out);
}
.shine:hover::before, .shine:focus-visible::before { --shine: 130%; }
@media (prefers-reduced-motion: reduce) { .shine::before { display: none; } }

/* grain — a fine film grain that stops large flat fields looking digital */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: var(--noise);
  background-size: 180px 180px;
}

:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* focus that matches the brand rather than the browser default */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset var(--dur-fast) var(--ease-out);
}

/* ------------------------------------------------------------ 10. Refinements */

/* the header becomes a frosted pane once the page has scrolled */
.hdr {
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) {
  body.scrolled .hdr {
    background: var(--glass, color-mix(in srgb, var(--bg) 72%, transparent));
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 1px 0 var(--hairline, rgba(0,0,0,.08)), var(--sh-1);
  }
}

/* buttons gain a real metallic edge and a physical press */
.btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.btn:active { transform: translateY(1px) scale(.988); }
.btn-gold { position: relative; isolation: isolate; }
.btn-gold::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 55%, transparent),
              inset 0 -1px 0 color-mix(in oklab, var(--plum) 22%, transparent);
}
.btn-gold:hover { box-shadow: var(--sh-glow); }

/* product cards: lift, sharpen and reveal on approach */
.p-card {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.p-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.p-card .p-media { overflow: clip; }
.p-card:hover .p-media img { transform: scale(1.055); }

/* smooth scrolling only for people who want it */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   11. THE LIVING HERO
   The canvas sits over a still poster. If the canvas never initialises the
   poster is what you see, so the hero is never empty.
   ========================================================================== */

.hero-canvas-wrap { position: absolute; inset: 0; overflow: clip; }
.hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity 1.1s var(--ease-out);
}
.hero-canvas-wrap.live .hero-poster { opacity: 0; }
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: pan-y;
}
.hero-media {
  background:
    radial-gradient(120% 90% at 76% 12%, color-mix(in oklab, var(--a-80, #E8C97F) 55%, transparent), transparent 62%),
    linear-gradient(168deg, var(--a-95, #FFFDF7) 0%, var(--soft) 46%, var(--a-80, #E3C68E) 100%);
}
.hero-media::after {
  background: radial-gradient(72% 62% at 50% 40%, transparent 40%,
    color-mix(in oklab, var(--plum) 30%, transparent) 100%);
}

/* the headline reveals word by word as the slide arrives */
.hero-copy h1 .w {
  display: inline-block;
  animation: word-in .82s var(--ease-out) both;
  animation-delay: calc(var(--i) * 62ms);
}
@keyframes word-in {
  from { opacity: 0; transform: translateY(.5em) rotate(1.6deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-copy h1 .w { animation: none; } }

/* ==========================================================================
   12. THE 360° VIEWER
   ========================================================================== */

.v360 {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-l);
  overflow: clip;
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--a-90, #F0DBAE) 70%, transparent), transparent 58%),
    linear-gradient(180deg, var(--paper), var(--soft));
  box-shadow: var(--sh-2);
  isolation: isolate;
}
.v360 canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.v360 canvas.dragging { cursor: grabbing; }
.v360 canvas.zoomed { cursor: zoom-out; }
.v360::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 90px color-mix(in oklab, var(--plum) 14%, transparent);
}
.v360-hint {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: color-mix(in oklab, var(--plum) 72%, transparent);
  backdrop-filter: blur(10px);
  color: #fff; font-size: var(--step--2); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 800;
  transition: opacity var(--dur) var(--ease-out);
}
.v360:hover .v360-hint, .v360:focus-within .v360-hint { opacity: 0; }
.v360-tools {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
}
.v360-tools button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline, rgba(0,0,0,.1));
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--sh-1); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.v360-tools button:hover { background: var(--paper); transform: scale(1.06); }
.v360-tools svg { width: 19px; height: 19px; stroke: var(--plum); fill: none; stroke-width: 1.7; }
.v360-zoombar {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--step--2); font-weight: 800; letter-spacing: .08em;
  color: var(--plum); background: color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter: blur(8px); border-radius: 999px; padding: 7px 13px; box-shadow: var(--sh-1);
}

/* ==========================================================================
   13. THE LOOKBOOK
   ========================================================================== */

.look-intro {
  min-height: 76svh; display: grid; align-content: center;
  background: linear-gradient(160deg, var(--plum), var(--d-20, #241220) 70%, var(--plum));
  color: #fff; padding: var(--sp-3xl) 0 var(--sp-2xl); position: relative; overflow: clip;
}
.look-intro .eyebrow { color: var(--a-80, #F2D89B); }
.look-intro h1 { color: #fff; max-width: 16ch; }
.look-intro .lede { color: color-mix(in oklab, #fff 74%, transparent); }
.look-scroll-hint {
  margin-top: var(--sp-xl); display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--step--2); letter-spacing: var(--ls-micro); text-transform: uppercase;
  font-weight: 800; color: var(--a-80, #F2D89B);
}
.look-scroll-hint span {
  width: 1px; height: 46px; background: linear-gradient(var(--a-80, #F2D89B), transparent);
  animation: hint 2.4s var(--ease-in-out) infinite;
}
@keyframes hint { 0%,100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

.look-spread { position: relative; min-height: 100svh; display: grid; overflow: clip; }
.look-spread .look-img { position: absolute; inset: 0; }
.look-spread .look-img img { width: 100%; height: 100%; object-fit: cover; }
.look-spread .look-veil {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, color-mix(in oklab, var(--plum) 74%, transparent) 0%,
    color-mix(in oklab, var(--plum) 30%, transparent) 44%, transparent 68%);
}
.look-spread.right .look-veil { background: linear-gradient(260deg, color-mix(in oklab, var(--plum) 74%, transparent) 0%,
  color-mix(in oklab, var(--plum) 30%, transparent) 44%, transparent 68%); }
.look-copy {
  position: relative; z-index: 2; align-self: center; color: #fff;
  padding: var(--sp-2xl) clamp(24px, 6vw, 96px); max-width: 44rem;
  /* A scrim on the copy block itself, not just on the image. The image is
     editable by staff, so legibility cannot depend on any particular photo
     being dark in the right place. */
  background: radial-gradient(120% 90% at 20% 50%,
    color-mix(in oklab, var(--plum) 82%, transparent) 0%,
    color-mix(in oklab, var(--plum) 46%, transparent) 46%, transparent 78%);
  text-shadow: 0 1px 18px color-mix(in oklab, var(--plum) 72%, transparent);
}
.look-spread.right .look-copy {
  background: radial-gradient(120% 90% at 80% 50%,
    color-mix(in oklab, var(--plum) 82%, transparent) 0%,
    color-mix(in oklab, var(--plum) 46%, transparent) 46%, transparent 78%);
}
.look-spread.right .look-copy { justify-self: end; text-align: right; }
.look-spread.right .look-copy .eyebrow { justify-content: flex-end; }
.look-copy .num {
  font-family: var(--serif); font-size: var(--step-5); line-height: 1;
  color: color-mix(in oklab, var(--a-80, #F2D89B) 52%, transparent);
  display: block; margin-bottom: .18em;
}
.look-copy .eyebrow { color: var(--a-80, #F2D89B); }
.look-copy .eyebrow::after { background: var(--a-80, #F2D89B); }
.look-copy h2 { color: #fff; font-size: var(--step-5); }
.look-copy p { color: color-mix(in oklab, #fff 78%, transparent); max-width: 40ch; }
.look-spread.right .look-copy p { margin-left: auto; }

/* shoppable markers pinned over the image */
.look-pin {
  position: absolute; z-index: 4; width: 34px; height: 34px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: color-mix(in oklab, #fff 88%, transparent);
  box-shadow: 0 0 0 0 color-mix(in oklab, #fff 55%, transparent), var(--sh-2);
  display: grid; place-items: center;
  animation: pin-pulse 2.8s var(--ease-out) infinite;
}
.look-pin::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--plum); }
@keyframes pin-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, #fff 60%, transparent), var(--sh-2); }
  70%  { box-shadow: 0 0 0 18px transparent, var(--sh-2); }
  100% { box-shadow: 0 0 0 0 transparent, var(--sh-2); }
}
@media (prefers-reduced-motion: reduce) { .look-pin { animation: none; } }
.look-pin:hover, .look-pin:focus-visible { transform: scale(1.16); }

.look-card {
  position: absolute; z-index: 5; width: min(300px, 74vw);
  background: var(--paper); border-radius: var(--r-m); box-shadow: var(--sh-3);
  padding: 12px; display: grid; grid-template-columns: 84px 1fr; gap: 12px;
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out), visibility var(--dur);
}
.look-card.on { opacity: 1; visibility: visible; translate: 0 0; }
.look-card img { width: 84px; height: 104px; object-fit: cover; border-radius: var(--r-s); }
.look-card h3 { font-family: var(--sans); font-size: var(--step--1); margin: 0 0 4px; color: var(--ink); font-weight: 800; line-height: 1.3; }
.look-card .pr { font-weight: 800; color: var(--accent-text); margin-bottom: 8px; display: block; font-size: var(--step--1); }
.look-card .btn { width: 100%; }

@media (max-width: 860px) {
  .look-spread { min-height: 88svh; }
  .look-copy, .look-spread.right .look-copy { text-align: left; justify-self: start; padding-inline: 24px; }
  .look-spread.right .look-copy .eyebrow { justify-content: flex-start; }
  .look-spread .look-veil, .look-spread.right .look-veil {
    background: linear-gradient(0deg, color-mix(in oklab, var(--plum) 86%, transparent) 6%,
      color-mix(in oklab, var(--plum) 30%, transparent) 56%, transparent 82%);
  }
  .look-copy { align-self: end; padding-bottom: var(--sp-2xl); }
}

/* ==========================================================================
   14. THE ADVISOR
   ========================================================================== */

.adv { position: relative; min-height: 78svh; padding: var(--sp-xl) 0 var(--sp-3xl);
  background: radial-gradient(90% 60% at 50% 0%, var(--soft), var(--bg) 62%); }
.adv-rail { position: sticky; top: 0; z-index: 20; height: 3px; background: var(--line); }
.adv-rail-fill { display: block; height: 100%; width: 0; background: var(--gold-grad);
  transition: width .6s var(--ease-out); }
.adv-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-xl); align-items: start;
  padding-top: var(--sp-xl); }
@media (max-width: 940px) { .adv-wrap { grid-template-columns: 1fr; } .adv-aside { order: -1; } }

.adv-step { animation: adv-in .5s var(--ease-out) both; }
@keyframes adv-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.adv-q { font-family: var(--serif); font-size: var(--step-4); line-height: 1.1; color: var(--plum);
  margin: 0 0 .35em; letter-spacing: var(--ls-head); }
.adv-help { color: var(--muted); max-width: 52ch; margin-bottom: var(--sp-m); }
.adv-opts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.adv-opt {
  text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 18px 20px; cursor: pointer; position: relative; overflow: hidden;
  transition: border-color var(--dur-fast), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.adv-opt:hover { border-color: var(--accent); box-shadow: var(--sh-2); transform: translateY(-2px); }
.adv-opt.on { border-color: var(--accent); box-shadow: var(--sh-glow); }
.adv-opt.on::after { content: "✓"; position: absolute; top: 12px; right: 14px; color: var(--accent-text); font-weight: 900; }
.adv-opt b { display: block; font-size: var(--step-0); color: var(--ink); margin-bottom: 3px; }
.adv-opt span { display: block; font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
.adv-opt .ill { width: 100%; aspect-ratio: 16/7; border-radius: var(--r-s); margin-bottom: 12px;
  background: linear-gradient(120deg, var(--soft), var(--a-90, #F2D89B)); }

.adv-aside .card { position: sticky; top: 96px; }
.adv-chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.adv-chip { font-size: var(--step--2); background: var(--soft); border-radius: 999px; padding: 6px 11px;
  color: var(--ink-2); border: 1px solid var(--line); }

.adv-result { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-xl); align-items: start; }
@media (max-width: 860px) { .adv-result { grid-template-columns: 1fr; } }
.adv-score { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.adv-score i { flex: 1; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.adv-score i b { display: block; height: 100%; background: var(--gold-grad); width: 0;
  transition: width 1s var(--ease-out); }
.adv-why { margin-top: var(--sp-s); }
.adv-why li { margin-bottom: 8px; color: var(--ink-2); }
.adv-why li b { color: var(--ink); }

/* ==========================================================================
   15. RAILS & MISC
   ========================================================================== */

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap: var(--sp-s); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 6px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

.read-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99;
  background: var(--gold-grad); transform-origin: 0 50%; transform: scaleX(0); }

/* ==========================================================================
   16. FOCUS
   One clear action per screen. Nothing below removes a feature — it lowers
   the volume of everything that is not the next step.
   ========================================================================== */

/* A button that arrived styled as primary but was stepped down. It keeps its
   size and position so the layout does not move; it simply stops competing. */
.btn.was-primary { box-shadow: none; }

.see-all { display: flex; justify-content: center; margin-top: var(--sp-m); }
.see-all .btn { min-width: 15rem; }

/* ---- quiet checkout ------------------------------------------------------
   Once somebody is paying, every link out of the page is a way to lose the
   sale. The header keeps the logo — for trust and for a way back — and loses
   everything else. This is one of the few changes in this file with a
   well-established effect on completion rates. */
body.quiet .hdr .nav,
body.quiet .hdr .hdr-tools,
body.quiet .hdr .burger,
body.quiet .mega,
body.quiet .announce,
body.quiet .mob-bar,
body.quiet .ftr-grid,
body.quiet .popup,
body.quiet .cmp-bar { display: none !important; }

body.quiet .hdr { position: static; }
body.quiet .hdr-main { justify-content: center; padding-block: var(--sp-s); }
body.quiet .brand { pointer-events: auto; }
body.quiet .ftr { margin-top: var(--sp-l); padding: var(--sp-m) 0; }
body.quiet .ftr-bot { border-top: 0; margin-top: 0; justify-content: center; text-align: center; }
body.quiet { padding-bottom: 0 !important; }

/* a trust strip in place of the navigation the page just lost */
.quiet-trust {
  display: flex; justify-content: center; gap: var(--sp-m); flex-wrap: wrap;
  padding: var(--sp-xs) 0; border-bottom: 1px solid var(--line);
  font-size: var(--step--1); color: var(--muted);
}
.quiet-trust span { display: inline-flex; align-items: center; gap: 7px; }
.quiet-trust svg { width: 15px; height: 15px; stroke: var(--ok); fill: none; stroke-width: 2.2; }

/* ---- density ------------------------------------------------------------- */
body.focus-focused .p-quick,
body.focus-focused .p-tool.p-cmp { display: none; }
body.focus-focused .urgency { display: none; }

/* Secondary product tools stay discoverable but stop shouting: they appear on
   approach rather than sitting on every card at all times. */
body.focus-balanced .p-tools { opacity: 0; transition: opacity var(--dur) var(--ease-out); }
body.focus-balanced .p-card:hover .p-tools,
body.focus-balanced .p-card:focus-within .p-tools { opacity: 1; }
body.is-touch.focus-balanced .p-tools { opacity: 1; }

/* ==========================================================================
   17. VIDEO
   ========================================================================== */

.gal-thumbs .vid { position: relative; }
.gal-thumbs .vid .vid-badge {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in oklab, var(--plum) 34%, transparent);
  transition: background var(--dur-fast);
}
.gal-thumbs .vid .vid-badge svg { width: 20px; height: 20px; fill: #fff; }
.gal-thumbs .vid:hover .vid-badge { background: color-mix(in oklab, var(--plum) 12%, transparent); }
.gal-thumbs .vid-blank { display: block; width: 100%; aspect-ratio: 3/4; background: var(--soft); }

.gal-video { display: grid; place-items: center; background: var(--plum); }
.gal-video video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.gal-caption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; z-index: 2;
  padding: 34px 18px 14px; color: #fff; font-size: var(--step--1);
  background: linear-gradient(transparent, color-mix(in oklab, var(--plum) 88%, transparent));
  pointer-events: none;
}

/* review media */
.rev-media { display: flex; gap: 9px; flex-wrap: wrap; margin: 10px 0 4px; }
.rev-media button {
  width: 78px; height: 78px; border-radius: var(--r-s); overflow: clip; border: 1px solid var(--line);
  padding: 0; cursor: pointer; background: var(--soft); position: relative;
}
.rev-media img, .rev-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rev-media .is-vid::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in oklab, var(--plum) 30%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath d='M7 5l12 7-12 7z' fill='white'/%3E%3C/svg%3E") center/22px no-repeat;
}
.rev-pending {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--step--2);
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--soft); color: var(--warn); border-radius: 999px; padding: 5px 12px;
}

/* the upload control, storefront side */
.up-drop {
  display: grid; place-items: center; gap: 6px; text-align: center;
  border: 1.5px dashed var(--line); border-radius: var(--r-m); padding: 22px 18px;
  cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast);
  min-height: 44px;
}
.up-drop:hover, .up-drop:focus-within { border-color: var(--accent); background: var(--accent-wash); }
.up-drop b { font-size: var(--step-0); }
.up-drop span { font-size: var(--step--1); color: var(--muted); max-width: 44ch; }
.up-drop svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
.up-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.up-item { position: relative; width: 92px; }
.up-item img, .up-item video { width: 92px; height: 92px; object-fit: cover; border-radius: var(--r-s); display: block; }
.up-item .x {
  position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--plum); color: #fff; border: 0; cursor: pointer; font-size: 15px; line-height: 1;
}
.up-err { color: var(--bad); font-size: var(--step--1); margin-top: 8px; font-weight: 600; }

/* ---------------------------------------------------------- collection */
.collect-note {
  margin: 12px 0 0; font-size: var(--step--1); color: var(--muted);
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.55;
}
.collect-note.ok { color: var(--ink-2); }
.collect-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke: var(--accent); fill: none; stroke-width: 1.8; }
.collect-note.ok svg { stroke: var(--ok); }
.collect-card {
  border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 20px;
  background: var(--paper); margin-bottom: 12px;
}
.collect-card .stage {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--step--2);
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 12px; margin-bottom: 10px;
}
.collect-card .stage.area { background: var(--soft); color: var(--warn); }
.collect-card .stage.full { background: #EAF4EE; color: var(--ok); }
.collect-card .stage.wait { background: var(--soft); color: var(--muted); }
.collect-card address { font-style: normal; font-size: var(--step-0); font-weight: 700; margin: 4px 0; }