/* Auréalis motion system — styles.
   Everything that *hides* content for an entrance is scoped to
   `html.au-motion:not(.au-fail)`: that class is only set when the visitor has
   not asked for reduced motion (see views/partials/head.ejs), and au-fail is
   added if motion.js never comes up, so content can never get stuck invisible.

   Motion language: one long, soft ease-out (no overshoot), slow image scale,
   light rather than lift. Durations/easings are tokens so they stay coherent. */

:root {
  --ease-lux: cubic-bezier(.16, 1, .3, 1);     /* long, decelerating — the default */
  --ease-inout: cubic-bezier(.76, 0, .24, 1);  /* curtains, wipes */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);     /* small state changes */
  --d-fast: .25s;
  --d-med: .6s;
  --d-slow: 1.1s;
  --d-glide: 1.6s;
}

/* ---------- First-visit threshold (home, once per session) ---------- */
/* A night sky, an aurora that ignites, a glass orb that opens. The wordmark and one line sit in it; then a warm
   flash and the hero develops beneath. The header's own logo and controls stay hidden until it ends (motion-home.js).
   With no WebGL (or on low-power devices) a CSS orb and gradient stand in. */
.au-loader { display: none; }
.au-intro .au-loader {
  position: fixed; inset: 0; z-index: 300; overflow: hidden; background: #04070f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.au-intro.au-fail .au-loader { display: none; }
/* scrollbar-gutter keeps the layout width identical when scroll unlocks, so nothing shifts under the header. */
.au-intro:not(.au-fail) { overflow: hidden; scrollbar-gutter: stable; }
.au-loader-panel { position: absolute; inset: 0; will-change: opacity;
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(61, 245, 160, .22), transparent 70%),
    radial-gradient(60% 60% at 80% 20%, rgba(138, 107, 255, .26), transparent 70%),
    radial-gradient(60% 50% at 15% 70%, rgba(53, 201, 230, .18), transparent 70%),
    linear-gradient(180deg, #04070f, #0b0a22); }
.au-loader-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; visibility: hidden; opacity: 0; transition: opacity 1.6s ease; }
.au-loader-canvas.is-on { opacity: 1; }
.au-loader-orb { display: none; position: absolute; left: 50%; top: 44%; width: 34vh; height: 34vh; margin: -17vh 0 0 -17vh; border-radius: 50%; transform: scale(0); will-change: transform;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85) 0 3%, rgba(255, 255, 255, 0) 9%), radial-gradient(circle at 50% 50%, rgba(120, 200, 235, .35), rgba(138, 107, 255, .35) 62%, rgba(61, 245, 160, .3) 100%);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, .22), 0 0 70px rgba(138, 107, 255, .4); }
.au-loader.no-gl .au-loader-orb { display: block; }
.au-loader-mark { opacity: 0; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 4vh; text-align: center; will-change: transform, opacity; }
.au-loader-mark img { height: clamp(84px, 15.75vw, 140px); width: auto; display: block; filter: brightness(0) invert(1) drop-shadow(0 0 26px rgba(150, 255, 215, .35)); }
.au-loader-line { display: block; width: min(180px, 34vw); height: 1px; transform-origin: center; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(61, 245, 160, 0), #3df5a0 20%, #35c9e6 45%, #8a6bff 70%, rgba(242, 123, 192, 0)); }
.au-loader-tag { margin: 0; font-size: clamp(20px, 3.4vw, 30px); font-style: italic; font-weight: 400; letter-spacing: .01em; color: #fff9f3; line-height: 1.2; }
.au-loader-tag .au-lw { display: inline-block; }
.au-loader-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity;
  background: radial-gradient(circle at 50% 46%, #fff6e2 0%, rgba(247, 213, 149, .9) 26%, rgba(248, 174, 127, .6) 55%, rgba(248, 174, 127, 0) 82%); }
.au-loader-skip { position: absolute; z-index: 1; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 249, 243, .5); opacity: 0; }
@media (hover: hover) and (pointer: fine) { .au-loader { cursor: pointer; } }
.au-intro:not(.au-fail) .au-logo img { opacity: 0; }
.au-intro:not(.au-fail) .au-header > div { opacity: 0; }

/* ---------- Hero ---------- */
/* Framing, from the asset itself: the subject (face) sits at about x 55-100%,
   y 12-60% of a square photo. Centre-cropping it into a wide hero put the eyes on
   the top edge, so bias the crop towards the face (more on narrow screens, where
   the subject is on the right). */
.au-hero-img img, .au-hero-img video { object-position: 50% 36%; }
@media (max-width: 820px) { .au-hero-img img, .au-hero-img video { object-position: 72% 36%; } }

/* Start states (revealed by motion.js). */
.au-motion:not(.au-fail) [data-hero] { opacity: 0; }
/* Headroom so scroll-parallax and cursor drift never expose an edge. */
/* max-width:none — the site's base `img{max-width:100%}` otherwise caps the width at 100%, so the 2% side headroom
   never existed and a strip of the hero background showed at the right edge. */
.au-motion .au-hero-img { top: -8% !important; height: 116% !important; left: -2% !important; width: 104% !important; max-width: none !important; will-change: transform; }
/* Line masks from SplitText: tight serif line-height would clip ascenders and
   descenders, so pad the mask and pull the lines back together. */
.au-motion .au-line-mask { padding: .14em 0; margin: -.14em 0; }
.au-motion .au-word { will-change: transform; }

/* Golden-hour grade: a warm bloom behind the face and a soft cool rim at the very bottom, so the photo reads
   luminous (moodboard) instead of grey. Static CSS, no motion needed. */
.au-hero-sun { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background:
    radial-gradient(58% 90% at 86% 22%, rgba(255, 214, 150, .85), rgba(255, 214, 150, 0) 62%),
    radial-gradient(40% 60% at 70% 100%, rgba(248, 174, 127, .55), rgba(248, 174, 127, 0) 70%); }
@media (max-width: 820px) { .au-hero-sun { background: radial-gradient(90% 60% at 70% 20%, rgba(255, 214, 150, .8), rgba(255, 214, 150, 0) 65%); } }

/* Night grade: the copy side of the photo sits under a deep aurora-night wash (indigo, not brown), so the warm
   skin on the right glows against a cool sky. The curtain below is the only aurora on the hero. */
.au-hero { align-items: center; }
.au-hero-grade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 9, 26, .9) 0%, rgba(8, 18, 42, .7) 38%, rgba(22, 24, 52, .2) 70%, rgba(22, 24, 52, 0) 100%); }
.au-hero-curtain { position: absolute; inset: 0 34% 0 0; pointer-events: none; mix-blend-mode: screen; transform-origin: 50% 100%; opacity: .9;
  background:
    repeating-linear-gradient(90deg, rgba(90, 255, 180, 0) 0 13px, rgba(90, 255, 180, .34) 21px, rgba(90, 255, 180, 0) 36px, rgba(60, 210, 240, 0) 61px, rgba(60, 210, 240, .26) 72px, rgba(60, 210, 240, 0) 96px),
    repeating-linear-gradient(90deg, rgba(150, 120, 255, 0) 0 44px, rgba(150, 120, 255, .22) 58px, rgba(150, 120, 255, 0) 80px),
    linear-gradient(0deg, rgba(53, 201, 230, .55) 0%, rgba(61, 245, 160, .46) 30%, rgba(138, 107, 255, .32) 62%, rgba(138, 107, 255, 0) 94%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 22%, rgba(0, 0, 0, .7) 55%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 22%, rgba(0, 0, 0, .7) 55%, transparent 96%);
  mask-composite: intersect; }
