/* =========================================================================
   Green Pastures — Psalm 23  ·  elegant candle atelier
   Design system: warm ivory + antique gold + eucalyptus sage
   Type: Cormorant Garamond (display) / Montserrat (text)
   ========================================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@300;400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root{
  --ink:#3B322A;
  --ink-soft:#5A5044;
  --ink-mute:#8A7963;

  /* brand accent — terracotta (Wild & Wick style) */
  --terracotta:#B0603E;
  --terracotta-deep:#934B2E;
  --terracotta-soft:#C9865F;

  /* kept for the dark hero + star ratings — do not repurpose */
  --gold:#BE9152;
  --gold-deep:#9A6F38;
  --gold-light:#D8BA83;

  --sage:#6E7A63;
  --sage-deep:#4B5642;
  --sage-mist:#EDEFE7;

  --ivory:#F5EDDF;
  --cream:#EFE3D0;
  --parchment:#F1E7D5;
  --surface:#FFFCF6;
  --border:#E2D6BF;
  --border-strong:#D2C1A4;

  --overlay-1:rgba(28,23,18,0.30);
  --overlay-2:rgba(28,23,18,0.55);

  --font-display:'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-text:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;
  --space-9:6rem; --space-10:8rem;

  --radius-sm:2px;
  --radius-md:5px;
  --radius-lg:12px;
  --radius-pill:999px;

  --shadow-soft:0 24px 60px -34px rgba(33,28,23,.42);
  --shadow-card:0 18px 44px -30px rgba(33,28,23,.38);
  --shadow-nav:0 12px 30px -20px rgba(33,28,23,.35);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --container:1220px;
  --measure:66ch;

  --header-h:76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--font-text);
  font-weight:400;
  font-size:1rem;
  line-height:1.75;
  color:var(--ink-soft);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
ul{ list-style:none; padding:0; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; border-radius:var(--radius-sm); }
/* anchor jumps (#collections, #care …) clear the fixed header */
[id]{ scroll-margin-top:calc(var(--header-h) + 1.5rem); }

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.12;
  color:var(--ink);
  letter-spacing:.005em;
}
h1{ font-size:clamp(2.9rem,6.2vw,5.1rem); font-weight:400; }
h2{ font-size:clamp(2.05rem,4.2vw,3.35rem); font-weight:400; }
h3{ font-size:clamp(1.45rem,2.5vw,2rem); }
h4{ font-size:1.15rem; }
p{ max-width:var(--measure); }

.eyebrow{
  font-family:var(--font-text);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--terracotta);
  display:inline-flex;
  align-items:center;
  gap:.9rem;
}
.eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--terracotta);
  display:inline-block;
}
.eyebrow.is-centered::after{
  content:"";
  width:34px; height:1px;
  background:var(--terracotta);
  display:inline-block;
}

.lede{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  font-style:italic;
  line-height:1.5;
  color:var(--ink-soft);
}

.script{
  font-family:var(--font-display);
  font-style:italic;
}

