/*
Theme Name: LK Well Beauty
Theme URI: https://lkwellbeauty.example.com
Author: LK Well Beauty
Author URI: https://lkwellbeauty.example.com
Description: A warm, botanical e-commerce theme for LK Well Beauty — hand-poured London skincare. Lilac, cream, and gentle peach with Fraunces and Cormorant Garamond typography. Works as a demo out of the box and switches seamlessly to a full WooCommerce shop when the plugin is active. Includes custom homepage, Products CPT (or WC products), Journal, SoapBox subscription, Ingredients, About, Help, Cart, Account, Bloom Club loyalty, and Customizer support for fonts, colours, copy, and imagery.
Version: 1.2.6
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lkwellbeauty
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ─────────────────────────────────────────────────────────
   LK Well Beauty — botanical / warm cream + lilac
   Fonts: Fraunces (display), Inter (body), Cormorant Garamond (italic accents)
   ───────────────────────────────────────────────────────── */

:root {
  /* lilac palette — keep aa8bb8 as the brand anchor, others pumped up for vibrancy */
  --lilac-50:  #f5ecf7;   /* page background — softer, less saturated for ambient calm */
  --lilac-100: #ead9ee;   /* ribbon / soft surface */
  --lilac-200: #d8b9e0;
  --lilac-300: #bd97c9;
  --lilac-400: #aa8bb8;   /* primary accent */
  --lilac-500: #aa8bb8;
  --lilac-600: #5b3e6d;
  --lilac-700: #3f2850;
  --lilac-800: #24132f;

  /* warm peach/beige (hero art tones) — richer */
  --peach-100: #fbe2c8;
  --peach-200: #f3c79c;
  --peach-300: #e8a96f;

  /* warm cream neutrals */
  --cream-50:  #faf3f5;
  --cream-100: #f1e3ea;
  --cream-200: #f0e4d0;
  --cream-300: #ddc9ad;

  /* ink — higher contrast for accessibility while keeping warmth */
  --ink-900:   #0e0a16;   /* near-black primary */
  --ink-700:   #1a1326;   /* body copy */
  --ink-500:   #342947;   /* meta / muted */
  --ink-300:   #5e4f70;

  /* surfaces — slightly warmer + brighter to feel less dull */
  --bg:       #fdf9fb;   /* lighter than buttons / nav pills */
  --surface:  #ffffff;
  --line:     rgba(122, 86, 138, 0.22);

  /* type */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-italic:  "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(47,34,54,.04), 0 12px 32px rgba(80,50,90,.07);
  --shadow-floating: 0 2px 8px rgba(47,34,54,.06), 0 24px 56px rgba(80,50,90,.12);
  --shadow-petal: 0 30px 80px -24px rgba(126, 93, 143, 0.35);
}

/* subtle grain — pure CSS, layered over body for warmth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  background-image: radial-gradient(rgba(126, 93, 143, 0.08) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
}
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02";
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }

/* ── type scale ─────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  color: var(--ink-900);
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 144;
  text-wrap: balance;
}
.display-xl { font-size: clamp(46px, 5.8vw, 88px); line-height: 1.0; letter-spacing: -.035em; }
.display-l  { font-size: clamp(54px, 7.2vw, 104px); line-height: 1.0; letter-spacing: -.025em; }
.display-m  { font-size: clamp(40px, 4.8vw, 68px);   line-height: 1.05; }
.display-s  { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; }
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lilac-600);
  font-weight: 500;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "" !important;
  display: inline-block !important;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lilac-400));
  flex-shrink: 0;
}
.eyebrow::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--lilac-400);
  border-radius: 50%;
  margin-left: -4px;
  flex-shrink: 0;
}
.hero-eyebrow::after { display: none; }
/* hero eyebrow keeps the flower glyph (✿) and skips the line */
.hero-eyebrow::before { display: none; }
.italic-accent {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
p { margin: 0 0 1em 0; color: var(--ink-700); }
.muted { color: var(--ink-500); }

/* ── layout ─────────────────────────────────────────── */
.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; }
section { padding: 96px 0; }
section.tight { padding: 64px 0; }
section.loose { padding: 140px 0; }
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px; }
.section-head .eyebrow { align-self: flex-start; }

/* ── buttons (rounded, darken on active) ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: content; justify-content: center; gap: 8px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--lilac-400);
  color: #fff;
}
.btn-primary:hover { background: var(--lilac-300); color: var(--ink-900); }
.btn-primary:active { background: var(--lilac-500); color: #fff; transform: translateY(1px); }

.btn-dark {
  background: var(--lilac-400);
  color: #fff;
}
.btn-dark:hover { background: var(--lilac-300); color: var(--ink-900); }
.btn-dark:active { background: var(--lilac-500); color: #fff; transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--lilac-400);
}
.btn-ghost:hover { background: var(--lilac-200); }
.btn-ghost:active { background: var(--lilac-300); }

.btn-soft {
  background: var(--lilac-100);
  color: var(--lilac-700);
}
.btn-soft:hover { background: var(--lilac-200); }
.btn-soft:active { background: var(--lilac-300); }

.btn-lg { padding: 14px 28px; font-size: 13px; }

/* ── top announcement bar (NOT sticky) ─────────────────── */
.top-announce {
  background: var(--lilac-200);
  color: var(--ink-900);
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 60;
  text-align: center;
}
.top-announce-track {
  display: inline-flex;
  align-items: center;
  animation: top-announce-scroll 75s linear infinite;
  will-change: transform;
}
.top-announce:hover .top-announce-track { animation-play-state: paused; }
.top-announce-item {
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.top-announce-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  color: var(--ink-900);
  opacity: 0.75;
}
.top-announce-glyph svg { width: 16px; height: 16px; }
@keyframes top-announce-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── nav: floating sticky ─────────────────────────────── */
/* ── nav: static + floating sticky on scroll ────────────── */
.nav-sentinel {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.nav-wrap {
  z-index: 30;
  padding: 18px 32px;
}
.nav-wrap--static {
  position: relative;
  background: transparent;
  /* even padding above (announce bar) and below (hero) */
  padding: 12px 32px;
}
.nav-wrap--static .nav-inner {
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  border: 0;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* floating nav: hidden by default, slides in when sentinel exits viewport.
   Smoother choreography: nav-wrap slides on transform + opacity (longer,
   gentler curve), and the inner pill scales up + blur eases in for a
   premium settle. Inner curve is delayed slightly so the slide leads. */
.nav-wrap--floating {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 10px 24px;
  transform: translate3d(0, -110%, 0);
  opacity: 0;
  transition:
    transform .55s cubic-bezier(.22, 1, .36, 1),
    opacity   .35s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  will-change: transform, opacity;
}
.nav-wrap--floating.is-visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}
.nav-wrap--floating .nav-inner {
  transform: translateY(-4px) scale(.985);
  transform-origin: 50% 0;
  opacity: .92;
  transition:
    transform .55s cubic-bezier(.22, 1, .36, 1) .04s,
    opacity   .35s cubic-bezier(.22, 1, .36, 1) .06s,
    background-color .35s cubic-bezier(.2,.7,.2,1),
    backdrop-filter  .35s cubic-bezier(.2,.7,.2,1),
    box-shadow       .45s cubic-bezier(.2,.7,.2,1),
    padding          .35s cubic-bezier(.2,.7,.2,1);
}
.nav-wrap--floating.is-visible .nav-inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .nav-wrap--floating,
  .nav-wrap--floating .nav-inner {
    transition-duration: .01ms !important;
  }
}
.nav-wrap--floating .nav-logo img { height: 44px; }
/* legacy hooks kept for nav-mega sizing */
.nav-wrap.is-scrolled { padding: 10px 24px; }
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  background: var(--bg);
  border-radius: var(--r-pill);
  padding: 6px 28px;
  transition: background-color .35s cubic-bezier(.2,.7,.2,1),
              padding .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s cubic-bezier(.2,.7,.2,1),
              border-color .35s cubic-bezier(.2,.7,.2,1);
  border-bottom: 1px solid transparent;
}
.nav-wrap--floating .nav-inner {
  background: var(--bg);
  border-radius: var(--r-pill);
  padding: 10px 18px 10px 28px;
  box-shadow: var(--shadow-floating);
  border-bottom-color: transparent;
}
.nav-links {
  display: flex; align-items: center; gap: 4px;
  justify-self: start;
}
.nav-actions {
  display: flex; align-items: center; gap: 6px;
  justify-self: end;
}
.nav-link {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-700);
  transition: background .2s ease, color .2s ease;
}
.nav-link:hover { background: var(--lilac-100); color: var(--ink-900); }
.nav-link.is-active {
  background: var(--lilac-200);
  color: var(--ink-900);
}
.nav-link.is-active:hover { background: var(--lilac-300); }

/* burger button — mobile only */
.burger-btn {
  justify-self: start;
  width: 40px; height: 40px;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity .2s ease;
}
button.burger-btn { background: transparent; border: 0 !important; }
.burger-btn:hover { opacity: 0.7; }
.burger-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: #1c1322;
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
}
.burger-btn.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger-btn.is-open span:nth-child(2) { opacity: 0; }
.burger-btn.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* menu overlay + panel */
.menu-overlay {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--ink) 36%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;          /* let scroll + clicks pass through to page */
  transition: opacity .3s ease;
  z-index: 80;
}
.menu-overlay.open { opacity: 1; }
.menu-overlay .menu-panel { pointer-events: auto; }   /* panel itself is interactive */
.menu-panel {
  position: absolute;
  top: 0; left: 0;
  height: 100dvh;
  width: min(440px, 92vw);
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 22px 28px 28px;
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
  box-shadow: 22px 0 60px -20px rgba(60, 30, 80, 0.25);
}
.menu-overlay.open .menu-panel { transform: translateX(0); }
.menu-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.menu-panel-logo img { height: 64px; width: auto; display: block; }
.menu-panel-close {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: transparent;
  font-size: 18px; color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.menu-panel-close:hover { background: var(--lilac-200); transform: rotate(90deg); }
.menu-panel-links {
  display: flex; flex-direction: column;
  padding: 24px 0 16px;
  flex: 1;
}
.menu-panel-link {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  text-decoration: none;
  color: var(--ink);
  opacity: 0; transform: translateX(-12px);
  transition: opacity .35s ease, transform .35s ease, color .2s ease;
}
.menu-overlay.open .menu-panel-link { opacity: 1; transform: translateX(0); }
.menu-panel-link-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  letter-spacing: 0.02em;
}
.menu-panel-link-label {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.menu-panel-link-arrow {
  font-size: 18px;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  transition: transform .25s ease, color .2s ease;
}
.menu-panel-link:hover { color: var(--plum, var(--ink)); }
.menu-panel-link:hover .menu-panel-link-arrow { transform: translateX(4px); color: var(--ink); }
.menu-panel-link.is-active .menu-panel-link-label { font-style: italic; }
.menu-panel-link.is-active .menu-panel-link-num { color: var(--ink); }
.menu-panel-foot {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.menu-panel-foot-link {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  text-decoration: none;
  transition: color .2s ease;
}
.menu-panel-foot-link:hover { color: var(--ink); }
.menu-panel-tag {
  margin: 14px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.nav-logo {
  display: inline-flex; align-items: center;
  justify-self: center;
}
.nav-logo img {
  height: 64px;
  width: auto;
  display: block;
  transition: height .18s ease-out;
  will-change: height;
}
.nav-wrap.is-scrolled .nav-logo img { height: 44px; }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-900);
  transition: background .2s ease;
  position: relative;
}
.icon-btn:hover { background: var(--lilac-100); }
.icon-btn svg { width: 19px; height: 19px; }
.cart-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lilac-400);
  color: #fff;
  padding: 9px 16px 9px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.cart-pill:hover { background: var(--lilac-300); color: var(--ink-900); }
.cart-pill svg { width: 16px; height: 16px; }
.cart-count {
  background: #fff;
  color: var(--lilac-500);
  width: 22px; height: 22px;
  min-width: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}

