/* ==========================================================================
   AURA GRADIENT DESIGN SYSTEM — tokens.css
   A luminous, ethereal beauty system: mesh-gradient fields, glassmorphism,
   glow halos, iridescent accents. The deliberate opposite of a flat, matte,
   warm-neutral system. Tokens are namespaced `--aura-*`.
   Wrap markup in `.aura-system` to activate.
   Intended web fonts: Outfit, Quicksand, Cormorant Garamond
   (graceful system fallbacks are built into every stack).
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Color · ink (cool iris, not warm black) ------------------------ */
  --aura-ink: #211b35;
  --aura-ink-soft: #514868;        /* body copy — ≈8:1 on glass/white */
  --aura-ink-muted: #6c6485;       /* labels / meta — AA (≈5.5:1 on white, ≈4.6:1 on glass) */
  --aura-line: rgba(33, 27, 53, 0.12);
  --aura-line-soft: rgba(33, 27, 53, 0.07);

  /* --- Color · grounds + glass ---------------------------------------- */
  --aura-white: #ffffff;
  --aura-paper: #f7f5fb;
  --aura-mist: #efeaf8;
  --aura-glass: rgba(255, 255, 255, 0.46);
  --aura-glass-strong: rgba(255, 255, 255, 0.6);
  --aura-glass-solid: rgba(255, 255, 255, 0.92); /* opaque fallback when backdrop-filter is unsupported */
  --aura-glass-border: rgba(255, 255, 255, 0.6);
  --aura-glass-hi: rgba(255, 255, 255, 0.7);
  --aura-glass-blur: blur(20px) saturate(1.5);   /* single source for the frosted-glass effect */

  /* --- Color · aura hues (the gradient palette, soft) ----------------- */
  --aura-lilac: #c9b8ff;
  --aura-peri: #a9b6ff;
  --aura-aqua: #9fe6e0;
  --aura-mint: #c2f0d8;
  --aura-peach: #ffcab2;
  --aura-rose: #ffb6d4;
  --aura-butter: #ffe7a6;
  --aura-sky: #b6dcff;

  /* --- Color · vivid cores (glow / accent) ---------------------------- */
  --aura-violet: #7b5cff;
  --aura-pink: #ff5fa2;
  --aura-cyan: #33d6c8;
  --aura-accent: #6d4bd8;      /* solid fills / text — AA-safe with white */
  --aura-accent-deep: #5333b0;

  /* --- Signature gradients -------------------------------------------- */
  --aura-gradient-aura: linear-gradient(120deg, #7b5cff, #ff5fa2 78%, #33d6c8);
  --aura-gradient-field:
    radial-gradient(42rem 42rem at 10% 4%, rgba(201, 184, 255, 0.55), transparent 60%),
    radial-gradient(38rem 38rem at 92% 10%, rgba(255, 182, 212, 0.5), transparent 60%),
    radial-gradient(42rem 42rem at 78% 92%, rgba(159, 230, 224, 0.5), transparent 62%),
    radial-gradient(32rem 32rem at 22% 96%, rgba(255, 202, 178, 0.45), transparent 60%),
    var(--aura-paper);
  --aura-gradient-dusk: linear-gradient(160deg, #2a2342, #3b2d63 50%, #5a3f8f);
  --aura-gradient-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.2));
  /* Darker iridescent sibling — every stop holds white text at AA (≥4.5:1).
     Use for small-text-on-gradient (CTAs, glow chips, announce). Reserve the
     bright --aura-gradient-aura for large display type + decoration. */
  --aura-gradient-aura-ink: linear-gradient(120deg, #5b3fd6, #c43578 80%, #178577);
  --aura-gradient-field-drift:
    radial-gradient(46rem 40rem at 8% 0%, rgba(201, 184, 255, 0.6), transparent 58%),
    radial-gradient(34rem 30rem at 96% 8%, rgba(255, 182, 212, 0.5), transparent 56%),
    radial-gradient(50rem 46rem at 72% 100%, rgba(159, 230, 224, 0.52), transparent 60%),
    radial-gradient(28rem 26rem at 30% 88%, rgba(182, 220, 255, 0.4), transparent 58%),
    var(--aura-paper);

  /* --- Glow + soft shadows -------------------------------------------- */
  --aura-glow-violet: 0 20px 60px rgba(123, 92, 255, 0.3);
  --aura-glow-pink: 0 20px 60px rgba(255, 95, 162, 0.28);
  --aura-glow-cyan: 0 20px 60px rgba(51, 214, 200, 0.26);
  --aura-glow-soft: 0 16px 50px rgba(33, 27, 53, 0.1);
  --aura-glow-lg: 0 30px 80px rgba(33, 27, 53, 0.16);
  --aura-inset-hi: inset 0 1px 0 var(--aura-glass-hi);
  /* Quiet ambient lift for non-emphasis glass (nav, stats, inputs) — glow is
     reserved for cards/hero/CTAs so emphasis reads. */
  --aura-shadow-ambient: 0 8px 26px rgba(33, 27, 53, 0.07);

  /* --- Color · semantic commerce -------------------------------------- */
  --aura-sale: #d6336c;
  --aura-sale-soft: #ffe3ee;
  --aura-success: #1f9d72;
  --aura-success-soft: #d8f3e8;
  --aura-error: #d64550;
  --aura-error-soft: #ffe1e3;
  --aura-warning: #b9770a;
  --aura-warning-soft: #fff0d2;
  --aura-instock: #1f9d72;
  --aura-soldout: #8a829c;

  /* --- Semantic surface aliases (remapped by .aura-dawn/.aura-night/.aura-mist) */
  --aura-surface: var(--aura-glass-strong);
  --aura-surface-2: var(--aura-glass);
  --aura-surface-solid: var(--aura-white);
  --aura-on-surface: var(--aura-ink);
  --aura-on-surface-soft: var(--aura-ink-soft);
  --aura-on-surface-muted: var(--aura-ink-muted);
  --aura-surface-border: var(--aura-glass-border);
  --aura-field: var(--aura-gradient-field);

  /* --- Z-index scale -------------------------------------------------- */
  --aura-z-base: 1;
  --aura-z-raised: 10;
  --aura-z-nav: 20;
  --aura-z-sticky: 30;
  --aura-z-overlay: 100;
  --aura-z-drawer: 110;
  --aura-z-modal: 120;
  --aura-z-toast: 130;

  /* --- Focus ring ----------------------------------------------------- */
  --aura-focus-color: var(--aura-accent);
  --aura-focus-ring: 2px solid var(--aura-accent);
  --aura-focus-offset: 3px;

  /* --- Control sizing + shell ----------------------------------------- */
  --aura-control-h: 2.85rem;
  --aura-control-h-sm: 2.4rem;     /* keeps ≥44px touch with padding */
  --aura-control-h-lg: 3.4rem;
  --aura-tap-min: 44px;            /* minimum comfortable touch target */
  --aura-shell-max: 1440px;

  /* --- Bottle geometry (tokens, not magic numbers) -------------------- */
  --aura-bottle-w: min(11rem, 46vw);
  --aura-bottle-aspect: 0.5;
  --aura-bottle-shoulder: 4.5rem;
  --aura-bottle-foot: var(--aura-radius-md);

  /* --- Typography · families (airy, light) ---------------------------- */
  --aura-font-sans: "Outfit", "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  --aura-font-display: "Quicksand", "Outfit", system-ui, sans-serif;
  --aura-font-serif: "Cormorant Garamond", "Hoefler Text", Georgia, serif;

  /* --- Typography · fluid scale --------------------------------------- */
  --aura-text-2xs: 0.6875rem;
  --aura-text-xs: 0.75rem;
  --aura-text-sm: 0.875rem;
  --aura-text-md: 1rem;
  --aura-text-lg: 1.25rem;
  --aura-text-xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --aura-text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --aura-text-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  --aura-text-hero: clamp(3.5rem, 1.2rem + 9vw, 8rem);

  /* --- Typography · leading & tracking -------------------------------- */
  --aura-leading-tight: 1.1;
  --aura-leading-snug: 1.25;
  --aura-leading-normal: 1.55;
  --aura-leading-copy: 1.65;
  --aura-tracking-display: 0.005em;
  --aura-tracking-ui: 0.01em;
  --aura-tracking-label: 0.16em;

  /* --- Space · 0.25rem base ramp -------------------------------------- */
  --aura-space-1: 0.25rem;
  --aura-space-2: 0.5rem;
  --aura-space-3: 0.75rem;
  --aura-space-4: 1rem;
  --aura-space-5: 1.25rem;
  --aura-space-6: 1.5rem;
  --aura-space-8: 2rem;
  --aura-space-10: 2.5rem;
  --aura-space-12: 3rem;
  --aura-space-16: 4rem;
  --aura-space-20: 5rem;
  --aura-space-24: 6rem;
  --aura-space-32: 8rem;

  /* --- Radius (pillowy) ----------------------------------------------- */
  --aura-radius-xs: 8px;
  --aura-radius-sm: 14px;
  --aura-radius-md: 20px;
  --aura-radius-lg: 28px;
  --aura-radius-xl: 36px;
  --aura-radius-2xl: 44px;
  --aura-radius-pill: 999px;
  --aura-radius-round: 50%;

  /* --- Borders -------------------------------------------------------- */
  --aura-border-hairline: 1px solid var(--aura-line);
  --aura-border-glass: 1px solid var(--aura-glass-border);

  /* --- Motion --------------------------------------------------------- */
  /* Easings split from durations so either can be reused independently. */
  --aura-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --aura-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --aura-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
  --aura-dur-quick: 200ms;
  --aura-dur-standard: 320ms;
  --aura-dur-smooth: 700ms;
  --aura-motion-quick: var(--aura-dur-quick) ease;
  --aura-motion-standard: var(--aura-dur-standard) var(--aura-ease-standard);
  --aura-motion-smooth: var(--aura-dur-smooth) var(--aura-ease-smooth);
  --aura-motion-pop: 420ms var(--aura-ease-pop);
}