/* ---------- Layout helpers ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);
}
.section{ padding-block:clamp(4rem,9vw,7.5rem); }
.section--tight{ padding-block:clamp(3rem,6vw,4.5rem); }
.section--cream{ background:var(--cream); }
.section--sage{ background:var(--parchment); }
.section--ink{ background:var(--ink); color:rgba(250,247,241,.78); }
.section--ink h1,.section--ink h2,.section--ink h3{ color:#FBF7EF; }
.section--ink .eyebrow{ color:var(--gold-light); }
.section--ink .eyebrow::before,.section--ink .eyebrow.is-centered::after{ background:var(--gold-light); }

/* terracotta accent band (matches the home limited-edition panel) */
.section--accent{ background:var(--terracotta); color:rgba(248,233,220,.9); }
.section--accent h1,.section--accent h2,.section--accent h3{ color:#FBEEE2; }
.section--accent p{ color:rgba(248,233,220,.88); }
.section--accent .eyebrow{ color:rgba(248,233,220,.78); }
.section--accent .eyebrow::before,.section--accent .eyebrow.is-centered::after{ background:rgba(248,233,220,.6); }
.section--accent .btn--outline{ --btn-fg:#FBEEE2; border-color:rgba(251,238,226,.55); }
.section--accent .btn--outline:hover{ background:#FBEEE2; color:var(--terracotta-deep); border-color:#FBEEE2; }

.section-head{ max-width:640px; margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.section-head.is-centered{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-top:var(--space-4); }
.section-head p{ margin-top:var(--space-4); }
.section-head.is-centered p{ margin-inline:auto; }

.stack > * + *{ margin-top:var(--space-4); }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:#FBF7EF;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:1rem 2rem;
  font-family:var(--font-text);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bg);
  border-radius:var(--radius-sm);
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -18px rgba(33,28,23,.55); }
.btn:active{ transform:translateY(0); }
.btn--gold{ --btn-bg:var(--terracotta); --btn-fg:#FCF3EA; border-color:var(--terracotta); }
.btn--gold:hover{ background:var(--terracotta-deep); border-color:var(--terracotta-deep); color:#FCF3EA; }
.btn--outline{
  --btn-bg:transparent; --btn-fg:var(--ink);
  border-color:var(--ink);
}
.btn--outline:hover{ background:var(--ink); color:#FCF3EA; border-color:var(--ink); }
.btn--on-dark{ --btn-bg:transparent; --btn-fg:#FBF7EF; border-color:rgba(250,247,241,.4); }
.btn--on-dark:hover{ background:#FBF7EF; color:var(--ink); border-color:#FBF7EF; }
.btn--block{ width:100%; }
.btn--sm{ padding:.8rem 1.5rem; font-size:.68rem; }

.link-quiet{
  font-family:var(--font-text);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--terracotta);
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.link-quiet:hover{ gap:.95rem; color:var(--terracotta-deep); }
.link-quiet svg{ width:15px; height:15px; }

/* ---------- Header — left links · centre wordmark · right icons ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .bar{
  height:var(--header-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-4);
}
.site-header.is-solid,
.site-header.is-inner{
  background:rgba(245,237,223,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--border);
  box-shadow:0 10px 30px -24px rgba(59,50,42,.4);
}

/* centre wordmark */
.brandmark{
  grid-column:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.18rem;
  line-height:1;
  color:var(--ink);
}
.brandmark__sprig{ width:20px; height:20px; color:var(--terracotta); }
.brandmark__name{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.brandmark__co{
  font-family:var(--font-text);
  font-size:.52rem;
  font-weight:500;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-left:.4em;
}

/* image logo variant (the watercolour wreath — transparent PNG) */
.brandmark--logo{ gap:0; transition:background .4s var(--ease), padding .4s var(--ease); }
.brandmark__img{
  height:clamp(46px, 7vw, 56px);
  width:auto;
}
/* over the dark hero (home, before scroll) the dark watercolour would vanish,
   so drop the logo onto a soft rounded chip */
.site-header--over-hero:not(.is-solid) .brandmark--logo{
  padding:5px 10px;
  border-radius:12px;
  background:rgba(250,246,238,.95);
  box-shadow:0 8px 24px -14px rgba(0,0,0,.5);
}

/* left links */
.nav{ grid-column:1; display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2rem); }
.nav a:not(.btn){
  font-family:var(--font-text);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  padding-block:.4rem;
  transition:color .3s var(--ease);
}
.nav a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current="page"]{ color:var(--ink); }
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

/* right icons */
.header-icons{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:clamp(1rem,2vw,1.5rem);
  color:var(--ink);
}
.header-icons a,
.header-icons .cart-toggle{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.78rem;
  letter-spacing:.05em;
  color:inherit;
  transition:color .3s var(--ease), opacity .3s var(--ease);
}
.header-icons a:hover,
.header-icons .cart-toggle:hover{ color:var(--terracotta); }
.header-icons svg{ width:19px; height:19px; }

/* cart button + live count badge */
.cart-toggle{ position:relative; }
.cart-count{
  min-width:1.05rem;
  height:1.05rem;
  padding:0 .28rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--terracotta);
  color:#FCF3EA;
  font-family:var(--font-text);
  font-size:.58rem;
  font-weight:600;
  line-height:1;
  transition:transform .35s var(--ease);
}
.cart-count.is-empty{ background:transparent; color:inherit; }
.cart-count.bump{ transform:scale(1.35); }

/* hamburger */
.nav-toggle{
  display:none;
  grid-column:1;
  justify-self:start;
  width:40px; height:40px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  color:var(--ink);
}
.nav-toggle span{
  width:22px; height:1.5px;
  background:currentColor;
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* transparent-over-hero variant (home only) — light ink until scrolled */
.site-header--over-hero:not(.is-solid) .brandmark,
.site-header--over-hero:not(.is-solid) .nav a:not(.btn),
.site-header--over-hero:not(.is-solid) .header-icons,
.site-header--over-hero:not(.is-solid) .nav-toggle{ color:#F4EADA; }
.site-header--over-hero:not(.is-solid) .brandmark__co{ color:rgba(244,234,218,.66); }
.site-header--over-hero:not(.is-solid) .brandmark__sprig{ color:var(--terracotta-soft); }
.site-header--over-hero:not(.is-solid) .nav a:not(.btn){ color:rgba(244,234,218,.8); }
.site-header--over-hero:not(.is-solid) .header-icons a:hover,
.site-header--over-hero:not(.is-solid) .nav a:not(.btn):hover{ color:#fff; }

/* ---------- Hero — dark cinematic carousel ---------- */
:root{
  --hero-bg:#17110D;
  --hero-ink:#EFE4D0;
  --hero-ink-soft:rgba(239,228,208,.62);
  --hero-line:rgba(239,228,208,.28);
  --hero-glow:#F0A63C;
}
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding-top:calc(var(--header-h) + clamp(.75rem,3vw,1.75rem));
  padding-bottom:clamp(6.5rem,11vw,8.5rem);
  background:var(--hero-bg);
  color:var(--hero-ink);
  overflow:hidden;
  isolation:isolate;
}
/* amber bloom from the top, plus an edge vignette */
.hero__glow{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:
    radial-gradient(58% 42% at 50% -12%, rgba(240,166,60,.60), rgba(240,166,60,.16) 42%, transparent 72%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.55), transparent 55%);
}
.hero__watermark{
  position:absolute;
  top:clamp(-1rem,2vw,1.5rem); left:50%;
  transform:translateX(-50%);
  z-index:0;
  font-family:var(--font-display);
  font-size:clamp(6rem,20vw,17rem);
  font-weight:600;
  letter-spacing:.06em;
  line-height:1;
  color:rgba(239,228,208,.05);
  white-space:nowrap;
  pointer-events:none;
}
.hero__stage{
  position:relative;
  z-index:2;
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);
}
/* only the text drifts/fades on change — the photo does its own slow crossfade */
.hero__lead,
.hero__aside,
.hero__caption{
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.hero.is-swapping .hero__lead,
.hero.is-swapping .hero__aside,
.hero.is-swapping .hero__caption{
  opacity:0;
  transform:translateY(8px);
}

.hero__lead{
  position:relative;
  z-index:3;
  justify-self:end;
  text-align:right;
  margin-right:clamp(-3rem,-4vw,-1rem);
}
.hero__eyebrow{
  font-family:var(--font-text);
  font-size:.64rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--hero-ink-soft);
  margin-bottom:.9rem;
}
.hero__word{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.6rem,5.6vw,4.6rem);
  line-height:.98;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-wrap:balance;
  color:#EAD9BC;
  text-shadow:0 6px 40px rgba(0,0,0,.45);
}
.hero__notes{
  margin-top:1rem;
  font-family:var(--font-text);
  font-size:clamp(.62rem,1vw,.76rem);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-light);
}

.hero__figure{
  position:relative;
  height:min(56vh,540px);
  aspect-ratio:3/4;
  width:calc(min(56vh,540px) * 3 / 4);
}
.hero__figure::before{
  content:"";
  position:absolute; inset:-20% -16% -10%;
  z-index:0;
  background:radial-gradient(50% 46% at 50% 52%, rgba(240,166,60,.5), rgba(240,166,60,.1) 55%, transparent 78%);
  filter:blur(8px);
}
/* two stacked photos; only opacity animates, for a long slow dissolve */
.hero__figure-img{
  position:absolute; inset:0;
  z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:3px;
  border:1px solid rgba(239,228,208,.07);
  box-shadow:
    0 50px 90px -34px rgba(0,0,0,.8),
    inset 0 0 140px rgba(10,7,4,.5);
  filter:saturate(1.04) contrast(1.05) brightness(.96);
  opacity:0;
  transition:opacity 1.6s var(--ease);
}
.hero__figure-img.is-active{ opacity:1; }
/* grade every photo into the dark: warm wash + edge vignette */
.hero__figure::after{
  content:"";
  position:absolute; inset:0;
  z-index:2;
  border-radius:3px;
  pointer-events:none;
  background:
    radial-gradient(68% 60% at 50% 44%, transparent 32%, rgba(18,12,8,.72) 100%),
    linear-gradient(180deg, rgba(240,166,60,.05), rgba(18,12,8,.35));
  mix-blend-mode:multiply;
}
@media (prefers-reduced-motion:reduce){
  .hero__figure-img{ transition:none; }
}

.hero__aside{
  justify-self:start;
  max-width:14ch;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1rem,1.5vw,1.25rem);
  line-height:1.4;
  color:var(--hero-ink-soft);
}

/* bottom meta bar */
.hero__meta{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding-block:clamp(1.75rem,4vw,2.75rem);
  background:linear-gradient(transparent, rgba(10,7,4,.55));
}
.hero__meta-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-5);
}
.hero__count{
  display:flex;
  align-items:center;
  gap:1rem;
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:.15em;
  color:var(--hero-ink);
}
.hero__count i{ width:46px; height:1px; background:var(--hero-line); display:block; }
.hero__count span:last-child{ color:var(--hero-ink-soft); }
.hero__caption{
  margin-top:.9rem;
  max-width:34ch;
  font-size:.82rem;
  line-height:1.6;
  color:var(--hero-ink-soft);
}
.hero__cta{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.9rem 1.6rem;
  border:1px solid var(--hero-line);
  border-radius:var(--radius-pill);
  font-family:var(--font-text);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--hero-ink);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.hero__cta svg{ width:16px; height:16px; }