/* ── ribbon (scrolling benefits) ─────────────────────── */
.ribbon {
  background: var(--ink-900);
  color: var(--cream-100);
  padding: 22px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.ribbon-track {
  display: inline-flex;
  align-items: center;
  animation: ribbon-scroll 32s linear infinite;
  will-change: transform;
}
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-item {
  display: inline-flex;
  align-items: center;
  padding: 0 32px;
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.005em;
  color: var(--cream-100);
}
.ribbon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  color: var(--lilac-300);
}
.ribbon-glyph svg { width: 28px; height: 28px; }
@keyframes ribbon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── hero ───────────────────────────────────────────── */
.hero {
  padding: 0;
  background:
    radial-gradient(ellipse 60% 50% at 12% 25%, rgba(170,139,184,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 92% 88%, rgba(243,199,156,0.13) 0%, transparent 65%),
    var(--bg);
  /* let the hero grow with its content; only enforce a sensible minimum so it still feels hero-y */
  min-height: calc(100vh - 134px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
  position: relative;
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 14px 48px 40px max(24px, calc((100vw - 1240px) / 2 + 24px));
  width: 100%;
}
.hero-eyebrow {
  margin-bottom: 12px;
  /* this is the alignment anchor — the image's left edge will line up to this. */
}
.hero h1 { margin-bottom: 14px; }
.hero h1 em { font-family: var(--font-italic); font-style: italic; font-weight: 400; color: var(--lilac-500); }
.hero-sub {
  font-size: 14.5px;
  color: var(--ink-700);
  max-width: 460px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.hero-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero-art {
  position: relative;
  overflow: hidden;
  background: var(--peach-200);
  width: 100%;
  /* default — overridden by inline style from Tweaks slider */
  height: 94%;
  align-self: end;
  justify-self: stretch;
  border-top-left-radius: 28px;
  box-shadow: var(--shadow-petal);
}
.hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* hero metrics row */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 100%;
}
.hero-metrics .metric {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric .num {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.02em;
  display: block;
  color: var(--ink-900);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric .num em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--lilac-500);
  font-size: inherit;
}
.metric .lbl {
  font-size: clamp(9.5px, 1vw, 11.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: normal;
  display: block;
  line-height: 1.3;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 720px) {
  .hero-metrics { gap: 10px; padding-top: 14px; }
  .metric .num { font-size: 16px; }
  .metric .lbl { font-size: 9px; letter-spacing: 0.05em; line-height: 1.25; }
}

/* ── product cards ──────────────────────────────────── */
.collection { padding: 96px 0 80px; }
.collection-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 64px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(89,60,103,0.22);
  position: relative;
}
.collection-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 80px;
  height: 1px;
  background: var(--lilac-500);
}
.collection-head h2 { margin-top: 14px; }
.collection-head-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.collection-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 28px;
}
.product-card {
  display: flex; flex-direction: column;
  cursor: pointer;
}
.product-card .pc-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 22px;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
  background: var(--lilac-100);
  box-shadow: 0 1px 2px rgba(80,50,90,.04);
}
.product-card .pc-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(36,19,47,0.18) 100%);
  pointer-events: none;
  z-index: 1;
}
/* swatch tints — cycling botanical grounds */
.product-card.swatch-lilac      .pc-art { background: linear-gradient(160deg, #e8d6ed 0%, #d4b9dc 100%); }
.product-card.swatch-lilacLight .pc-art { background: linear-gradient(160deg, #f1e4f4 0%, #dcc7e2 100%); }
.product-card.swatch-peach      .pc-art { background: linear-gradient(160deg, #f4dcc1 0%, #e6bf99 100%); }
.product-card.swatch-peachDeep  .pc-art { background: linear-gradient(160deg, #ecc4a0 0%, #d49d6f 100%); }
.product-card.swatch-cream      .pc-art { background: linear-gradient(160deg, #f1e9dc 0%, #e0d2bc 100%); }

.product-card:hover .pc-art {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(80,50,90,.25);
}
.product-card .pc-art img,
.product-card .pc-art .pc-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.92;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.product-card .pc-art .pc-img-hover { opacity: 0; }
.product-card:hover .pc-art .pc-img-base { opacity: 0; }
.product-card:hover .pc-art .pc-img-hover { opacity: 0.92; }
.product-card:hover .pc-art img { transform: scale(1.04); }
.product-card .pc-idx {
  position: absolute;
  top: 14px; left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(20,16,26,0.55);
  z-index: 2;
}
.product-card .pc-tag {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--lilac-400);
  color: #fff;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 2;
}
.product-card .pc-quick {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  background: var(--lilac-400);
  color: #fff;
  padding: 11px 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s, background .2s, color .2s;
  z-index: 2;
}
.product-card .pc-quick:hover { background: var(--lilac-300); color: var(--ink-900); }
.product-card .pc-quick-price {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.product-card:hover .pc-quick { opacity: 1; transform: translateY(0); }

.product-card .pc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-card .pc-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink-900);
  margin: 0;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 144;
}
.product-card .pc-name em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--lilac-500);
}
.product-card .pc-ingredients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-500);
}
.product-card .pc-dot { color: var(--lilac-400); }
.product-card .pc-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.product-card .pc-size,
.product-card .pc-sizes {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.product-card .pc-size-dot {
  color: var(--lilac-400);
  font-size: 10px;
}
.product-card .pc-price {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-900);
}

/* ── story / about teaser ───────────────────────────── */
.story {
  background: var(--lilac-50);
  position: relative;
  overflow: hidden;
}
.story::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(170,139,184,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.story > * { position: relative; z-index: 1; }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.story-img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-petal);
}
.story-img::after { display: none; }
.story h2 { margin-bottom: 24px; }
.story p { font-size: 17px; line-height: 1.7; max-width: 480px; }
.story .signature {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 22px;
  color: var(--lilac-600);
  margin-top: 24px;
}
.story-cta {
  display: flex;
  width: 100%;
  margin-top: 28px;
  justify-content: space-between;
  padding: 18px 26px;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.story-cta-arrow {
  font-family: var(--font-display);
  font-size: 20px;
  transition: transform .25s ease;
}
.story-cta:hover .story-cta-arrow { transform: translateX(4px); }

/* ── ingredients ────────────────────────────────────── */
.ingredients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ingredient-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ingredient-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -16px rgba(80,50,90,.18);
  border-color: rgba(170,139,184,0.4);
}
.ingredient-card .ic-art {
  width: 56px; height: 56px;
  background: var(--lilac-100);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--lilac-600);
}
.ingredient-card h4 {
  font-size: 22px;
  margin-bottom: 8px;
}
.ingredient-card h4 em { font-family: var(--font-italic); font-style: italic; color: var(--lilac-500); }
.ingredient-card p { font-size: 13px; color: var(--ink-500); margin: 0; }

/* ── soapbox monthly page ─────────────────────────────── */
.sbx-hero { padding: 40px 0 80px; }
.sbx-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.sbx-hero-visual { position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(80,50,90,0.25); }
.sbx-hero-photo {
  position: absolute; inset: 0;
  background-image: url("https://images.unsplash.com/photo-1600857544200-b2f666a9a2ec?auto=format&fit=crop&w=1200&q=85");
  background-size: cover; background-position: center;
  filter: saturate(0.92);
}
.sbx-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(60,40,70,0.35) 100%); }
.sbx-hero-stamp {
  position: absolute; bottom: 28px; right: 28px;
  width: 170px; height: 170px; border-radius: 50%;
  background: rgba(255,251,245,0.96); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  border: 1px solid rgba(170,139,184,0.3); transform: rotate(-8deg);
  box-shadow: 0 12px 30px -8px rgba(80,50,90,0.3);
  text-align: center; padding: 10px;
}
.sbx-stamp-no { font-family: var(--font-italic); font-style: italic; font-size: 14px; color: var(--lilac-500); letter-spacing: .05em; }
.sbx-stamp-label { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.15; color: var(--ink-900); margin: 4px 8px; }
.sbx-stamp-month { font-family: var(--font-body); font-size: 9px; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-500); margin-top: 4px; }
.sbx-includes { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 18px; }
.sbx-includes li { display: flex; gap: 18px; align-items: flex-start; }
.sbx-num { font-family: var(--font-italic); font-style: italic; color: var(--lilac-500); font-size: 22px; flex-shrink: 0; min-width: 32px; }
.sbx-includes strong { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink-900); margin-bottom: 2px; }
.sbx-includes span { font-size: 13px; color: var(--ink-500); }

.sbx-plans { padding: 80px 0; background: var(--lilac-50); }
.sbx-plan-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
.sbx-plan-tab {
  padding: 12px 22px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: #fff; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-700); cursor: pointer; transition: all .2s;
}
.sbx-plan-tab:hover { border-color: var(--lilac-400); color: var(--lilac-500); }
.sbx-plan-tab.active { background: var(--lilac-400); color: #fff; border-color: var(--lilac-400); }
.sbx-plan-card {
  max-width: 520px; margin: 0 auto; background: #fff; border-radius: 16px;
  padding: 48px 40px; text-align: center; border: 1px solid var(--line);
  box-shadow: 0 20px 50px -20px rgba(80,50,90,0.12);
}
.sbx-plan-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.sbx-price-amount { font-family: var(--font-display); font-size: 64px; font-weight: 400; color: var(--ink-900); letter-spacing: -0.02em; }
.sbx-price-per { font-family: var(--font-body); font-size: 16px; color: var(--ink-500); }
.sbx-plan-note { font-family: var(--font-italic); font-style: italic; font-size: 15px; color: var(--lilac-500); margin: 8px 0 24px; }
.sbx-plan-cta { width: 100%; }
.sbx-perks { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; text-align: left; border-top: 1px solid var(--line); padding-top: 24px; }
.sbx-perks li { font-size: 14px; color: var(--ink-700); padding-left: 22px; position: relative; }
.sbx-perks li::before { content: "✓"; position: absolute; left: 0; color: var(--lilac-500); font-family: var(--font-italic); font-style: italic; }

.sbx-process { padding: 100px 0; }
.sbx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.sbx-step { padding: 32px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sbx-step-no { font-family: var(--font-italic); font-style: italic; font-size: 28px; color: var(--lilac-500); margin-bottom: 12px; }
.sbx-step h4 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin: 0 0 8px; color: var(--ink-900); }
.sbx-step p { font-size: 14px; color: var(--ink-500); margin: 0; line-height: 1.6; }

.sbx-past { padding: 80px 0; background: var(--cream-100, #faf5f0); }
.sbx-past-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sbx-past-card { background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); transition: transform .25s; }
.sbx-past-card:hover { transform: translateY(-4px); }
.sbx-past-card.current { border-color: var(--lilac-400); box-shadow: 0 12px 30px -10px rgba(170,139,184,0.4); }
.sbx-past-art {
  aspect-ratio: 1/1;
  background-image: url("https://images.unsplash.com/photo-1600857544200-b2f666a9a2ec?auto=format&fit=crop&w=600&q=80");
  background-size: cover; background-position: center;
}
.sbx-past-meta { display: flex; justify-content: space-between; padding: 14px 16px 4px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-500); }
.sbx-past-card h4 { padding: 0 16px 18px; font-family: var(--font-display); font-size: 17px; font-weight: 500; margin: 0; color: var(--ink-900); }
.sbx-past-card h4 em { font-family: var(--font-italic); font-style: italic; color: var(--lilac-500); font-size: 13px; }

.sbx-faq { padding: 100px 0; }
.sbx-faq-list { display: flex; flex-direction: column; gap: 0; }
.sbx-faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.sbx-faq-item summary { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink-900); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.sbx-faq-item summary::after { content: "+"; font-family: var(--font-italic); font-style: italic; color: var(--lilac-500); font-size: 24px; transition: transform .25s; }
.sbx-faq-item[open] summary::after { transform: rotate(45deg); }
.sbx-faq-item p { margin: 14px 0 0; color: var(--ink-500); font-size: 15px; line-height: 1.7; }

@media (max-width: 1100px) {
  .sbx-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .sbx-hero-visual { max-width: 480px; margin: 0 auto; width: 100%; }
  .sbx-steps { grid-template-columns: 1fr; }
  .sbx-past-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── soapbox monthly subscription (home section) ─────── */
.soapbox-section {
  background: linear-gradient(180deg, #faf5f0 0%, #f3ebe0 100%);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.soapbox-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 10% 0%, rgba(170, 139, 184, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 500px 350px at 90% 100%, rgba(170, 139, 184, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.soapbox-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.soapbox-copy h2 {
  margin-top: 18px;
  margin-bottom: 0;
}
.soapbox-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.soapbox-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 15px;
  color: var(--ink-700);
  font-family: var(--font-body);
}
.soapbox-bullet {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--lilac-500);
  font-size: 18px;
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}
.soapbox-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(80, 50, 90, 0.25);
}
.soapbox-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) brightness(0.98);
}
.soapbox-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(60, 40, 70, 0.35) 100%);
}
.soapbox-stamp {
  position: absolute;
  bottom: 28px;
  right: 28px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 251, 245, 0.96);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(170, 139, 184, 0.3);
  transform: rotate(-8deg);
  box-shadow: 0 12px 30px -8px rgba(80, 50, 90, 0.3);
}
.soapbox-stamp-inner {
  text-align: center;
}
.soapbox-stamp-no {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--lilac-500);
  letter-spacing: 0.05em;
}
.soapbox-stamp-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 4px 8px;
  letter-spacing: -0.01em;
}
.soapbox-stamp-month {
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-500);
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .soapbox-grid { grid-template-columns: 1fr; gap: 48px; }
  .soapbox-visual { max-width: 480px; margin: 0 auto; width: 100%; }
}

/* ── promise slideshow (replaces press) ────────────────── */
.promise-slideshow {
  position: relative;
  background: var(--cream-100);
  overflow: hidden;
  padding: 0;
}
.ps-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(.65,.05,.2,1);
  will-change: transform;
}
.ps-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-slide img {
  width: 100%;
  height: auto;
  display: block;
  /* preserves the natural ~4.8:1 banner ratio so it stays thin */
}
.ps-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  padding: 12px;
  z-index: 4;
  /* subtle by default — extends in scale & weight on hover */
  letter-spacing: -0.05em;
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1), color 0.2s, text-shadow 0.2s;
  text-shadow: 0 1px 4px rgba(255,255,255,0.5);
}
.ps-arrow:hover {
  color: var(--lilac-500);
}
.ps-arrow {
  display: inline-flex; align-items: center; gap: 0;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px -12px rgba(80,50,90,0.35);
  transform: translateY(-50%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, box-shadow .25s ease;
  color: var(--ink-900);
}
.ps-arrow-left  { left: 22px; }
.ps-arrow-right { right: 22px; }
.ps-arrow:hover { background: #fff; box-shadow: 0 14px 32px -10px rgba(80,50,90,0.45); }
.ps-arrow-tip { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-900); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ps-arrow-line {
  display: inline-block;
  height: 1.5px;
  width: 0;
  background: var(--ink-900);
  border-radius: 2px;
  transition: width .35s cubic-bezier(.2,.7,.2,1), margin .35s cubic-bezier(.2,.7,.2,1);
}
.ps-arrow-right:hover .ps-arrow-line { width: 36px; margin-left: 8px; }
.ps-arrow-left:hover  .ps-arrow-line { width: 36px; margin-right: 8px; }
.ps-arrow-left:hover  .ps-arrow-tip { transform: translateX(-3px); }
.ps-arrow-right:hover .ps-arrow-tip { transform: translateX(3px); }

.ps-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 4;
}
.ps-dot {
  width: 24px; height: 3px;
  background: rgba(20,16,26,0.25);
  border-radius: 2px;
  padding: 0;
  transition: background 0.25s, width 0.25s;
}
.ps-dot.active { background: var(--lilac-500); width: 36px; }
.ps-dot:hover { background: var(--lilac-400); }

/* ── nav mega-menu (hover dropdown) ────────────────────── */
.nav-link.has-mega { padding-right: 8px; display: inline-flex; align-items: center; gap: 4px; }
.nav-link-caret { font-size: 9px; line-height: 1; transition: transform .25s ease; opacity: 0.6; }
.nav-link.mega-open .nav-link-caret { transform: rotate(180deg); opacity: 1; }
.nav-link.mega-open { background: var(--lilac-100); color: var(--ink-900); }
.nav-mega {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 25;
  background: rgba(250, 245, 251, 0.96);
  backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(80,50,90,0.18);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1);
  padding-top: 96px;
}
.nav-wrap--floating.is-visible ~ .nav-mega { padding-top: 76px; }
.nav-mega.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-mega-inner { max-width: 1400px; margin: 0 auto; padding: 32px 32px 40px; }
.nav-mega-cols { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 56px; align-items: start; }
.nav-mega-col h6.nav-mega-heading {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.nav-mega-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.nav-mega-col a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  margin: 0 -14px;
  border-radius: 12px;
  transition: background .18s ease;
}
.nav-mega-col a:hover { background: var(--lilac-100); }
.nav-mega-label {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-900);
  font-feature-settings: "ss01";
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 144;
  line-height: 1.15;
}
.nav-mega-col a:hover .nav-mega-label { color: var(--lilac-500); }
.nav-mega-sub { font-size: 12.5px; color: var(--ink-500); letter-spacing: 0.01em; }
.nav-mega-feature {
  background: linear-gradient(160deg, var(--lilac-100) 0%, var(--lilac-200) 100%);
  border-radius: 16px;
  padding: 28px 28px 24px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.nav-mega-feature:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(80,50,90,0.3); }