/* ==========================================================================
   BASE — luminous mesh field
   ========================================================================== */

.aura-system *,
.aura-system *::before,
.aura-system *::after {
  box-sizing: border-box;
}

.aura-system {
  position: relative;
  min-height: 100vh;
  margin: 0;
  background: var(--aura-paper);
  color: var(--aura-ink);
  font-family: var(--aura-font-sans);
  font-size: var(--aura-text-md);
  font-weight: 400;
  line-height: var(--aura-leading-normal);
  letter-spacing: var(--aura-tracking-ui);
  -webkit-font-smoothing: antialiased;
}

/* The luminous mesh field, glued to the viewport behind all content. A fixed
   layer is more robust than background-attachment:fixed (mobile + capture). */
.aura-system::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--aura-gradient-field);
}

.aura-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: var(--aura-space-4);
}

.aura-system :where(img) { max-width: 100%; display: block; }
.aura-system :where(a) { color: inherit; }

.aura-system :where(:focus-visible) {
  outline: var(--aura-focus-ring);
  outline-offset: var(--aura-focus-offset);
  border-radius: var(--aura-radius-xs);
}

/* Frosted glass surface (composable, single source of the recipe).
   Quiet ambient lift by default — colored glow is added only to emphasis
   surfaces (cards on hover, hero, CTAs, rating) so importance reads. */
.aura-glass-surface,
.aura-section,
.aura-nav,
.aura-product-card,
.aura-proof-card,
.aura-review-quote,
.aura-stat {
  background: var(--aura-surface);
  -webkit-backdrop-filter: var(--aura-glass-blur);
  backdrop-filter: var(--aura-glass-blur);
  border: 1px solid var(--aura-surface-border);
  box-shadow: var(--aura-shadow-ambient), var(--aura-inset-hi);
}

/* Where backdrop-filter is unsupported, fall back to a near-opaque fill so
   text over the luminous field stays legible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .aura-glass-surface,
  .aura-section.glass,
  .aura-nav,
  .aura-product-card,
  .aura-proof-card,
  .aura-review-quote,
  .aura-stat,
  .aura-input,
  .aura-button,
  .aura-chip,
  .aura-icon-btn {
    background-color: var(--aura-glass-solid);
  }
}

/* Floating blurred orbs (decorative; place inside a positioned parent) */
.aura-orb {
  position: absolute;
  z-index: 0;
  width: 22rem;
  height: 22rem;
  border-radius: var(--aura-radius-round);
  filter: blur(48px);
  opacity: 0.7;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--orb, var(--aura-lilac)), transparent 70%);
  animation: aura-float 14s ease-in-out infinite;
}

@keyframes aura-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -22px, 0) scale(1.07); }
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.aura-hero-type {
  margin: 0;
  font-family: var(--aura-font-display);
  font-size: var(--aura-text-hero);
  font-weight: 500; /* airy — the display face carries weight through size, not boldness */
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
}

.aura-display {
  margin: 0;
  font-family: var(--aura-font-display);
  font-size: var(--aura-text-display);
  font-weight: 500;
  line-height: var(--aura-leading-tight);
  letter-spacing: var(--aura-tracking-display);
  text-rendering: optimizeLegibility;
}

.aura-display.serif,
.aura-heading.serif {
  font-family: var(--aura-font-serif);
  font-weight: 500;
  letter-spacing: 0;
}

/* Iridescent gradient text. Default = solid accent (always visible); the
   transparent text-fill is applied ONLY where background-clip:text is
   supported, so the wordmark/headings never disappear on older engines. */
.aura-gradient-text,
.aura-display.gradient,
.aura-hero-type.gradient {
  color: var(--aura-accent);
  background: var(--aura-gradient-aura);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .aura-gradient-text,
  .aura-display.gradient,
  .aura-hero-type.gradient {
    -webkit-text-fill-color: transparent;
  }
  /* High-contrast / forced-colors: restore a solid, system-legible fill. */
  @media (forced-colors: active) {
    .aura-gradient-text,
    .aura-display.gradient,
    .aura-hero-type.gradient {
      -webkit-text-fill-color: currentColor;
      color: CanvasText;
    }
  }
}

.aura-heading {
  margin: 0;
  font-family: var(--aura-font-display);
  font-size: var(--aura-text-xl);
  font-weight: 600;
  line-height: var(--aura-leading-snug);
}

.aura-kicker,
.aura-label {
  margin: 0;
  font-family: var(--aura-font-sans);
  font-size: var(--aura-text-2xs);
  font-weight: 600;
  letter-spacing: var(--aura-tracking-label);
  line-height: 1;
  text-transform: uppercase;
}

.aura-kicker { color: var(--aura-accent); }
.aura-label { color: var(--aura-ink-muted); }

.aura-lede {
  margin: 0;
  max-width: 40rem;
  font-size: var(--aura-text-lg);
  font-weight: 400;
  line-height: var(--aura-leading-normal);
  color: var(--aura-ink-soft);
}

.aura-copy {
  margin: 0;
  max-width: 42rem;
  font-size: var(--aura-text-md);
  line-height: var(--aura-leading-copy);
  color: var(--aura-ink-soft);
}

.aura-muted { color: var(--aura-ink-muted); }

.aura-quote {
  margin: 0;
  font-family: var(--aura-font-serif);
  font-size: var(--aura-text-2xl);
  font-weight: 500;
  font-style: italic;
  line-height: var(--aura-leading-snug);
}

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */

.aura-section {
  margin-block: var(--aura-space-4);
  padding: clamp(1.5rem, 3vw, 3rem);
  border-radius: var(--aura-radius-xl);
}

.aura-section.glass { background: var(--aura-glass); }

.aura-section.dusk {
  background: var(--aura-gradient-dusk);
  color: var(--aura-paper);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--aura-glow-lg);
}

.aura-stack { display: flex; flex-direction: column; gap: var(--aura-space-4); }
.aura-stack.tight { gap: var(--aura-space-2); }
.aura-stack.loose { gap: var(--aura-space-8); }

.aura-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--aura-space-4);
}

.aura-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--aura-space-4);
  margin-bottom: var(--aura-space-6);
}

.aura-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aura-space-3);
}

.aura-divider {
  height: 1px;
  border: 0;
  margin: var(--aura-space-6) 0;
  background: var(--aura-line);
}

/* ==========================================================================
   ANNOUNCE + NAV
   ========================================================================== */

.aura-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--aura-space-3);
  padding: var(--aura-space-3) var(--aura-space-4);
  color: var(--aura-white);
  background: var(--aura-gradient-aura-ink); /* AA-safe with white small text */
  border-radius: var(--aura-radius-pill);
  font-size: var(--aura-text-2xs);
  font-weight: 600;
  letter-spacing: var(--aura-tracking-label);
  text-transform: uppercase;
}

.aura-announce a { color: var(--aura-white); text-underline-offset: 0.2rem; }

.aura-nav {
  position: sticky;
  top: var(--aura-space-4);
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--aura-space-4);
  margin-top: var(--aura-space-3);
  padding: var(--aura-space-4) clamp(1rem, 3vw, 2rem);
  border-radius: var(--aura-radius-pill);
}

.aura-logo {
  font-family: var(--aura-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--aura-tracking-display);
  text-decoration: none;
}

.aura-nav-group { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }
.aura-nav-group:last-child { justify-content: flex-end; }

.aura-link {
  font-size: var(--aura-text-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--aura-ink-soft);
  transition: color var(--aura-motion-quick);
}

.aura-link:hover,
.aura-link:focus-visible { color: var(--aura-accent); }

.aura-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;  /* 44px touch target */
  height: 2.75rem;
  cursor: pointer;
  color: var(--aura-on-surface);
  background: var(--aura-surface-2);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-round);
  transition: background var(--aura-motion-quick), box-shadow var(--aura-motion-quick),
    transform var(--aura-motion-quick);
}

.aura-icon-btn svg { width: 1.25rem; height: 1.25rem; }
.aura-icon-btn .aura-icon-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
}

.aura-icon-btn:hover,
.aura-icon-btn:focus-visible {
  background: var(--aura-white);
  box-shadow: var(--aura-glow-violet);
  transform: translateY(-1px) scale(1.06);
}

.aura-icon-btn:active { transform: scale(0.94); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.aura-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aura-space-2);
  min-height: 2.85rem;
  padding: 0.75rem 1.7rem;
  font: inherit;
  font-size: var(--aura-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  color: var(--aura-ink);
  background: var(--aura-glass-strong);
  border: var(--aura-border-glass);
  border-radius: var(--aura-radius-pill);
  box-shadow: var(--aura-inset-hi);
  transition: transform var(--aura-motion-quick), box-shadow var(--aura-motion-standard),
    background var(--aura-motion-standard), color var(--aura-motion-standard);
}

.aura-button:hover,
.aura-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--aura-glow-soft), var(--aura-inset-hi);
}

.aura-button:active { transform: translateY(1px) scale(0.98); transition-duration: 90ms; }

.aura-button.primary {
  color: var(--aura-white);
  background: var(--aura-accent);
  border-color: transparent;
}

.aura-button.primary:hover,
.aura-button.primary:focus-visible { box-shadow: var(--aura-glow-violet); }

/* Iridescent CTA — AA-safe darker gradient; hover slides the hue band. */
.aura-button.aura {
  color: var(--aura-white);
  background: var(--aura-gradient-aura-ink);
  background-size: 170% 170%;
  background-position: 0% 50%;
  border-color: transparent;
  font-weight: 600;
  transition: transform var(--aura-motion-quick), box-shadow var(--aura-motion-standard),
    background-position var(--aura-motion-smooth);
}

.aura-button.aura:hover,
.aura-button.aura:focus-visible {
  box-shadow: var(--aura-glow-pink);
  background-position: 100% 50%;
}