.au-motion:not(.au-fail) .au-hero-curtain { animation: au-curtain 16s ease-in-out infinite alternate; will-change: transform, opacity; }
.au-lite .au-hero-curtain { animation: none !important; }
@keyframes au-curtain { 0% { transform: translateX(-2.5%) scaleY(.96); opacity: .72; } 100% { transform: translateX(2.5%) scaleY(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .au-hero-curtain { animation: none !important; } }
/* Phones: the face fills the top, so the copy drops to the bottom on a bottom-weighted wash. */
@media (max-width: 820px) {
  .au-hero { align-items: flex-end; }
  .au-hero .au-pad { padding-bottom: 72px !important; }
  .au-hero-grade { background: linear-gradient(0deg, rgba(6, 12, 30, .88) 0%, rgba(10, 18, 40, .66) 42%, rgba(18, 24, 50, .12) 72%, rgba(18, 24, 50, 0) 100%); }
  .au-hero-curtain { inset: 0; }
  .au-motion:not(.au-fail) .au-hero .au-hero-cue { display: none; }
}

/* Atmosphere layers — decorative, only exist while motion is active. */
.au-hero-aurora, .au-hero-glow, .au-hero-veil, .au-hero-cue { display: none; pointer-events: none; }
.au-motion:not(.au-fail) .au-hero-aurora {
  display: block; position: absolute; inset: -15%; opacity: 0;
  mix-blend-mode: screen; will-change: transform;
}
.au-hero-aurora i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
/* The brand palette, as slow light. Weighted to honey and apricot, which sit naturally on skin
   and sand tones; lavender gives a cool mist behind the copy. (At high strength azure/lavender
   over a face turns skin grey — keep these low.) */
.au-hero-aurora i:nth-child(1) { width: 60%; height: 80%; left: 48%; top: -10%; background: radial-gradient(closest-side, rgba(247, 213, 149, .85), rgba(247, 213, 149, 0)); }
.au-hero-aurora i:nth-child(2) { width: 60%; height: 72%; left: 4%;  top: 30%;  background: radial-gradient(closest-side, rgba(70, 230, 190, .5), rgba(70, 230, 190, 0)); }
.au-hero-aurora i:nth-child(3) { width: 56%; height: 62%; left: 52%; top: 46%;  background: radial-gradient(closest-side, rgba(248, 174, 127, .7),  rgba(248, 174, 127, 0)); }
.au-motion:not(.au-fail) .au-hero-veil { display: block; position: absolute; inset: 0; background: #1f120a; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .au-motion:not(.au-fail) .au-hero-glow {
    display: block; position: absolute; left: 0; top: 0; width: 680px; height: 680px; margin: -340px 0 0 -340px;
    border-radius: 50%; opacity: 0; mix-blend-mode: screen; will-change: transform, opacity;
    background: radial-gradient(closest-side, rgba(255, 240, 222, .5), rgba(255, 240, 222, 0));
  }
}
/* Scroll cue: a hairline with a slow travelling light. Compositor-only animation. */
.au-motion:not(.au-fail) .au-hero-cue {
  display: block; position: absolute; z-index: 1; left: 64px; bottom: 30px; width: 1px; height: 58px;
  background: rgba(244, 241, 234, .2); overflow: hidden; opacity: 0;
}
.au-hero-cue span {
  position: absolute; left: 0; top: 0; width: 1px; height: 24px;
  background: linear-gradient(to bottom, rgba(240, 184, 146, 0), rgba(240, 184, 146, .95));
  animation: au-cue 2.8s var(--ease-inout) infinite;
}
@keyframes au-cue { 0% { transform: translateY(-110%); } 70%, 100% { transform: translateY(260%); } }
@media (max-width: 820px) { .au-motion:not(.au-fail) .au-hero-cue { left: 22px; } }
@media (max-height: 560px) { .au-motion:not(.au-fail) .au-hero-cue { display: none; } }
/* One slow sheen across the CTA as it lands (motion.js adds/removes the class). */
.btn-primary.au-sheen::after { transform: translateX(130%); transition: transform 1.5s var(--ease-lux); }

/* ---------- Accessibility: visible keyboard focus (applies with or without motion) ---------- */
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #c1602f; outline-offset: 3px;
}
.field:focus-visible { outline: none; border-color: #c1602f; box-shadow: 0 0 0 3px rgba(193, 96, 47, .22); }
/* The menus are CSS checkbox toggles; the checkbox is visually hidden but focusable (head.ejs). */
.nav-check:focus-visible ~ .nav-burger,
.nav-check:focus-visible + label { outline: 2px solid #c1602f; outline-offset: 4px; border-radius: 6px; }

/* ---------- Hover & micro-interactions: light, not lift ---------- */
/* Primary buttons: a soft band of light crosses the surface on hover. */
.btn-primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .42) 50%, transparent 68%);
  transform: translateX(-130%);
}
@media (hover: hover) and (pointer: fine) {
  a.au-link.btn-primary:hover, a.au-link.btn-outline:hover { opacity: 1; } /* au-link's generic fade would wash out the light sweep */
  .btn-primary:hover::after { transform: translateX(130%); transition: transform 1.1s var(--ease-lux); }
}
/* Text links: underline draws in from the left, retracts to the right. */
.au-ulink { position: relative; }
.au-ulink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .7s var(--ease-lux);
}
@media (hover: hover) and (pointer: fine) {
  a.au-link.au-ulink:hover { opacity: 1; }
  .au-ulink:hover::after { transform: scaleX(1); transform-origin: left center; }
}
.au-ulink:focus-visible::after { transform: scaleX(1); }
/* Size chips / quantity: state changes ease rather than snap. */
.size-chip { transition: border-color var(--d-med) var(--ease-soft), color var(--d-med) var(--ease-soft); }
.qty-inc, .qty-dec { transition: background-color var(--d-med) var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .qty-inc:hover, .qty-dec:hover { background: rgba(58, 53, 46, .06) !important; } }
/* `a.au-link{transition:opacity}` (head.ejs) outranks .btn-* transitions on link-buttons;
   restate the full set at matching specificity so the soft easing really applies. */