.nav-mega-feature-eyebrow { display: block; margin-bottom: 14px; }
.nav-mega-feature-title { font-family: var(--font-display); font-size: 28px; line-height: 1.15; margin-bottom: 10px; color: var(--ink-900); }
.nav-mega-feature-sub { font-size: 14px; color: var(--ink-700); margin-bottom: 18px; }
.nav-mega-feature-cta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lilac-500); font-weight: 600; }
@media (max-width: 900px) { .nav-mega { display: none; } }

/* ── mini cart: free shipping progress ─────────────────── */
.ship-progress {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--lilac-100) 0%, transparent 100%);
}
.ship-progress--inline {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 24px 18px;
  background: linear-gradient(160deg, var(--lilac-100) 0%, #fbf6fa 100%);
}
.ship-progress-msg { font-size: 13.5px; color: var(--ink-700); margin-bottom: 10px; line-height: 1.4; }
.ship-progress-msg strong { color: var(--ink-900); font-weight: 600; }
.ship-progress-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--lilac-500); color: #fff; font-size: 10px;
  margin-right: 4px; vertical-align: -2px;
}
.ship-progress-bar { height: 4px; background: rgba(28,19,34,0.08); border-radius: 999px; overflow: hidden; }
.ship-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lilac-400) 0%, var(--lilac-500) 100%);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.ship-progress.is-qualified .ship-progress-fill { background: linear-gradient(90deg, #6fa56d 0%, #4d8a4b 100%); }
.ship-progress-foot { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); margin-top: 8px; }

/* ── PDP sticky add-to-cart bar ────────────────────────── */
.pdp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 28;
  background: rgba(250, 245, 251, 0.96);
  backdrop-filter: saturate(140%) blur(20px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -20px 40px -20px rgba(80,50,90,0.18);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.pdp-sticky.is-visible { transform: translateY(0); }
.pdp-sticky-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.pdp-sticky-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pdp-sticky-swatch {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(160deg, #e8d6ed 0%, #d4b9dc 100%);
}
.pdp-sticky-swatch.swatch-lilacLight { background: linear-gradient(160deg, #f1e4f4 0%, #dcc7e2 100%); }
.pdp-sticky-swatch.swatch-peach { background: linear-gradient(160deg, #f4dcc1 0%, #e6bf99 100%); }
.pdp-sticky-swatch.swatch-peachDeep { background: linear-gradient(160deg, #ecc4a0 0%, #d49d6f 100%); }
.pdp-sticky-swatch.swatch-cream { background: linear-gradient(160deg, #f1e9dc 0%, #e0d2bc 100%); }
.pdp-sticky-text { display: flex; flex-direction: column; min-width: 0; }
.pdp-sticky-name {
  font-family: var(--font-display); font-size: 18px; color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-feature-settings: "ss01"; line-height: 1.2;
}
.pdp-sticky-name em { font-family: var(--font-italic); font-style: italic; color: var(--lilac-500); }
.pdp-sticky-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-500); }
.pdp-sticky-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pdp-sticky-qty { transform: scale(0.92); }
@media (max-width: 720px) {
  .pdp-sticky-inner { padding: 10px 14px; gap: 12px; }
  .pdp-sticky-swatch { width: 36px; height: 36px; }
  .pdp-sticky-name { font-size: 15px; }
  .pdp-sticky-meta { font-size: 10px; }
  .pdp-sticky-qty { display: none; }
  .pdp-sticky-cta .btn { padding: 10px 16px; font-size: 13px; min-height: 44px; }
}

/* ── product card quick-shop refinement ────────────────── */
.product-card .pc-quick {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.product-card:hover .pc-quick { opacity: 1; transform: translateY(0); }
.product-card .pc-quick::after {
  content: "→";
  margin-left: 8px;
  display: inline-block;
  transition: transform .25s ease;
}
.product-card .pc-quick:hover::after { transform: translateX(3px); }
@media (hover: none) {
  .product-card .pc-quick { opacity: 1; transform: translateY(0); }
}

/* ── Bloom Club loyalty preview ────────────────────────── */
.bloom-club { padding: 24px 0 64px; }
.bloom-card {
  background: linear-gradient(165deg, #f7eef9 0%, #ecdef0 60%, #e1d0e9 100%);
  border-radius: 24px;
  padding: 40px 44px 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(80,50,90,0.35);
}
.bloom-card::before {
  content: "✿"; position: absolute; top: -40px; right: -20px;
  font-size: 220px; color: rgba(255,255,255,0.35); pointer-events: none;
  font-family: var(--font-italic); line-height: 1;
}
.bloom-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 36px; position: relative; z-index: 1; }
.bloom-eyebrow { color: var(--lilac-500); margin-bottom: 12px; display: inline-block; }
.bloom-title { margin-bottom: 10px; }
.bloom-sub { font-size: 14.5px; color: var(--ink-700); max-width: 480px; line-height: 1.55; }
.bloom-points {
  background: rgba(255,255,255,0.7);
  border-radius: 18px;
  padding: 16px 22px;
  text-align: center;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
}
.bloom-points-num { display: block; font-family: var(--font-display); font-size: 42px; line-height: 1; color: var(--lilac-500); font-variation-settings: "SOFT" 60, "opsz" 144; }
.bloom-points-lbl { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-top: 4px; }
.bloom-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 32px; padding: 0 0 8px; }
.bloom-track-bar { position: absolute; left: 12%; right: 12%; bottom: 24px; height: 3px; background: rgba(28,19,34,0.1); border-radius: 999px; z-index: 0; }
.bloom-track-fill { height: 100%; background: linear-gradient(90deg, var(--lilac-400), var(--lilac-500)); border-radius: 999px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.bloom-step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; opacity: 0.55; transition: opacity .3s ease; }
.bloom-step.is-reached { opacity: 1; }
.bloom-step-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.8); color: var(--ink-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  border: 2px solid rgba(255,255,255,0.9);
  margin-bottom: 4px;
}
.bloom-step.is-reached .bloom-step-dot { background: var(--lilac-500); color: #fff; border-color: var(--lilac-500); }
.bloom-step.is-current .bloom-step-dot { box-shadow: 0 0 0 6px rgba(170,139,184,0.25); }
.bloom-step-label { font-family: var(--font-display); font-size: 17px; color: var(--ink-900); font-feature-settings: "ss01"; }
.bloom-step-range { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-500); }
.bloom-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; position: relative; z-index: 1; }
.bloom-perk-col { background: rgba(255,255,255,0.55); border-radius: 14px; padding: 18px 20px; border: 1px solid rgba(255,255,255,0.6); }
.bloom-perk-col.is-current { background: rgba(255,255,255,0.85); border-color: var(--lilac-300); box-shadow: 0 8px 24px -12px rgba(80,50,90,0.25); }
.bloom-perk-col h5 { font-family: var(--font-display); font-size: 18px; margin-bottom: 12px; color: var(--ink-900); font-feature-settings: "ss01"; }
.bloom-perk-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bloom-perk-col li { font-size: 13px; color: var(--ink-700); padding-left: 16px; position: relative; line-height: 1.45; }
.bloom-perk-col li::before { content: "✿"; position: absolute; left: 0; top: 1px; color: var(--lilac-400); font-size: 11px; }
.bloom-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(28,19,34,0.08); position: relative; z-index: 1; }
/* Bloom rewards modal */
body.modal-open .nav-wrap,
body.modal-open .nav-mega { display: none; }
.bloom-modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(28,19,34,0.5); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.bloom-modal-overlay.open { opacity: 1; pointer-events: auto; }
.bloom-modal {
  background: #fff;
  border-radius: 22px;
  max-width: 720px; width: 100%;
  max-height: 90vh; overflow: auto;
  padding: 40px 44px 32px;
  position: relative;
  box-shadow: 0 40px 100px -20px rgba(40,20,50,0.5);
  transform: translateY(20px) scale(.98);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.bloom-modal-overlay.open .bloom-modal { transform: translateY(0) scale(1); }
.bloom-modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream-100); border: 0; cursor: pointer;
  font-size: 14px; color: var(--ink-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.bloom-modal-close:hover { background: var(--lilac-100); color: var(--ink-900); }
.bloom-modal-head { margin-bottom: 28px; padding-right: 40px; }
.bloom-modal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-bottom: 28px; }
.bloom-modal-h5 {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-500); font-weight: 600;
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.bloom-modal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.bloom-modal-list li {
  display: grid; grid-template-columns: 24px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(28,19,34,0.05);
  font-size: 14px;
}
.bloom-modal-label-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bloom-action-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-900);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.bloom-action-btn:hover { background: var(--lilac-100); border-color: var(--lilac-300); color: var(--lilac-500); }
.bloom-action-btn--primary { background: var(--lilac-500); border-color: var(--lilac-500); color: #fff; }
.bloom-action-btn--primary:hover { background: var(--lilac-400); border-color: var(--lilac-400); color: #fff; }
.bloom-action-state {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-500); font-weight: 600;
  padding: 7px 12px;
}
.bloom-toast {
  position: absolute;
  bottom: 88px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink-900); color: #fff;
  padding: 10px 16px; border-radius: 999px;
  font-size: 13px; white-space: nowrap; max-width: calc(100% - 48px);
  overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.4);
  z-index: 2;
}
.bloom-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.bloom-modal-foot-note { font-size: 12px; line-height: 1.55; max-width: 460px; }
.bloom-modal-foot-note strong { color: var(--ink-900); font-weight: 600; }

/* ── Bloom Club promo (home section) — 2-col editorial layout ────── */
.bloom-promo {
  padding: 120px 0 110px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  position: relative;
}
.bloom-promo-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 88px;
  align-items: center;
}
.bloom-promo-copy { max-width: 540px; }
.bloom-promo-eyebrow {
  color: var(--lilac-500);
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13px;
}
.bloom-promo h2 { margin-bottom: 22px; }
.bloom-promo-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
  margin-bottom: 36px;
  max-width: 480px;
  text-wrap: pretty;
}

.bloom-table {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-900);
  margin-bottom: 36px;
}
.bloom-table-row {
  display: grid;
  grid-template-columns: 72px 1fr 92px;
  gap: 20px;
  align-items: baseline;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}
.bloom-table-head {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 12px 4px;
}
.bloom-table-pts {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  color: var(--ink-900);
  line-height: 1;
}
.bloom-table-perk {
  font-size: 16px;
  color: var(--ink-900);
  line-height: 1.45;
}
.bloom-table-worth {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--lilac-500);
  font-size: 16px;
  text-align: right;
}

.bloom-promo-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.bloom-promo-note { font-size: 13px; color: var(--ink-500); }
.bloom-promo-note a { color: var(--lilac-500); text-decoration: underline; text-underline-offset: 3px; }

/* visual side: photo + a quiet member card that hangs over the corner */
.bloom-promo-visual {
  position: relative;
  aspect-ratio: 4 / 5;
}
.bloom-promo-photo {
  position: absolute; inset: 0;
  background: var(--peach-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(80,50,90,0.28);
}
.bloom-promo-card {
  position: absolute;
  left: -28px;
  bottom: -36px;
  width: 62%;
  min-width: 260px;
  padding: 22px 24px 20px;
  background: var(--bg);
  border-radius: 12px;
  box-shadow:
    0 24px 50px -20px rgba(80,50,90,0.22),
    0 1px 0 rgba(255,255,255,0.6) inset;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bloom-promo-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.bloom-promo-card-eyebrow { color: var(--lilac-500); }
.bloom-promo-card-name {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink-900);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-variation-settings: "SOFT" 60, "opsz" 144;
}
.bloom-promo-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink-700);
}
.bloom-promo-card-meta em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-500);
  margin-right: 4px;
}
.bloom-promo-card-pts em {
  color: var(--lilac-500);
  font-size: 20px;
  font-style: italic;
  font-family: var(--font-italic);
  margin-right: 4px;
}

@media (max-width: 900px) {
  .bloom-promo { padding: 72px 0 80px; }
  .bloom-promo-grid { grid-template-columns: 1fr; gap: 56px; }
  .bloom-promo-visual { aspect-ratio: 5 / 4; max-width: 520px; margin: 0 auto; width: 100%; }
  .bloom-promo-card { left: 16px; right: auto; bottom: -28px; width: auto; min-width: 0; max-width: 320px; }
}
@media (max-width: 720px) {
  .bloom-table-row {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    padding: 16px 2px;
  }
  .bloom-table-head { display: none; }
  .bloom-table-pts { font-size: 24px; grid-row: 1 / 3; align-self: center; }
  .bloom-table-perk { font-size: 15px; }
  .bloom-table-worth { text-align: left; grid-column: 2; font-size: 13px; color: var(--lilac-500); }
}
.bloom-modal-list li:last-child { border-bottom: 0; }
.bloom-modal-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--lilac-100); color: var(--lilac-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.bloom-modal-list li.is-unlocked .bloom-modal-icon { background: var(--lilac-500); color: #fff; }
.bloom-modal-list li.is-locked { opacity: 0.5; }
.bloom-modal-label { color: var(--ink-900); }
.bloom-modal-pts { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--lilac-500); font-weight: 600; }
.bloom-modal-list li.is-unlocked .bloom-modal-pts { color: var(--lilac-500); }
.bloom-modal-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding-top: 20px; border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .bloom-modal { padding: 28px 22px 22px; border-radius: 18px; }
  .bloom-modal-cols { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 720px) {
  .bloom-card { padding: 28px 22px 24px; border-radius: 18px; }
  .bloom-head { flex-direction: column; gap: 16px; margin-bottom: 28px; }
  .bloom-points { align-self: flex-start; padding: 12px 18px; }
  .bloom-points-num { font-size: 32px; }
  .bloom-perks { grid-template-columns: 1fr; }
  .bloom-step-label { font-size: 14px; }
  .bloom-step-range { font-size: 9px; }
  .bloom-track-bar { left: 16%; right: 16%; }
}

/* ── promise-slideshow: real photos at natural ratio ──── */
.ps-track { background: var(--cream-100); }
.ps-slide { flex: 0 0 100%; min-width: 100%; display: flex; align-items: center; justify-content: center; }
.ps-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 901px) {
  .promise-slideshow { aspect-ratio: 4.8 / 1; max-height: 360px; }
}