.aura-button.glass { background: var(--aura-glass); }

/* Size variants */
.aura-button.sm { min-height: var(--aura-control-h-sm); padding: 0.5rem 1.1rem; font-size: var(--aura-text-2xs); }
.aura-button.lg { min-height: var(--aura-control-h-lg); padding: 0.95rem 2.1rem; font-size: var(--aura-text-md); }

.aura-button.text {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--aura-accent);
}

.aura-button.text:hover,
.aura-button.text:focus-visible {
  transform: none;
  box-shadow: none;
  color: var(--aura-accent-deep);
}

.aura-button.block { width: 100%; }

.aura-button[disabled],
.aura-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

/* ==========================================================================
   CHIPS & SWATCHES
   ========================================================================== */

.aura-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.9rem;
  padding: 0.4rem 0.85rem;
  font-size: var(--aura-text-2xs);
  font-weight: 600;
  letter-spacing: var(--aura-tracking-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--aura-ink);
  background: var(--aura-glass);
  border: var(--aura-border-glass);
  border-radius: var(--aura-radius-pill);
}

.aura-chip.glow {
  color: var(--aura-white);
  background: var(--aura-gradient-aura-ink);
  border-color: transparent;
}

/* Tinted chips — solid fallback first, color-mix where supported. */
.aura-chip.violet { color: var(--aura-accent-deep); background: #e7e2ff; background: color-mix(in srgb, var(--aura-violet) 18%, white); border-color: transparent; }
.aura-chip.cyan { color: #11675f; background: #d2f6f3; background: color-mix(in srgb, var(--aura-cyan) 22%, white); border-color: transparent; }
.aura-chip.pink { color: #a81a59; background: #ffe2ee; background: color-mix(in srgb, var(--aura-pink) 18%, white); border-color: transparent; }

/* Commerce / status chips */
.aura-chip.sale { color: #fff; background: var(--aura-sale); border-color: transparent; }
.aura-chip.success,
.aura-chip.in-stock { color: #0d5e44; background: var(--aura-success-soft); border-color: transparent; }
.aura-chip.warning,
.aura-chip.low-stock { color: #7c5300; background: var(--aura-warning-soft); border-color: transparent; }
.aura-chip.sold-out { color: #fff; background: var(--aura-soldout); border-color: transparent; }
.aura-chip.sm { min-height: 1.5rem; padding: 0.28rem 0.6rem; }

.aura-swatch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aura-space-2);
}

.aura-swatch {
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--aura-glass-border);
  border-radius: var(--aura-radius-round);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.85), transparent 45%),
    var(--aura-swatch, var(--aura-lilac));
  box-shadow: var(--aura-shadow-ambient);
  transition: transform var(--aura-motion-pop), box-shadow var(--aura-motion-quick);
}

/* Expand the touch target to ≥44px without enlarging the dot. */
.aura-swatch::before {
  content: "";
  position: absolute;
  width: var(--aura-tap-min);
  height: var(--aura-tap-min);
}

.aura-swatch:hover { transform: scale(1.12); }
.aura-swatch:active { transform: scale(0.95); }

.aura-swatch.selected {
  box-shadow: 0 0 0 3px var(--aura-paper), 0 0 0 4px var(--aura-accent);
}

/* Non-color "selected" affordance — a checkmark that reads on any tint. */
.aura-swatch.selected::after {
  content: "";
  width: 0.62rem;
  height: 0.34rem;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  border-radius: 1px;
  transform: translateY(-12%) rotate(-45deg);
  filter: drop-shadow(0 1px 1.5px rgba(20, 12, 40, 0.5));
}

.aura-swatch[aria-disabled="true"],
.aura-swatch:disabled { opacity: 0.4; cursor: not-allowed; }

/* ==========================================================================
   PRODUCT STAGE · GLOW · GLASSY RENDERS
   ========================================================================== */

.aura-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 22rem;
  overflow: hidden;
  border-radius: var(--aura-radius-xl);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.5), transparent 60%),
    var(--aura-gradient-field);
}

.aura-stage.tall { min-height: 30rem; }

.aura-glow {
  position: absolute;
  width: 66%;
  aspect-ratio: 1;
  transform: translateY(9%);
  border-radius: var(--aura-radius-round);
  filter: blur(46px);
  background: radial-gradient(circle at 50% 46%, var(--tone, var(--aura-violet)), transparent 70%);
  opacity: 0.55; /* the product, not the halo, should be the brightest thing */
  will-change: transform, opacity;
  animation: aura-glow-breathe 7s var(--aura-ease-smooth) infinite;
}

@keyframes aura-glow-breathe {
  0%, 100% { transform: translateY(9%) scale(1); opacity: 0.5; }
  50% { transform: translateY(9%) scale(1.07); opacity: 0.64; }
}

.aura-bottle {
  position: relative;
  z-index: 1;
  width: var(--aura-bottle-w);
  aspect-ratio: var(--aura-bottle-aspect);
  border-radius: var(--aura-bottle-shoulder) var(--aura-bottle-shoulder)
    var(--aura-bottle-foot) var(--aura-bottle-foot);
  /* clear glass body + a single specular streak so it reads as volume, not a flat rect */
  background:
    linear-gradient(116deg, transparent 15%, rgba(255, 255, 255, 0.92) 23%,
      rgba(255, 255, 255, 0.12) 29%, transparent 37%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2) 55%, rgba(255, 255, 255, 0.32));
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--aura-glow-lg), inset 0 2px 8px rgba(255, 255, 255, 0.7),
    inset 0 -16px 28px color-mix(in srgb, var(--tone, var(--aura-lilac)) 24%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* cap */
.aura-bottle::before {
  content: "";
  position: absolute;
  inset: -7% 30% auto 30%;
  height: 15%;
  border-radius: 2rem 2rem 0.6rem 0.6rem;
  background: var(--tone, var(--aura-violet));
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85),
    color-mix(in srgb, var(--tone, var(--aura-violet)) 45%, white));
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* liquid fill + meniscus line */
.aura-bottle::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 5%;
  height: 46%;
  border-radius: 0.5rem 0.5rem calc(var(--aura-bottle-foot) - 3px) calc(var(--aura-bottle-foot) - 3px);
  background: var(--tone, var(--aura-lilac));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tone, var(--aura-lilac)) 58%, transparent),
    color-mix(in srgb, var(--tone, var(--aura-lilac)) 88%, transparent));
  border-top: 2px solid rgba(255, 255, 255, 0.72);
}

.aura-bottle.dropper { aspect-ratio: 0.42; border-radius: 2.6rem 2.6rem 1.2rem 1.2rem; }
.aura-bottle.jar { width: min(13rem, 52vw); aspect-ratio: 1.15; border-radius: 2.4rem; }
.aura-bottle.jar::before { inset: -6% 10% auto 10%; height: 20%; }
.aura-bottle.jar::after { height: 54%; }
.aura-bottle.tube { width: min(7rem, 36vw); aspect-ratio: 0.34; border-radius: 1.2rem 1.2rem 3rem 3rem; }
.aura-bottle.compact { width: min(12rem, 50vw); aspect-ratio: 1.5; border-radius: var(--aura-radius-pill); }
.aura-bottle.compact::before { content: none; }
.aura-bottle.compact::after { content: none; } /* powder — no liquid fill */

/* ==========================================================================
   HERO
   ========================================================================== */

.aura-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: stretch;
  overflow: hidden;
  margin-top: var(--aura-space-4);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--aura-radius-2xl);
}

.aura-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--aura-space-5);
  padding: clamp(0.5rem, 2vw, 1.5rem);
}

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */

.aura-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--aura-space-4);
}

.aura-card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.aura-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--aura-radius-lg);
  /* resting glow already present, so hover intensifies rather than introduces it */
  box-shadow: 0 14px 40px rgba(123, 92, 255, 0.12), var(--aura-inset-hi);
  transition: transform var(--aura-motion-standard), box-shadow var(--aura-motion-standard);
}

.aura-product-card:hover,
.aura-product-card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--aura-glow-violet), var(--aura-inset-hi);
}

.aura-product-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 16rem;
  padding: var(--aura-space-6);
  overflow: hidden;
}

.aura-product-badge { position: absolute; top: var(--aura-space-3); left: var(--aura-space-3); z-index: 2; }

.aura-product-body {
  display: flex;
  flex-direction: column;
  gap: var(--aura-space-3);
  padding: var(--aura-space-5);
}

.aura-product-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--aura-space-3);
}

.aura-product-title h3 {
  margin: 0;
  font-family: var(--aura-font-display);
  font-size: var(--aura-text-lg);
  font-weight: 600;
  line-height: var(--aura-leading-tight);
}

.aura-product-price { font-size: var(--aura-text-sm); font-weight: 500; white-space: nowrap; }

.aura-product-desc {
  margin: 0;
  font-size: var(--aura-text-sm);
  font-weight: 400; /* 300 was too thin at 14px */
  line-height: var(--aura-leading-normal);
  color: var(--aura-ink-soft);
}

.aura-product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aura-space-3);
  margin-top: var(--aura-space-2);
}

/* ==========================================================================
   PDP HIGHLIGHT
   ========================================================================== */

.aura-pdp {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: stretch;
}

.aura-pdp .aura-stage { min-height: 30rem; }

.aura-pdp-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--aura-space-5);
}

.aura-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--aura-space-3);
}

.aura-stat {
  display: flex;
  flex-direction: column;
  gap: var(--aura-space-2);
  padding: var(--aura-space-4);
  border-radius: var(--aura-radius-md);
}

.aura-stat strong {
  font-family: var(--aura-font-display);
  font-size: var(--aura-text-2xl);
  font-weight: 600;
  line-height: 1;
}

/* ==========================================================================
   PROOF / INGREDIENT MODULES
   ========================================================================== */

.aura-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--aura-space-4);
}

.aura-proof-card {
  display: flex;
  flex-direction: column;
  gap: var(--aura-space-4);
  min-height: 12rem;
  padding: var(--aura-space-5);
  border-radius: var(--aura-radius-md);
}