.hero__cta:hover{ background:var(--hero-ink); color:#231B10; border-color:var(--hero-ink); gap:1.1rem; }

@media (prefers-reduced-motion:reduce){
  .hero__lead,
  .hero__aside,
  .hero__caption{ transition:none; }
  .hero.is-swapping .hero__lead,
  .hero.is-swapping .hero__aside,
  .hero.is-swapping .hero__caption{ opacity:1; transform:none; }
}

/* page hero (inner pages) */
.page-hero{
  padding-top:calc(var(--header-h) + clamp(3.5rem,8vw,6rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);
  background:var(--ivory);
  text-align:center;
}
.page-hero .eyebrow{ margin-bottom:var(--space-4); }
.page-hero h1{ font-size:clamp(2.6rem,5vw,4.4rem); }
.page-hero h1 em{ font-style:italic; }
.page-hero p{ margin:var(--space-4) auto 0; text-align:center; }
.breadcrumb{
  margin-top:var(--space-5);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.breadcrumb a:hover{ color:var(--terracotta-deep); }
.breadcrumb span{ margin-inline:.6rem; color:var(--terracotta); }

/* page hero with a looping background video */
.page-hero--media{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#2b2019 url('../img/market-table.jpeg') center/cover no-repeat;
  padding-top:calc(var(--header-h) + clamp(4.5rem,11vw,8rem));
  padding-bottom:clamp(4.5rem,10vw,7rem);
}
.page-hero__video{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.page-hero--media::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 70% at 50% 52%, rgba(28,20,13,.55), rgba(28,20,13,.2) 70%, transparent 100%),
    linear-gradient(180deg, rgba(30,21,14,.62) 0%, rgba(30,21,14,.5) 45%, rgba(24,17,11,.78) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(176,96,62,.26), transparent 60%);
}
.page-hero--media .eyebrow{ color:#F3E2CB; }
.page-hero--media .eyebrow::before,
.page-hero--media .eyebrow.is-centered::after{ background:#E7C79E; }
.page-hero--media h1{ color:#FBF2E6; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.page-hero--media p{ color:rgba(251,242,230,.9); }
.page-hero--media .breadcrumb{ color:rgba(251,242,230,.62); }
.page-hero--media .breadcrumb a:hover{ color:#FBF2E6; }
.page-hero--media .breadcrumb span{ color:var(--terracotta-soft); }
@media (prefers-reduced-motion:reduce){
  .page-hero__video{ display:none; }
}

/* =========================================================================
   HOME LAYOUT  (Wild & Wick style)  — everything below the dark hero
   ========================================================================= */

/* ---------- Trust row ---------- */
.trust{ background:var(--ivory); padding-block:clamp(3rem,6vw,4.75rem); }
.trust__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.trust__item{
  text-align:center;
  padding:.5rem clamp(1rem,2.5vw,2.25rem);
  border-left:1px solid var(--border);
}
.trust__item:first-child{ border-left:0; }
.trust__item .ic{ color:var(--terracotta); display:flex; justify-content:center; }
.trust__item .ic svg{ width:30px; height:30px; }
.trust__item h3{
  font-family:var(--font-text);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  margin:1rem 0 .45rem;
}
.trust__item p{
  font-size:.82rem;
  line-height:1.6;
  color:var(--ink-mute);
  max-width:22ch;
  margin-inline:auto;
}

/* ---------- Collections ---------- */
.collection-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.25rem,2.4vw,2rem);
}
/* Shared card meta — used by collection cards AND shop product cards
   so the whole catalogue reads as one system (Wild & Wick style). */
.collection-card,
.product-card{ text-align:center; }
.collection-card__media,
.product-card__media{
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:6px;
  background:var(--cream);
  position:relative;
}
.collection-card__media img,
.product-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.collection-card:hover .collection-card__media img,
.product-card:hover .product-card__media img{ transform:scale(1.045); }

.card-name,
.collection-card h3,
.product-card__body h3{
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  margin-top:1.4rem;
}
.card-tag,
.collection-card .tag,
.product-card__tag{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1rem;
  line-height:1.4;
  color:var(--ink-mute);
  margin-top:.35rem;
}

.shoplink{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:1rem;
  font-family:var(--font-text);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--terracotta);
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.shoplink svg{ width:22px; height:12px; }
.shoplink:hover{ gap:1rem; color:var(--terracotta-deep); }

/* "Shop All Candles" CTA under the home scents grid — always visible, above siblings */
.collections__cta{
  position:relative;
  z-index:1;
  text-align:center;
  margin-top:clamp(4rem,9vw,6.5rem);
  padding-bottom:clamp(1rem,3vw,2rem);
}

/* ---------- Limited edition band ---------- */
.limited__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.limited__media{ position:relative; min-height:340px; }
.limited__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.limited__panel{
  background:var(--terracotta);
  color:#F8E9DC;
  padding:clamp(2.5rem,6vw,4.75rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.limited__panel .label{
  font-family:var(--font-text);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(248,233,220,.72);
}
.limited__panel h2{
  color:#FBEEE2;
  font-size:clamp(1.9rem,3.6vw,2.8rem);
  margin:.9rem 0 1rem;
}
.limited__panel p{
  color:rgba(248,233,220,.86);
  font-size:.92rem;
  line-height:1.65;
  max-width:40ch;
  margin-bottom:1.9rem;
}
.limited__panel .btn--cream{
  align-self:flex-start;
  --btn-bg:transparent;
  --btn-fg:#FBEEE2;
  border-color:rgba(251,238,226,.55);
}
.limited__panel .btn--cream:hover{
  background:#FBEEE2;
  color:var(--terracotta-deep);
  border-color:#FBEEE2;
}
.limited__flower{
  position:absolute;
  right:-1.5rem; bottom:-1.5rem;
  width:clamp(160px,26vw,260px);
  color:rgba(251,238,226,.16);
  pointer-events:none;
}

/* ---------- Our story ---------- */
.story__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.story__body h2{ margin-block:var(--space-4) var(--space-5); }
.story__body h2 em{ font-style:italic; display:block; }
.story__body .btn{ margin-top:var(--space-6); }
.story__media img{
  width:100%;
  aspect-ratio:4/4.4;
  object-fit:cover;
  border-radius:clamp(140px,22vw,240px) clamp(140px,22vw,240px) 10px 10px;
}

/* long-form story copy (about page) */
.container--narrow{ max-width:780px; margin-inline:auto; }
.story-prose{ font-size:1.03rem; line-height:1.85; color:var(--ink-soft); }
.story-prose p{ max-width:none; }
.story-prose em{ font-family:var(--font-display); font-style:italic; font-size:1.08em; color:var(--ink); }
.story-message{
  margin:clamp(2rem,4vw,2.75rem) 0;
  padding:.25rem 0 .25rem 1.6rem;
  border-left:2px solid var(--terracotta);
  display:flex;
  flex-direction:column;
  gap:.45rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.2rem,2.6vw,1.6rem);
  line-height:1.35;
  color:var(--ink);
}
.story-sign{
  margin-top:clamp(1.5rem,3vw,2rem);
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.4rem;
  color:var(--terracotta-deep);
}

/* ---------- Reviews ---------- */
.reviews__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.review{
  text-align:center;
  padding:.5rem clamp(1.25rem,3vw,2.75rem);
  border-left:1px solid var(--border);
}
.review:first-child{ border-left:0; }
.review .stars{ display:flex; justify-content:center; gap:.25rem; color:var(--gold); margin-bottom:1rem; }
.review .stars svg{ width:15px; height:15px; }
.review blockquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.review cite{
  display:block;
  margin-top:1rem;
  font-style:normal;
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---------- Marquee strip ---------- */
.assurance{
  background:var(--ink);
  color:rgba(250,247,241,.72);
  padding-block:1.1rem;
}
.assurance ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(1.5rem,5vw,4rem);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.assurance li{ display:flex; align-items:center; gap:.7rem; }
.assurance svg{ width:16px; height:16px; color:var(--gold-light); flex-shrink:0; }

/* ---------- Split feature ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(2rem,6vw,5.5rem);
}
.split--reverse .split__media{ order:2; }
.split__media{
  position:relative;
}
.split__media img{
  width:100%;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-soft);
  aspect-ratio:4/5;
  object-fit:cover;
}
.split__media .tag{
  position:absolute;
  bottom:1.25rem; left:-1.25rem;
  background:var(--surface);
  color:var(--ink);
  padding:1rem 1.5rem;
  box-shadow:var(--shadow-card);
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  border-left:2px solid var(--terracotta);
}
.split__body h2{ margin-block:var(--space-4) var(--space-5); }
.split__body h2 em{ font-style:italic; }
.split__body .btn{ margin-top:var(--space-6); }

/* arched image variant — echoes the home "Our Story" section */
.split--arch .split__media img{
  aspect-ratio:4/4.6;
  border-radius:clamp(140px,22vw,240px) clamp(140px,22vw,240px) 10px 10px;
  box-shadow:none;
}
.split--arch .split__media .tag{
  left:auto; right:1.25rem; bottom:1.25rem;
}

.feature-list{ margin-top:var(--space-6); display:grid; gap:var(--space-5); }
.feature-list li{ display:flex; gap:1.1rem; }
.feature-list .ic{
  width:42px; height:42px;
  flex-shrink:0;
  border:1px solid var(--border-strong);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--terracotta-deep);
}
.feature-list .ic svg{ width:19px; height:19px; }
.feature-list h4{ color:var(--ink); margin-bottom:.15rem; }
.feature-list p{ font-size:.94rem; }

/* ---------- Product grid ---------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(1.5rem,3.5vw,2.75rem) clamp(1.25rem,2.5vw,2rem);
}
.product-card{
  display:flex;
  flex-direction:column;
  background:transparent;
  transition:transform .45s var(--ease);
}
.product-card:hover{ transform:translateY(-4px); }
.product-card__media{
  position:relative;
  aspect-ratio:1/1.08;
  overflow:hidden;
  border-radius:4px;
  background:var(--cream);
}
.product-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.product-card:hover .product-card__media img{ transform:scale(1.05); }
.product-card__badge{
  position:absolute;
  top:.9rem; left:.9rem;
  background:rgba(250,244,232,.92);
  color:var(--terracotta-deep);
  font-size:.56rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.4rem .75rem;
  border-radius:var(--radius-pill);
}
.product-card__body{
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  flex:1;
}
/* the spec line ("Rose · Soy · 8 oz") is on the product page, not the card */
.product-card__body .kind{ display:none; }
/* the descriptive paragraph becomes the italic tagline */
.product-card__body > p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1rem;
  line-height:1.4;
  color:var(--ink-mute);
  max-width:26ch;
  margin-top:.35rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card__foot{
  margin-top:.75rem;
  padding-top:0;
  border-top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
}
.price{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--ink);
  letter-spacing:.02em;
}
.price small{ display:none; }
.product-card__foot .link-quiet{
  border-bottom:0;
  padding-bottom:0;
  gap:.6rem;
  font-size:.62rem;
  letter-spacing:.22em;
  color:var(--terracotta);
}
.product-card__foot .link-quiet:hover{ gap:1rem; color:var(--terracotta-deep); }

/* Add to Cart pill on product cards */
.add-cart{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1.15rem;
  border:1px solid var(--terracotta);
  border-radius:var(--radius-pill);
  font-family:var(--font-text);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--terracotta);
  background:transparent;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.add-cart svg{ width:15px; height:15px; }
.add-cart:hover{ background:var(--terracotta); color:#FCF3EA; }
.add-cart.is-added{ background:var(--terracotta-deep); border-color:var(--terracotta-deep); color:#FCF3EA; }

/* ---------- Scripture band ---------- */
.scripture{
  text-align:center;
  background:var(--terracotta);
  color:rgba(246,241,231,.9);
  position:relative;
  overflow:hidden;
}
.scripture::before,
.scripture::after{
  content:"\201C";
  position:absolute;
  font-family:var(--font-display);
  font-size:16rem;
  line-height:1;
  color:rgba(246,241,231,.08);
  pointer-events:none;
}
.scripture::before{ top:-2rem; left:2rem; }
.scripture::after{ content:"\201D"; bottom:-7rem; right:2rem; }
.scripture blockquote{
  max-width:780px;
  margin-inline:auto;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.6rem,3.5vw,2.6rem);
  line-height:1.4;
  color:#F8F4EA;
  position:relative;
}
.scripture cite{
  display:block;
  margin-top:var(--space-5);
  font-family:var(--font-text);
  font-style:normal;
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(248,233,220,.75);
}

/* ---------- Gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.5rem;
}
.gallery a{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
}
.gallery a:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:1/1; }
.gallery img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out), filter .6s var(--ease);
  filter:saturate(.92);
}
.gallery a:hover img{ transform:scale(1.06); filter:saturate(1.05); }
.gallery__cap{
  position:absolute;
  inset:auto 0 0 0;
  padding:1.5rem 1.25rem .9rem;
  background:linear-gradient(transparent, rgba(28,23,18,.7));
  color:#FBF7EF;
  font-size:.64rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery a:hover .gallery__cap{ opacity:1; transform:translateY(0); }

/* ---------- Steps ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  counter-reset:step;
}
.steps li{ counter-increment:step; }
.steps .num{
  font-family:var(--font-display);
  font-size:2.4rem;
  color:var(--terracotta);
  line-height:1;
}
.steps .num::before{ content:"0" counter(step); }
.steps h4{ color:var(--ink); margin-block:var(--space-3) var(--space-2); }
.steps p{ font-size:.92rem; }
.steps .rule{ width:100%; height:1px; background:var(--border); margin-top:var(--space-4); }

/* ---------- Testimonials ---------- */
.quotes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,3vw,2rem);
}
.quote-card{
  background:var(--surface);
  border:1px solid var(--border);
  padding:clamp(1.75rem,3vw,2.5rem);
  border-radius:var(--radius-sm);
}
.quote-card .stars{ display:flex; gap:.2rem; color:var(--gold); margin-bottom:var(--space-4); }
.quote-card .stars svg{ width:15px; height:15px; }
.quote-card blockquote{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-style:italic;
  line-height:1.5;
  color:var(--ink);
}
.quote-card cite{
  display:block;
  margin-top:var(--space-4);
  font-style:normal;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---------- Newsletter ---------- */
.newsletter{
  background:var(--ink);
  color:rgba(250,247,241,.8);
  text-align:center;
}
.newsletter h2{ color:#FBF7EF; }
.newsletter p{ margin:var(--space-4) auto 0; }
.newsletter form{
  margin-top:var(--space-6);
  display:flex;
  gap:.6rem;
  max-width:480px;
  margin-inline:auto;
  flex-wrap:wrap;
}
.newsletter input{
  flex:1;
  min-width:220px;
  padding:1rem 1.25rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm);
  color:#FBF7EF;
  font-family:var(--font-text);
  font-size:.9rem;
}
.newsletter input::placeholder{ color:rgba(250,247,241,.45); }
.newsletter input:focus-visible{ outline-color:var(--gold-light); border-color:var(--gold-light); }
.newsletter .fineprint{
  margin-top:var(--space-4);
  font-size:.7rem;
  letter-spacing:.06em;
  color:rgba(250,247,241,.45);
}

/* ---------- Product detail ---------- */
.pd{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.pd__gallery{ display:grid; gap:.6rem; grid-template-columns:repeat(2,1fr); }
.pd__gallery .main{ grid-column:span 2; }
.pd__gallery img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.pd__gallery .main img{ aspect-ratio:4/5; }
.pd__info{ position:sticky; top:calc(var(--header-h) + 1.5rem); }
.pd__info .kind{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--terracotta-deep);
}
.pd__info h1{ font-size:clamp(2.2rem,4vw,3rem); margin-block:var(--space-3) var(--space-4); }
.pd__price{ font-family:var(--font-display); font-size:2rem; color:var(--ink); }
.pd__rating{
  display:flex; align-items:center; gap:.6rem;
  margin-top:var(--space-3);
  font-size:.78rem; color:var(--ink-mute); letter-spacing:.04em;
}
.pd__rating .stars{ display:flex; gap:.15rem; color:var(--gold); }
.pd__rating .stars svg{ width:15px; height:15px; }
.pd__desc{ margin-top:var(--space-5); }
.pd__opts{ margin-top:var(--space-6); display:grid; gap:var(--space-4); }
.pd__opts .label{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:var(--space-3);
}
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  padding:.6rem 1.1rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.chip[aria-pressed="true"],.chip:hover{ border-color:var(--terracotta); background:var(--terracotta); color:#231B10; }
.pd__buy{ margin-top:var(--space-6); display:grid; gap:var(--space-3); }
.pd__note{
  margin-top:var(--space-4);
  font-size:.8rem;
  color:var(--ink-mute);
  display:flex; gap:.6rem; align-items:flex-start;
}
.pd__note svg{ width:16px; height:16px; color:var(--terracotta-deep); flex-shrink:0; margin-top:.15rem; }
.pd__accordion{ margin-top:var(--space-6); border-top:1px solid var(--border); }
.pd__accordion details{ border-bottom:1px solid var(--border); }
.pd__accordion summary{
  padding:1.15rem 0;
  font-family:var(--font-text);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  list-style:none;
}
.pd__accordion summary::-webkit-details-marker{ display:none; }
.pd__accordion summary::after{ content:"+"; font-size:1.2rem; color:var(--terracotta-deep); }
.pd__accordion details[open] summary::after{ content:"\2013"; }
.pd__accordion .panel{ padding-bottom:1.25rem; font-size:.92rem; }
.pd__accordion .panel p + p{ margin-top:.75rem; }

/* ---------- Order options (contact / how to order) ---------- */
.order-methods{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-5);
}
.method-card{
  border:1px solid var(--border);
  background:var(--surface);
  padding:clamp(1.75rem,3vw,2.5rem);
  border-radius:var(--radius-sm);
  text-align:center;
}
.method-card .ic{
  width:52px;height:52px;
  margin:0 auto var(--space-4);
  border-radius:50%;
  background:rgba(176,96,62,.1);
  color:var(--terracotta);
  display:flex;align-items:center;justify-content:center;
}
.method-card .ic svg{ width:22px;height:22px; }
.method-card h4{ color:var(--ink); }
.method-card p{ margin:var(--space-3) auto var(--space-4); font-size:.9rem; }
.method-card .handle{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--terracotta-deep);
}

/* ---------- Contact form ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,4.5rem);
  align-items:start;
}
.field{ display:grid; gap:.5rem; margin-bottom:var(--space-4); }
.field label{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.field label .req{ color:var(--terracotta-deep); }
.field input,.field textarea,.field select{
  padding:.9rem 1rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  font-family:var(--font-text);
  font-size:.94rem;
  color:var(--ink);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:none;
  border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(176,96,62,.15);
}
.field textarea{ min-height:140px; resize:vertical; }
.field .hint{ font-size:.76rem; color:var(--ink-mute); letter-spacing:0; text-transform:none; }
.form-note{
  margin-top:var(--space-4);
  font-size:.78rem;
  color:var(--ink-mute);
}
.contact-aside{
  background:var(--parchment);
  border:1px solid var(--border);
  padding:clamp(1.75rem,4vw,2.75rem);
  border-radius:var(--radius-sm);
}
.contact-aside h3{ margin-bottom:var(--space-4); }
.contact-aside dl{ display:grid; gap:var(--space-4); }
.contact-aside dt{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:.2rem;
}
.contact-aside dd{ font-size:.98rem; color:var(--ink); }
.contact-aside a:hover{ color:var(--terracotta-deep); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{
  border-bottom:1px solid var(--border);
}
.faq summary{
  padding:1.4rem 0;
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--terracotta-deep); font-family:var(--font-text); }
.faq details[open] summary::after{ content:"\2013"; }
.faq .panel{ padding-bottom:1.4rem; font-size:.95rem; }

/* ---------- Values (about) ---------- */
.values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,2.5rem);
}
.value{
  text-align:center;
  padding:clamp(1.5rem,3vw,2rem);
}
.value .ic{
  width:56px;height:56px;
  margin:0 auto var(--space-4);
  border:1px solid var(--terracotta);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--terracotta-deep);
}
.value .ic svg{ width:24px;height:24px; }
.value h4{ color:var(--ink); margin-bottom:var(--space-2); }
.value p{ margin-inline:auto; font-size:.92rem; }