/* ── reviews ────────────────────────────────────────── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 38px 32px;
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.review-card::before {
  content: "“";
  position: absolute;
  top: 14px;
  right: 24px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 80px;
  line-height: 1;
  color: var(--lilac-200);
  opacity: 0.7;
  pointer-events: none;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -16px rgba(80,50,90,.15);
}
.review-card .stars {
  color: var(--lilac-500);
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.review-card blockquote {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 24px 0;
  color: var(--ink-900);
  font-variation-settings: "SOFT" 60, "opsz" 144;
  text-wrap: pretty;
}
.review-card blockquote em { font-family: var(--font-italic); font-style: italic; color: var(--lilac-500); }
.review-card cite {
  font-style: normal;
  font-size: 13px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}

/* ── journal teaser ─────────────────────────────────── */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.journal-card { cursor: pointer; }
.journal-card .jc-art {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: var(--lilac-100);
  overflow: hidden;
  margin-bottom: 22px;
  background:
    linear-gradient(135deg, var(--lilac-100), var(--lilac-200));
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
  box-shadow: 0 1px 2px rgba(80,50,90,.04);
}
.journal-card:hover .jc-art {
  transform: translateY(-5px);
  box-shadow: 0 24px 50px -16px rgba(80,50,90,.22);
}
.journal-card .jc-art.alt2 { background: linear-gradient(135deg, var(--cream-200), var(--lilac-100)); }
.journal-card .jc-art.alt3 { background: linear-gradient(135deg, var(--lilac-200), var(--cream-200)); }
.journal-card .jc-cat {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lilac-600);
  margin-bottom: 8px;
  font-weight: 500;
}
.journal-card h3 {
  font-size: 26px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 60, "opsz" 144;
}
.journal-card .jc-meta { font-size: 13px; color: var(--ink-500); }

/* ── newsletter ─────────────────────────────────────── */
.newsletter {
  background: var(--ink-900);
  color: #fff;
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter::before, .newsletter::after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lilac-500) 0%, transparent 70%);
  opacity: 0.25;
  pointer-events: none;
}
.newsletter::before { top: -120px; left: -100px; }
.newsletter::after { bottom: -160px; right: -120px; }
.newsletter > * { position: relative; z-index: 2; }
.newsletter h2 {
  color: #fff;
  margin-bottom: 16px;
}
.newsletter h2 em { font-family: var(--font-italic); font-style: italic; color: var(--lilac-300); }
.newsletter p {
  color: var(--lilac-200);
  max-width: 480px;
  margin: 0 auto 36px;
  font-size: 16px;
}
.newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  padding: 6px;
  backdrop-filter: blur(8px);
}
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #fff;
  outline: none;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form button {
  background: var(--lilac-400);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s ease;
}
.newsletter-form { position: relative; }
.newsletter-form button:hover { background: var(--lilac-500); }
.newsletter-form button:disabled { opacity: 0.6; cursor: default; }
.newsletter-form input:disabled { opacity: 0.5; }

/* success state — full overlay with green check */
.newsletter-success {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #4ea878 0%, #3d8a64 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 0 24px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 12px 30px -8px rgba(78, 168, 120, 0.5);
}
.newsletter-form.is-submitted .newsletter-success {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.newsletter-form.is-submitted input,
.newsletter-form.is-submitted button {
  visibility: hidden;
}

/* checkmark draw animation */
.newsletter-check {
  flex-shrink: 0;
}
.newsletter-check-circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
}
.newsletter-check-mark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}
.newsletter-form.is-submitted .newsletter-check-circle {
  animation: newsletter-draw-circle 0.55s cubic-bezier(.6,.1,.3,1) 0.15s forwards;
}
.newsletter-form.is-submitted .newsletter-check-mark {
  animation: newsletter-draw-mark 0.35s cubic-bezier(.6,.1,.3,1) 0.55s forwards;
}
@keyframes newsletter-draw-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes newsletter-draw-mark {
  to { stroke-dashoffset: 0; }
}
.newsletter-success > span {
  opacity: 0;
  transform: translateY(4px);
  animation: newsletter-msg-in 0.4s ease 0.85s forwards;
}
@keyframes newsletter-msg-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── footer ─────────────────────────────────────────── */
.footer {
  background: var(--cream-100);
  padding: 80px 0 32px;
  color: var(--ink-700);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand img { height: 304px; margin-bottom: 16px; }
.footer-brand p { max-width: 280px; font-size: 14px; }
.footer h5 {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  color: var(--ink-900);
  font-weight: 600;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { font-size: 14px; color: var(--ink-700); }
.footer ul a:hover { color: var(--lilac-500); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-500);
}
.footer-legal a { color: var(--ink-500); }
.footer-legal a:hover { color: var(--lilac-500); }
.footer-credit { color: var(--ink-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line); transition: color 0.18s ease, text-decoration-color 0.18s ease; }
.footer-credit:hover { color: var(--lilac-500); text-decoration-color: var(--lilac-500); }

/* ── article page ────────────────────────────────────── */
.article-back {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500); padding: 8px 0;
}
.article-back:hover { color: var(--lilac-500); }
.article-body { padding: 32px 0 80px; }
.article-meta {
  font-size: 13px; color: var(--ink-500);
  margin-bottom: 36px; letter-spacing: 0.04em;
}
.article-hero {
  width: 100%; height: 480px;
  border-radius: 8px; margin-bottom: 48px;
  background: var(--lilac-100);
}
.article-prose p {
  font-family: var(--font-display);
  font-size: 21px; line-height: 1.65; color: var(--ink-800);
  margin-bottom: 24px; text-wrap: pretty;
}
.article-more {
  background: var(--cream-50);
  padding: 80px 0;
  border-top: 1px solid var(--line);
}

/* ── mini-cart drawer ────────────────────────────────── */
.cart-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(26,19,32,0.4);
  backdrop-filter: blur(2px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.cart-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 100vw;
  background: var(--cream-50);
  z-index: 201;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(47,34,54,0.15);
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-head {
  padding: 24px 28px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
}
.cart-drawer-head h3 { font-size: 24px; }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 24px 28px; }
.cart-drawer-foot {
  padding: 24px 28px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.cart-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line .cl-art {
  aspect-ratio: 1;
  background: var(--lilac-100);
  border-radius: var(--r-sm);
}
.cart-line .cl-info h4 { font-family: var(--font-display); font-size: 17px; margin-bottom: 4px; }
.cart-line .cl-info p { font-size: 13px; color: var(--ink-500); margin: 0 0 8px 0; }
.cart-line .qty {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 6px;
}
.cart-line .qty button { width: 22px; height: 22px; border-radius: 50%; font-size: 13px; line-height: 1; }
.cart-line .qty button:hover { background: var(--lilac-100); }
.cart-line .qty span { font-size: 13px; min-width: 16px; text-align: center; }
.cart-line .cl-price { font-size: 14px; font-weight: 500; }
.cart-empty { text-align: center; padding: 60px 20px; color: var(--ink-500); }

.cart-totals { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 14px; }
.cart-totals.grand { font-size: 17px; font-weight: 500; color: var(--ink-900); }

/* ── newsletter modal ────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(26,19,32,0.55);
  backdrop-filter: blur(4px);
  z-index: 250;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--cream-50);
  border-radius: var(--r-lg);
  max-width: 920px;
  width: min(920px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform .3s ease;
  position: relative;
  box-shadow: var(--shadow-floating);
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-art {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 60% 80% at 40% 30%, rgba(170,139,184,0.4), transparent 70%),
    linear-gradient(180deg, var(--lilac-200), var(--lilac-300));
  min-height: 460px;
  position: relative;
}
image-slot.modal-art { align-self: stretch; }
.modal-body { padding: 56px 48px; position: relative; }
.modal-body h2 { margin-bottom: 12px; }
.modal-body p { font-size: 15px; margin-bottom: 28px; max-width: 360px; }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-form input {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}
.modal-form input:focus { border-color: var(--lilac-400); }
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  z-index: 2;
}
.modal-close:hover { background: #fff; }

/* ── shop / pdp / about / etc page chrome ───────────── */
.page-head {
  text-align: center;
  padding: 96px 0 56px;
  background: var(--cream-100);
}
.page-head .eyebrow { margin-bottom: 18px; justify-content: center; }
.page-head h1 { margin-bottom: 16px; }
.page-head p { max-width: 540px; margin: 0 auto; font-size: 16px; color: var(--ink-700); }

.shop-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.shop-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-700);
  transition: all .2s;
}
.filter-chip:hover { border-color: var(--lilac-400); }
.filter-chip.active {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}

.pdp-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
}
/* Left column (photo + thumbs) sticks while the right column scrolls.
   Stops naturally at the bottom of .pdp-grid — i.e. just before the
   accordions/tabs section, which is the next <section> on the page. */
@media (min-width: 901px) {
  .pdp-grid > :first-child {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}
.pdp-art {
  aspect-ratio: 4 / 5;
  background: var(--lilac-50);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
image-slot.pdp-art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
image-slot.pdp-art-img.is-active {
  opacity: 1;
  pointer-events: auto;
}
.pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.pdp-thumb {
  aspect-ratio: 1;
  background: var(--lilac-100);
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.pdp-thumb.active { border-color: var(--lilac-500); }
image-slot.pdp-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* clicks go to parent button */
}
.pdp-info h1 { margin-bottom: 14px; }
.pdp-info .pdp-price { font-size: 22px; font-weight: 500; margin-bottom: 24px; color: var(--ink-900); }
.pdp-info .pdp-desc { font-size: 16px; line-height: 1.7; margin-bottom: 32px; }
.pdp-attrs { display: flex; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.pdp-attr .lbl { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 4px; }
.pdp-attr .val { font-size: 14px; color: var(--ink-900); }
.pdp-cta { display: flex; gap: 12px; align-items: center; }
.pdp-qty {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 12px;
}
.pdp-qty button { width: 28px; height: 28px; border-radius: 50%; font-size: 16px; }
.pdp-qty button:hover { background: var(--lilac-100); }
.pdp-tabs {
  margin-top: 56px;
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
}
.pdp-tab {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .2s;
}
.pdp-tab.active { color: var(--ink-900); border-bottom-color: var(--lilac-400); }
.pdp-tab-content { padding: 32px 0; font-size: 15px; line-height: 1.7; max-width: 720px; }

/* ── PDP rating row (under title) ─────────────────────── */
.pdp-rating {
  display: flex; align-items: center; gap: 10px;
  margin: -4px 0 18px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-700);
}
.pdp-stars { color: var(--lilac-500); letter-spacing: 0.06em; font-size: 14px; line-height: 1; }
.pdp-rating-val { color: var(--ink-900); font-weight: 500; }
.pdp-rating-divider { color: var(--ink-300, var(--ink-500)); opacity: 0.5; }
.pdp-rating-count {
  color: var(--ink-700);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px;
}
.pdp-rating-count:hover { color: var(--lilac-500); text-decoration-color: var(--lilac-300, var(--lilac-400)); }

/* ── PDP batch / provenance card ──────────────────────── */
.pdp-batch {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  margin: 0 0 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(244,236,246,0.55));
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--ink-700);
}
.pdp-batch-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
}
.pdp-batch-row + .pdp-batch-row { border-top: 1px dashed var(--line); }
.pdp-batch-lbl { text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; color: var(--ink-500); }
.pdp-batch-val { color: var(--ink-900); font-weight: 500; }

/* ── PDP wishlist button ──────────────────────────────── */
.pdp-wish {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff;
  color: var(--ink-700);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
  flex-shrink: 0;
}
.pdp-wish:hover { color: var(--lilac-500); border-color: var(--lilac-300, var(--lilac-400)); }
.pdp-wish.is-on { color: var(--lilac-500); border-color: var(--lilac-500); background: var(--lilac-50); transform: scale(1.05); }

/* ── PDP promises bar (badges) ────────────────────────── */
.pdp-promises {
  list-style: none; margin: 24px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px 18px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink-700);
}
.pdp-promises li { display: flex; align-items: center; gap: 8px; }
.pdp-promises li span { color: var(--lilac-500); font-size: 14px; }

/* ── PDP section heads (used by ingredient, ritual, pairs) ── */
.pdp-section-head { margin-bottom: 36px; max-width: 640px; }
.pdp-section-head .eyebrow { display: inline-block; margin-bottom: 14px; color: var(--lilac-500); }
.pdp-section-head h2 { margin: 0; }

/* ── PDP key-ingredients section ──────────────────────── */
.pdp-ingredients-section { padding: 80px 0 40px; }
.pdp-ingredients-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.pdp-ing-card {
  position: relative;
  padding: 28px 24px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pdp-ing-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(89,60,103,0.35); border-color: var(--lilac-300, var(--lilac-400)); }
.pdp-ing-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--ink-500);
  margin-bottom: 14px;
}
.pdp-ing-glyph {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--lilac-50);
  color: var(--lilac-500);
  font-size: 26px; line-height: 1;
  margin-bottom: 20px;
}
.pdp-ing-name {
  font-family: var(--font-display); font-size: 24px; line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink-900);
  font-feature-settings: "ss01";
}
.pdp-ing-name em { font-family: var(--font-italic); font-style: italic; color: var(--lilac-500); font-size: 0.78em; display: block; margin-top: 2px; letter-spacing: 0.01em; }
.pdp-ing-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-700); margin: 0; }