.aura-proof-card strong {
  display: block;
  margin-top: auto;
  font-family: var(--aura-font-display);
  font-size: var(--aura-text-lg);
  font-weight: 500;
  line-height: var(--aura-leading-tight);
}

.aura-ingredient-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--aura-space-6);
}

.aura-ingredient {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aura-space-3);
  text-align: center;
}

.aura-ingredient-portrait {
  --hl-x: 34%; /* per-orb overridable so highlights aren't stamped identically */
  --hl-y: 26%;
  width: clamp(5rem, 12vw, 8.5rem);
  aspect-ratio: 1;
  border-radius: var(--aura-radius-round);
  background: var(--tone, var(--aura-lilac));
  background:
    radial-gradient(circle at var(--hl-x) var(--hl-y), rgba(255, 255, 255, 0.96), transparent 42%),
    radial-gradient(circle at 82% 86%, color-mix(in srgb, var(--tone, var(--aura-lilac)) 74%, #1a1430), transparent 56%),
    radial-gradient(circle at 60% 58%, var(--tone, var(--aura-lilac)),
      color-mix(in srgb, var(--tone, var(--aura-lilac)) 50%, white));
  box-shadow: 0 22px 55px rgba(140, 120, 255, 0.3),
    inset 0 3px 9px rgba(255, 255, 255, 0.85), inset 0 -12px 22px rgba(58, 46, 98, 0.28);
  box-shadow:
    0 22px 55px color-mix(in srgb, var(--tone, var(--aura-lilac)) 42%, transparent),
    inset 0 3px 9px rgba(255, 255, 255, 0.85),
    inset 0 -12px 22px color-mix(in srgb, var(--tone, var(--aura-lilac)) 38%, #2a2342);
}

/* ==========================================================================
   EDITORIAL SPLIT (serif)
   ========================================================================== */

.aura-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}

.aura-editorial-copy {
  display: flex;
  flex-direction: column;
  gap: var(--aura-space-5);
  padding: clamp(0.5rem, 2vw, 2rem);
}

.aura-editorial-media {
  position: relative;
  min-height: 26rem;
  overflow: hidden;
  border-radius: var(--aura-radius-xl);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), transparent 55%),
    var(--aura-gradient-aura);
}

/* ==========================================================================
   REVIEW / RATING
   ========================================================================== */

.aura-review {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: var(--aura-space-4);
  align-items: stretch;
}

.aura-rating {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--aura-space-4);
  padding: var(--aura-space-6);
  color: var(--aura-white);
  background: var(--aura-gradient-aura-ink);
  border-radius: var(--aura-radius-lg);
  box-shadow: var(--aura-glow-violet);
}

.aura-rating strong {
  font-family: var(--aura-font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 600;
  line-height: 0.9;
}

.aura-stars { font-size: var(--aura-text-lg); letter-spacing: 0.15em; }

.aura-review-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--aura-space-4);
  padding: var(--aura-space-8);
  border-radius: var(--aura-radius-lg);
}

/* ==========================================================================
   SOCIAL STRIP
   ========================================================================== */

.aura-social-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--aura-space-2);
}

.aura-social-tile {
  aspect-ratio: 1;
  border-radius: var(--aura-radius-md);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.7), transparent 45%),
    linear-gradient(150deg, var(--tile-a, var(--aura-lilac)), var(--tile-b, var(--aura-aqua)));
  box-shadow: var(--aura-glow-soft);
}

/* ==========================================================================
   SIGNUP / FIELD
   ========================================================================== */

.aura-signup {
  display: flex;
  flex-direction: column;
  gap: var(--aura-space-4);
  max-width: 32rem;
}

.aura-field { display: flex; gap: var(--aura-space-2); }

.aura-input {
  flex: 1;
  width: 100%;
  min-height: var(--aura-control-h);
  padding: 0.75rem 1.2rem;
  font: inherit;
  font-size: var(--aura-text-md); /* ≥16px avoids iOS zoom-on-focus */
  color: var(--aura-on-surface);
  background: var(--aura-surface);
  -webkit-backdrop-filter: var(--aura-glass-blur);
  backdrop-filter: var(--aura-glass-blur);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-pill);
  box-shadow: var(--aura-inset-hi);
  transition: border-color var(--aura-motion-quick), box-shadow var(--aura-motion-standard);
}

.aura-input::placeholder { color: var(--aura-on-surface-muted); opacity: 1; }

/* Keep a solid, AA-compliant focus indicator AND bloom a soft glow. */
.aura-input:focus-visible {
  outline: var(--aura-focus-ring);
  outline-offset: 1px;
  border-color: var(--aura-accent);
  box-shadow: var(--aura-inset-hi),
    0 0 0 4px color-mix(in srgb, var(--aura-violet) 20%, transparent);
}

.aura-input.has-error { border-color: var(--aura-error); }
.aura-input.has-error:focus-visible {
  outline-color: var(--aura-error);
  box-shadow: var(--aura-inset-hi), 0 0 0 4px color-mix(in srgb, var(--aura-error) 20%, transparent);
}

textarea.aura-input { border-radius: var(--aura-radius-md); resize: vertical; min-height: 7rem; }

/* ==========================================================================
   FOOTER (dusk)
   ========================================================================== */

.aura-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--aura-space-8);
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-top: var(--aura-space-4);
  color: var(--aura-paper);
  background: var(--aura-gradient-dusk);
  border-radius: var(--aura-radius-2xl);
  box-shadow: var(--aura-glow-lg);
}

.aura-footer a {
  display: block;
  margin-bottom: var(--aura-space-2);
  font-size: var(--aura-text-sm);
  color: rgba(247, 245, 251, 0.82); /* AA on the lightest dusk stop */
  text-decoration: none;
  transition: color var(--aura-motion-quick);
}

.aura-footer a:hover,
.aura-footer a:focus-visible { color: var(--aura-white); }
.aura-footer .aura-logo { color: var(--aura-paper); }
.aura-footer .aura-label { color: rgba(247, 245, 251, 0.85); }
.aura-footer .aura-copy { color: rgba(247, 245, 251, 0.85); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .aura-nav,
  .aura-hero,
  .aura-pdp,
  .aura-editorial,
  .aura-review,
  .aura-footer {
    grid-template-columns: 1fr;
  }

  .aura-nav-group,
  .aura-nav-group:last-child { justify-content: center; }

  .aura-card-grid,
  .aura-card-grid.cols-4,
  .aura-proof-grid,
  .aura-ingredient-grid,
  .aura-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aura-social-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .aura-card-grid,
  .aura-card-grid.cols-4,
  .aura-proof-grid,
  .aura-ingredient-grid,
  .aura-two-col,
  .aura-stat-grid {
    grid-template-columns: 1fr;
  }

  .aura-field { flex-direction: column; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .aura-system *,
  .aura-system *::before,
  .aura-system *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   MOTION — living field, de-synced orbs, reveals (all reduced-motion-safe)
   Default states are the *resting/visible* states, so anything gated below
   simply doesn't run when motion is reduced or the feature is unsupported.
   ========================================================================== */

/* Asymmetric field + a slow drift. Oversized so the drift never reveals an
   edge; transform-only so it stays on the compositor. */
.aura-system::before {
  inset: -6%;
  background: var(--aura-gradient-field-drift);
}

/* Richer float with a touch of x + rotation for the orbs. */
@keyframes aura-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(2%, -22px, 0) scale(1.07) rotate(1.5deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .aura-system::before { animation: aura-field-drift 52s ease-in-out infinite alternate; }

  /* De-sync orbs so they never pulse in lockstep. */
  .aura-orb:nth-of-type(2n) { animation-duration: 18s; animation-direction: alternate-reverse; }
  .aura-orb:nth-of-type(3n) { animation-duration: 22s; animation-delay: -7s; }
  .aura-orb:nth-of-type(4n) { animation-duration: 16s; animation-direction: alternate; }
}

@keyframes aura-field-drift {
  0% { transform: translate3d(0, 0, 0) scale(1.02) rotate(0deg); }
  50% { transform: translate3d(-1.6%, 1.2%, 0) scale(1.06) rotate(0.6deg); }
  100% { transform: translate3d(1.4%, -1%, 0) scale(1.03) rotate(-0.5deg); }
}

/* Scroll-reveal — CSS-only, progressive. Hidden start ONLY when motion is
   allowed AND scroll timelines are supported; otherwise content is just there. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .aura-reveal {
      animation: aura-reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .aura-reveal.delay { animation-range: entry 6% entry 62%; }
  }
}

@keyframes aura-reveal-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* Nav condenses as the page scrolls (CSS scroll timeline, guarded). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .aura-nav.condense {
      animation: aura-nav-condense linear both;
      animation-timeline: scroll(root);
      animation-range: 0 140px;
    }
  }
}

@keyframes aura-nav-condense {
  to {
    padding-block: 0.55rem;
    background-color: var(--aura-glass-strong);
    box-shadow: var(--aura-glow-soft), var(--aura-inset-hi);
  }
}

/* Opt-in shimmer for a hero gradient word. */
.aura-gradient-text.shimmer {
  background-size: 220% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .aura-gradient-text.shimmer { animation: aura-shimmer 6s linear infinite; }
}
@keyframes aura-shimmer {
  to { background-position: 220% 0; }
}

/* Generic hover-lift utility. */
.aura-lift { transition: transform var(--aura-motion-standard), box-shadow var(--aura-motion-standard); }
.aura-lift:hover { transform: translateY(-4px); box-shadow: var(--aura-glow-soft), var(--aura-inset-hi); }

/* ==========================================================================
   COMMERCE · breadcrumbs · price · variants · quantity · buy bar
   ========================================================================== */

.aura-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--aura-text-xs);
  color: var(--aura-on-surface-muted);
}
.aura-breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.aura-breadcrumb a { color: var(--aura-on-surface-muted); text-decoration: none; }
.aura-breadcrumb a:hover,
.aura-breadcrumb a:focus-visible { color: var(--aura-accent); }
.aura-breadcrumb [aria-current="page"] { color: var(--aura-on-surface); }
.aura-breadcrumb .sep { opacity: 0.45; }