a.au-link.btn-primary { transition: box-shadow .6s var(--ease-lux), opacity .3s ease, transform .3s ease; }
a.au-link.btn-outline { transition: background-color .5s var(--ease-lux), color .5s var(--ease-lux), opacity .3s ease, transform .3s ease; }

/* ---------- Scroll choreography: start states ---------- */
/* motion.js reveals these as they enter the viewport and then removes the
   data attribute, handing the element back to its normal CSS. */
.au-motion:not(.au-fail) [data-m="rise"],
.au-motion:not(.au-fail) [data-m="lines"],
.au-motion:not(.au-fail) [data-m-group] [data-m-item] { opacity: 0; }
.au-motion:not(.au-fail) [data-m="wipe"] { clip-path: inset(0 0 100% 0 round 20px); }
/* The old whole-section fade (app.js) is superseded when the motion system is active. */
.au-motion .au-reveal { opacity: 1; transform: none; transition: none; }
/* Images given a little depth: oversize so parallax never exposes an edge. */
.au-motion [data-parallax] img { will-change: transform; }

/* ---------- Lenis (smooth scroll) — required base rules ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; scrollbar-gutter: stable; } /* keeps layout width fixed while the intro holds scroll */
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Page transitions (cross-document View Transitions) ---------- */
/* Same-origin navigations cross-fade instead of flashing white. Browsers without
   support (and reduced-motion visitors) simply navigate normally. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .au-header { view-transition-name: au-header; }   /* the header holds still while the page changes */
}
/* view-transition-name turns the header into a base-level stacking context, which let page content with a
   z-index (the hero's copy, card buttons) paint OVER the open menu and make its links unclickable.
   An explicit z-index keeps the header — and its dropdowns — above page content, below the toast/curtain. */
.au-header { z-index: 50; }
::view-transition-old(root) { animation: au-vt-out .32s var(--ease-soft) both; }
::view-transition-new(root) { animation: au-vt-in .6s var(--ease-lux) both; }
::view-transition-group(au-header) { animation-duration: 0s; }
@keyframes au-vt-out { to { opacity: 0; } }
@keyframes au-vt-in  { from { opacity: 0; } }

/* ---------- Scenes: the scroll story (home + about) ---------- */
/* Start states, revealed/driven by motion.js. */
.au-motion:not(.au-fail) [data-strip],
.au-motion:not(.au-fail) [data-story="image"],
.au-motion:not(.au-fail) [data-story="quote"],
.au-motion:not(.au-fail) [data-story="link"],
.au-motion:not(.au-fail) [data-about="body"] > * { opacity: 0; }
/* The marquee is driven by GSAP (speed follows scroll velocity); only while that's alive. */
.au-motion:not(.au-fail) .prod-strip-track { animation: none; }
/* Story words are dimmed in JS and lit as you read; keep them from wrapping oddly. */
.au-motion .au-sw { display: inline-block; will-change: opacity; }

/* About: when the body is clearly longer than the image (motion.js adds .au-long), the image holds
   while it's read. Only then — otherwise the original centred layout is untouched. Needs no
   overflow/transform ancestors (verified). */
@media (min-width: 821px) {
  .au-motion:not(.au-fail) [data-about="row"].au-long { align-items: start !important; }
  .au-motion:not(.au-fail) [data-about="row"].au-long [data-about="image"] { position: sticky; top: 96px; }
}