/* ── PDP ritual section ───────────────────────────────── */
.pdp-ritual-section { padding: 60px 0; background: linear-gradient(180deg, transparent, rgba(244,236,246,0.4), transparent); }
.pdp-ritual {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: ritual;
}
.pdp-ritual li {
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pdp-ritual-step {
  font-family: var(--font-display); font-size: 36px; line-height: 1;
  color: var(--lilac-500);
  margin-bottom: 14px;
  font-feature-settings: "ss01";
}
.pdp-ritual h4 {
  font-family: var(--font-display); font-size: 20px; line-height: 1.25;
  margin: 0 0 8px; color: var(--ink-900);
  font-feature-settings: "ss01";
}
.pdp-ritual p { font-size: 14.5px; line-height: 1.65; color: var(--ink-700); margin: 0; }

/* ── PDP tabs section (wrap existing tabs in a section now) ── */
.pdp-tabs-section { padding: 24px 0 40px; }
.pdp-tabs-section .pdp-tabs { margin-top: 0; }

/* ── PDP reviews ──────────────────────────────────────── */
.pdp-reviews-section { padding: 60px 0; border-top: 1px solid var(--line); }
.pdp-reviews-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 40px;
}
.pdp-reviews-head h2 { margin: 8px 0 0; display: flex; align-items: center; gap: 14px; }
.pdp-reviews-stars { color: var(--lilac-500); font-size: 0.55em; letter-spacing: 0.04em; }
.pdp-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pdp-review {
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.pdp-review-stars { color: var(--lilac-500); font-size: 14px; letter-spacing: 0.06em; margin-bottom: 14px; }
.pdp-review-quote {
  font-family: var(--font-display); font-size: 19px; line-height: 1.4;
  color: var(--ink-900); margin: 0 0 16px;
  font-feature-settings: "ss01";
  text-wrap: pretty;
}
.pdp-review-quote em { font-family: var(--font-italic); font-style: italic; color: var(--lilac-500); }
.pdp-review-who {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-500);
}

/* ── PDP pairs well with ──────────────────────────────── */
.pdp-pairs-section { padding: 40px 0 60px; }
.pdp-pairs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pdp-pair-card {
  display: grid; grid-template-columns: 200px 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  padding: 0;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor: pointer;
}
.pdp-pair-card:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -32px rgba(89,60,103,0.35); border-color: var(--lilac-300, var(--lilac-400)); }
.pdp-pair-art {
  position: relative;
  background: linear-gradient(160deg, #f4ecf6 0%, #e8d6ed 100%);
}
.pdp-pair-art.swatch-peach { background: linear-gradient(160deg, #fbeede 0%, #f4dcc1 100%); }
.pdp-pair-art.swatch-peachDeep { background: linear-gradient(160deg, #f6dcc1 0%, #ecc4a0 100%); }
.pdp-pair-art.swatch-cream { background: linear-gradient(160deg, #faf3e6 0%, #f1e9dc 100%); }
.pdp-pair-art.swatch-lilacLight { background: linear-gradient(160deg, #faf2fc 0%, #f1e4f4 100%); }
.pdp-pair-bottle {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38%; height: 60%;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.85));
  border-radius: 18% 18% 26% 26% / 9% 9% 14% 14%;
  box-shadow: 0 12px 30px rgba(89,60,103,0.15);
}
.pdp-pair-body {
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
  justify-content: center;
}
.pdp-pair-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lilac-500);
}
.pdp-pair-name {
  font-family: var(--font-display); font-size: 24px; line-height: 1.15;
  margin: 0; color: var(--ink-900);
  font-feature-settings: "ss01";
}
.pdp-pair-name em { font-family: var(--font-italic); font-style: italic; color: var(--lilac-500); }
.pdp-pair-desc { font-size: 14px; line-height: 1.55; color: var(--ink-700); margin: 4px 0 0; }
.pdp-pair-cta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-900);
  margin-top: 10px;
}
.pdp-pair-card:hover .pdp-pair-cta { color: var(--lilac-500); }

@media (max-width: 900px) {
  .pdp-ingredients-grid,
  .pdp-ritual,
  .pdp-reviews-grid,
  .pdp-pairs-grid { grid-template-columns: 1fr; }
  .pdp-pair-card { grid-template-columns: 140px 1fr; }
  .pdp-reviews-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── PDP "Shop more" — 4-up at end of page ────────────── */
.pdp-more-section {
  padding: 60px 0 110px;
  background: linear-gradient(180deg, transparent, rgba(244,236,246,0.35));
  border-top: 1px solid var(--line);
}
.pdp-more-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 36px;
}
.pdp-more-head h2 { margin: 8px 0 0; }
.pdp-more-head .eyebrow { color: var(--lilac-500); }
.pdp-more-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.pdp-more-card {
  display: flex; flex-direction: column;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pdp-more-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -32px rgba(89,60,103,0.35); border-color: var(--lilac-300, var(--lilac-400)); }
.pdp-more-art {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #f4ecf6 0%, #e8d6ed 100%);
}
.pdp-more-art.swatch-peach { background: linear-gradient(160deg, #fbeede 0%, #f4dcc1 100%); }
.pdp-more-art.swatch-peachDeep { background: linear-gradient(160deg, #f6dcc1 0%, #ecc4a0 100%); }
.pdp-more-art.swatch-cream { background: linear-gradient(160deg, #faf3e6 0%, #f1e9dc 100%); }
.pdp-more-art.swatch-lilacLight { background: linear-gradient(160deg, #faf2fc 0%, #f1e4f4 100%); }
.pdp-more-bottle {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 42%; height: 60%;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.85));
  border-radius: 18% 18% 26% 26% / 9% 9% 14% 14%;
  box-shadow: 0 10px 24px rgba(89,60,103,0.16);
}
/* Real product photos fill the swatched art area (cover, edge-to-edge).
   Image-slot drop-zones do the same so users can drag a photo in. */
.pdp-more-img,
.pdp-pair-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ── PDP review form (Woo + vanilla comments) — match the PDP type/spacing */
.pdp-review-form-wrap { margin-top: 56px; padding: 40px 32px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); scroll-margin-top: 120px; }
.pdp-review-form-wrap .comment-respond, .pdp-review-form-wrap #review_form_wrapper { max-width: 720px; margin: 0 auto; }
.pdp-review-form-wrap .comment-reply-title, .pdp-review-form-wrap h2, .pdp-review-form-wrap h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin: 0 0 18px; color: var(--ink-900); letter-spacing: -0.02em; }
.pdp-review-form-wrap label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); display: block; margin-bottom: 6px; }
.pdp-review-form-wrap input[type="text"], .pdp-review-form-wrap input[type="email"], .pdp-review-form-wrap input[type="url"], .pdp-review-form-wrap textarea { width: 100%; padding: 12px 18px; border: 1px solid var(--line); border-radius: 14px; font-family: var(--font-body); font-size: 14.5px; outline: none; background: var(--cream-50); margin-bottom: 16px; box-sizing: border-box; }
.pdp-review-form-wrap input:focus, .pdp-review-form-wrap textarea:focus { border-color: var(--lilac-400); }
.pdp-review-form-wrap .submit, .pdp-review-form-wrap input[type="submit"] { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--ink-900); color: #fff; border: 0; padding: 14px 28px; border-radius: 999px; cursor: pointer; }
.pdp-review-form-wrap .stars { font-size: 22px; color: var(--lilac-500); }
.pdp-more-tag {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-900);
  backdrop-filter: blur(4px);
}
.pdp-more-body {
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.pdp-more-name {
  font-family: var(--font-display); font-size: 20px; line-height: 1.15;
  margin: 0; color: var(--ink-900);
  font-feature-settings: "ss01";
}
.pdp-more-name em { font-family: var(--font-italic); font-style: italic; color: var(--lilac-500); }
.pdp-more-blurb { font-size: 13.5px; line-height: 1.5; color: var(--ink-700); margin: 2px 0 0; }
.pdp-more-foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.pdp-more-price { font-family: var(--font-display); font-size: 17px; color: var(--ink-900); font-feature-settings: "ss01"; }
.pdp-more-cta {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-700);
  transition: color .18s ease;
}
.pdp-more-card:hover .pdp-more-cta { color: var(--lilac-500); }

@media (max-width: 1024px) {
  .pdp-more-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .pdp-more-grid { grid-template-columns: 1fr; }
  .pdp-more-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── PDP "write a review" modal ───────────────────────── */
.pdp-review-modal .pdp-review-modal-inner {
  display: block;
  max-width: 560px;
  width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.pdp-review-modal .modal-body { padding: 44px 44px 36px; }
.pdp-review-modal .modal-body h2 { margin-bottom: 14px; line-height: 1.05; }
.pdp-review-modal .modal-body p { font-size: 15px; margin-bottom: 26px; max-width: 420px; }
.pdp-review-form { display: flex; flex-direction: column; gap: 18px; }
.pdp-rev-field { display: flex; flex-direction: column; gap: 8px; position: relative; }
.pdp-rev-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pdp-rev-lbl {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-500);
}
.pdp-rev-field input[type="text"],
.pdp-rev-field select,
.pdp-rev-field textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink-900);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
  width: 100%;
}
.pdp-rev-field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.pdp-rev-field input:focus,
.pdp-rev-field select:focus,
.pdp-rev-field textarea:focus {
  border-color: var(--lilac-400);
  box-shadow: 0 0 0 3px rgba(170,139,184,0.14);
}
.pdp-rev-stars { display: flex; align-items: center; gap: 4px; }
.pdp-rev-star {
  background: none; border: none; padding: 4px 2px;
  font-size: 28px; line-height: 1;
  color: var(--line);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.pdp-rev-star:hover { transform: scale(1.1); }
.pdp-rev-star.is-on { color: var(--lilac-500); }
.pdp-rev-stars-val {
  margin-left: 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-700); letter-spacing: 0.06em;
}
.pdp-rev-counter {
  position: absolute; right: 12px; bottom: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-500);
  pointer-events: none;
}
.pdp-rev-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pdp-review-thanks { text-align: left; }
.pdp-review-thanks-glyph {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--lilac-50);
  color: var(--lilac-500);
  font-size: 28px;
  margin-bottom: 20px;
}
@media (max-width: 540px) {
  .pdp-review-modal .modal-body { padding: 36px 24px 28px; }
  .pdp-rev-row { grid-template-columns: 1fr; }
  .pdp-rev-actions { flex-direction: column-reverse; }
  .pdp-rev-actions .btn { width: 100%; }
}

/* about / ingredients / journal pages (lightweight) */
.long-content { padding: 80px 0; }
.long-content h2 { margin: 0 0 24px 0; }
.long-content p { font-size: 17px; line-height: 1.75; max-width: 680px; }

/* page fade-in */
.page-fade { animation: pageFade .5s ease; }
@keyframes pageFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* tiny screens */
@media (max-width: 1100px) {
  .product-grid, .ingredients-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid, .journal-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; height: auto; min-height: auto; }
  .hero-text { max-width: 100%; padding: 40px 24px; justify-self: stretch; }
  .hero-art { min-height: 50vh; }
  .story-grid, .pdp-grid { grid-template-columns: 1fr; gap: 40px; }
  .modal { grid-template-columns: 1fr; }
  .modal-art { display: none; }
}
@media (max-width: 700px) {
  .product-grid, .ingredients-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .journal-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .journal-card h3 { font-size: 14px; line-height: 1.2; margin-bottom: 6px; }
  .journal-card .jc-cat { font-size: 9px; letter-spacing: 0.12em; }
  .journal-card .jc-meta { font-size: 11px; }
  .journal-card .jc-art { aspect-ratio: 1 / 1; border-radius: 12px; margin-bottom: 10px; }

  /* section heads stack title above meta */
  .collection-head { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 24px; margin-bottom: 32px; }
  .collection-head-meta { width: 100%; justify-content: space-between; }
  .collection-head h2 br { display: none; }
  section { padding: 64px 0; }
  .container { padding: 0 20px; }
  .ribbon-item { font-size: 22px; padding: 0 22px; }

  /* nav: burger left, logo center, actions right */
  .nav-wrap { padding: 12px 16px; }
  .nav-inner { padding: 6px 12px; gap: 10px; grid-template-columns: auto 1fr auto; }
  .nav-links { display: none; }
  .burger-btn { display: inline-flex; }
  .nav-logo { justify-self: center; }
  .nav-logo img { height: 56px; }
  .nav-wrap--floating .nav-logo img { height: 44px; }
  .nav-actions { gap: 4px; }
  .cart-pill span:not(.cart-count) { display: none; }
  .cart-pill { padding: 8px 12px; }

  /* hero: tighten, ensure photo visible */
  .hero-text { padding: 24px 20px 32px; }
  .hero-art { min-height: 60vw; height: auto !important; }
  .display-xl { font-size: clamp(44px, 11vw, 64px); line-height: 1.05; }
  .display-l { font-size: clamp(34px, 8.5vw, 48px); line-height: 1.1; }
  .display-m { font-size: clamp(26px, 6.5vw, 36px); }
  .hero-metrics { gap: 8px; padding-top: 14px; }
  .hero-metrics .metric { min-width: 0; text-align: left; padding: 0; border: 0 !important; }
  .hero-metrics .metric + .metric { padding-left: 10px; border-left: 1px solid var(--line) !important; }
  .hero-metrics .metric .num { font-size: 16px !important; }
  .hero-metrics .metric .lbl { font-size: 9px !important; letter-spacing: 0.04em !important; white-space: normal; line-height: 1.25; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* footer: brand on its own row, link sections in 2-col grid */
  .footer { padding: 56px 0 24px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .footer-brand { grid-column: 1 / -1; text-align: center; }
  .footer-brand img { height: 200px; margin: 0 auto 12px; }
  .footer-brand p { max-width: 420px; margin: 0 auto; font-size: 15px; line-height: 1.55; }
  .footer h5 { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 12px; }
  .footer ul { gap: 10px; }
  .footer ul li { display: block; }
  .footer ul a {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-700);
    transition: color .2s ease;
  }
  .footer ul a:hover, .footer ul a:active { background: transparent; color: var(--lilac-500); }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; font-size: 13px; }

  /* search modal: full-width, top-anchored */
  .search-overlay { padding-top: 80px; align-items: flex-start; }
  .search-modal { width: calc(100vw - 24px); border-radius: 18px; padding: 10px 10px 14px; }
  .search-modal-form { padding: 12px 14px; gap: 10px; }
  .search-modal-input { font-size: 15px; }
  .search-modal-suggest { padding: 12px 4px 2px; }
  .search-modal-chip { font-size: 12px; padding: 6px 12px; }
  .search-modal-result { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 10px 12px; }
  .search-modal-result-swatch { width: 36px; height: 36px; }

  /* page heads */
  .page-head { padding: 100px 20px 40px; }

  /* PDP, story, soapbox already collapse via 1100px breakpoint */
  .sbx-hero, .soapbox-hero { padding-top: 100px; }

  /* mini cart full width */
  .cart-drawer { width: 100vw; max-width: 100vw; }

  /* newsletter modal */
  .modal { width: calc(100vw - 24px); }
  .modal-body { padding: 28px 20px 32px; }

  /* about/help two-col → stack */
  .help-page-grid, [class*="long-content"] + nav { grid-template-columns: 1fr !important; }

  /* readability bump for older audiences — bigger body text + buttons */
  body { font-size: 17px; }
  p, li, .body, .body-l, .muted { font-size: 17px; line-height: 1.65; }
  .btn { font-size: 15px; min-height: 48px; padding: 14px 22px; }
  .btn-lg { font-size: 16px; min-height: 52px; }
  .filter-chip { font-size: 13px; padding: 10px 16px; }
  .nav-link, .menu-panel a { font-size: 17px; }
  .product-card h3, .pc-name { font-size: 18px; }
  .pc-price, .product-card .price { font-size: 16px; }
  input, textarea, select { font-size: 16px; /* prevents iOS auto-zoom */ }
}