/* ---------- CTA banner ---------- */
.cta-strip{
  position:relative;
  text-align:center;
  color:#FBF7EF;
  isolation:isolate;
  padding-block:clamp(4rem,9vw,7rem);
}
.cta-strip img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
}
.cta-strip::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(rgba(28,23,18,.68), rgba(28,23,18,.78));
}
.cta-strip h2{ color:#FDFBF6; max-width:640px; margin-inline:auto; }
.cta-strip p{ margin:var(--space-4) auto var(--space-6); color:rgba(253,251,246,.85); }
.cta-strip .btn{ margin-inline:auto; }

/* ---------- Footer — warm, curved top (Wild & Wick style) ---------- */
.site-footer{
  background:var(--cream);
  color:var(--ink-soft);
  border-radius:clamp(28px,6vw,64px) clamp(28px,6vw,64px) 0 0;
  margin-top:clamp(2rem,5vw,4rem);
  padding-block:clamp(3.5rem,7vw,5.5rem) 1.75rem;
}
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.7fr;
  gap:clamp(2rem,5vw,3.5rem);
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
.footer-brand .brandmark{ align-items:flex-start; }
.footer-brand .brandmark__name{ font-size:1.35rem; }
.footer-tagline{
  margin-top:var(--space-4);
  font-family:var(--font-text);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.9;
  color:var(--ink-mute);
}
.footer-social{ display:flex; gap:.6rem; margin-top:var(--space-5); }
.footer-social a{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.footer-social a:hover{ background:var(--terracotta); border-color:var(--terracotta); color:#FBEEE2; transform:translateY(-2px); }
.footer-social svg{ width:15px;height:15px; }
.footer-col h4{
  font-family:var(--font-text);
  color:var(--ink);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:var(--space-4);
}
.footer-col ul{ display:grid; gap:.7rem; }
.footer-col a{ font-size:.88rem; color:var(--ink-soft); transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--terracotta); }
.footer-col p{ font-size:.88rem; color:var(--ink-mute); line-height:1.65; max-width:34ch; }

.footer-subscribe{
  display:flex;
  margin-top:var(--space-4);
  max-width:340px;
  border:1px solid var(--border-strong);
  border-radius:2px;
  overflow:hidden;
  background:var(--surface);
}
.footer-subscribe input{
  flex:1;
  min-width:0;
  padding:.85rem 1rem;
  border:0;
  background:transparent;
  font-family:var(--font-text);
  font-size:.85rem;
  color:var(--ink);
}
.footer-subscribe input::placeholder{ color:var(--ink-mute); }
.footer-subscribe input:focus-visible{ outline:none; }
.footer-subscribe button{
  flex-shrink:0;
  width:48px;
  display:flex; align-items:center; justify-content:center;
  background:var(--terracotta);
  color:#FBEEE2;
  transition:background .3s var(--ease);
}
.footer-subscribe button:hover{ background:var(--terracotta-deep); }
.footer-subscribe button svg{ width:17px; height:17px; }

.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:var(--space-5);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-4) var(--space-6);
  flex-wrap:wrap;
  font-size:.76rem;
  color:var(--ink-mute);
}
.footer-legal{ display:flex; gap:clamp(1rem,3vw,2rem); flex-wrap:wrap; }
.footer-legal a:hover{ color:var(--terracotta); }