/* Price + sale / compare-at */
.aura-price { display: inline-flex; align-items: baseline; gap: 0.5rem; font-weight: 500; }
.aura-price .now { color: var(--aura-on-surface); }
.aura-price .was { color: var(--aura-on-surface-muted); text-decoration: line-through; font-weight: 400; }
.aura-price.on-sale .now { color: var(--aura-sale); }
.aura-price .save {
  font-size: var(--aura-text-2xs);
  font-weight: 600;
  letter-spacing: var(--aura-tracking-label);
  text-transform: uppercase;
  color: var(--aura-sale);
  background: var(--aura-sale-soft);
  padding: 0.18rem 0.55rem;
  border-radius: var(--aura-radius-pill);
}

/* Variant / size selector — real radios, :has() with .is-selected fallback */
.aura-variants { display: flex; flex-direction: column; gap: var(--aura-space-3); }
.aura-variant-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aura-variant-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.aura-variant-head .chosen { color: var(--aura-on-surface-muted); font-size: var(--aura-text-sm); }
.aura-variant {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--aura-control-h-sm);
  padding: 0.5rem 1rem;
  font-size: var(--aura-text-sm);
  font-weight: 500;
  cursor: pointer;
  color: var(--aura-on-surface);
  background: var(--aura-surface);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-pill);
  transition: border-color var(--aura-motion-quick), box-shadow var(--aura-motion-quick), transform var(--aura-motion-quick);
}
.aura-variant input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.aura-variant:hover { transform: translateY(-1px); }
.aura-variant.is-selected,
.aura-variant:has(input:checked) {
  border-color: var(--aura-accent);
  box-shadow: inset 0 0 0 1px var(--aura-accent);
  color: var(--aura-accent-deep);
}
.aura-variant:has(input:focus-visible) { outline: var(--aura-focus-ring); outline-offset: 2px; }
.aura-variant .delta { font-size: var(--aura-text-2xs); color: var(--aura-on-surface-muted); }
.aura-variant.is-soldout,
.aura-variant:has(input:disabled) {
  color: var(--aura-soldout);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

/* Quantity stepper */
.aura-qty {
  display: inline-flex;
  align-items: center;
  background: var(--aura-surface);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-pill);
  box-shadow: var(--aura-inset-hi);
}
.aura-qty button {
  width: var(--aura-control-h);
  height: var(--aura-control-h);
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  background: none;
  border: 0;
  color: var(--aura-on-surface);
  border-radius: var(--aura-radius-round);
  transition: background var(--aura-motion-quick), transform var(--aura-motion-quick);
}
.aura-qty button:hover { background: color-mix(in srgb, var(--aura-violet) 12%, transparent); }
.aura-qty button:active { transform: scale(0.9); }
.aura-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.aura-qty input {
  width: 2.75rem;
  text-align: center;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--aura-on-surface);
  -moz-appearance: textfield;
}
.aura-qty input::-webkit-outer-spin-button,
.aura-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Sticky add-to-cart bar */
.aura-buybar {
  position: sticky;
  bottom: var(--aura-space-4);
  z-index: var(--aura-z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aura-space-4);
  padding: 0.7rem 0.7rem 0.7rem 1.25rem;
  background: var(--aura-surface);
  -webkit-backdrop-filter: var(--aura-glass-blur);
  backdrop-filter: var(--aura-glass-blur);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-pill);
  box-shadow: var(--aura-glow-lg), var(--aura-inset-hi);
}
.aura-buybar-info { display: flex; flex-direction: column; gap: 0.1rem; margin-right: auto; }
.aura-buybar-info strong { font-family: var(--aura-font-display); font-weight: 600; }

/* ==========================================================================
   COMMERCE · PDP tabs + native accordion
   ========================================================================== */

.aura-tabs { display: flex; flex-direction: column; gap: var(--aura-space-5); }
.aura-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--aura-line);
}
.aura-tab {
  appearance: none;
  padding: 0.7rem 1.1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: var(--aura-on-surface-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--aura-motion-quick), border-color var(--aura-motion-quick);
}
.aura-tab:hover { color: var(--aura-on-surface); }
.aura-tab[aria-selected="true"] { color: var(--aura-accent-deep); border-bottom-color: var(--aura-accent); }
.aura-tabpanel[hidden] { display: none; }

.aura-accordion { display: flex; flex-direction: column; gap: 0.5rem; }
.aura-accordion details {
  background: var(--aura-surface);
  -webkit-backdrop-filter: var(--aura-glass-blur);
  backdrop-filter: var(--aura-glass-blur);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-md);
  box-shadow: var(--aura-inset-hi);
}
.aura-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--aura-space-4) var(--aura-space-5);
  cursor: pointer;
  font-family: var(--aura-font-display);
  font-weight: 600;
  list-style: none;
}
.aura-accordion summary::-webkit-details-marker { display: none; }
.aura-accordion summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--aura-on-surface-muted);
  border-bottom: 2px solid var(--aura-on-surface-muted);
  transform: rotate(45deg);
  transition: transform var(--aura-motion-quick);
}
.aura-accordion details[open] summary::after { transform: rotate(-135deg); }
.aura-accordion .acc-body { padding: 0 var(--aura-space-5) var(--aura-space-5); color: var(--aura-on-surface-soft); }

/* ==========================================================================
   COMMERCE · reviews (summary · histogram · stars · star-input · cards)
   ========================================================================== */

.aura-reviews { display: grid; grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1.2fr); gap: var(--aura-space-6); align-items: start; }
.aura-review-summary {
  display: flex;
  flex-direction: column;
  gap: var(--aura-space-4);
  padding: var(--aura-space-6);
  border-radius: var(--aura-radius-lg);
  background: var(--aura-surface);
  -webkit-backdrop-filter: var(--aura-glass-blur);
  backdrop-filter: var(--aura-glass-blur);
  border: 1px solid var(--aura-surface-border);
  box-shadow: var(--aura-shadow-ambient), var(--aura-inset-hi);
}
.aura-review-score { display: flex; align-items: baseline; gap: 0.75rem; }
.aura-review-score strong { font-family: var(--aura-font-display); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 600; line-height: 1; }

/* Read-only stars driven by --rating (0–5), supports fractional fills. */
.aura-stars-view {
  --rating: 5;
  position: relative;
  display: inline-block;
  font-size: var(--aura-text-lg);
  line-height: 1;
}
.aura-stars-view::before { content: "★★★★★"; letter-spacing: 0.12em; color: var(--aura-line); }
.aura-stars-view::after {
  content: "★★★★★";
  letter-spacing: 0.12em;
  position: absolute;
  inset: 0;
  width: calc(var(--rating) / 5 * 100%);
  overflow: hidden;
  white-space: nowrap;
  background: var(--aura-gradient-aura);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.aura-histogram { display: flex; flex-direction: column; gap: 0.45rem; }
.aura-histogram-row { display: grid; grid-template-columns: 2.5rem 1fr 2.75rem; align-items: center; gap: 0.6rem; font-size: var(--aura-text-xs); color: var(--aura-on-surface-muted); }
.aura-histogram-bar { height: 0.5rem; border-radius: var(--aura-radius-pill); background: var(--aura-line); overflow: hidden; }
.aura-histogram-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--aura-gradient-aura); }

/* Interactive star input (reverse-order radios → hover/check fills leftward) */
.aura-star-input { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
.aura-star-input input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.aura-star-input label { font-size: 1.6rem; line-height: 1; color: var(--aura-line); cursor: pointer; transition: color var(--aura-motion-quick), transform var(--aura-motion-quick); }
.aura-star-input label::before { content: "★"; }
.aura-star-input input:checked ~ label,
.aura-star-input label:hover,
.aura-star-input label:hover ~ label { color: var(--aura-pink); }
.aura-star-input label:hover { transform: scale(1.18); }
.aura-star-input input:focus-visible + label { outline: var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }

.aura-review-list { display: flex; flex-direction: column; gap: var(--aura-space-4); }
.aura-review-card {
  display: flex;
  flex-direction: column;
  gap: var(--aura-space-3);
  padding: var(--aura-space-5);
  border-radius: var(--aura-radius-md);
  background: var(--aura-surface);
  -webkit-backdrop-filter: var(--aura-glass-blur);
  backdrop-filter: var(--aura-glass-blur);
  border: 1px solid var(--aura-surface-border);
  box-shadow: var(--aura-shadow-ambient), var(--aura-inset-hi);
}
.aura-review-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.aura-review-author { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.aura-review-avatar { width: 2.2rem; height: 2.2rem; border-radius: var(--aura-radius-round); display: grid; place-items: center; color: #fff; font-size: var(--aura-text-xs); font-weight: 700; background: var(--aura-gradient-aura-ink); }
.aura-review-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aura-review-photo {
  width: 4rem;
  height: 4rem;
  border-radius: var(--aura-radius-sm);
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.6), transparent 50%),
    linear-gradient(150deg, var(--tile-a, var(--aura-lilac)), var(--tile-b, var(--aura-aqua)));
  box-shadow: var(--aura-shadow-ambient);
}
.aura-verified { font-size: var(--aura-text-2xs); color: var(--aura-success); font-weight: 600; }

/* Screen-reader-only utility (accessible names for star widgets etc.) */
.aura-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   COMMERCE · PLP toolbar · filters · sort · pagination
   ========================================================================== */

.aura-plp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--aura-space-3); }
.aura-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.aura-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--aura-control-h-sm);
  padding: 0.45rem 0.5rem 0.45rem 0.95rem;
  font-size: var(--aura-text-sm);
  font-weight: 500;
  color: var(--aura-on-surface);
  background: var(--aura-surface);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-pill);
  cursor: pointer;
}
.aura-filter .x {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--aura-violet) 14%, transparent);
}
.aura-filter.is-active { border-color: var(--aura-accent); color: var(--aura-accent-deep); }
.aura-result-count { font-size: var(--aura-text-sm); color: var(--aura-on-surface-muted); }