/* even tighter — phones <420 */
@media (max-width: 420px) {
  .cart-pill { padding: 8px 10px; }
  .icon-btn { width: 36px; height: 36px; }
  .nav-logo img { height: 48px; }
  .display-xl { font-size: clamp(38px, 12vw, 52px); }
}

/* ── overall polish: smoother focus, scrollbar, selection ─────── */
::selection { background: var(--lilac-300); color: var(--ink, #1c1322); }
:focus-visible { outline: 2px solid var(--lilac-400, #aa8bb8); outline-offset: 3px; border-radius: 6px; }
button:focus-visible, a:focus-visible { outline-offset: 4px; }
html { scroll-behavior: smooth; }
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { overflow-x: hidden; }
img, svg { image-rendering: -webkit-optimize-contrast; }

/* tighten balance for headlines */
.display-xl, .display-l, .display-m { text-wrap: balance; }
.muted, p { text-wrap: pretty; }

/* tap target safety on mobile */
@media (max-width: 700px) {
  a, button { -webkit-tap-highlight-color: rgba(170,139,184,0.18); }
  .btn { min-height: 48px; }
  .ribbon-item { font-size: 20px; padding: 0 18px; }

  /* page-head spacing */
  .page-head h1 { font-size: clamp(38px, 9vw, 52px); }
  .page-head p { font-size: 15px; max-width: 90%; }

  /* product card refinements */
  .product-card .pc-art { aspect-ratio: 4 / 5; }
  .product-card h3 { font-size: 16px; line-height: 1.25; }
  .product-card .pc-sub { font-size: 12px; }
  .product-card .pc-price { font-size: 15px; }
  .pc-quick { font-size: 12px; padding: 10px 14px; }
  .pc-idx { font-size: 11px; }

  /* cart drawer polish */
  .cart-drawer-head { padding: 18px 20px; }
  .cart-drawer-body { padding: 16px 20px; }
  .cart-drawer-foot { padding: 18px 20px 22px; }

  /* menu panel polish */
  .menu-panel { padding: 18px 22px 24px; }
  .menu-panel-link-label { font-size: 28px; }
  .menu-panel-link { padding: 16px 4px; }

  /* journal cards: tighter on small phones */
  .journal-card h3 { font-size: 13px; }
}

/* smoother card hover everywhere */
.product-card, .journal-card, .ingredient-card, .review-card {
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

/* link hover — subtle underline grow */
a:not(.btn):not(.nav-link):not(.menu-panel-link):not(.nav-logo):not(.icon-btn):not(.cart-pill):not(.menu-panel-foot-link):not(.search-modal-result) {
  transition: color .2s ease, opacity .2s ease;
}

/* button shimmer refinement */
.btn { letter-spacing: 0.06em; }
.btn-primary { box-shadow: 0 6px 18px -8px rgba(89, 60, 103, 0.3); }
.btn-primary:hover { box-shadow: 0 10px 24px -8px rgba(89, 60, 103, 0.4); }

/* hairline divider helper */
hr, .hr { border: 0; height: 1px; background: var(--line, #ece5ec); margin: 0; }


/* ── search overlay modal ───────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 19, 34, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-modal {
  width: min(680px, 90vw);
  background: var(--paper, #fbf6fb);
  border-radius: 24px;
  box-shadow: 0 30px 80px -20px rgba(28, 19, 34, 0.4);
  padding: 14px 14px 18px;
  transform: translateY(-12px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.6,.1,.3,1), opacity .25s ease;
}
.search-overlay.open .search-modal { transform: translateY(0); opacity: 1; }
.search-modal-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-pill, 999px);
  background: #fff;
  border: 1px solid var(--line, #ece5ec);
}
.search-modal-icon {
  display: inline-flex;
  color: var(--ink-500, #6b5e6e);
  flex-shrink: 0;
}
.search-modal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-900);
  padding: 4px 0;
}
.search-modal-input::placeholder { color: var(--ink-500, #6b5e6e); }
.search-modal-input::-webkit-search-cancel-button,
.search-modal-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-modal-input::-ms-clear { display: none; width: 0; height: 0; }
.search-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--ink-500, #6b5e6e);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.search-modal-close:hover { background: var(--lilac-100, #f1eaf3); }
.search-modal-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 14px 6px 4px;
}
.search-modal-suggest-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500, #6b5e6e);
  margin-right: 4px;
}
.search-modal-chip {
  background: transparent;
  border: 1px solid var(--line, #ece5ec);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-700, #3a2f3e);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.search-modal-chip:hover {
  background: var(--lilac-100, #f1eaf3);
  border-color: var(--lilac-400, #aa8bb8);
  color: var(--lilac-500, #80588a);
}


/* ── search results ───────────────────────────────── */
.search-modal-results {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  max-height: 60vh;
  overflow-y: auto;
}
.search-modal-result {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
}
.search-modal-result:hover { background: var(--lilac-100, #f1eaf3); }
.search-modal-result-swatch {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lilac-200, #e6d6ec);
  flex-shrink: 0;
}
.search-modal-result-swatch.swatch-lilac { background: linear-gradient(135deg, #d8c4e3, #a890bb); }
.search-modal-result-swatch.swatch-cream { background: linear-gradient(135deg, #f3e7d5, #d4b896); }
.search-modal-result-swatch.swatch-rose  { background: linear-gradient(135deg, #efd4d4, #c79c9c); }
.search-modal-result-swatch.swatch-honey { background: linear-gradient(135deg, #f5dfa8, #c89b3f); }
.search-modal-result-swatch.swatch-moss  { background: linear-gradient(135deg, #cfd9c2, #87a376); }
.search-modal-result-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.search-modal-result-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-900);
}
.search-modal-result-name em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--lilac-500);
  font-weight: 400;
}
.search-modal-result-meta {
  font-size: 12.5px;
  color: var(--ink-500, #6b5e6e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-modal-result-price {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700, #3a2f3e);
}
.search-modal-empty {
  padding: 22px 14px;
  font-size: 14px;
  color: var(--ink-500, #6b5e6e);
  text-align: center;
}


/* help page mobile */
@media (max-width: 700px) {
  .help-page-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .help-page-tabs { position: static !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; }
}

/* ── Category pages (own URL per shop sub-nav item) ─────── */
.category-page { padding-bottom: 80px; }
.category-hero {
  padding: 56px 0 64px;
  background:
    radial-gradient(ellipse 70% 60% at 12% 30%, rgba(170,139,184,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 95% 100%, rgba(243,199,156,0.18) 0%, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.category-hero--facial-oil {
  background:
    radial-gradient(ellipse 60% 60% at 15% 30%, rgba(170,139,184,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 95% 100%, rgba(252,224,232,0.40) 0%, transparent 70%),
    var(--bg);
}
.category-hero--soap {
  background:
    radial-gradient(ellipse 70% 60% at 12% 30%, rgba(243,199,156,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 95% 100%, rgba(170,139,184,0.18) 0%, transparent 60%),
    var(--bg);
}
.category-hero--body-oil {
  background:
    radial-gradient(ellipse 70% 60% at 12% 30%, rgba(252,224,232,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 95% 100%, rgba(170,139,184,0.18) 0%, transparent 60%),
    var(--bg);
}
.category-hero--hair-oil {
  background:
    radial-gradient(ellipse 70% 60% at 12% 30%, rgba(170,139,184,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 95% 100%, rgba(243,228,208,0.45) 0%, transparent 70%),
    var(--bg);
}
.category-hero--deodorant {
  background:
    radial-gradient(ellipse 70% 60% at 12% 30%, rgba(216,224,210,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 95% 100%, rgba(170,139,184,0.18) 0%, transparent 60%),
    var(--bg);
}
.category-hero--accessories {
  background:
    radial-gradient(ellipse 70% 60% at 12% 30%, rgba(241,227,234,0.7) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 92% 78%, rgba(243,199,156,0.22) 0%, transparent 60%),
    var(--bg);
}
.category-hero-inner { max-width: 760px; }
.crumbs-bar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: 14px 0;
}
.crumbs {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500);
}
.crumbs-item { display: inline-flex; align-items: center; }
.crumbs-item a {
  color: var(--ink-500); text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.crumbs-item a:hover { color: var(--lilac-500); border-bottom-color: var(--lilac-500); }
.crumbs-current { color: var(--ink-900); font-weight: 500; }
.crumbs-sep { display: inline-flex; align-items: center; color: var(--ink-300, var(--ink-500)); opacity: 0.55; }
@media (max-width: 720px) {
  .crumbs-bar { padding: 10px 0; }
  .crumbs { gap: 8px; font-size: 10px; }
}
.category-crumbs {
  display: none;
  align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 24px;
}
.category-crumbs a { color: var(--ink-500); }
.category-crumbs a:hover { color: var(--lilac-500); }
.category-crumbs-current { color: var(--ink-900); }
.category-eyebrow { margin-bottom: 18px; display: inline-block; color: var(--lilac-500); }
.category-title { margin-bottom: 22px; max-width: 14ch; }
.category-sub { font-size: 17.5px; line-height: 1.65; color: var(--ink-700); max-width: 540px; margin-bottom: 28px; }
.category-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-700);
  backdrop-filter: blur(8px);
}
.category-badge::before { content: "✿"; color: var(--lilac-500); }

.category-grid-section { padding: 56px 0 0; }
.category-grid-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.category-empty { padding: 80px 0 40px; }
.category-empty-card {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 56px 48px;
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px -30px rgba(80,50,90,0.2);
}
.category-empty-glyph {
  display: inline-block;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 48px;
  color: var(--lilac-500);
  margin-bottom: 12px;
  line-height: 1;
}
.category-empty-card h2 { margin-bottom: 14px; }
.category-empty-card p { max-width: 480px; margin: 0 auto 28px; }
.category-empty-form {
  display: flex; gap: 10px;
  max-width: 460px; margin: 0 auto 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.category-empty-form input {
  flex: 1; min-width: 200px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 15px;
}
.category-empty-form.is-submitted { opacity: 0.6; pointer-events: none; }
.category-empty-note { font-size: 13px; margin-top: 8px; }
.category-empty-note a { color: var(--lilac-500); text-decoration: underline; }

@media (max-width: 720px) {
  .category-hero { padding: 36px 0 44px; }
  .category-title { font-size: clamp(34px, 8.5vw, 48px); }
  .category-sub { font-size: 16px; }
  .category-empty-card { padding: 36px 24px; }
  .category-empty-form { flex-direction: column; }
  .category-empty-form button { width: 100%; }
}

/* ────────────────────────────────────────────────────────────
   Accessibility + vibrancy pass (keeps highlight #aa8bb8)
   - Higher contrast on small/meta text for older readers
   - Bumps tiny text to legible minimums
   - Adds keyboard focus indicators
   - Warmer, livelier background gradients (still calm)
──────────────────────────────────────────────────────────── */

/* lift body weight a touch + warmer base gradient under everything */
body {
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(170,139,184,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(243,199,156,0.08) 0%, transparent 60%),
    var(--bg);
}

/* paragraphs everywhere: minimum 16px, line-height 1.7 */
p, li { font-size: 16px; line-height: 1.7; color: var(--ink-700); }

/* "muted" should still be readable — bump from 13/14 floor */
.muted, .hero-sub, .ingredient-card p, .sbx-includes span, .sbx-step p,
.sbx-faq-item p, .journal-card .jc-meta, .review-card cite,
.cart-line .cl-info p, .bloom-sub, .bloom-promo-perk-lbl,
.bloom-perk-col li, .nav-mega-feature-sub, .nav-mega-sub,
.bloom-promo-card-perk, .product-card .pc-ingredients {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-500);
}

/* hero subhead: more readable */
.hero-sub { font-size: 17px; max-width: 480px; }

/* eyebrow / meta uppercase — bump from 11–13 to 12–13 with slightly tighter tracking */
.eyebrow,
.pc-meta, .pc-attr .lbl, .pdp-attr .lbl,
.hero-metrics .metric .lbl,
.bloom-points-lbl, .bloom-step-range,
.search-modal-result-meta,
.article-meta, .article-back, .filter-chip {
  letter-spacing: 0.12em;
}

/* paragraph max-width for comfort reading */
.long-content p, .article-body p, .help-page-content p,
.modal-body p, .bloom-modal-foot-note {
  max-width: 62ch;
}

/* form fields: 16px to prevent iOS zoom + clearer placeholders */
input, textarea, select { font-size: 16px; }
input::placeholder, textarea::placeholder { color: var(--ink-500); opacity: 0.85; }

/* keyboard focus ring — visible on dark + light surfaces */
:focus-visible {
  outline: 2px solid var(--lilac-500);
  outline-offset: 3px;
  border-radius: 6px;
}
button:focus-visible, a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--lilac-500);
  outline-offset: 3px;
}

/* boost contrast on link hover so it's obvious */
a:hover { color: var(--lilac-500); }

/* atmospheric gradient blobs — used sparingly across sections so the page
   feels coherent without overusing the effect on any one screen */
.hero {
  background:
    radial-gradient(ellipse 65% 55% at 10% 28%, rgba(170,139,184,0.18) 0%, transparent 62%),
    radial-gradient(ellipse 45% 45% at 92% 88%, rgba(243,199,156,0.15) 0%, transparent 62%),
    radial-gradient(ellipse 70% 60% at 55% 100%, rgba(252,224,232,0.22) 0%, transparent 70%),
    var(--bg);
}
.collection {
  position: relative;
  background:
    radial-gradient(ellipse 50% 40% at 95% 5%, rgba(170,139,184,0.10) 0%, transparent 60%),
    var(--bg);
}
.bloom-promo {
  position: relative;
  background:
    radial-gradient(ellipse 55% 45% at 8% 92%, rgba(243,199,156,0.11) 0%, transparent 60%),
    radial-gradient(ellipse 35% 35% at 95% 10%, rgba(170,139,184,0.09) 0%, transparent 60%),
    var(--bg) !important;
}

/* product card lift — slightly more saturated swatches for vibrancy */
.product-card.swatch-lilac      .pc-art { background: linear-gradient(160deg, #ecd5f3 0%, #c9a8d3 100%); }
.product-card.swatch-lilacLight .pc-art { background: linear-gradient(160deg, #f5e3f8 0%, #d4bcdd 100%); }
.product-card.swatch-peach      .pc-art { background: linear-gradient(160deg, #fbdcbe 0%, #ecb487 100%); }
.product-card.swatch-peachDeep  .pc-art { background: linear-gradient(160deg, #f4c098 0%, #d6975f 100%); }
.product-card.swatch-cream      .pc-art { background: linear-gradient(160deg, #f6ecdc 0%, #e3d0b3 100%); }

/* ribbon text size up for legibility */
.ribbon-item { font-size: 19px; }

/* mobile floor: 16px min body, 18px for the hero/important pages */
@media (max-width: 720px) {
  body { font-size: 17px; }
  p, li { font-size: 16px; }
  .hero-sub { font-size: 16px; }
  .muted, .ingredient-card p, .sbx-step p, .nav-mega-feature-sub,
  .bloom-perk-col li, .review-card cite, .bloom-promo-perk-lbl { font-size: 15px; }
}


/* ── breadcrumb icon ─────────────────────────────────── */
.crumbs-item a, .crumbs-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.crumbs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.85;
  transform: translateY(-0.5px);
}
.crumbs-item a:hover .crumbs-icon { opacity: 1; }

/* ── login prompt modal (favourite gate) ─────────────── */
.login-prompt-overlay .modal.login-prompt {
  display: block;                 /* override 2-col grid */
  max-width: 460px;
  width: min(460px, 92vw);
  background: var(--cream-50);
  text-align: left;
}
.login-prompt-body {
  padding: 44px 40px 36px;
  position: relative;
}
.login-prompt-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--lilac-100);
  color: var(--lilac-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.login-prompt-body h2 { margin-bottom: 14px; }
.login-prompt-body p.muted {
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 26px;
  color: var(--ink-500);
  max-width: 100%;
}
.login-prompt-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.login-prompt-actions .btn { flex: 1 1 auto; }
.login-prompt-foot {
  margin-top: 18px !important;
  font-size: 12px !important;
  color: var(--ink-500);
  letter-spacing: 0.01em;
}
@media (max-width: 520px) {
  .login-prompt-body { padding: 36px 26px 28px; }
  .login-prompt-actions { flex-direction: column; }
  .login-prompt-actions .btn { width: 100%; }
}

/* ── account: saved favourites ───────────────────────── */
.account-favs-section { padding: 8px 0 32px; }
.account-favs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.account-favs-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}

.account-favs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--cream-50) 60%, transparent);
}
.account-favs-empty-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--lilac-100);
  color: var(--lilac-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.account-favs-empty p {
  font-size: 15px;
  color: var(--ink-500);
  max-width: 360px;
  margin-bottom: 18px;
}

.account-favs-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.account-fav {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.account-fav:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.account-fav-art {
  position: relative;
  aspect-ratio: 5 / 4;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(160deg, #ecd5f3 0%, #c9a8d3 100%);
  overflow: hidden;
}
.account-fav.swatch-lilacLight .account-fav-art { background: linear-gradient(160deg, #f5e3f8 0%, #d4bcdd 100%); }
.account-fav.swatch-peach .account-fav-art      { background: linear-gradient(160deg, #fbdcbe 0%, #ecb487 100%); }
.account-fav.swatch-peachDeep .account-fav-art  { background: linear-gradient(160deg, #f4c098 0%, #d6975f 100%); }
.account-fav.swatch-cream .account-fav-art      { background: linear-gradient(160deg, #f6ecdc 0%, #e3d0b3 100%); }
.account-fav-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.account-fav-body {
  padding: 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-fav-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink-900);
  cursor: pointer;
}
.account-fav-name em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--lilac-500);
}
.account-fav-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.account-fav-price { color: var(--ink-900); font-weight: 500; }
.account-fav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-fav-actions .btn { flex: 1; }
.account-fav-remove {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.account-fav-remove:hover {
  background: var(--lilac-100);
  color: var(--lilac-600);
  border-color: var(--lilac-300);
}
@media (max-width: 520px) {
  .account-favs-grid { grid-template-columns: 1fr; gap: 16px; }
  .account-favs-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* ── PDP: bulk-buy tiers ─────────────────────────────── */
.pdp-bulk {
  margin: 28px 0 32px;
  padding: 20px 22px 18px;
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--lilac-50) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
/* Soft divider above the CTA so it doesn't butt against the bulk card */
.pdp-info .pdp-bulk + .pdp-cta {
  padding-top: 28px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
/* A touch more air on either side of the promises strip */
.pdp-promises { margin-top: 32px !important; padding-top: 22px !important; }
.pdp-bulk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.pdp-bulk-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.pdp-bulk-saving {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lilac-600);
  background: var(--lilac-100);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.pdp-bulk-tiers {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pdp-bulk-tier {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
  position: relative;
}
.pdp-bulk-tier:hover {
  border-color: var(--lilac-300);
  background: #fff;
}
.pdp-bulk-tier.is-active {
  border-color: var(--lilac-500);
  background: color-mix(in srgb, var(--lilac-100) 70%, #fff);
  box-shadow: 0 0 0 1px var(--lilac-500) inset;
}
.pdp-bulk-pct {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--lilac-600);
  line-height: 1;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 144;
}
.pdp-bulk-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.pdp-bulk-qty {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.pdp-bulk-each {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.pdp-bulk-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: transparent;
  border: 1px solid var(--line);
  flex-shrink: 0;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pdp-bulk-tier.is-active .pdp-bulk-check {
  background: var(--lilac-500);
  color: #fff;
  border-color: var(--lilac-500);
}

/* CTA: discounted total with strikethrough */
.pdp-cta-strike {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  opacity: 0.55;
  text-decoration: line-through;
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .pdp-bulk { padding: 14px 14px 12px; }
  .pdp-bulk-tiers { grid-template-columns: 1fr; }
  .pdp-bulk-tier { padding: 11px 12px; }
  .pdp-bulk-pct { font-size: 20px; }
}


/* ── newsletter popup: success state wrap ─────────────── */
.modal-success-wrap {
  position: relative;
  /* match the form's footprint: input + button + decline link + gaps */
  min-height: 168px;
  margin-top: 4px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.modal-success-wrap .newsletter-success {
  position: absolute;
  inset: 0;
  padding: 24px 28px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  flex-direction: column;
  gap: 16px;
}
.modal-success-wrap .newsletter-check { width: 44px; height: 44px; }


/* ──────────────────────────────────────────────────────────────
   READABILITY PASS  +  BURGER ICON
   Appended last so it wins. Goals:
   - bigger body + line-height
   - darker "muted" greys for better contrast
   - bump 10–11px mono/uppercase metadata to 12px+ floor
   - larger button text + min hit area
   - darken lilac italic accents so they're readable on white
   - mobile: comfortable type scale, generous tap targets
   ────────────────────────────────────────────────────────────── */

:root {
  /* Push muted greys darker for AAA-ish contrast on the cream backgrounds */
  --ink-500: #2e2440;   /* was #342947 — darker, still warm */
  --ink-300: #4a3d5c;   /* was #5e4f70 */
  --line:    rgba(89, 60, 103, 0.32);  /* slightly stronger hairlines */
}

/* — base body — */
html { font-size: 17px; }
body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-900);
  font-weight: 420;
}
p, li { font-size: 17px; line-height: 1.7; color: var(--ink-700); }

/* — italic accents: lilac-500 (#aa8bb8) had poor contrast on light bg —
   shift to lilac-600 which is plum and readable. Keep ::after dot the
   brighter accent so visual rhythm is preserved. */
.italic-accent,
h1 em, h2 em, h3 em, h4 em, h5 em,
.pc-name em, .pdp-ing-name em, .pdp-pair-name em, .pdp-more-name em,
.hero h1 em, .pdp-info h1 em, .sbx-includes strong em,
.bloom-title em, .pdp-review-quote em, .nav-mega-label em,
.search-modal-result-name em, .pdp-sticky-name em,
.pdp-rating-val em {
  color: var(--lilac-600);
}
.eyebrow { color: var(--lilac-600); }

/* — eyebrows / mono / uppercase metadata: lift to readable size — */
.eyebrow {
  font-size: 14px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.nav-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-900);
}
.btn {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 15px 26px;
  min-height: 46px;
}
.btn-lg { font-size: 15px; padding: 16px 30px; min-height: 50px; }

/* — meta / labels that were 10–11px get a floor of 12px — */
.collection-count,
.pc-size, .pc-sizes, .pc-price,
.pc-meta .pc-size, .pc-meta .pc-price,
.product-card .pc-idx, .product-card .pc-tag,
.pdp-batch, .pdp-batch-lbl, .pdp-batch-val,
.pdp-rating, .pdp-rating-count,
.pdp-attr .lbl,
.hero-metrics .metric .lbl,
.ribbon-item, .footer h5,
.search-modal-result-meta,
.search-modal-result-price,
.crumbs, .crumbs-item, .crumbs-current,
.bloom-points-lbl, .bloom-step-range,
.filter-chip,
.shop-toolbar, .shop-toolbar *,
.cart-line .cl-info p,
.cart-totals,
.pdp-tab,
.pdp-sticky-meta,
.menu-panel-foot-link,
.sbx-plan-tab, .sbx-past-meta,
.nav-mega-col h6.nav-mega-heading,
.nav-mega-feature-cta,
.pdp-promises,
.pdp-promises li {
  font-size: 12.5px;
}

/* a few specific things that need to be a bit larger again */
.pc-price, .pdp-tab, .filter-chip { font-size: 13.5px; }
.pdp-rating, .pdp-rating-val { font-size: 13.5px; }
.crumbs, .crumbs-item, .crumbs-current { font-size: 12px; }
.collection-count { font-size: 12.5px; letter-spacing: 0.12em; }

/* — product card titles a touch larger, ingredient line darker — */
.product-card .pc-name { font-size: 28px; line-height: 1.08; }
.product-card .pc-ingredients { font-size: 15px; color: var(--ink-500); line-height: 1.5; }

/* — hero copy bigger + more comfortable line-length — */
.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  max-width: 520px;
  color: var(--ink-700);
  margin-bottom: 18px;
}
.hero h1 { margin-bottom: 18px; }

/* — story section: bigger reading copy — */
.story p { font-size: 18px; line-height: 1.7; max-width: 520px; color: var(--ink-700); }

/* — ribbon: bigger, less italic squishing — */
.ribbon-item { font-size: 22px; letter-spacing: 0.01em; }

/* — footer: link list comfy — */
.footer ul a { font-size: 15px; line-height: 1.6; }
.footer h5 { font-size: 12.5px; }
.footer-bottom { font-size: 14px; }

/* — long-form: comfortable measure — */
.long-content p, .article-prose p, .article-body p {
  font-size: 19px;
  line-height: 1.75;
  max-width: 64ch;
  color: var(--ink-700);
}
.article-prose p { font-size: 22px; }

/* — page heads — */
.page-head p { font-size: 17px; line-height: 1.6; }

/* — soapbox section — */
.soapbox-list li { font-size: 17px; line-height: 1.6; }

/* — burger icon (image) — */
.burger-btn { width: 44px; height: 44px; display: none; }
.burger-btn .burger-icon {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
  transition: transform .25s ease, opacity .2s ease;
  pointer-events: none;
}
.burger-btn:hover .burger-icon { transform: scale(1.08); opacity: 0.85; }
.burger-btn.is-open .burger-icon { transform: rotate(90deg); opacity: 0.7; }
/* old span lines are no longer rendered — but if any lingered, hide them */
.burger-btn > span { display: none !important; }

/* ─────────── MOBILE READABILITY (≤700px) ─────────── */
@media (max-width: 700px) {
  html { font-size: 17px; }
  body { font-size: 17px; line-height: 1.65; }
  p, li { font-size: 17px; line-height: 1.7; }

  /* show burger */
  .burger-btn { display: inline-flex; align-items: center; justify-content: center; }

  /* Hero — generous, no clamps squashing the lead */
  .hero-text { padding: 28px 22px 36px; }
  .hero-sub { font-size: 17px; line-height: 1.55; max-width: 100%; }
  .display-xl { font-size: clamp(40px, 10vw, 60px); line-height: 1.05; }
  .display-l  { font-size: clamp(34px, 8.5vw, 50px); line-height: 1.08; }
  .display-m  { font-size: clamp(28px, 7vw, 40px);  line-height: 1.12; }
  .display-s  { font-size: 24px; line-height: 1.18; }

  /* Buttons: comfortable thumbs */
  .btn { font-size: 16px; min-height: 50px; padding: 15px 24px; letter-spacing: 0.05em; }
  .btn-lg { font-size: 16.5px; min-height: 54px; }
  .filter-chip { font-size: 13.5px; padding: 11px 16px; min-height: 40px; }

  /* Product cards: clearer hierarchy */
  .product-card .pc-name { font-size: 22px; line-height: 1.15; }
  .product-card .pc-ingredients { font-size: 14px; }
  .product-card .pc-price { font-size: 15px; }
  .pc-size, .pc-sizes { font-size: 11.5px; letter-spacing: 0.08em; }

  /* Meta / mono — keep a 11.5px floor but tighter tracking on mobile */
  .collection-count, .pc-idx, .pc-tag,
  .pdp-batch, .pdp-attr .lbl,
  .crumbs, .crumbs-item, .crumbs-current,
  .menu-panel-foot-link {
    font-size: 11.5px;
    letter-spacing: 0.08em;
  }

  /* Long-form */
  .long-content p, .article-body p { font-size: 17px; line-height: 1.7; }
  .article-prose p { font-size: 19px; line-height: 1.7; }

  /* Ribbon — keep readable, prevent overlap */
  .ribbon { padding: 16px 0; }
  .ribbon-item { font-size: 19px; padding: 0 18px; }

  /* Footer */
  .footer ul a { font-size: 15.5px; }
  .footer-bottom { font-size: 13px; }

  /* Section heads */
  .section-head { margin-bottom: 40px; }

  /* Page heads */
  .page-head { padding: 56px 20px 36px; }
  .page-head h1 { font-size: clamp(34px, 8vw, 46px); line-height: 1.08; }
  .page-head p { font-size: 16px; line-height: 1.55; }

  /* Eyebrows: don't shrink */
  .eyebrow { font-size: 12.5px; letter-spacing: 0.16em; }

  /* Nav burger icon a touch larger on mobile for thumbs */
  .burger-btn { width: 48px; height: 48px; }
  .burger-btn .burger-icon { width: 28px; height: 28px; }

  /* Cart drawer text */
  .cart-line .cl-info h4 { font-size: 17px; }
  .cart-line .cl-info p { font-size: 14px; }
  .cart-totals { font-size: 15px; }
  .cart-totals.grand { font-size: 18px; }

  /* Mini cart / sticky bar fix overlap */
  .pdp-sticky-name { font-size: 16px; }
  .pdp-sticky-meta { font-size: 11.5px; }
}

/* ─────────── ≤420 — narrowest phones ─────────── */
@media (max-width: 420px) {
  .hero-text { padding: 24px 18px 32px; }
  .display-xl { font-size: 38px; line-height: 1.05; }
  .display-l  { font-size: 32px; line-height: 1.08; }
  .btn { font-size: 15px; padding: 14px 20px; }
  .container, .container-narrow { padding: 0 18px; }
  .product-card .pc-name { font-size: 19px; }
}

/* — anti-aliasing & contrast polish — */
body { text-rendering: optimizeLegibility; }
.muted { color: var(--ink-500); }

/* — focus visibility — */
:focus-visible {
  outline: 3px solid var(--lilac-500);
  outline-offset: 2px;
  border-radius: 6px;
}


/* ── hero metrics: bigger + bolder (incl. mobile) ───────── */
.hero-metrics { gap: 20px; padding-top: 18px; margin-top: 22px; }
.hero-metrics .metric .num {
  font-size: clamp(26px, 2.6vw, 34px) !important;
  font-weight: 600;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 144;
  line-height: 1.05;
  margin-bottom: 6px;
}
.hero-metrics .metric .num em {
  font-weight: 500;
  color: var(--lilac-600);
}
.hero-metrics .metric .lbl {
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  font-weight: 600;
  color: var(--ink-700);
  line-height: 1.3;
}

@media (max-width: 720px) {
  .hero-metrics { gap: 14px !important; padding-top: 16px; margin-top: 20px; }
  .hero-metrics .metric { padding: 0; }
  .hero-metrics .metric + .metric { padding-left: 14px !important; }
  .hero-metrics .metric .num { font-size: 24px !important; line-height: 1.05; }
  .hero-metrics .metric .lbl {
    font-size: 11.5px !important;
    letter-spacing: 0.08em !important;
    font-weight: 600;
  }
}

@media (max-width: 420px) {
  .hero-metrics .metric .num { font-size: 21px !important; }
  .hero-metrics .metric .lbl { font-size: 10.5px !important; letter-spacing: 0.06em !important; }
}


/* nav links: never wrap (SOAPBOX MONTHLY etc) */
.nav-link { white-space: nowrap; }


/* ── product card ingredient line: bolder + darker ─────── */
.product-card .pc-ingredients {
  font-weight: 500;
  color: var(--ink-700);
  font-size: 15.5px;
  letter-spacing: 0.01em;
}
.product-card .pc-dot { color: var(--lilac-600); font-weight: 600; }

@media (max-width: 700px) {
  .product-card .pc-ingredients { font-size: 14.5px; font-weight: 500; }
}


/* ── bold every italic/cursive accent across the site ───── */
.italic-accent,
em,
.font-italic,
[class*="italic"],
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.hero h1 em,
.pdp-info h1 em,
.pc-name em,
.pdp-ing-name em,
.pdp-pair-name em,
.pdp-more-name em,
.pdp-review-quote em,
.bloom-title em,
.nav-mega-label em,
.search-modal-result-name em,
.pdp-sticky-name em,
.story .signature,
.metric .num em,
.hero-metrics .metric .num em,
.product-card .pc-ingredients,
.product-card .pc-dot,
.pc-dot,
.sbx-num, .sbx-step-no, .sbx-stamp-no,
.soapbox-bullet, .soapbox-stamp-no,
.bloom-points-num,
.bloom-promo-perk-glyph,
.pdp-ritual-step,
.pdp-rev-stars-val,
.pdp-ing-num,
.bloom-step-label,
.sbx-faq-item summary::after,
.sbx-perks li::before,
.menu-panel-link-num,
.menu-panel-tag,
.article-prose em,
.long-content em,
.bloom-promo-card-perk em,
.bloom-promo-perk-lbl em,
.modal-body em,
.category-empty-glyph,
.pdp-batch em,
.bloom-card::before,
.ribbon-item {
  font-weight: 500;
}

/* Fraunces italics use variation axes — push weight in display fonts too */
.italic-accent,
h1 em, h2 em, h3 em, h4 em,
.hero h1 em, .pdp-info h1 em,
.pc-name em, .pdp-ing-name em, .pdp-pair-name em, .pdp-more-name em,
.pdp-review-quote em, .bloom-title em, .nav-mega-label em,
.search-modal-result-name em, .pdp-sticky-name em,
.metric .num em, .hero-metrics .metric .num em,
.story .signature, .ribbon-item,
.sbx-num, .sbx-step-no, .sbx-stamp-no,
.bloom-points-num, .pdp-ritual-step,
.pdp-ing-num, .bloom-step-label,
.menu-panel-link-num, .menu-panel-tag,
.pdp-rev-stars-val,
.category-empty-glyph {
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 144;
}


/* mobile: stack each word of the hero metric label on its own line + bigger */
@media (max-width: 720px) {
  .hero-metrics .metric .lbl {
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    word-spacing: 100vw;       /* forces line break between words */
    line-height: 1.18 !important;
    font-weight: 600;
  }
  .hero-metrics .metric .num { font-size: 26px !important; }
}
@media (max-width: 420px) {
  .hero-metrics .metric .lbl { font-size: 12px !important; letter-spacing: 0.06em !important; }
  .hero-metrics .metric .num { font-size: 22px !important; }
}


/* ── journal grid: 4-up desktop, 2-up tablet/mobile, bigger cards ── */
.journal-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
}
.journal-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.18;
  margin: 8px 0 6px;
  color: var(--ink-900);
  font-weight: 500;
}
.journal-card .jc-cat {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lilac-600);
  font-weight: 600;
}
.journal-card .jc-meta { font-size: 13px; color: var(--ink-500); }
.journal-card .jc-art {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  margin-bottom: 14px;
}

@media (max-width: 1100px) {
  .journal-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
}
@media (max-width: 700px) {
  .journal-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .journal-card .jc-art { aspect-ratio: 4 / 5; border-radius: 12px; margin-bottom: 12px; }
  .journal-card h3 { font-size: 17px !important; line-height: 1.22 !important; margin-bottom: 8px !important; }
  .journal-card .jc-cat { font-size: 11px !important; letter-spacing: 0.12em !important; }
  .journal-card .jc-meta { font-size: 12.5px !important; }
}
@media (max-width: 420px) {
  .journal-card h3 { font-size: 15.5px !important; }
}

/* ── general readability bump (desktop + mobile) ─────────── */
/* product cards: clearer hierarchy desktop */
.product-card .pc-name { font-size: 28px; }
.product-card .pc-meta { padding-top: 14px; }

/* hero & display headings — punchier on small screens */
@media (max-width: 700px) {
  .hero h1 { margin-bottom: 16px; }
  .display-xl { font-size: clamp(42px, 11vw, 60px) !important; }
  .display-l  { font-size: clamp(36px, 9vw, 52px) !important; }
  .display-m  { font-size: clamp(28px, 7.2vw, 42px) !important; }
  .display-s  { font-size: clamp(22px, 5.5vw, 28px) !important; }

  /* section heads (h2 etc) */
  section h2 { font-size: clamp(28px, 7vw, 40px) !important; }
}

/* heavier product price/size on mobile */
@media (max-width: 700px) {
  .product-card .pc-price { font-size: 16px !important; font-weight: 500; }
  .product-card .pc-size, .product-card .pc-sizes { font-size: 12px !important; }
}


/* mobile menu footer links: don't go lilac on hover/tap — stay dark */
.menu-panel-foot-link,
.menu-panel-foot-link:hover,
.menu-panel-foot-link:active,
.menu-panel-foot-link:focus {
  color: var(--ink-900) !important;
}
.menu-panel-foot-link { opacity: 0.85; transition: opacity .2s ease; }
.menu-panel-foot-link:hover { opacity: 1; }


/* ── flower decoration behind member/points displays (all pages) ─── */
.bloom-points {
  position: relative;
  overflow: visible;
}
.bloom-points::after {
  content: "✿";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-italic);
  font-size: 160px;
  line-height: 1;
  color: rgba(170, 139, 184, 0.18);
  pointer-events: none;
  z-index: 0;
}
.bloom-points > * { position: relative; z-index: 1; }

/* home BloomPromo membership card — flower behind */
.bloom-promo-card {
  position: absolute;
  overflow: hidden;
}
.bloom-promo-card::before {
  content: "✿";
  position: absolute;
  top: -28px;
  right: -20px;
  font-family: var(--font-italic);
  font-size: 180px;
  line-height: 1;
  color: rgba(170, 139, 184, 0.18);
  pointer-events: none;
  z-index: 0;
}
.bloom-promo-card > * { position: relative; z-index: 1; }

/* account page Bloom Card already has ::before via earlier rule — leave intact */
@media (max-width: 720px) {
  .bloom-points::after { font-size: 110px; }
  .bloom-promo-card::before { font-size: 130px; top: -22px; right: -16px; }
}


/* ── floating newsletter reminder (home page only) ───────── */
.newsletter-reminder {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  border-radius: 999px;
  background: var(--lilac-400);
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 18px 40px -14px rgba(80, 50, 90, 0.45),
              0 2px 6px rgba(80, 50, 90, 0.18);
  font-family: var(--font-body);
  animation: newsletter-reminder-in .4s cubic-bezier(.22,1,.36,1) both;
  transition: transform .25s ease, box-shadow .25s ease, background .2s ease;
}
.newsletter-reminder:hover {
  transform: translateY(-2px);
  background: var(--lilac-500);
  box-shadow: 0 22px 44px -14px rgba(80, 50, 90, 0.55),
              0 2px 6px rgba(80, 50, 90, 0.22);
}
.newsletter-reminder-glyph {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  font-size: 15px;
}
.newsletter-reminder-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  padding-right: 4px;
}
.newsletter-reminder-text strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 60, "opsz" 144;
}
.newsletter-reminder-text span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 2px;
}
.newsletter-reminder-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  margin-left: 4px;
  opacity: 0.7;
  transition: opacity .18s ease, background .18s ease;
  background: transparent;
}
.newsletter-reminder-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.18);
}

@keyframes newsletter-reminder-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .newsletter-reminder {
    left: 12px;
    bottom: 12px;
    padding: 9px 12px 9px 10px;
  }
  .newsletter-reminder-glyph { width: 26px; height: 26px; font-size: 13px; }
  .newsletter-reminder-text strong { font-size: 14px; }
  .newsletter-reminder-text span { font-size: 9.5px; }
}


/* ── Random flower scatter (decorative background) ──────── */
.flower-scatter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.flower-scatter-glyph {
  position: absolute;
  font-family: var(--font-italic), "Times New Roman", serif;
  font-style: italic;
  line-height: 1;
  color: var(--lilac-500);
  user-select: none;
  font-feature-settings: "ss01";
  will-change: transform;
}
:where(body) > :where(:not(.flower-scatter)) { position: relative; z-index: 1; }
body { position: relative; }


/* ── Per-section flower scatter (decorative motif) ───────── */
.flower-scatter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.flower-scatter-glyph {
  position: absolute;
  font-family: var(--font-italic), "Times New Roman", serif;
  font-style: italic;
  line-height: 1;
  user-select: none;
  font-feature-settings: "ss01";
  will-change: transform;
}
:where(.hero, main section, footer.footer) > :where(:not(.flower-scatter)) {
  position: relative;
  z-index: 1;
}


/* override: flowers are NEVER italic */
.flower-scatter-glyph {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Inter", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-feature-settings: normal !important;
}

/* ── v002: live search swatch image + result row sizing ────── */
.search-modal-result-swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}
.search-modal-results {
	max-height: 52vh;
	overflow-y: auto;
}
.search-modal-results:empty { display: none; }

/* ── v003: Collection label on product cards ────────────────── */
.pc-collection {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lilac-600, #5b3e6d);
	margin-bottom: 6px;
}

/* ── v003: Search results — show collection instead of "JOURNAL" ── */
.search-modal-result-collection {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lilac-600, #5b3e6d);
	margin-bottom: 2px;
}

/* ── v003: Search results page section heads ────────────── */
.search-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line, rgba(122, 86, 138, 0.22));
}
.search-section-count {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-500, #6b5e6e);
}