/* ---------- Add-to-bag feedback ---------- */
/* In flight (the Sariee round trip is ~1s): a soft pulse so the click never feels dead. */
.au-busy { animation: au-busy 1s ease-in-out infinite; cursor: progress; }
@keyframes au-busy { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .au-busy { animation: none; opacity: .6; } }
/* Failure toast (e.g. out of stock): same toast, warmer icon. */
.au-toast-err svg { color: #f8ae7f; }


/* ---------- Aurora backdrop ---------- */
/* Replaces the per-page tiled gradient (which repeated every 950px and left a hard seam).
   Two fixed layers of the brand palette; motion.js feeds --au-p (0..1 page progress) and the layers
   drift against each other as you scroll, so the page's light slowly changes colour as you read. */
html { background: #fff9f3; }
body > div[style*="background-size:100% 950px"] { background: none !important; }
body::before, body::after {
  content: ''; position: fixed; left: 0; right: 0; top: -24vh; bottom: -24vh; z-index: -1; pointer-events: none;
}
body::before {
  background:
    radial-gradient(46vw 46vh at 6% 22%, rgba(165, 209, 228, .62), transparent 100%),
    radial-gradient(44vw 44vh at 94% 30%, rgba(191, 181, 232, .55), transparent 100%),
    radial-gradient(52vw 48vh at 24% 78%, rgba(165, 191, 151, .5), transparent 100%);
  transform: translate3d(0, calc((var(--au-p, 0) - .5) * -16vh), 0);
}
body::after {
  background:
    radial-gradient(50vw 46vh at 90% 70%, rgba(247, 213, 149, .6), transparent 100%),
    radial-gradient(46vw 46vh at 12% 94%, rgba(248, 174, 127, .5), transparent 100%),
    radial-gradient(40vw 40vh at 62% 12%, rgba(165, 209, 228, .4), transparent 100%);
  transform: translate3d(0, calc((var(--au-p, 0) - .5) * 20vh), 0);
}

/* ---------- The Northern Light (home chapter; aurora.js draws the canvas) ---------- */
.au-aurora { position: relative; background: #0a1018; color: #fff9f3; }
.au-aurora-stage {
  position: relative; overflow: hidden; min-height: 100svh; display: flex; align-items: center;
  background:
    radial-gradient(60% 70% at 78% 38%, rgba(138, 107, 255, .34), transparent 70%),
    radial-gradient(70% 60% at 20% 90%, rgba(53, 201, 230, .30), transparent 70%),
    radial-gradient(50% 50% at 50% 100%, rgba(61, 245, 160, .28), transparent 70%),
    linear-gradient(180deg, #0a1018, #17122b);
}
.au-aurora-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; visibility: hidden; opacity: 0; transition: opacity 1.4s ease; }
.au-aurora-canvas.is-on { opacity: 1; }
.au-aurora-stage::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 11, 20, .62) 0%, rgba(8, 11, 20, .3) 45%, rgba(8, 11, 20, 0) 75%); }
.au-aurora-copy { position: relative; z-index: 1; width: 100%; padding: 120px 64px; }
.au-aurora-eyebrow { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #f0b892; font-weight: 700; margin-bottom: 30px; }
.au-aurora-line { margin: 0 0 .5em; font-weight: 400; font-size: clamp(40px, 8.2vw, 124px); line-height: 1.02; letter-spacing: -.01em; max-width: 11em; }
.au-aurora-line em { font-style: italic; color: #f7d595; }
.au-aurora-last p { margin: 0 0 .55em; }
.au-aurora-link { display: inline-block; font-family: 'Manrope', sans-serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #fff9f3; line-height: 1.4; }
.au-aurora-legend { z-index: 1; position: absolute; left: 64px; right: 64px; bottom: 36px; display: flex; align-items: center; gap: 10px; }
.au-aurora-legend i { width: 8px; height: 8px; border-radius: 50%; display: block; opacity: .85; }
.au-aurora-legend i:nth-child(1) { background: #3df5a0; } .au-aurora-legend i:nth-child(2) { background: #35c9e6; }
.au-aurora-legend i:nth-child(3) { background: #8a6bff; } .au-aurora-legend i:nth-child(4) { background: #f27bc0; }
.au-aurora-legend i:nth-child(5) { background: #f7d595; }
.au-aurora-bar { flex: 1; height: 1px; background: rgba(255, 249, 243, .18); margin-left: 14px; position: relative; overflow: hidden; display: none; }
.au-aurora-bar b { position: absolute; inset: 0; background: #f0b892; transform-origin: left; transform: scaleX(0); display: block; }
@media (max-width: 820px) {
  .au-aurora-copy { padding: 96px 22px; } .au-aurora-legend { left: 22px; right: 22px; bottom: 26px; }
  .au-aurora-line { font-size: clamp(40px, 12.5vw, 76px); }
}
/* With motion: the section is tall and the stage sticks, so scrolling "plays" the chapter. Plain sticky
   (no JS pin), so touch devices get the same chapter without pin jank. */
.au-motion:not(.au-fail) .au-aurora { height: 330vh; height: 330svh; }
.au-motion:not(.au-fail) .au-aurora-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.au-motion:not(.au-fail) .au-aurora-lines { position: relative; height: clamp(300px, 52vh, 540px); }
.au-motion:not(.au-fail) .au-aurora-line { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0; width: 100%; opacity: 0; }
.au-motion:not(.au-fail) .au-aurora-bar { display: block; }
.au-aurora .au-line-mask { padding: .1em 0 .16em; margin: -.1em 0 -.16em; }
.au-aurora .au-word { will-change: transform; }
@media (max-width: 820px) { .au-motion:not(.au-fail) .au-aurora { height: 300vh; height: 300svh; } }

/* ---------- Header: sticky, compact once scrolled, hides on the way down ---------- */
/* Sticky (not fixed) so it keeps its place in the flow and nothing has to be offset. The frosted
   background lives on ::before: backdrop-filter on the header itself would make it the containing block
   for the fixed menu overlay and trap the overlay inside the header's box. */
.au-header { position: sticky !important; top: 0; transition: transform .7s var(--ease-lux), padding .6s var(--ease-lux); }
.au-header::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background: rgba(255, 249, 243, .8); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(58, 53, 46, .08); transition: opacity .5s ease; }
.au-header.is-stuck::before { opacity: 1; }
/* No motion script driving .is-stuck (reduced motion, no JS, or failure): keep the frosted layer on, so the dark logo stays legible over dark sections. */
html:not(.au-motion) .au-header::before, html.au-fail .au-header::before { opacity: 1; }
.au-header.is-hidden { transform: translateY(-100%); }
.au-header .au-logo { z-index: 3; }
.au-header > div:last-of-type { z-index: 3 !important; }
.au-logo img { transition: height .6s var(--ease-lux); }
@media (min-width: 821px) {
  .au-header.is-stuck { padding-top: 6px !important; padding-bottom: 6px !important; }
  .au-header.is-stuck .au-logo img { height: 92px !important; }
}

/* ---------- Menu: a compact dropdown that opens from the burger (CSS-only, so it works without JS) ---------- */
.au-header > div:first-of-type { position: relative; }
.nav-burger { position: relative; z-index: 3; }
.nav-mobile {
  position: absolute; left: -12px; right: auto; top: 100%; margin-top: 10px; z-index: 1;
  width: min(320px, calc(100vw - 32px)); max-height: min(70vh, calc(100dvh - 140px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 8px 14px; border: 1px solid rgba(58, 53, 46, .12); border-radius: 16px; box-shadow: 0 18px 40px rgba(58, 53, 46, .16);
  justify-content: flex-start; counter-reset: au-nav; transform-origin: 24px 0;
  background:
    radial-gradient(180px 140px at 0% 0%, rgba(165, 209, 228, .45), transparent 100%),
    radial-gradient(180px 140px at 100% 30%, rgba(191, 181, 232, .4), transparent 100%),
    radial-gradient(200px 160px at 80% 100%, rgba(247, 213, 149, .45), transparent 100%),
    #fff9f3;
}
.nav-mobile a, .nav-mobile-logout {
  display: block; width: auto; align-self: stretch; border: 0 !important; padding: 9px 14px; border-radius: 10px;
  font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.005em; color: #3a352e;
  transition: color .4s var(--ease-lux), background .4s var(--ease-lux), padding-left .5s var(--ease-lux);
}
.nav-mobile a::before { counter-increment: au-nav; content: counter(au-nav, decimal-leading-zero); font-family: 'Manrope', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #a8501f; margin-right: 1.1em; vertical-align: top; position: relative; top: .55em; }
.nav-mobile a[style*="font-weight:700"] { font-weight: 500 !important; font-style: italic; }
@media (hover: hover) and (pointer: fine) {
  .nav-mobile a.au-link:hover { opacity: 1; font-style: italic; color: #a8501f; background: rgba(58, 53, 46, .05); padding-left: 18px; }
}
.nav-mobile-foot { margin: 8px 14px 0; padding-top: 12px; border-top: 1px solid rgba(58, 53, 46, .1); font-size: 12.5px; line-height: 1.55; color: #6b6357; }
@media (max-width: 820px) { .nav-mobile { left: -8px; } }
/* The open: the panel unfolds from the burger, then the links rise into it in turn. */
@keyframes au-menu-in { from { clip-path: inset(0 55% 88% 0 round 16px); opacity: 0; } to { clip-path: inset(0 0 0 0 round 16px); opacity: 1; } }
@keyframes au-menu-link { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.nav-check:checked ~ .nav-mobile { animation: au-menu-in .5s var(--ease-inout) both; }
.nav-check:checked ~ .nav-mobile a, .nav-check:checked ~ .nav-mobile .nav-mobile-foot { animation: au-menu-link .6s var(--ease-lux) both; }
.nav-check:checked ~ .nav-mobile a:nth-of-type(1) { animation-delay: .12s; }
.nav-check:checked ~ .nav-mobile a:nth-of-type(2) { animation-delay: .16s; }
.nav-check:checked ~ .nav-mobile a:nth-of-type(3) { animation-delay: .2s; }
.nav-check:checked ~ .nav-mobile a:nth-of-type(4) { animation-delay: .24s; }
.nav-check:checked ~ .nav-mobile a:nth-of-type(5) { animation-delay: .28s; }
.nav-check:checked ~ .nav-mobile a:nth-of-type(6) { animation-delay: .32s; }
.nav-check:checked ~ .nav-mobile a:nth-of-type(n+7) { animation-delay: .36s; }
.nav-check:checked ~ .nav-mobile .nav-mobile-foot { animation-delay: .4s; }

/* ---------- Footer: a midnight sheet with the brand's light, and an oversized wordmark ---------- */
.au-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #0c1220, #15112a); color: #f4f1ea; border-radius: 36px 36px 0 0; margin-top: 40px; }
.au-footer-aurora { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 60% at 10% 100%, rgba(165, 209, 228, .26), transparent 100%),
    radial-gradient(40% 56% at 56% 108%, rgba(165, 191, 151, .22), transparent 100%),
    radial-gradient(44% 60% at 96% 90%, rgba(191, 181, 232, .3), transparent 100%),
    radial-gradient(30% 40% at 78% 0%, rgba(248, 174, 127, .12), transparent 100%); }
.au-footer-base { position: relative; z-index: 1; padding: 0 64px 28px; }
.au-footer-mark {
  width: 100%; aspect-ratio: 1078 / 234; margin: 24px 0 30px;
  background: linear-gradient(100deg, #a5d1e4, #a5bf97 22%, #bfb5e8 48%, #f7d595 74%, #f8ae7f);
  background-size: 220% 100%; background-position: 0% 50%;
  -webkit-mask: url(/assets/aurealis-logo-black.webp) 50% 50.1% / 111.3% auto no-repeat;
          mask: url(/assets/aurealis-logo-black.webp) 50% 50.1% / 111.3% auto no-repeat;
}
.au-footer-line { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 241, 234, .6); padding-top: 18px; border-top: 1px solid rgba(244, 241, 234, .14); }
.au-footer .au-link { color: inherit; }
@media (max-width: 820px) { .au-footer-base { padding: 0 22px 24px; } .au-footer { border-radius: 24px 24px 0 0; } }
.au-motion:not(.au-fail) .au-footer-mark { clip-path: inset(100% 0 0 0); }

/* ---------- Product page ---------- */
.pdp-gallery-col { align-self: start; min-width: 0; }
@media (min-width: 821px) { .pdp-gallery-col { position: sticky; top: 96px; } }
.pdp-main img { will-change: transform; }
@media (hover: hover) and (pointer: fine) { .au-motion .pdp-main { cursor: zoom-in; } }
.pdp-acc { border-bottom: 1px solid rgba(58, 53, 46, .12); }
.pdp-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer;
  font-family: 'Cormorant Garamond', serif; font-size: 26px; line-height: 1.1; }
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc summary i { position: relative; width: 14px; height: 14px; flex: none; }
.pdp-acc summary i::before, .pdp-acc summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: #3a352e; transition: transform .6s var(--ease-lux); }
.pdp-acc summary i::after { transform: rotate(90deg); }
.pdp-acc[open]:not(.is-closing) summary i::after { transform: rotate(0deg); }
.pdp-acc-body { overflow: hidden; }
.pdp-acc-body > div { padding: 0 0 24px; font-size: 14px; line-height: 1.75; color: #5a5148; max-width: 460px; }
.pdp-acc summary:hover span { font-style: italic; }
/* Phones: once the main Add to Bag scrolls away, the bag follows you. */
.pdp-bar { display: none; }
@media (max-width: 820px) {
  .pdp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 249, 243, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(58, 53, 46, .1); transform: translateY(110%); transition: transform .7s var(--ease-lux); }
  .pdp-bar.is-on { transform: none; }
  .pdp-bar-name { font-size: 14px; font-weight: 700; } .pdp-bar-price { font-size: 13px; color: #6b6357; }
  .pdp-bar .btn-primary { padding: 14px 26px; }
}

/* ---------- Collections index (home) ---------- */
.au-index { position: relative; padding: clamp(72px, 10vw, 140px) 64px; }
.au-index-head { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #a8501f; font-weight: 700; margin-bottom: 34px; }
.au-index ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(58, 53, 46, .18); }
.au-index li { border-bottom: 1px solid rgba(58, 53, 46, .18); transition: opacity .6s var(--ease-lux); }
.au-index a { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 40px); padding: clamp(18px, 2.6vw, 34px) 0; color: #3a352e; text-decoration: none; }
.au-index .no { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #a8501f; min-width: 2.4em; }
.au-index .nm { font-size: clamp(38px, 7vw, 104px); line-height: 1.02; letter-spacing: -.01em; transition: transform .9s var(--ease-lux), color .6s var(--ease-lux); }
.au-index .ar { margin-left: auto; font-size: clamp(22px, 3vw, 44px); transition: transform .9s var(--ease-lux), color .6s var(--ease-lux); }
@media (max-width: 820px) { .au-index { padding-left: 22px; padding-right: 22px; } }
@media (hover: hover) and (pointer: fine) {
  .au-index a.au-link:hover { opacity: 1; }
  .au-index a:hover .nm { transform: translateX(.22em); font-style: italic; color: #a8501f; }
  .au-index a:hover .ar { transform: translateX(14px); color: #a8501f; }
  .au-index ul:hover li:not(:hover) { opacity: .32; }
}
.au-index-peek { position: fixed; left: 0; top: 0; z-index: 20; width: clamp(190px, 17vw, 270px); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  pointer-events: none; visibility: hidden; opacity: 0; background: #fff; box-shadow: 0 24px 60px rgba(58, 53, 46, .22); }
.au-index-peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .5s ease, transform 1.1s var(--ease-lux); }
.au-index-peek img.is-on { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse) { .au-index-peek { display: none; } }

/* ---------- Product cards ----------
   The plate is a pearl wash (mint > lavender > peach); the white product photo is multiplied into it, so the
   bottle sits in tinted light instead of on a white box. A thin aurora hairline lights the plate on hover. */
.product-card { display: flex; flex-direction: column; align-items: flex-start; }   /* buttons line up across a row, whatever the name wraps to */
.pc-wish { position: absolute; top: 12px; left: 12px; z-index: 3; margin: 0; }
.pc-link { display: block; width: 100%; color: inherit; text-decoration: none; }
.product-card-media { position: relative; width: 100%; aspect-ratio: 4 / 5; margin-bottom: 18px; border-radius: 18px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: linear-gradient(165deg, #e8f3f0 0%, #eeeaf7 56%, #fbeedd 100%); }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
.pc-noimg { font-size: 13px; color: #6b6357; letter-spacing: .05em; }
.product-card-media::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, #3df5a0, #35c9e6 36%, #8a6bff 68%, #f27bc0); transition: opacity .8s var(--ease-lux);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (hover: hover) and (pointer: fine) { .product-card:hover .product-card-media::before, .product-card:focus-within .product-card-media::before { opacity: .9; } }
.pc-name { font-size: 24px; font-weight: 500; line-height: 1.12; color: #2c2822; margin: 0 0 6px; letter-spacing: .005em; }
.pc-sub { font-size: 13px; color: #6b6357; margin: 0 0 6px; line-height: 1.45; }
.pc-price { font-size: 12.5px; letter-spacing: .12em; color: #6b6357; margin: 0 0 16px; font-variant-numeric: tabular-nums; }
.product-card-add { position: relative; display: inline-block; width: auto; padding: 7px 0 9px; margin: auto 0 0; border: 0; border-radius: 0; background: none; cursor: pointer;
  font: 700 11.5px/1 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #3a352e; }
.product-card-add::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; transform-origin: 0 50%; transform: scaleX(.24);
  background: linear-gradient(90deg, #3df5a0, #35c9e6, #8a6bff, #f27bc0); transition: transform .8s var(--ease-lux); }
.product-card-add:hover::after, .product-card-add:focus-visible::after, .product-card:hover .product-card-add::after { transform: scaleX(1); }
.product-card-add:active { transform: translateY(1px); }
.product-card-add:disabled { cursor: default; opacity: .7; }
@media (max-width: 820px) { .pc-name { font-size: 21px; } .pc-price { font-size: 12px; letter-spacing: .1em; margin-bottom: 14px; } }
@media (hover: none), (pointer: coarse) { .product-card-add { padding: 16px 0 17px; } .product-card-add::after { transform: scaleX(1); bottom: 9px; } }

/* Pearl plates for the strip and the product page, same wash as the cards. */
.prod-strip-img, .pdp-main, .pdp-thumb { background: linear-gradient(165deg, #e8f3f0 0%, #eeeaf7 56%, #fbeedd 100%); }
.prod-strip-img img, .pdp-main img, .pdp-thumb img { mix-blend-mode: multiply; }
.prod-strip-name { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500; line-height: 1.2; color: #2c2822; }
.prod-strip-price { font-size: 12px; letter-spacing: .12em; }

/* Product description: Sariee's text arrives as paragraphs; the first one is usually the tagline, so it leads. */
.pdp-desc { font-size: 15px; line-height: 1.75; color: #5a5148; margin-bottom: 32px; max-width: 460px; }
.pdp-desc p { margin: 0 0 1.05em; }
.pdp-desc p:last-child { margin-bottom: 0; }
.pdp-desc p:first-child:not(:last-child) { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-style: italic; line-height: 1.35; color: #3a352e; }
.pdp-acc-body p { margin: 0 0 .9em; } .pdp-acc-body p:last-child { margin-bottom: 0; }

/* Announcement bar (admin: Site settings). A slim night strip above the header; dismissible. */
.au-announce { position: relative; z-index: 61; display: flex; align-items: center; justify-content: center; padding: 9px 46px; background: #0b1020; color: #f4efe6; text-align: center; }
.au-announce p { margin: 0; font-size: 12.5px; letter-spacing: .05em; line-height: 1.5; }
.au-announce a { margin-left: 8px; color: #f7d595; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.au-announce-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: rgba(244, 239, 230, .65); cursor: pointer; border-radius: 50%; }
.au-announce-x:hover { color: #fff; background: rgba(255, 255, 255, .1); }
@media (max-width: 620px) { .au-announce { padding: 8px 40px 8px 16px; } .au-announce p { font-size: 12px; } }
/* While the full-screen menu is open the bar steps aside (it keeps its space, so the header does not jump). */
html:has(#nav-toggle:checked) .au-announce { visibility: hidden; }
/* A badge the admin can put on a product's picture. */
.pc-badge { position: absolute; right: 12px; top: 12px; z-index: 2; padding: 5px 11px; border-radius: 14px; background: rgba(11, 16, 32, .86); color: #fff9f3; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }

/* ---------- Product imagery: warm light that follows the cursor ---------- */
.product-card-media::after, .prod-strip-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: multiply; transition: opacity .7s var(--ease-lux);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(248, 174, 127, .46), rgba(247, 213, 149, .24) 34%, transparent 62%);
}
.prod-strip-img { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card-media::after, .prod-strip-item:hover .prod-strip-img::after { opacity: 1; }
}
.au-motion:not(.au-fail) [data-m-item] .product-card-media { clip-path: inset(0 0 100% 0 round 18px); }

/* ---------- Hero glitter (cursor trail, fine pointers) ---------- */
.au-hero-sparks { display: none; }
@media (hover: hover) and (pointer: fine) {
  .au-motion:not(.au-fail) .au-hero-sparks { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
}
.au-hero-sparks i { position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: block; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, #fff 0%, #ffe9c2 40%, rgba(255, 233, 194, 0) 70%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }

/* ---------- Cursor ring (fine pointers; difference blend so it reads on cream and on night) ---------- */
.au-cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; mix-blend-mode: difference; opacity: 0; will-change: transform; }
.au-cursor b { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid #fff; border-radius: 50%;
  color: #fff; font: 700 10px/1 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  transition: width .6s var(--ease-lux), height .6s var(--ease-lux), margin .6s var(--ease-lux), background-color .5s ease, border-color .5s ease; }
.au-cursor b span { opacity: 0; transition: opacity .35s ease; }
.au-cursor.is-link b { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255, 255, 255, .16); }
.au-cursor.is-label b { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: rgba(255, 255, 255, .92); }
.au-cursor.is-label b span { opacity: 1; color: #000; }
.au-cursor.is-down b { width: 30px; height: 30px; margin: -15px 0 0 -15px; }

/* ---------- Skip link ---------- */
.au-skip { position: fixed; left: 16px; top: -64px; z-index: 500; padding: 12px 20px; border-radius: 100px; background: #3a352e; color: #fff9f3;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-decoration: none; transition: top .35s var(--ease-lux); }
.au-skip:focus { top: 16px; }
main { display: block; }

/* ---------- Menu close (the sheet is drawn back up) + keyboard-visible aurora link ---------- */
@keyframes au-menu-out { from { clip-path: inset(0 0 0 0 round 16px); opacity: 1; } to { clip-path: inset(0 55% 88% 0 round 16px); opacity: 0; } }
@keyframes au-menu-link-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
.au-header.is-menu-closing .nav-check:checked ~ .nav-mobile { animation: au-menu-out .35s var(--ease-inout) .05s both; }
.au-header.is-menu-closing .nav-check:checked ~ .nav-mobile a,
.au-header.is-menu-closing .nav-check:checked ~ .nav-mobile .nav-mobile-foot { animation: au-menu-link-out .2s ease both; animation-delay: 0s; }
.au-aurora-link:focus-visible { opacity: 1 !important; outline-color: #f0b892; }

/* au-lite: skip the costly frosted blur */
.au-lite .au-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 249, 243, .97); }
.au-lite .pdp-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 249, 243, .98); }

/* ---------- Aurora banner (error pages, order confirmation) ---------- */
.au-banner .au-aurora-stage { min-height: 56vh; min-height: 56svh; padding: 40px 0 110px; }
.au-banner-full .au-aurora-stage { min-height: 100vh; min-height: 100svh; padding: 0; }
.au-banner-copy { padding-top: 90px; padding-bottom: 60px; }
.au-banner-title { font-weight: 400; font-size: clamp(40px, 8vw, 112px); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 .3em; max-width: 12em; color: #fff9f3; }
.au-banner-text { font-size: 16px; line-height: 1.7; color: rgba(255, 249, 243, .84); max-width: 480px; margin: 0 0 30px; }
.au-banner-text b { color: #fff9f3; }
.au-banner-logo { position: absolute; left: 64px; top: 32px; z-index: 2; display: block; }
.au-banner-logo img { height: 56px; width: auto; display: block; filter: brightness(0) invert(1); }
@media (max-width: 820px) { .au-banner-logo { left: 22px; top: 22px; } }
.au-motion:not(.au-fail) [data-banner-title], .au-motion:not(.au-fail) [data-banner-rise] { opacity: 0; }

/* ---------- Bag fly-in, magnetic buttons, wishlist bloom ---------- */
.au-fly { position: fixed; z-index: 450; border-radius: 16px; background: #fff center / cover no-repeat; box-shadow: 0 14px 34px rgba(58, 53, 46, .3); pointer-events: none; will-change: transform, opacity; }
.btn-primary, .btn-outline { translate: var(--tx, 0px) var(--ty, 0px); }
@keyframes au-heart-pop { 0% { transform: scale(1); } 30% { transform: scale(1.28); } 100% { transform: scale(1); } }
.au-heart-pop svg { animation: au-heart-pop .7s var(--ease-lux); }
button.au-heart-pop:not(.product-card-wishlist) { animation: au-heart-pop .7s var(--ease-lux); }
.product-card-wishlist { position: relative; }
.product-card-wishlist.au-heart-pop::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(193, 96, 47, .7); animation: au-heart-ring .8s var(--ease-lux) forwards; }
@keyframes au-heart-ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }

/* ---------- Page transition: the new page is drawn up over the old one ---------- */
@keyframes au-vt-wipe-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes au-vt-recede { to { opacity: .55; transform: translateY(-2.5vh) scale(.985); } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: au-vt-recede .8s var(--ease-inout) both; }
  ::view-transition-new(root) { animation: au-vt-wipe-in .8s var(--ease-inout) both; }
}
.au-banner-logo { top: -24px; left: 56px; }
.au-banner-logo img { height: 150px; margin: 0; }
@media (max-width: 820px) { .au-banner-logo { left: 14px; top: -18px; } .au-banner-logo img { height: 120px; } }

/* ---------- Shop search suggestions ---------- */
.au-suggest { position: absolute; left: 0; top: calc(100% + 10px); z-index: 30; width: max(100%, 320px); margin: 0; padding: 8px; list-style: none;
  background: #fff9f3; border: 1px solid rgba(58, 53, 46, .12); border-radius: 18px; box-shadow: 0 24px 60px rgba(58, 53, 46, .18);
  animation: au-drop-in .45s var(--ease-lux); }
.au-suggest[hidden] { display: none; }
.au-suggest li { border-radius: 12px; }
.au-suggest li[aria-selected="true"], .au-suggest li:hover { background: rgba(58, 53, 46, .06); }
.au-suggest a { display: flex; align-items: center; gap: 12px; padding: 8px; color: #3a352e; text-decoration: none; }
.au-suggest img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #fff; flex: none; }
.au-suggest-t { display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; min-width: 0; }
.au-suggest-t b { font-weight: 700; font-size: 14px; } .au-suggest-t span { color: #6b6357; }
.au-suggest-none { padding: 14px 12px; font-size: 13px; color: #6b6357; }

/* ---------- Your Ritual (home) ---------- */
.au-ritual, .au-voices { padding: clamp(64px, 9vw, 120px) 64px; position: relative; }
.au-ritual-eyebrow { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #a8501f; font-weight: 700; margin-bottom: 18px; }
.au-ritual-title, .au-voices-title { font-weight: 400; font-size: clamp(34px, 5.6vw, 76px); line-height: 1.04; letter-spacing: -.01em; margin: 0 0 clamp(32px, 5vw, 56px); max-width: 14em; }
.au-ritual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.au-ritual-tile { all: unset; box-sizing: border-box; cursor: pointer; display: block; text-align: left; border-radius: 20px; padding: 10px 10px 16px; background: rgba(255, 255, 255, .45);
  transition: background-color .6s var(--ease-lux), box-shadow .6s var(--ease-lux); }
.au-ritual-tile:focus-visible { outline: 2px solid #c1602f; outline-offset: 3px; }
.au-ritual-tile[aria-pressed="true"] { background: rgba(255, 255, 255, .9); box-shadow: 0 18px 44px rgba(58, 53, 46, .14), 0 0 0 1.5px #3a352e; }
.au-ritual-img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.au-ritual-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-lux); }
.au-ritual-tile[aria-pressed="true"] .au-ritual-img img { transform: scale(1.05); }
.au-ritual-step { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: #3a352e; color: #fff9f3; display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 'Manrope', sans-serif; font-style: normal; transform: scale(0); transition: transform .6s var(--ease-lux); }
.au-ritual-tile[aria-pressed="true"] .au-ritual-step { transform: scale(1); }
.au-ritual-img { background: linear-gradient(165deg, #e8f3f0 0%, #eeeaf7 56%, #fbeedd 100%); }
.au-ritual-img img { mix-blend-mode: multiply; }
.au-ritual-name { display: block; font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; line-height: 1.15; color: #2c2822; padding: 0 6px; }
.au-ritual-price { display: block; font-size: 12px; letter-spacing: .12em; color: #6b6357; padding: 4px 6px 0; font-variant-numeric: tabular-nums; }
.au-ritual-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(58, 53, 46, .18); }
.au-ritual-sum { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.au-ritual-sum span { font-size: 14px; color: #6b6357; }
.au-ritual-sum b { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(30px, 4vw, 44px); min-width: 4.5em; }
.au-ritual-bar .btn-primary[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 820px) { .au-ritual, .au-voices { padding-left: 22px; padding-right: 22px; } .au-ritual-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .au-ritual-bar .btn-primary { width: 100%; } }

/* ---------- Voices (real, moderated reviews only) ---------- */
.au-voices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.au-voice { margin: 0; padding: 30px 28px 26px; border-radius: 22px; background: rgba(255, 255, 255, .55); }
.au-voice-stars { font-size: 15px; letter-spacing: .12em; color: #c1602f; margin-bottom: 16px; }
.au-voice-stars span { color: #d8d0c4; }
.au-voice blockquote { margin: 0 0 20px; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.32; font-weight: 400; }
.au-voice figcaption { font-size: 13px; color: #6b6357; }
.au-voice figcaption a { color: #3a352e; }

/* ---------- Ambient sound toggle (header) ---------- */
.au-sound { position: relative; background: none; border: 0; padding: 0; margin: 0; color: #3a352e; cursor: pointer; display: flex; align-items: center; }
.au-sound svg path { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(.42); opacity: .6; transition: transform .6s var(--ease-lux), opacity .6s var(--ease-lux); }
.au-sound.is-on svg path { transform: none; opacity: 1; animation: au-bars 1.3s ease-in-out infinite; }
.au-sound.is-on svg path:nth-child(2) { animation-delay: -.4s; } .au-sound.is-on svg path:nth-child(3) { animation-delay: -.8s; } .au-sound.is-on svg path:nth-child(4) { animation-delay: -.2s; }
@keyframes au-bars { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.35); } }
@media (prefers-reduced-motion: reduce) { .au-sound.is-on svg path { animation: none; } }