.aura-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; }
.aura-page {
  min-width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  padding: 0 0.6rem;
  font: inherit;
  font-size: var(--aura-text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  color: var(--aura-on-surface);
  background: var(--aura-surface);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-pill);
  transition: transform var(--aura-motion-quick), box-shadow var(--aura-motion-quick);
}
.aura-page:hover { transform: translateY(-1px); box-shadow: var(--aura-shadow-ambient); }
.aura-page[aria-current="page"] { color: #fff; background: var(--aura-accent); border-color: transparent; }
.aura-page[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ==========================================================================
   OVERLAY · modal · drawer (cart / nav) · toast
   ========================================================================== */

.aura-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--aura-z-overlay);
  display: grid;
  padding: var(--aura-space-4);
  background: rgba(26, 20, 48, 0.5);
  background: color-mix(in srgb, #1a1430 52%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--aura-motion-standard), visibility var(--aura-motion-standard);
}
.aura-overlay.center { place-items: center; }
.aura-overlay.is-open { opacity: 1; visibility: visible; }

.aura-modal {
  width: min(34rem, 100%);
  max-height: calc(100dvh - 2 * var(--aura-space-4));
  overflow: auto;
  padding: var(--aura-space-6);
  border-radius: var(--aura-radius-xl);
  background: var(--aura-surface-solid);
  border: 1px solid var(--aura-surface-border);
  box-shadow: var(--aura-glow-lg);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--aura-motion-standard);
}
.aura-overlay.is-open .aura-modal { transform: none; }
.aura-modal-head,
.aura-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: var(--aura-space-4); }

.aura-drawer {
  width: min(27rem, 100%);
  height: 100%;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: var(--aura-space-6);
  background: var(--aura-surface-solid);
  border-left: 1px solid var(--aura-surface-border);
  box-shadow: var(--aura-glow-lg);
  transform: translateX(100%);
  transition: transform var(--aura-motion-smooth);
}
.aura-overlay.end { padding: 0; }
.aura-overlay.is-open .aura-drawer { transform: none; }
.aura-drawer.left { margin-left: 0; margin-right: auto; border-left: 0; border-right: 1px solid var(--aura-surface-border); transform: translateX(-100%); }

.aura-cart-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--aura-space-3); align-items: center; padding: var(--aura-space-3) 0; border-bottom: 1px solid var(--aura-line); }
.aura-cart-thumb {
  width: 3.4rem;
  height: 4.1rem;
  border-radius: var(--aura-radius-sm);
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.6), transparent 50%),
    linear-gradient(150deg, var(--tile-a, var(--aura-lilac)), var(--tile-b, var(--aura-aqua)));
  box-shadow: var(--aura-shadow-ambient);
}
.aura-cart-meta { display: flex; flex-direction: column; gap: 0.2rem; font-size: var(--aura-text-sm); }
.aura-cart-meta .name { font-weight: 600; }
.aura-cart-meta .opt { color: var(--aura-on-surface-muted); font-size: var(--aura-text-xs); }
.aura-drawer-foot { margin-top: auto; padding-top: var(--aura-space-4); display: flex; flex-direction: column; gap: var(--aura-space-3); }
.aura-cart-total { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--aura-font-display); font-weight: 600; font-size: var(--aura-text-lg); }

.aura-toast-stack {
  position: fixed;
  left: 50%;
  bottom: var(--aura-space-5);
  transform: translateX(-50%);
  z-index: var(--aura-z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(24rem, calc(100% - 2rem));
}
.aura-toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  font-size: var(--aura-text-sm);
  font-weight: 500;
  color: var(--aura-on-surface);
  background: var(--aura-surface-solid);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-pill);
  box-shadow: var(--aura-glow-lg);
}
.aura-toast .dot { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--aura-success); }
.aura-toast.error .dot { background: var(--aura-error); }
.aura-toast .close { margin-left: auto; cursor: pointer; background: none; border: 0; color: var(--aura-on-surface-muted); font-size: 1.1rem; line-height: 1; }

/* ==========================================================================
   FORMS · field · label · help · error · select · check · radio · switch
   ========================================================================== */

.aura-form { display: flex; flex-direction: column; gap: var(--aura-space-5); }
.aura-form-row { display: grid; gap: var(--aura-space-2); }
.aura-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aura-space-4); }
.aura-form-label { font-size: var(--aura-text-sm); font-weight: 600; color: var(--aura-on-surface); }
.aura-form-label .req { color: var(--aura-sale); }
.aura-help { font-size: var(--aura-text-xs); color: var(--aura-on-surface-muted); }
.aura-error-text { display: flex; align-items: center; gap: 0.35rem; font-size: var(--aura-text-xs); font-weight: 500; color: var(--aura-error); }

.aura-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--aura-control-h);
  padding: 0.6rem 2.4rem 0.6rem 1.1rem;
  font: inherit;
  font-size: var(--aura-text-sm);
  color: var(--aura-on-surface);
  background-color: var(--aura-surface);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--aura-on-surface-muted) 50%),
    linear-gradient(135deg, var(--aura-on-surface-muted) 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.9rem center;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-pill);
  -webkit-backdrop-filter: var(--aura-glass-blur);
  backdrop-filter: var(--aura-glass-blur);
  cursor: pointer;
}
.aura-select:focus-visible { outline: var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-accent); }

.aura-checkbox,
.aura-radio { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; font-size: var(--aura-text-sm); color: var(--aura-on-surface-soft); }
.aura-checkbox input,
.aura-radio input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0.1rem 0 0; accent-color: var(--aura-accent); }

.aura-switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: var(--aura-text-sm); }
.aura-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aura-switch .track { position: relative; width: 2.7rem; height: 1.55rem; border-radius: var(--aura-radius-pill); background: var(--aura-line); transition: background var(--aura-motion-quick); }
.aura-switch .track::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; box-shadow: var(--aura-shadow-ambient); transition: transform var(--aura-motion-standard); }
.aura-switch input:checked + .track { background: var(--aura-accent); }
.aura-switch input:checked + .track::after { transform: translateX(1.15rem); }
.aura-switch input:focus-visible + .track { outline: var(--aura-focus-ring); outline-offset: 2px; }

/* Selectable choice card (finder / bundle / subscribe / radios-as-cards) */
.aura-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--aura-space-4);
  text-align: left;
  cursor: pointer;
  color: var(--aura-on-surface);
  background: var(--aura-surface-2);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-md);
  transition: border-color var(--aura-motion-quick), box-shadow var(--aura-motion-quick), transform var(--aura-motion-quick);
}
.aura-choice:hover { transform: translateY(-2px); }
.aura-choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.aura-choice .title { font-weight: 600; }
.aura-choice .sub { font-size: var(--aura-text-xs); color: var(--aura-on-surface-muted); }
.aura-choice.is-selected,
.aura-choice:has(input:checked) { border-color: var(--aura-accent); box-shadow: inset 0 0 0 1px var(--aura-accent), var(--aura-shadow-ambient); }
.aura-choice:has(input:focus-visible) { outline: var(--aura-focus-ring); outline-offset: 2px; }

/* ==========================================================================
   COMMERCE · finder · bundle · subscribe
   ========================================================================== */

.aura-finder, .aura-bundle-summary, .aura-subscribe {
  background: var(--aura-surface);
  -webkit-backdrop-filter: var(--aura-glass-blur);
  backdrop-filter: var(--aura-glass-blur);
  border: 1px solid var(--aura-surface-border);
  box-shadow: var(--aura-shadow-ambient), var(--aura-inset-hi);
}
.aura-finder { display: flex; flex-direction: column; gap: var(--aura-space-5); padding: var(--aura-space-6); border-radius: var(--aura-radius-xl); }
.aura-finder-steps { display: flex; gap: 0.45rem; }
.aura-finder-steps .step { flex: 1; height: 0.4rem; border-radius: var(--aura-radius-pill); background: var(--aura-line); }
.aura-finder-steps .step.done { background: var(--aura-gradient-aura); }
.aura-finder-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--aura-space-3); }
.aura-finder-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.aura-bundle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.62fr); gap: var(--aura-space-5); align-items: start; }
.aura-bundle-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--aura-space-3); }
.aura-bundle-summary { position: sticky; top: var(--aura-space-4); display: flex; flex-direction: column; gap: var(--aura-space-3); padding: var(--aura-space-6); border-radius: var(--aura-radius-lg); }
.aura-bundle-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: var(--aura-text-sm); color: var(--aura-on-surface-soft); }
.aura-bundle-row.total { padding-top: var(--aura-space-3); border-top: 1px solid var(--aura-line); font-family: var(--aura-font-display); font-size: var(--aura-text-lg); font-weight: 600; color: var(--aura-on-surface); }

.aura-subscribe { display: flex; flex-direction: column; gap: var(--aura-space-3); padding: var(--aura-space-5); border-radius: var(--aura-radius-lg); }
.aura-subscribe-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--aura-space-3); }
.aura-subscribe .freq { display: flex; align-items: center; gap: 0.6rem; }
.aura-subscribe .freq .aura-select { flex: 1; }

/* ==========================================================================
   COMMERCE · before / after slider · comparison table
   ========================================================================== */