/* Emanna Digital credit pill — agency signature, gold glow stays hardcoded */
.footer-credit-bubble{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.45rem 1.1rem .45rem .5rem;
  border-radius:999px;
  background:rgba(59,50,42,.05);
  border:1px solid rgba(59,50,42,.16);
  color:var(--ink-soft);
  font-size:.82rem;
  font-weight:500;
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.footer-credit-bubble:hover,.footer-credit-bubble:focus-visible{
  background:rgba(59,50,42,.09);
  border-color:rgba(169,128,63,.5);
  transform:translateY(-1px);
  box-shadow:
    0 10px 28px -14px rgba(59,50,42,.4),
    0 0 0 1px rgba(169,128,63,.25),
    0 0 22px 4px rgba(169,128,63,.4),
    0 0 46px 10px rgba(169,128,63,.18);
}
.footer-credit-bubble:hover img,.footer-credit-bubble:focus-visible img{
  filter:drop-shadow(0 0 6px rgba(169,128,63,.6));
}
.footer-credit-bubble img{ height:22px; width:auto; display:block; transition:filter .22s var(--ease); }
.footer-credit-bubble strong{ color:var(--terracotta-deep); font-weight:700; }

/* ---------- Scroll reveal ----------
   Content is visible by default. Only when JS is running (html.js) do we
   hide-then-reveal, so a broken or slow script never leaves a blank page. */
html.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change:opacity, transform;
}
html.js .reveal.is-in{ opacity:1; transform:none; }
html.js .reveal[data-delay="1"]{ transition-delay:.08s; }
html.js .reveal[data-delay="2"]{ transition-delay:.16s; }
html.js .reveal[data-delay="3"]{ transition-delay:.24s; }
html.js .reveal[data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Cart drawer ---------- */
.cart-drawer{
  position:fixed;
  inset:0;
  z-index:300;
  visibility:hidden;
  pointer-events:none;
}
.cart-drawer.is-open{ visibility:visible; pointer-events:auto; }
.cart-drawer__scrim{
  position:absolute; inset:0;
  background:rgba(28,22,16,.5);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.cart-drawer.is-open .cart-drawer__scrim{ opacity:1; }
.cart-drawer__panel{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(420px,92vw);
  display:flex;
  flex-direction:column;
  background:var(--ivory);
  box-shadow:-30px 0 80px -40px rgba(28,22,16,.6);
  transform:translateX(100%);
  transition:transform .45s var(--ease);
  /* whole panel scrolls as one column — items stay visible under the pinned header */
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.cart-drawer.is-open .cart-drawer__panel{ transform:translateX(0); }
.cart-drawer__head{
  flex-shrink:0;
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem clamp(1.25rem,4vw,2rem);
  background:var(--ivory);
  border-bottom:1px solid var(--border);
}
.cart-drawer__head h2{ font-size:1.2rem; letter-spacing:.12em; text-transform:uppercase; }
.cart-drawer__close{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  border-radius:50%;
  transition:background .3s var(--ease);
}
.cart-drawer__close:hover{ background:var(--cream); }
.cart-drawer__close svg{ width:20px; height:20px; }
.cart-drawer__body{
  flex:0 0 auto;
  padding:clamp(1.25rem,4vw,1.6rem) clamp(1.25rem,4vw,1.6rem) .5rem;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.cart-empty{
  min-height:55vh;
  text-align:center;
  color:var(--ink-mute);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding-block:3rem;
}
.cart-empty svg{ width:34px; height:34px; margin-inline:auto; color:var(--border-strong); }
.cart-empty .btn{ margin-inline:auto; }

.cart-item{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:1rem;
  align-items:start;
}
.cart-item img{
  width:64px; height:80px;
  object-fit:cover;
  border-radius:4px;
  background:var(--cream);
}
.cart-item__name{
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--ink);
  line-height:1.25;
}
.cart-item__variant{ font-size:.72rem; color:var(--ink-mute); margin-top:.15rem; }
.cart-item__price{
  font-family:var(--font-display);
  font-size:.95rem;
  color:var(--ink-mute);
  margin-top:.35rem;
}
.cart-item__qty{
  margin-top:.6rem;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);
}
.cart-item__qty button{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  font-size:1rem;
  line-height:1;
}
.cart-item__qty button:hover{ color:var(--terracotta); }
.cart-item__qty span{
  min-width:1.6rem;
  text-align:center;
  font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
.cart-item__remove{
  color:var(--ink-mute);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .3s var(--ease);
}
.cart-item__remove:hover{ color:var(--terracotta); }

.cart-drawer__foot{
  flex:0 0 auto;
  margin-top:.5rem;
  border-top:1px solid var(--border);
  padding:clamp(1.25rem,4vw,1.6rem);
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.cart-drawer__foot[hidden]{ display:none; }

.cart-summary{ display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; }
.cart-summary > div{ display:flex; justify-content:space-between; }
.cart-summary__total{
  border-top:1px solid var(--border);
  padding-top:.6rem;
  margin-top:.2rem;
  font-family:var(--font-display);
  font-size:1.25rem;
  color:var(--ink);
}
.cart-summary__total span:last-child{ font-variant-numeric:tabular-nums; }

/* customer details */
.cart-fields{ display:flex; flex-direction:column; gap:.5rem; }
.cart-fields__label{
  font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:.2rem;
}
.cart-fields input,
.cart-fields textarea{
  width:100%;
  padding:.7rem .9rem;
  border:1px solid var(--border-strong);
  border-radius:2px;
  background:var(--surface);
  font-family:var(--font-text);
  font-size:.85rem;
  color:var(--ink);
}
.cart-fields input:focus-visible,
.cart-fields textarea:focus-visible{ outline:none; border-color:var(--terracotta); }
.cart-fields textarea{ min-height:64px; resize:vertical; }
.cart-fields textarea[hidden]{ display:none; }
.cart-radio{ display:flex; gap:1.1rem; font-size:.82rem; color:var(--ink-soft); padding:.15rem 0; }
.cart-radio label{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; }
.cart-radio input{ accent-color:var(--terracotta); }
.cart-fields__err{ font-size:.74rem; color:#b23b3b; }
.cart-fields__err:empty{ display:none; }

.cart-checkout{ display:flex; flex-direction:column; gap:.55rem; margin-top:.2rem; }
.cart-checkout .btn{ width:100%; }
.cart-checkout .btn[disabled]{ opacity:.55; pointer-events:none; }
.cart-checkout .btn{ font-size:.66rem; letter-spacing:.12em; padding-inline:1rem; }
.cart-pay-note{ font-size:.72rem; color:var(--ink-mute); text-align:center; }
.cart-email-link{
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--ink-mute);
  text-decoration:underline;
  text-underline-offset:3px;
  align-self:center;
}
.cart-email-link:hover{ color:var(--terracotta); }

@media (max-width:520px){
  .cart-item{ grid-template-columns:56px 1fr; }
  .cart-item__remove{ grid-column:2; justify-self:start; margin-top:.4rem; }
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  left:50%; bottom:2rem;
  transform:translate(-50%, 130%);
  background:var(--ink);
  color:#FBF7EF;
  padding:1rem 1.5rem;
  border-radius:var(--radius-sm);
  font-size:.82rem;
  letter-spacing:.04em;
  box-shadow:var(--shadow-soft);
  z-index:200;
  transition:transform .5s var(--ease);
  border-left:2px solid var(--terracotta);
}
.toast.is-show{ transform:translate(-50%, 0); }

/* ---------- Background music toggle ---------- */
.music-toggle{
  position:fixed;
  left:clamp(1rem,3vw,1.75rem);
  bottom:clamp(1rem,3vw,1.75rem);
  z-index:90;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:var(--radius-pill);
  color:var(--ink-soft);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-nav);
  transition:color .3s var(--ease), border-color .3s var(--ease),
    box-shadow .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
  animation:music-toggle-in .45s var(--ease-out) both;
}
.music-toggle svg{ width:18px; height:18px; }
.music-toggle:hover,
.music-toggle:focus-visible{
  color:var(--terracotta);
  border-color:var(--terracotta-soft);
  box-shadow:var(--shadow-card);
  transform:translateY(-2px);
}
.music-toggle:focus-visible{ border-radius:var(--radius-pill); }  /* keep the ring pill-shaped (reset forces radius-sm) */
.music-toggle.is-muted{ color:var(--ink-mute); }
.music-toggle.is-muted:hover,
.music-toggle.is-muted:focus-visible{ color:var(--terracotta); }
/* near the foot of the page the control tucks away so it never covers the footer */
.music-toggle.is-tucked{ opacity:0; transform:translateY(12px) scale(.92); pointer-events:none; }

@keyframes music-toggle-in{
  from{ opacity:0; transform:translateY(8px); }
}
@media (prefers-reduced-motion:reduce){
  .music-toggle{ animation:none; transition:color .3s var(--ease), border-color .3s var(--ease), opacity .2s linear; }
  .music-toggle:hover,
  .music-toggle:focus-visible{ transform:none; }
  .music-toggle.is-tucked{ transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .pd__info{ position:static; }
}

@media (max-width:1080px){
  :root{ --header-h:64px; }
  .nav-toggle{ display:flex; }
  .header-icons a[aria-label="Account"],
  .header-icons a[aria-label="Search"] span{ display:none; }
  .nav{
    position:fixed;
    inset:var(--header-h) 0 auto 0;
    grid-column:1 / -1;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--ivory);
    border-bottom:1px solid var(--border);
    padding:var(--space-4) clamp(1.25rem,5vw,3rem) var(--space-6);
    transform:translateY(-120%);
    transition:transform .45s var(--ease);
    box-shadow:var(--shadow-nav);
    max-height:calc(100svh - var(--header-h));
    overflow-y:auto;
  }
  body.nav-open .nav{ transform:translateY(0); }

  /* Drawer links are always dark on the cream panel, whatever the header state. */
  .site-header .nav a:not(.btn),
  .site-header--over-hero:not(.is-solid) .nav a:not(.btn){ color:var(--ink-soft); }
  .site-header .nav a:not(.btn)[aria-current="page"]{ color:var(--ink); font-weight:600; }
  .nav a:not(.btn){
    width:100%;
    padding:1rem 0;
    border-bottom:1px solid var(--border);
    font-size:.9rem;
  }
  .nav a:not(.btn)::after{ display:none; }
  .nav .btn{
    display:inline-flex;
    margin-top:var(--space-5);
    width:100%;
  }

  /* hero: single column, meta flows in normal order */
  .hero{
    padding-bottom:clamp(3rem,10vw,5rem);
    text-align:center;
  }
  .hero__stage{
    grid-template-columns:1fr;
    justify-items:center;
    gap:clamp(1.5rem,6vw,2.5rem);
    padding-block:clamp(2rem,8vw,3.5rem);
  }
  .hero__lead{ justify-self:center; text-align:center; margin-right:0; order:1; }
  .hero__figure{
    order:2;
    height:auto;
    width:min(66vw,320px);
    aspect-ratio:3/4;
  }
  .hero__aside{ justify-self:center; order:3; text-align:center; max-width:24ch; }
  .hero__meta{ position:static; background:none; padding-top:clamp(2rem,8vw,3rem); }
  .hero__meta-inner{ flex-direction:column; align-items:center; text-align:center; gap:var(--space-4); }
  .hero__count{ justify-content:center; }
  .hero__caption{ margin-inline:auto; }
  .hero__cta{ width:100%; max-width:320px; justify-content:center; }

  .split{ grid-template-columns:1fr; gap:var(--space-6); }
  .split--reverse .split__media{ order:0; }
  .split__media .tag{ left:1rem; }
  .steps,.quotes,.values,.order-methods{ grid-template-columns:1fr; }
  .pd{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .scripture::before,.scripture::after{ font-size:9rem; }

  /* home layout */
  .trust__grid{ grid-template-columns:repeat(2,1fr); gap:2.5rem 0; }
  .trust__item:nth-child(2){ border-left:0; }
  .collection-grid{ grid-template-columns:repeat(2,1fr); gap:2.25rem 1.5rem; }
  .limited__grid{ grid-template-columns:1fr; }
  .limited__media{ min-height:300px; }
  .story__grid{ grid-template-columns:1fr; gap:var(--space-6); }
  .story__body{ order:2; }
  .story__media img{ aspect-ratio:4/3.4; border-radius:clamp(120px,40vw,220px) clamp(120px,40vw,220px) 10px 10px; }
  .reviews__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .review{ border-left:0; border-top:1px solid var(--border); padding-top:2rem; }
  .review:first-child{ border-top:0; padding-top:0; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:560px){
  .trust__grid{ grid-template-columns:1fr; gap:2rem 0; }
  .trust__item{ border-left:0 !important; }
  .collection-grid{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:flex-start; }
}

@media (max-width:520px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery a:first-child{ grid-column:span 2; grid-row:auto; }
  .product-grid{ grid-template-columns:1fr; }
  .hero__word{ font-size:clamp(2.3rem,10vw,3.4rem); }
}