.aura-ba { --pos: 50%; position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--aura-radius-lg); box-shadow: var(--aura-glow-soft); user-select: none; }
.aura-ba .ba-before,
.aura-ba .ba-after { position: absolute; inset: 0; display: grid; place-items: end start; padding: var(--aura-space-3); }
.aura-ba .ba-before { background: linear-gradient(150deg, #b9a7e6, #8f7bc2); }
.aura-ba .ba-after { background: linear-gradient(150deg, var(--aura-lilac), var(--aura-aqua)); clip-path: inset(0 0 0 var(--pos)); }
.aura-ba .ba-tag { font-size: var(--aura-text-2xs); font-weight: 700; letter-spacing: var(--aura-tracking-label); text-transform: uppercase; color: #fff; background: rgba(26, 20, 48, 0.4); padding: 0.2rem 0.6rem; border-radius: var(--aura-radius-pill); }
.aura-ba .ba-after .ba-tag { margin-left: auto; }
.aura-ba .ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(26, 20, 48, 0.12); }
.aura-ba .ba-handle { position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%); width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--aura-surface-solid); box-shadow: var(--aura-glow-soft); display: grid; place-items: center; color: var(--aura-accent-deep); font-size: 0.9rem; }
.aura-ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.aura-ba input[type="range"]:focus-visible ~ .ba-handle { outline: var(--aura-focus-ring); outline-offset: 2px; }

.aura-table-wrap {
  overflow-x: auto;
  border-radius: var(--aura-radius-lg);
  border: 1px solid var(--aura-surface-border);
  background: var(--aura-surface);
  -webkit-backdrop-filter: var(--aura-glass-blur);
  backdrop-filter: var(--aura-glass-blur);
  box-shadow: var(--aura-shadow-ambient), var(--aura-inset-hi);
}
.aura-table { width: 100%; border-collapse: collapse; font-size: var(--aura-text-sm); }
.aura-table th,
.aura-table td { padding: var(--aura-space-3) var(--aura-space-4); text-align: left; border-bottom: 1px solid var(--aura-line); }
.aura-table thead th { font-family: var(--aura-font-display); font-weight: 600; color: var(--aura-on-surface); }
.aura-table tbody th { font-weight: 500; color: var(--aura-on-surface-soft); }
.aura-table tbody tr:last-child td,
.aura-table tbody tr:last-child th { border-bottom: 0; }
.aura-table .yes { color: var(--aura-success); font-weight: 700; }
.aura-table .no { color: var(--aura-on-surface-muted); }
.aura-table .col-hi { background: rgba(123, 92, 255, 0.07); background: color-mix(in srgb, var(--aura-violet) 7%, transparent); }

/* ==========================================================================
   STATES · skeleton · spinner · empty
   ========================================================================== */

.aura-skeleton { position: relative; overflow: hidden; background: var(--aura-line); border-radius: var(--aura-radius-sm); }
.aura-skeleton.text { height: 0.85rem; border-radius: var(--aura-radius-pill); }
.aura-skeleton.text.short { width: 60%; }
.aura-skeleton.block { height: 11rem; border-radius: var(--aura-radius-md); }
.aura-skeleton.circle { width: 3rem; height: 3rem; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .aura-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: aura-skeleton-shimmer 1.4s ease-in-out infinite;
  }
}
@keyframes aura-skeleton-shimmer { to { transform: translateX(100%); } }

.aura-spinner { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2.5px solid var(--aura-line); border-top-color: var(--aura-accent); animation: aura-spin 0.8s linear infinite; }
@keyframes aura-spin { to { transform: rotate(360deg); } }

.aura-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--aura-space-3); padding: var(--aura-space-12) var(--aura-space-6); }
.aura-empty-orb { width: 4rem; height: 4rem; border-radius: 50%; background: var(--aura-gradient-aura); opacity: 0.85; box-shadow: var(--aura-glow-violet); filter: blur(0.5px); }

/* ==========================================================================
   TRUST ROW · COOKIE · TOOLTIP · VIDEO · WISHLIST
   ========================================================================== */

.aura-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--aura-space-6); padding: var(--aura-space-4); }
.aura-trust-item { display: flex; align-items: center; gap: 0.6rem; font-size: var(--aura-text-sm); font-weight: 500; color: var(--aura-on-surface-soft); }
.aura-trust-item svg { width: 1.4rem; height: 1.4rem; color: var(--aura-accent); }

.aura-cookie {
  position: fixed;
  left: var(--aura-space-4);
  right: var(--aura-space-4);
  bottom: var(--aura-space-4);
  z-index: var(--aura-z-overlay);
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aura-space-4);
  padding: var(--aura-space-4) var(--aura-space-5);
  background: var(--aura-surface-solid);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-lg);
  box-shadow: var(--aura-glow-lg);
}
.aura-cookie p { margin: 0; flex: 1; min-width: 13rem; font-size: var(--aura-text-sm); color: var(--aura-on-surface-soft); }
.aura-cookie .aura-cluster { flex: none; }

.aura-tooltip { position: relative; display: inline-flex; }
.aura-tooltip > .tip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  font-size: var(--aura-text-xs);
  font-weight: 500;
  color: #fff;
  background: #2a2342;
  border-radius: var(--aura-radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--aura-motion-quick), transform var(--aura-motion-quick);
  z-index: var(--aura-z-raised);
}
.aura-tooltip > .tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #2a2342; }
.aura-tooltip:hover > .tip,
.aura-tooltip:focus-within > .tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.aura-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--aura-radius-lg); background: var(--aura-gradient-aura); box-shadow: var(--aura-glow-lg); display: grid; place-items: center; }
.aura-video iframe,
.aura-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.aura-video-play { position: relative; width: 4rem; height: 4rem; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.92); box-shadow: var(--aura-glow-lg); display: grid; place-items: center; transition: transform var(--aura-motion-quick); }
.aura-video-play:hover { transform: scale(1.07); }
.aura-video-play::after { content: ""; margin-left: 0.25rem; border-left: 1rem solid var(--aura-accent-deep); border-top: 0.62rem solid transparent; border-bottom: 0.62rem solid transparent; }

.aura-wishlist {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--aura-on-surface-muted);
  background: var(--aura-surface);
  border: 1px solid var(--aura-surface-border);
  border-radius: 50%;
  transition: transform var(--aura-motion-pop), color var(--aura-motion-quick), box-shadow var(--aura-motion-quick);
}
.aura-wishlist:hover { transform: scale(1.1); box-shadow: var(--aura-glow-pink); }
.aura-wishlist[aria-pressed="true"] { color: var(--aura-pink); }
.aura-wishlist svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.aura-product-media .aura-wishlist { position: absolute; top: var(--aura-space-3); right: var(--aura-space-3); z-index: 2; }

/* ==========================================================================
   JOURNAL / EDITORIAL ARTICLE · CHECKOUT · CARD VARIANTS · MEGA NAV
   ========================================================================== */

.aura-article { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--aura-space-5); }
.aura-article-hero { aspect-ratio: 16 / 9; border-radius: var(--aura-radius-xl); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5), transparent 55%), var(--aura-gradient-aura); box-shadow: var(--aura-glow-lg); }
.aura-article > p { margin: 0; color: var(--aura-on-surface-soft); line-height: var(--aura-leading-copy); }
.aura-article-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; font-size: var(--aura-text-sm); color: var(--aura-on-surface-muted); }

.aura-article-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--aura-radius-lg); background: var(--aura-surface); -webkit-backdrop-filter: var(--aura-glass-blur); backdrop-filter: var(--aura-glass-blur); border: 1px solid var(--aura-surface-border); box-shadow: var(--aura-shadow-ambient), var(--aura-inset-hi); transition: transform var(--aura-motion-standard), box-shadow var(--aura-motion-standard); }
.aura-article-card:hover { transform: translateY(-4px); box-shadow: var(--aura-glow-soft), var(--aura-inset-hi); }
.aura-article-card .media { aspect-ratio: 16 / 10; background: linear-gradient(150deg, var(--tile-a, var(--aura-lilac)), var(--tile-b, var(--aura-aqua))); }
.aura-article-card .body { display: flex; flex-direction: column; gap: var(--aura-space-2); padding: var(--aura-space-5); }

.aura-checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr); gap: var(--aura-space-6); align-items: start; }
.aura-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-3); font-size: var(--aura-text-sm); }
.aura-steps .step { display: flex; align-items: center; gap: 0.5rem; color: var(--aura-on-surface-muted); }
.aura-steps .step .n { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; font-size: var(--aura-text-xs); font-weight: 600; background: var(--aura-line); color: var(--aura-on-surface-soft); }
.aura-steps .step.current { color: var(--aura-accent-deep); font-weight: 600; }
.aura-steps .step.current .n { background: var(--aura-accent); color: #fff; }
.aura-steps .step.done .n { background: var(--aura-success); color: #fff; }
.aura-order-summary { position: sticky; top: var(--aura-space-4); display: flex; flex-direction: column; gap: var(--aura-space-3); padding: var(--aura-space-6); border-radius: var(--aura-radius-lg); background: var(--aura-surface); -webkit-backdrop-filter: var(--aura-glass-blur); backdrop-filter: var(--aura-glass-blur); border: 1px solid var(--aura-surface-border); box-shadow: var(--aura-shadow-ambient), var(--aura-inset-hi); }
.aura-order-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: var(--aura-text-sm); color: var(--aura-on-surface-soft); }
.aura-order-line.total { padding-top: var(--aura-space-3); border-top: 1px solid var(--aura-line); font-family: var(--aura-font-display); font-size: var(--aura-text-lg); font-weight: 600; color: var(--aura-on-surface); }

.aura-product-card.horizontal { flex-direction: row; align-items: stretch; }
.aura-product-card.horizontal .aura-product-media { flex: none; width: 42%; min-height: 0; }
.aura-product-card.horizontal .aura-product-body { flex: 1; }
.aura-product-card.compact .aura-product-media { min-height: 10rem; padding: var(--aura-space-4); }
.aura-product-card.compact .aura-product-body { padding: var(--aura-space-4); gap: var(--aura-space-2); }

.aura-utilitybar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--aura-space-4); padding: 0.4rem var(--aura-space-4); font-size: var(--aura-text-2xs); letter-spacing: var(--aura-tracking-ui); color: var(--aura-on-surface-muted); }
.aura-utilitybar a { color: inherit; text-decoration: none; }
.aura-utilitybar a:hover { color: var(--aura-accent); }

.aura-has-mega { position: relative; }
.aura-mega {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: min(46rem, 92vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aura-space-5);
  padding: var(--aura-space-6);
  background: var(--aura-surface-solid);
  border: 1px solid var(--aura-surface-border);
  border-radius: var(--aura-radius-xl);
  box-shadow: var(--aura-glow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--aura-motion-standard), transform var(--aura-motion-standard), visibility var(--aura-motion-standard);
  z-index: var(--aura-z-nav);
}
.aura-has-mega:hover .aura-mega,
.aura-has-mega:focus-within .aura-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.aura-mega-col h4 { margin: 0 0 0.5rem; font-size: var(--aura-text-2xs); letter-spacing: var(--aura-tracking-label); text-transform: uppercase; color: var(--aura-on-surface-muted); }
.aura-mega-col a { display: block; padding: 0.32rem 0; text-decoration: none; color: var(--aura-on-surface-soft); }
.aura-mega-col a:hover { color: var(--aura-accent); }
.aura-nav-toggle { display: none; }
@media (max-width: 760px) {
  .aura-nav-toggle { display: inline-flex; }
  .aura-has-mega .aura-mega { display: none; } /* use the drawer on small screens */
}

/* ==========================================================================
   THEMING · aura moods
   Moods remap the base tokens, so every existing + new component re-themes
   with no per-component overrides. Apply alongside .aura-system, e.g.
   <body class="aura-system aura-night">. (Named .aura-night, not .aura-dusk,
   to avoid colliding with the .dusk section modifier + --aura-gradient-dusk.)
   ========================================================================== */

/* DAWN — warm sunrise: pink · coral · gold */
.aura-dawn {
  --aura-paper: #fff6f4;
  --aura-mist: #ffe7e9;
  --aura-ink: #3a1f33;
  --aura-ink-soft: #6a4357;
  --aura-ink-muted: #8a6175;
  --aura-accent: #d24b87;
  --aura-accent-deep: #ad2f68;
  --aura-violet: #ff7eb0;
  --aura-pink: #ff9e7a;
  --aura-cyan: #ffce6e;
  --aura-gradient-aura: linear-gradient(120deg, #ff7eb0, #ff9e7a 78%, #ffce6e);
  --aura-gradient-aura-ink: linear-gradient(120deg, #c43a76, #b65430 80%, #946b12);
  --aura-gradient-field-drift:
    radial-gradient(46rem 40rem at 8% 0%, rgba(255, 182, 200, 0.62), transparent 58%),
    radial-gradient(34rem 30rem at 96% 8%, rgba(255, 200, 160, 0.55), transparent 56%),
    radial-gradient(50rem 46rem at 72% 100%, rgba(255, 222, 150, 0.5), transparent 60%),
    radial-gradient(28rem 26rem at 30% 88%, rgba(255, 190, 210, 0.42), transparent 58%),
    var(--aura-paper);
  --aura-gradient-field: var(--aura-gradient-field-drift);
}

/* MIST — calmer, cooler: low-saturation aqua · sky · lilac */
.aura-mist {
  --aura-paper: #f3f6fa;
  --aura-mist: #e7eef5;
  --aura-ink: #1d2733;
  --aura-ink-soft: #455162;
  --aura-ink-muted: #657384;
  --aura-accent: #3f7fb8;
  --aura-accent-deep: #2e6498;
  --aura-violet: #8fb3e6;
  --aura-pink: #a7c7e0;
  --aura-cyan: #8fd9d2;
  --aura-gradient-aura: linear-gradient(120deg, #8fb3e6, #a7c7e0 72%, #8fd9d2);
  --aura-gradient-aura-ink: linear-gradient(120deg, #2f6499, #4a76a0 78%, #2c7d77);
  --aura-gradient-field-drift:
    radial-gradient(46rem 40rem at 8% 0%, rgba(170, 200, 235, 0.5), transparent 58%),
    radial-gradient(34rem 30rem at 96% 8%, rgba(190, 220, 232, 0.44), transparent 56%),
    radial-gradient(50rem 46rem at 72% 100%, rgba(165, 224, 218, 0.46), transparent 60%),
    radial-gradient(28rem 26rem at 30% 88%, rgba(200, 214, 240, 0.36), transparent 58%),
    var(--aura-paper);
  --aura-gradient-field: var(--aura-gradient-field-drift);
}

/* NIGHT — dark mood: luminous on deep iris */
.aura-night {
  color-scheme: dark;
  --aura-paper: #15112a;
  --aura-mist: #1d1740;
  --aura-ink: #f4f1fb;
  --aura-ink-soft: #d4cdec;
  --aura-ink-muted: #a79ec6;
  --aura-line: rgba(255, 255, 255, 0.14);
  --aura-line-soft: rgba(255, 255, 255, 0.08);
  --aura-glass: rgba(60, 50, 104, 0.42);
  --aura-glass-strong: rgba(64, 54, 112, 0.58);
  --aura-glass-solid: #221b40;
  --aura-glass-border: rgba(255, 255, 255, 0.14);
  --aura-glass-hi: rgba(255, 255, 255, 0.14);
  --aura-surface-solid: #221b40;
  --aura-accent: #8a6dff;
  --aura-accent-deep: #c3b2ff;
  --aura-shadow-ambient: 0 10px 30px rgba(0, 0, 0, 0.45);
  --aura-glow-soft: 0 18px 50px rgba(0, 0, 0, 0.5);
  --aura-glow-lg: 0 32px 80px rgba(0, 0, 0, 0.55);
  --aura-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --aura-gradient-field-drift:
    radial-gradient(46rem 40rem at 8% 0%, rgba(123, 92, 255, 0.4), transparent 58%),
    radial-gradient(34rem 30rem at 96% 8%, rgba(255, 95, 162, 0.26), transparent 56%),
    radial-gradient(50rem 46rem at 72% 100%, rgba(51, 214, 200, 0.24), transparent 60%),
    radial-gradient(28rem 26rem at 30% 88%, rgba(123, 92, 255, 0.3), transparent 58%),
    var(--aura-paper);
  --aura-gradient-field: var(--aura-gradient-field-drift);
}
.aura-night .aura-stage { background: radial-gradient(circle at 50% 42%, rgba(123, 92, 255, 0.28), transparent 60%), var(--aura-mist); }

/* ==========================================================================
   ACCESSIBILITY MEDIA · reduced-transparency · contrast · forced-colors
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
  .aura-system {
    --aura-glass: var(--aura-glass-solid);
    --aura-glass-strong: var(--aura-glass-solid);
    --aura-surface: var(--aura-glass-solid);
    --aura-surface-2: var(--aura-glass-solid);
  }
  .aura-system *,
  .aura-system *::before,
  .aura-system *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

@media (prefers-contrast: more) {
  .aura-system {
    --aura-ink-soft: #2f2747;
    --aura-ink-muted: #443a61;
    --aura-glass: var(--aura-glass-solid);
    --aura-glass-strong: var(--aura-glass-solid);
    --aura-surface: var(--aura-glass-solid);
    --aura-surface-border: rgba(33, 27, 53, 0.5);
    --aura-line: rgba(33, 27, 53, 0.32);
  }
}

@media (forced-colors: active) {
  .aura-system .aura-button,
  .aura-system .aura-chip,
  .aura-system .aura-input,
  .aura-system .aura-select,
  .aura-system .aura-product-card,
  .aura-system .aura-nav,
  .aura-system .aura-variant,
  .aura-system .aura-page,
  .aura-system .aura-icon-btn { border: 1px solid CanvasText; }
  .aura-system .aura-glow,
  .aura-system .aura-orb,
  .aura-system::before { display: none; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  .aura-system { background: #fff !important; color: #000 !important; }
  .aura-system::before,
  .aura-orb,
  .aura-glow,
  .aura-buybar,
  .aura-toast-stack,
  .aura-cookie,
  .aura-nav-toggle { display: none !important; }
  .aura-system *,
  .aura-system *::before,
  .aura-system *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
  .aura-footer,
  .aura-section.dusk,
  .aura-rating,
  .aura-announce { background: #ece8f5 !important; color: #000 !important; }
  .aura-system a { text-decoration: underline; }
}

/* ==========================================================================
   RTL (logical mirroring for the few physical placements)
   ========================================================================== */

[dir="rtl"] .aura-drawer { margin-left: 0; margin-right: auto; border-left: 0; border-right: 1px solid var(--aura-surface-border); }
[dir="rtl"] .aura-drawer.left { margin-right: 0; margin-left: auto; border-right: 0; border-left: 1px solid var(--aura-surface-border); }
[dir="rtl"] .aura-select { padding: 0.6rem 1.1rem 0.6rem 2.4rem; background-position: left 1.15rem center, left 0.9rem center; }
[dir="rtl"] .aura-product-media .aura-wishlist,
[dir="rtl"] .aura-product-badge { right: auto; left: var(--aura-space-3); }

/* ==========================================================================
   RESPONSIVE · new components
   ========================================================================== */

@media (max-width: 900px) {
  .aura-reviews,
  .aura-bundle,
  .aura-checkout { grid-template-columns: 1fr; }
  .aura-order-summary,
  .aura-bundle-summary { position: static; }
  .aura-mega { grid-template-columns: 1fr 1fr; }
  .aura-product-card.horizontal { flex-direction: column; }
  .aura-product-card.horizontal .aura-product-media { width: 100%; }
}

@media (max-width: 600px) {
  .aura-form-grid,
  .aura-subscribe-options { grid-template-columns: 1fr; }
  .aura-buybar { flex-direction: column; align-items: stretch; }
  .aura-buybar .aura-button,
  .aura-buybar .aura-qty { width: 100%; justify-content: center; }
  .aura-reviews { gap: var(--aura-space-4); }
}