/* ============================================================
   EMBER & OAK — shared stylesheet
   Design tokens: lit-at-night warmth
   ============================================================ */
:root{
  --char:#181009;        /* page — charred oak, warm near-black */
  --umber:#211510;       /* panel brown */
  --saddle:#2B1C12;      /* raised card */
  --wax:#F3E9D7;         /* wax cream — primary text */
  --parch:#CBB899;       /* toasted parchment — secondary text */
  --amber:#E7A44E;       /* candle amber — accent */
  --flame:#FFD79B;       /* flame highlight */
  --ember:#B4622E;       /* deep ember */
  --line:rgba(231,164,78,.16);
  --line-soft:rgba(231,164,78,.09);
  --wa-green:#25D366;

  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Karla", -apple-system, "Segoe UI", sans-serif;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;

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

  --shadow-card:0 18px 48px -22px rgba(0,0,0,.65);
  --glow-soft:0 0 44px -6px rgba(231,164,78,.28);
  --nav-h:66px;

  /* one rhythm token drives every section's vertical breathing room */
  --rhythm:clamp(4rem, 9vw, 7rem);
  --gap-grid:clamp(1.4rem, 2.4vw, 1.75rem);
  --dur-fast:.18s;
  --dur-base:.24s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 14px);
}
body{
  margin:0;
  background:var(--char);
  color:var(--wax);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* faint film grain so the dark reads as material, not void */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:420;
  line-height:1.14;
  margin:0 0 var(--s4);
  letter-spacing:.005em;
  text-wrap:balance;
}
p{ margin:0 0 var(--s4); }
a{ color:var(--amber); text-decoration:none; }
a:hover{ color:var(--flame); }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}
::selection{ background:rgba(231,164,78,.32); color:#FFF7E8; }
[id]{ scroll-margin-top:calc(var(--nav-h) + 14px); }

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:400;
  background:var(--amber);
  color:#241505;
  padding:.6rem 1.1rem;
  border-radius:0 0 var(--r-sm) 0;
  font-weight:700;
}
.skip-link:focus{ left:0; }
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.wrap{
  width:min(1180px, 100% - 2.5rem);
  margin-inline:auto;
}
.section{
  position:relative;
  padding-block:var(--rhythm);
}
.section--tint{ background:var(--umber); }
.section-head{
  max-width:36rem;
  margin-bottom:clamp(2rem, 5vw, 3.5rem);
}
.section-head--center{
  margin-inline:auto;
  text-align:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:var(--s4);
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--amber));
}
.section-head--center .eyebrow::after{
  content:"";
  width:22px;
  height:1px;
  background:linear-gradient(90deg, var(--amber), transparent);
}
.section-head h2{
  font-size:clamp(1.85rem, 3.6vw, 2.7rem);
}
.section-head .lede{
  color:var(--parch);
  font-size:1.05rem;
  margin-bottom:0;
  text-wrap:pretty;
}
.serif-i{
  font-style:italic;
  color:var(--flame);
  font-weight:380;
}
.section-cta{
  margin-top:clamp(2rem, 4vw, 3rem);
  text-align:center;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:var(--r-pill);
  padding:.78rem 1.55rem;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.02em;
  border:1px solid transparent;
  transition:transform var(--dur-base) ease, box-shadow var(--dur-base) ease, background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.btn:active{ transition-duration:var(--dur-fast); }
.btn-solid{
  background:linear-gradient(160deg, var(--flame), var(--amber) 55%, #D08A35);
  color:#241505;
  box-shadow:0 10px 30px -12px rgba(231,164,78,.55);
}
.btn-solid:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px -12px rgba(231,164,78,.7);
  color:#241505;
}
.btn-solid:active{
  transform:translateY(0) scale(.985);
  box-shadow:0 6px 20px -10px rgba(231,164,78,.5);
}
.btn-ghost{
  background:transparent;
  color:var(--wax);
  border-color:rgba(231,164,78,.4);
}
.btn-ghost:hover{
  border-color:var(--amber);
  background:rgba(231,164,78,.08);
  color:var(--flame);
}
.btn-ghost:active{
  transform:scale(.985);
  background:rgba(231,164,78,.14);
}
.btn-line{
  background:transparent;
  color:var(--amber);
  border-color:var(--line);
  padding:.62rem 1.25rem;
  font-size:.9rem;
}
.btn-line:hover{
  border-color:var(--amber);
  background:rgba(231,164,78,.1);
  color:var(--flame);
}
.btn-line:active{
  transform:scale(.985);
  background:rgba(231,164,78,.16);
}

/* ---------- nav ---------- */
.site-nav{
  position:sticky;
  top:0;
  z-index:250;
  background:rgba(24,16,9,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.site-nav.scrolled{
  background:rgba(20,13,7,.92);
  border-bottom-color:var(--line-soft);
}
.nav-inner{
  display:flex;
  align-items:center;
  gap:1.2rem;
  height:var(--nav-h);
}
.brand{
  display:inline-flex;
  align-items:baseline;
  gap:.45rem;
  font-family:var(--font-display);
  font-size:1.32rem;
  font-weight:500;
  color:var(--wax);
  white-space:nowrap;
}
.brand:hover{ color:var(--wax); }
.brand .amp{
  color:var(--amber);
  font-style:italic;
  font-weight:380;
}
.brand-flame{
  width:13px;
  height:17px;
  align-self:center;
  flex:none;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:.2rem;
  list-style:none;
  margin:0 0 0 auto;
  padding:0;
}
.nav-links a{
  display:block;
  color:var(--parch);
  font-size:.92rem;
  font-weight:600;
  padding:.5rem .68rem;
  border-radius:var(--r-pill);
  transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{
  color:var(--flame);
  background:rgba(231,164,78,.08);
}
.nav-links a[aria-current="page"]{
  color:var(--flame);
  background:rgba(231,164,78,.12);
}
.basket-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--wax);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.basket-btn:hover{
  border-color:var(--amber);
  background:rgba(231,164,78,.1);
}
.basket-btn.pulse{ animation:basket-pop .45s ease; }
@keyframes basket-pop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}
.basket-count{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:var(--r-pill);
  background:var(--amber);
  color:#241505;
  font-size:.68rem;
  font-weight:800;
  line-height:19px;
  text-align:center;
  display:none;
}
.basket-count.show{ display:block; }
.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  padding:0 10px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:transparent;
}
.burger span{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--wax);
  transition:transform .3s ease, opacity .3s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:rgba(20,13,7,.97);
  border-bottom:1px solid var(--line);
  padding:.6rem 1.25rem 1.1rem;
}
.mobile-menu.open{ display:block; }
.mobile-menu a{
  display:block;
  padding:.8rem .4rem;
  color:var(--wax);
  font-size:1.05rem;
  font-weight:600;
  border-bottom:1px solid var(--line-soft);
}
.mobile-menu a:last-child{ border-bottom:none; }
.mobile-menu a[aria-current="page"]{ color:var(--flame); }

/* ---------- page hero (sub-pages) ---------- */
.page-hero{
  position:relative;
  overflow:clip;
  padding-block:clamp(3rem, 7vw, 5rem) clamp(2.2rem, 5vw, 3.4rem);
  background:
    radial-gradient(46rem 26rem at 82% 0%, rgba(231,164,78,.13), transparent 65%),
    radial-gradient(32rem 22rem at 8% 100%, rgba(180,98,46,.1), transparent 65%),
    var(--char);
  border-bottom:1px solid var(--line-soft);
}
.page-hero h1{
  font-size:clamp(2.2rem, 4.6vw, 3.3rem);
  font-weight:400;
  margin-bottom:var(--s4);
}
.page-hero .lede{
  color:var(--parch);
  font-size:1.08rem;
  max-width:38rem;
  margin-bottom:0;
}
.breadcrumbs{
  font-size:.85rem;
  color:var(--parch);
  margin-bottom:1.1rem;
}
.breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  list-style:none;
  margin:0;
  padding:0;
}
.breadcrumbs li{ display:inline-flex; align-items:center; gap:.55rem; }
.breadcrumbs li + li::before{
  content:"/";
  color:rgba(203,184,153,.5);
}
.breadcrumbs a{ color:var(--parch); font-weight:600; }
.breadcrumbs a:hover{ color:var(--flame); }
.breadcrumbs [aria-current="page"]{ color:var(--wax); }

/* ============================================================
   THE CANDLE RENDER — signature component (em-scaled)
   ============================================================ */
.candle{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:13em;
}
.candle-glow{
  position:absolute;
  top:-4.5em;
  left:50%;
  width:24em;
  height:24em;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,205,120,.30), rgba(240,160,70,.12) 46%, transparent 72%);
  pointer-events:none;
  animation:glow-breathe 3.4s ease-in-out infinite;
}
@keyframes glow-breathe{
  0%,100%{ opacity:.85; transform:translateX(-50%) scale(1); }
  38%{ opacity:1; transform:translateX(-50%) scale(1.05); }
  64%{ opacity:.75; transform:translateX(-50%) scale(.97); }
}
.flame{
  position:relative;
  z-index:3;
  width:1.45em;
  height:2.7em;
  margin-bottom:-.3em;
  background:linear-gradient(180deg, #FFF7DF 0%, #FFD794 34%, #F2A147 66%, #DE7A2C 100%);
  border-radius:50% 50% 50% 50% / 64% 64% 36% 36%;
  transform-origin:50% 100%;
  box-shadow:
    0 0 1.1em .18em rgba(255,208,130,.55),
    0 0 2.8em .9em rgba(240,160,70,.25);
  animation:flicker 2.9s ease-in-out infinite;
}
.flame::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:.3em;
  width:.62em;
  height:1.28em;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #FFFFFF 0%, #FFEDC2 80%);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  opacity:.95;
}
.flame::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:.06em;
  width:.5em;
  height:.5em;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 30%, rgba(90,120,255,.55), transparent 70%);
  border-radius:50%;
}
@keyframes flicker{
  0%,100%{ transform:rotate(-1.6deg) scaleY(1); }
  18%{ transform:rotate(1.8deg) scaleY(1.06) translateX(.02em); }
  32%{ transform:rotate(-1.2deg) scaleY(.965); }
  47%{ transform:rotate(2.4deg) scaleY(1.09); }
  61%{ transform:rotate(-2.2deg) scaleY(.94) translateX(-.03em); }
  74%{ transform:rotate(1.2deg) scaleY(1.04); }
  88%{ transform:rotate(-.8deg) scaleY(.985); }
}
.wick{
  position:relative;
  z-index:2;
  width:.17em;
  height:.62em;
  background:linear-gradient(180deg, #120A05, #33200F);
  border-radius:.1em;
}
.jar{
  position:relative;
  z-index:1;
  width:10.6em;
  height:11.6em;
  margin-top:-.95em;
  border-radius:1em 1em 1.5em 1.5em;
  background:
    linear-gradient(180deg,
      #E9CFA3 0%,
      #DDBB84 16%,
      #C89153 38%,
      #A96C31 68%,
      #7E4C1F 100%);
  box-shadow:
    inset 0 .55em .8em -0.4em rgba(255,240,210,.75),
    inset .9em 0 1.4em -0.9em rgba(255,225,170,.5),
    inset -1.1em 0 1.6em -0.9em rgba(35,18,6,.75),
    inset 0 -1.4em 1.8em -0.9em rgba(24,12,4,.8),
    0 1.4em 2.6em -0.9em rgba(0,0,0,.6);
}
.jar-mouth{
  position:absolute;
  top:-.55em;
  left:.42em;
  right:.42em;
  height:1.5em;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 42%, #F2E7CF 58%, #D9BE92 74%, #B98A4C 100%);
  box-shadow:
    inset 0 .18em .3em rgba(120,75,30,.55),
    0 .06em 0 rgba(255,240,210,.4);
}
.jar-label{
  position:absolute;
  left:50%;
  top:44%;
  transform:translateX(-50%);
  width:7.1em;
  padding:.7em .5em .75em;
  background:linear-gradient(175deg, #F6EDDC, #EADDC2);
  border-radius:.32em;
  text-align:center;
  color:#3A2513;
  box-shadow:0 .12em .5em rgba(30,15,4,.35);
}
.label-mark{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.62em;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#8A5B2B;
  margin-bottom:.35em;
}
.label-name{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:480;
  font-size:1.06em;
  line-height:1.1;
  margin-bottom:.4em;
}
.label-tint{
  display:block;
  width:2.5em;
  height:.32em;
  margin:0 auto;
  border-radius:.2em;
  background:var(--tint, var(--amber));
}
.jar-shine{
  position:absolute;
  top:1.4em;
  bottom:1.6em;
  left:1.05em;
  width:.85em;
  border-radius:.5em;
  background:linear-gradient(180deg, rgba(255,244,220,.5), rgba(255,244,220,.06));
  filter:blur(.14em);
  pointer-events:none;
}
.candle-shadow{
  width:11.5em;
  height:1.5em;
  margin-top:.65em;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 75%);
}
.candle--hero{ font-size:clamp(13px, 1.55vw, 17px); }
.candle--mini{ font-size:8.5px; }

/* ============================================================
   FLAME PHYSICS RIG — cursor-wind interaction (hero + PDP only)
   The rig wrapper carries the simulation transform (rotation,
   counter-skew, stretch) driven by CSS vars from js/main.js, so
   the child .flame keeps its own flicker keyframes untouched.
   --fpx-rot / --fpx-skew (deg), --fpx-stretch (scale), --turb (0–1).
   ============================================================ */
.flame-rig{
  position:relative;
  z-index:3;                    /* keep the flame above the jar, as before */
  margin-bottom:-.3em;          /* takes over the overlap the flame used to own */
  transform-origin:50% 100%;    /* anchored at the wick base */
  transform:
    rotate(var(--fpx-rot, 0deg))
    skewX(var(--fpx-skew, 0deg))
    scaleY(var(--fpx-stretch, 1));
  pointer-events:none;
  will-change:transform;
  /* flicker amplitude multiplier: calm 1 → disturbed ~2.7 */
  --fa:calc(1 + var(--turb, 0) * 1.7);
}
.flame-rig .flame{ margin-bottom:0; }
/* Same flicker as the stock flame, amplitude scaled by --fa so the
   sim can intensify it while air is disturbed (turbulence coupling). */
.flame-rig .flame{
  animation-name:fp-flicker;
  /* airflow leans the burn bluer/cooler: desaturate slightly with --turb */
  filter:saturate(calc(1 - .28 * var(--turb, 0)));
}
.flame-rig .flame::after{
  /* the blue core grows under airflow */
  transform:translateX(-50%) scale(calc(1 + .5 * var(--turb, 0)));
  opacity:calc(.8 + .2 * var(--turb, 0));
}
@keyframes fp-flicker{
  0%,100%{ transform:rotate(calc(-1.6deg * var(--fa,1))) scaleY(1); }
  18%{ transform:rotate(calc(1.8deg * var(--fa,1))) scaleY(calc(1 + .06 * var(--fa,1))) translateX(calc(.02em * var(--fa,1))); }
  32%{ transform:rotate(calc(-1.2deg * var(--fa,1))) scaleY(calc(1 - .035 * var(--fa,1))); }
  47%{ transform:rotate(calc(2.4deg * var(--fa,1))) scaleY(calc(1 + .09 * var(--fa,1))); }
  61%{ transform:rotate(calc(-2.2deg * var(--fa,1))) scaleY(calc(1 - .06 * var(--fa,1))) translateX(calc(-.03em * var(--fa,1))); }
  74%{ transform:rotate(calc(1.2deg * var(--fa,1))) scaleY(calc(1 + .04 * var(--fa,1))); }
  88%{ transform:rotate(calc(-.8deg * var(--fa,1))) scaleY(calc(1 - .015 * var(--fa,1))); }
}

/* ---------- blow-out: gutter, canvas smoke, dimmed glow, relight ---------- */
.candle.fp-out .flame{
  opacity:0;
  transition:opacity .15s ease-out;
}
.candle.fp-out .candle-glow{
  /* keyframed opacity would win over a plain opacity override, so dim via filter */
  filter:opacity(.12);
  transition:filter .3s ease-out;
}
.candle .candle-glow{ transition:filter .45s ease; }
.candle.fp-relight .flame-rig{
  animation:fp-ignite .32s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes fp-ignite{
  0%{ transform:scale(.25,.1); opacity:.4; }
  55%{ transform:scale(1.12,1.22); opacity:1; }
  100%{ transform:scale(1,1); }
}

/* ============================================================
   REALISTIC SMOKE — canvas particle plume, drawn by js/main.js.
   Replaces the old one-shot CSS wisp: on blow-out a DPR-aware
   canvas overlays the candle stage and a ribbon of buoyant
   particles rises from the wick, advected by the same cursor
   wind the flame simulation computes. Created lazily on the
   first blow-out; display:none + zero draws once every particle
   has died, so the idle cost is exactly zero. Never created
   under prefers-reduced-motion (the whole sim is off).
   ============================================================ */
.fp-smoke-canvas{
  position:absolute;
  left:-90px;   /* overscan so the plume can rise/drift past the stage —
                   keep in step with SMK_PAD_X / SMK_PAD_TOP in js/main.js */
  top:-170px;
  z-index:6;
  pointer-events:none;
  display:none;
}

/* ============================================================
   3D CANDLE SCENE — perspective + cursor parallax (hero & PDP)
   The stage carries the perspective; .candle-3d is the tilted
   object (rotateX/rotateY CSS vars from js/main.js, lerped in
   the shared rAF loop). Layers sit at distinct translateZ depths
   (back glass rim → wax pool → wick → flame → front glass) so
   the tilt reads as a solid jar, not a flat card. The flame is
   billboarded: counter-rotated by the scene yaw so it faces the
   viewer from every angle, with the flame-physics deflection
   composing on top. Transforms stay inside the stage subtree.
   --rx/--ry (deg), --ry-n (yaw −1…1), --glow-x (em, follows the
   flame deflection theta), --turb (0–1, from the flame sim).
   ============================================================ */
.candle-scene{
  position:relative;
  perspective:1050px;
}
.candle-3d{
  transform-style:preserve-3d;
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change:transform;
}
/* the glow is the light source: pushed behind the composition, it
   slides with flame deflection and brightens with turbulence so the
   jar rim and wax pool catch moving light */
.candle-3d .candle-glow{
  translate:var(--glow-x, 0em) 0 -2.2em;
  filter:brightness(calc(1 + .35 * var(--turb, 0)));
}
/* flame billboard: undo the scene yaw first, then apply the physics
   deflection in the (now screen-parallel) plane — order matters */
.candle-3d .flame-rig{
  transform:
    translateZ(.14em)
    rotateY(calc(-1 * var(--ry, 0deg)))
    rotate(var(--fpx-rot, 0deg))
    skewX(var(--fpx-skew, 0deg))
    scaleY(var(--fpx-stretch, 1));
}
.candle-3d .wick{ transform:translateZ(.1em); }
.candle-3d .jar{ transform-style:preserve-3d; }
/* far rim of the glass — only revealed once the scene tilts */
.jar-back{
  position:absolute;
  top:-.72em;
  left:.55em;
  right:.55em;
  height:1.35em;
  border-radius:50%;
  transform:translateZ(-1.15em);
  background:radial-gradient(ellipse at 50% 62%,
    rgba(64,38,15,0) 52%,
    rgba(140,94,45,.6) 76%,
    rgba(52,30,12,.9) 100%);
  pointer-events:none;
}
/* molten pool + specular on the wax surface; the specular slides with
   flame deflection (--glow-x) and flickers with --turb */
.wax-pool{
  position:absolute;
  left:50%;
  top:47%;
  width:58%;
  height:56%;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 46%,
    rgba(255,205,120,.5),
    rgba(224,150,70,.26) 55%,
    rgba(190,120,52,0) 78%);
  filter:blur(.06em);
  opacity:calc(.8 + .2 * var(--turb, 0));
  transition:opacity .3s ease;
  pointer-events:none;
}
.wax-spec{
  position:absolute;
  left:50%;
  top:42%;
  width:26%;
  height:30%;
  translate:calc(-50% + var(--glow-x, 0em) * 1.6) -50%;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(255,247,223,.85),
    rgba(255,215,155,.3) 62%,
    rgba(255,215,155,0));
  filter:blur(.04em);
  opacity:calc(.55 + .45 * var(--turb, 0));
  transition:opacity .3s ease;
  pointer-events:none;
}
/* front glass: reflection streak that slides against the yaw, plus a
   rim light on the flame side whose strength tracks the flicker */
.jar-glass{
  position:absolute;
  inset:0;
  border-radius:inherit;
  transform:translateZ(1.05em);
  pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,245,225,0) calc(16% + var(--ry-n, 0) * 12%),
    rgba(255,245,225,.13) calc(25% + var(--ry-n, 0) * 12%),
    rgba(255,245,225,.02) calc(37% + var(--ry-n, 0) * 12%),
    rgba(255,245,225,0) 46%);
  box-shadow:
    inset -.16em .05em .3em -.08em rgba(255,214,150, calc(.28 + .3 * var(--turb, 0))),
    inset .12em 0 .3em -.1em rgba(255,236,190,.12);
  transition:opacity .3s ease;
}
/* blown out: the scene's light dies — wax specular and rim light fade
   with the glow, and return on relight when .fp-out is removed */
.candle.fp-out .wax-pool,
.candle.fp-out .wax-spec{ opacity:0; }
.candle.fp-out .jar-glass{ opacity:.3; }
/* contact shadow slides opposite the tilt, grounding the jar */
.candle-3d .candle-shadow{
  translate:calc(var(--ry-n, 0) * -1.3em) 0;
}

@media (prefers-reduced-motion: reduce){
  .flame-rig{ transform:none !important; }
  .flame-rig .flame{ filter:none !important; }
  /* flat presentation: no parallax, no canvas smoke */
  .candle-3d{ transform:none !important; }
  .fp-smoke-canvas{ display:none !important; }
}

/* ---------- product cards ---------- */
.light-hint{
  font-size:.85rem;
  color:var(--parch);
  font-style:italic;
  margin:-1.4rem 0 2rem;
}
@media (hover:none){
  .light-hint{ display:none; }
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--gap-grid);
}
.product{
  position:relative;
  display:flex;
  flex-direction:column;
  background:linear-gradient(185deg, var(--saddle), var(--umber) 70%);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  overflow:clip;
  transition:border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.product:hover,
.product:focus-within{
  border-color:rgba(231,164,78,.4);
  transform:translateY(-4px);
  box-shadow:var(--shadow-card), var(--glow-soft);
}
.product-stage{
  position:relative;
  display:flex;
  justify-content:center;
  padding:2.6rem 1rem 1.3rem;
  background:radial-gradient(24rem 15rem at 50% 105%, rgba(180,98,46,.14), transparent 70%);
}
/* unlit by default — hovering lights the wick */
.product .flame,
.product .candle-glow{
  opacity:0;
  transition:opacity .5s ease;
}
.product .jar,
.product .jar-mouth{
  filter:brightness(.88) saturate(.92);
  transition:filter .5s ease;
}
.product:hover .flame,
.product:focus-within .flame,
.product:hover .candle-glow,
.product:focus-within .candle-glow{
  opacity:1;
}
.product:hover .jar,
.product:focus-within .jar,
.product:hover .jar-mouth,
.product:focus-within .jar-mouth{
  filter:brightness(1) saturate(1);
}
@media (hover:none){
  .product .flame,
  .product .candle-glow{ opacity:1; }
  .product .jar,
  .product .jar-mouth{ filter:none; }
}
.product-info{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:.4rem 1.5rem 1.5rem;
}
.product-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.8rem;
}
.product-head h3{
  font-size:1.42rem;
  font-weight:480;
  margin-bottom:.3rem;
}
.product-head h3 a{ color:inherit; }
.product-head h3 a:hover{ color:var(--flame); }
/* prices: tabular figures, currency mark set small like a hallmark */
.price,
.gift-price,
.pdp-price,
.drawer-total-row strong{
  font-variant-numeric:tabular-nums;
  display:inline-block;
}
.price::first-letter,
.gift-price::first-letter,
.pdp-price::first-letter,
.drawer-total-row strong::first-letter{
  font-size:.72em;
  color:var(--amber);
}
.price{
  font-family:var(--font-display);
  font-size:1.22rem;
  color:var(--flame);
  white-space:nowrap;
}
.family-tag{
  display:inline-block;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--amber);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:.14rem .6rem .1rem;
  margin-bottom:.55rem;
}
.notes{
  color:var(--parch);
  font-size:.95rem;
  margin-bottom:.45rem;
}
.blurb{
  color:var(--parch);
  font-size:.92rem;
  margin-bottom:.9rem;
  text-wrap:pretty;
}
.meta{
  color:var(--parch);
  opacity:.85;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
}
.add-btn{
  margin-top:auto;
  align-self:flex-start;
}
/* cards with a size select: pin select + button as one bottom block so
   rows finish on a shared baseline whatever the blurb length */
.product-info .size-select{ margin-top:auto; }
.product-info .size-select + .add-btn{ margin-top:0; }
.add-btn.added{
  border-color:var(--amber);
  color:var(--flame);
  background:rgba(231,164,78,.12);
}
.note-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.note-chip{
  font-size:.8rem;
  color:var(--wax);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:.28rem .75rem;
  background:rgba(231,164,78,.06);
}

/* ---------- size select & quantity stepper ---------- */
.size-select{
  width:100%;
  margin-bottom:1rem;
  appearance:none;
  background:rgba(24,16,9,.6);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--wax);
  font-family:inherit;
  font-size:.92rem;
  padding:.6rem 2.4rem .6rem .85rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E7A44E' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
  transition:border-color .25s ease, background-color .25s ease;
}
.size-select:focus{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(231,164,78,.15);
}
.qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:rgba(24,16,9,.6);
}
.qty-btn{
  width:42px;
  height:46px;
  background:none;
  border:none;
  color:var(--amber);
  font-size:1.25rem;
  line-height:1;
  border-radius:var(--r-pill);
  transition:color .2s ease, background .2s ease;
}
.qty-btn:hover{ color:var(--flame); background:rgba(231,164,78,.1); }
.qty-input{
  width:44px;
  text-align:center;
  background:none;
  border:none;
  color:var(--wax);
  font-family:inherit;
  font-size:1rem;
  font-weight:700;
  -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- reviews ---------- */
.review-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--gap-grid);
}
.review{
  background:var(--saddle);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:1.7rem 1.7rem 1.5rem;
  display:flex;
  flex-direction:column;
}
.stars{
  color:var(--amber);
  letter-spacing:.22em;
  font-size:.9rem;
  margin-bottom:.9rem;
}
.review blockquote{
  margin:0 0 1.2rem;
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.22rem;
  line-height:1.42;
  text-wrap:pretty;
}
.review figcaption{
  margin-top:auto;
  color:var(--parch);
  font-size:.9rem;
}
.review figcaption strong{
  color:var(--wax);
  font-weight:700;
}

/* ---------- FAQ accordion ---------- */
.faq-list{
  max-width:46rem;
  margin-inline:auto;
}
.faq-item{
  border-bottom:1px solid var(--line-soft);
}
.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  width:100%;
  padding:1.25rem .3rem;
  background:none;
  border:none;
  color:var(--wax);
  text-align:left;
  font-family:var(--font-display);
  font-size:1.18rem;
  font-weight:450;
  line-height:1.3;
  transition:color .25s ease;
}
.faq-q:hover{ color:var(--flame); }
.faq-q .chev{
  flex:none;
  transition:transform .35s ease;
  color:var(--amber);
}
.faq-q[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}
.faq-a-inner{
  padding:0 .3rem 1.4rem;
  color:var(--parch);
  font-size:.98rem;
  max-width:40rem;
}
.faq-a-inner p{ margin-bottom:.6rem; }
.faq-a-inner p:last-child{ margin-bottom:0; }

/* ---------- panels & forms ---------- */
.panel{
  background:var(--saddle);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:1.8rem 1.7rem;
}
.panel h2{
  font-size:clamp(1.6rem, 3vw, 2.1rem);
}
.panel h3{
  font-size:1.42rem;
  font-weight:480;
  margin-bottom:.4rem;
}
.panel .sub{
  color:var(--parch);
  font-size:.96rem;
  margin-bottom:1.2rem;
}
.news-row{
  display:flex;
  gap:.6rem;
}
.news-row input{ flex:1; min-width:0; }
.field{
  margin-bottom:1.05rem;
}
.field label{
  display:block;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.05em;
  margin-bottom:.4rem;
  color:var(--wax);
}
.field input,
.field select,
.field textarea,
.news-row input,
.chat-input-row input{
  width:100%;
  background:rgba(24,16,9,.6);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--wax);
  font-family:inherit;
  font-size:.98rem;
  padding:.72rem .9rem;
  transition:border-color .25s ease, background .25s ease;
}
.field textarea{
  resize:vertical;
  min-height:118px;
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E7A44E' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
  padding-right:2.4rem;
}
.field input::placeholder,
.field textarea::placeholder,
.news-row input::placeholder{
  color:rgba(203,184,153,.55);
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.news-row input:focus{
  outline:none;
  border-color:var(--amber);
  background:rgba(24,16,9,.85);
  box-shadow:0 0 0 3px rgba(231,164,78,.15);
}
.field.error input,
.field.error select,
.field.error textarea{
  border-color:#E4694C;
}
.err-msg{
  display:none;
  color:#F0937B;
  font-size:.82rem;
  margin-top:.35rem;
}
.field.error .err-msg{ display:block; }
.form-success{
  display:none;
  text-align:center;
  padding:2.2rem 1rem;
}
.form-success.show{ display:block; }
.form-success .tick{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:50%;
  background:rgba(231,164,78,.14);
  border:1px solid var(--amber);
  color:var(--flame);
  margin-bottom:1rem;
}
.form-success h4{
  font-size:1.35rem;
  margin-bottom:.3rem;
}
.form-success p{
  color:var(--parch);
  margin:0;
}

/* ---------- footer ---------- */
.site-footer{
  background:#120B05;
  border-top:1px solid var(--line-soft);
  padding-block:3.5rem 6.5rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:2.2rem;
  margin-bottom:2.8rem;
}
.footer-brand p{
  color:var(--parch);
  font-size:.94rem;
  max-width:19rem;
  margin-top:.9rem;
}
.footer-col h4{
  font-size:.8rem;
  font-weight:700;
  font-family:var(--font-body);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:1rem;
}
.footer-col ul{
  list-style:none;
  margin:0;
  padding:0;
}
.footer-col li{ padding-block:.28rem; }
.footer-col a{
  color:var(--parch);
  font-size:.95rem;
}
.footer-col a:hover{ color:var(--flame); }
.footer-col address{
  font-style:normal;
  color:var(--parch);
  font-size:.95rem;
  line-height:1.7;
}
.footer-legal{
  border-top:1px solid var(--line-soft);
  padding-top:1.6rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.8rem 2rem;
  color:var(--parch);
  font-size:.85rem;
}
.footer-legal a{ font-weight:600; }

/* ---------- basket drawer ---------- */
.drawer-overlay{
  position:fixed;
  inset:0;
  z-index:298;
  background:rgba(10,6,2,.62);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.drawer-overlay.show{
  opacity:1;
  visibility:visible;
  transition:opacity .3s ease, visibility 0s;
}
.basket-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:299;
  width:min(420px, 100vw);
  display:flex;
  flex-direction:column;
  background:var(--umber);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.8);
  transform:translateX(102%);
  visibility:hidden;
  transition:transform .35s ease, visibility 0s linear .35s;
}
.basket-drawer.open{
  transform:none;
  visibility:visible;
  transition:transform .35s ease, visibility 0s;
}
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--line-soft);
}
.drawer-head h2{
  font-size:1.4rem;
  font-weight:480;
  margin:0;
}
.drawer-close{
  background:none;
  border:1px solid var(--line);
  color:var(--parch);
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.drawer-close:hover{
  background:rgba(231,164,78,.12);
  border-color:var(--amber);
  color:var(--wax);
}
.drawer-empty{
  padding:2.4rem 1.5rem;
  color:var(--parch);
  text-align:center;
  margin:0;
}
.drawer-items{
  flex:1;
  overflow-y:auto;
  list-style:none;
  margin:0;
  padding:.4rem 1.5rem;
}
.drawer-item{
  display:flex;
  align-items:center;
  gap:.95rem;
  padding-block:1rem;
  border-bottom:1px solid var(--line-soft);
}
.drawer-item:last-child{ border-bottom:none; }
.drawer-swatch{
  flex:none;
  position:relative;
  width:36px;
  height:44px;
  border-radius:7px 7px 11px 11px;
  background:linear-gradient(180deg, #E9CFA3 0%, #C89153 45%, #8A5626 100%);
  box-shadow:inset 0 2px 3px rgba(255,240,210,.6), inset 0 -5px 7px -3px rgba(20,10,3,.6);
}
.drawer-swatch::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:18px;
  height:5px;
  border-radius:3px;
  background:var(--amber);
  opacity:.85;
}
.drawer-item-info{
  flex:1;
  min-width:0;
}
.drawer-item-info strong{
  display:block;
  font-family:var(--font-display);
  font-weight:480;
  font-size:1.02rem;
  line-height:1.25;
}
.drawer-item-info span{
  color:var(--parch);
  font-size:.85rem;
}
.drawer-item-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.4rem;
}
.drawer-qty{
  display:inline-flex;
  align-items:center;
  gap:.15rem;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.drawer-qty button{
  width:28px;
  height:30px;
  background:none;
  border:none;
  color:var(--amber);
  font-size:1rem;
  line-height:1;
  border-radius:var(--r-pill);
}
.drawer-qty button:hover{ color:var(--flame); background:rgba(231,164,78,.1); }
.drawer-qty output{
  min-width:20px;
  text-align:center;
  font-size:.9rem;
  font-weight:700;
}
.drawer-remove{
  background:none;
  border:none;
  color:var(--parch);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  padding:.1rem .2rem;
  text-decoration:underline;
  text-underline-offset:3px;
}
.drawer-remove:hover{ color:#F0937B; }
.drawer-foot{
  border-top:1px solid var(--line-soft);
  padding:1.25rem 1.5rem 1.5rem;
  background:rgba(18,11,5,.45);
}
.drawer-ship{
  font-size:.85rem;
  color:var(--parch);
  margin-bottom:.55rem;
}
.drawer-ship strong{ color:var(--flame); font-weight:700; }
/* free-shipping meter — a wick of light filling towards £40 */
.ship-meter{
  position:relative;
  height:3px;
  border-radius:var(--r-pill);
  background:rgba(231,164,78,.14);
  overflow:hidden;
  margin-bottom:1rem;
}
.ship-meter i{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--ember), var(--amber) 60%, var(--flame));
  box-shadow:0 0 10px rgba(231,164,78,.55);
  transition:width .45s ease;
}
.ship-meter.full i{ box-shadow:0 0 14px rgba(255,215,155,.75); }
.drawer-total-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:.9rem;
}
.drawer-total-row span{
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--parch);
}
.drawer-total-row strong{
  font-family:var(--font-display);
  font-size:1.45rem;
  font-weight:500;
  color:var(--flame);
}
.drawer-checkout{ width:100%; }
.checkout-note{
  display:none;
  margin:.85rem 0 0;
  padding:.75rem .95rem;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(231,164,78,.08);
  color:var(--wax);
  font-size:.88rem;
  line-height:1.5;
}
.checkout-note.show{ display:block; }
body.drawer-open{ overflow:hidden; }

/* ---------- floating: whatsapp ---------- */
.wa-float{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:240;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.wa-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--wa-green);
  color:#0B2B18;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.5);
  transition:transform .25s ease;
}
.wa-btn:hover{ transform:translateY(-3px) scale(1.05); color:#0B2B18; }
.wa-label{
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease;
  background:rgba(24,16,9,.92);
  border:1px solid var(--line);
  color:var(--wax);
  font-size:.83rem;
  font-weight:600;
  padding:.42rem .85rem;
  border-radius:var(--r-pill);
  white-space:nowrap;
  pointer-events:none;
}
.wa-float:hover .wa-label,
.wa-btn:focus-visible + .wa-label{
  opacity:1;
  transform:translateX(0);
}

/* ---------- floating: chat widget ---------- */
.chat-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:245;
  width:58px;
  height:58px;
  border-radius:50%;
  border:none;
  background:linear-gradient(160deg, var(--flame), var(--amber) 55%, #C77E2E);
  color:#241505;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 34px -8px rgba(231,164,78,.6);
  transition:transform .25s ease, box-shadow .25s ease;
}
.chat-fab:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 18px 40px -8px rgba(231,164,78,.75);
}
.chat-fab .icon-close{ display:none; }
.chat-fab[aria-expanded="true"] .icon-flame{ display:none; }
.chat-fab[aria-expanded="true"] .icon-close{ display:block; }
.chat-panel{
  position:fixed;
  right:18px;
  bottom:88px;
  z-index:246;
  width:min(376px, calc(100vw - 36px));
  height:min(560px, calc(100dvh - 120px));
  display:flex;
  flex-direction:column;
  background:var(--umber);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.8), var(--glow-soft);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.97);
  transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.chat-panel.open{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:opacity .3s ease, transform .3s ease, visibility 0s;
}
.chat-head{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem 1.1rem;
  background:linear-gradient(160deg, rgba(231,164,78,.16), rgba(231,164,78,.04));
  border-bottom:1px solid var(--line-soft);
}
.chat-avatar{
  flex:none;
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--flame), var(--amber));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#241505;
}
.chat-head-txt strong{
  display:block;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.08rem;
  line-height:1.2;
}
.chat-head-txt span{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.78rem;
  color:var(--parch);
}
.chat-head-txt span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8FC98A;
}
.chat-close{
  margin-left:auto;
  background:none;
  border:none;
  color:var(--parch);
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.chat-close:hover{
  background:rgba(231,164,78,.12);
  color:var(--wax);
}
.chat-msgs{
  flex:1;
  overflow-y:auto;
  padding:1.1rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.msg{
  max-width:86%;
  padding:.68rem .95rem;
  border-radius:var(--r-md);
  font-size:.93rem;
  line-height:1.5;
}
.msg.bot{
  align-self:flex-start;
  background:var(--saddle);
  border:1px solid var(--line-soft);
  border-bottom-left-radius:4px;
  color:var(--wax);
}
.msg.bot a{ font-weight:700; }
.msg.user{
  align-self:flex-end;
  background:linear-gradient(160deg, var(--flame), var(--amber));
  color:#241505;
  font-weight:600;
  border-bottom-right-radius:4px;
}
.typing{
  align-self:flex-start;
  display:flex;
  gap:5px;
  padding:.85rem 1rem;
  background:var(--saddle);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  border-bottom-left-radius:4px;
}
.typing i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--amber);
  animation:dot-bounce 1.1s ease-in-out infinite;
}
.typing i:nth-child(2){ animation-delay:.15s; }
.typing i:nth-child(3){ animation-delay:.3s; }
@keyframes dot-bounce{
  0%,60%,100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-5px); opacity:1; }
}
.chat-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  padding:.35rem 1rem .8rem;
}
.chip{
  border:1px solid var(--line);
  background:rgba(231,164,78,.06);
  color:var(--wax);
  font-size:.83rem;
  font-weight:600;
  border-radius:var(--r-pill);
  padding:.42rem .85rem;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.chip:hover{
  border-color:var(--amber);
  background:rgba(231,164,78,.14);
  color:var(--flame);
}
.chat-input-row{
  display:flex;
  gap:.55rem;
  padding:.75rem 1rem;
  border-top:1px solid var(--line-soft);
}
.chat-input-row input{ flex:1; min-width:0; }
.chat-send{
  flex:none;
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:linear-gradient(160deg, var(--flame), var(--amber));
  color:#241505;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease;
}
.chat-send:hover{ transform:scale(1.08); }
.chat-credit{
  text-align:center;
  font-size:.72rem;
  color:var(--parch);
  padding:.45rem 1rem .7rem;
  border-top:1px solid var(--line-soft);
  background:rgba(18,11,5,.5);
}
.chat-credit a{ font-weight:700; }

/* ---------- dispatch chip — live shipping cutoff, set by main.js ---------- */
.dispatch-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.83rem;
  font-weight:600;
  color:var(--parch);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:rgba(231,164,78,.06);
  padding:.34rem .85rem;
  margin:0;
}
.dispatch-chip:empty{ display:none; }
.dispatch-chip::before{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 8px 1px rgba(231,164,78,.7);
}
.drawer-foot .dispatch-chip{ margin-bottom:.8rem; }

/* ---------- photo band — real photography, graded into the palette ---------- */
.photo-band{
  margin:0;
}
.photo-band img{
  display:block;
  width:100%;
  height:clamp(230px, 36vw, 420px);
  object-fit:cover;
  border-radius:var(--r-lg);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-card);
}
.photo-band figcaption{
  margin-top:.8rem;
  color:var(--parch);
  font-size:.85rem;
  font-style:italic;
  text-align:center;
}

/* ---------- toast ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:96px;
  z-index:230;
  transform:translate(-50%, 16px);
  background:var(--saddle);
  border:1px solid var(--amber);
  color:var(--wax);
  font-size:.92rem;
  font-weight:600;
  padding:.7rem 1.25rem;
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-card), var(--glow-soft);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  max-width:calc(100vw - 2rem);
  text-align:center;
}
.toast.show{
  opacity:1;
  transform:translate(-50%, 0);
}

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;
  transition-delay:var(--d, 0s);
}
.reveal.in{
  opacity:1;
  transform:none;
}

/* ============================================================
   RESPONSIVE (shared components)
   ============================================================ */
@media (min-width:1081px){
  /* menu left open on a phone, then window widened: keep it hidden on desktop */
  .mobile-menu,
  .mobile-menu.open{ display:none; }
}
@media (max-width:1080px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .basket-btn{ margin-left:auto; } /* push controls to the right once links hide */
  .basket-btn,.burger{ flex:none; }
}
@media (max-width:900px){
  .product-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .review-grid{ grid-template-columns:minmax(0,1fr); }
  .footer-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  body{ font-size:1rem; }
  .nav-inner{ gap:.55rem; }
  .brand{ font-size:1.05rem; }
  .brand .brand-flame{ width:11px; height:14px; }
  .product-grid{ grid-template-columns:minmax(0,1fr); max-width:24rem; margin-inline:auto; }
  .news-row{ flex-direction:column; }
  .footer-grid{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .toast{ bottom:88px; }
}
@media (max-width:520px){
  .chat-panel{
    right:0;
    bottom:0;
    width:100vw;
    height:100dvh;
    border-radius:0;
    border:none;
  }
}

/* ?still on the URL freezes entrance motion — used for screenshots/QA */
html.no-reveal .reveal{ opacity:1; transform:none; transition:none; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  .reveal{ opacity:1; transform:none; }
  .flame,.candle-glow{ animation:none !important; }
}

/* ============================================================
   HONEYPOT — spam-trap form field, invisible and unreachable
   for humans; bots autofill it and main.js drops the submission
   ============================================================ */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ============================================================
   PRINT — customers print the candle-care guide (faq.html#care):
   chrome and widgets hidden, accordions opened, black on white
   ============================================================ */
@media print{
  *,*::before,*::after{
    background:transparent !important;
    color:#000 !important;
    box-shadow:none !important;
    text-shadow:none !important;
    animation:none !important;
    transition:none !important;
  }
  @page{ margin:1.6cm; }
  body{ background:#fff !important; font-size:11pt; line-height:1.5; }
  body::before{ display:none; }            /* film grain */
  .skip-link,
  .site-nav,
  .breadcrumbs,
  .wa-float,
  .chat-fab,
  .chat-panel,
  .basket-drawer,
  .drawer-overlay,
  .toast,
  .btn,
  .light-hint,
  .site-footer,
  #more-help{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  a{ text-decoration:underline; }
  .section{ padding-block:1.2rem; }
  .page-hero{ padding-block:0 .8rem; border-bottom:1px solid #000; }
  /* FAQ accordions print open, chevrons hidden */
  .faq-a{ max-height:none !important; overflow:visible !important; }
  .faq-q{ padding-block:.9rem .2rem; }
  .faq-q .chev{ display:none; }
  .faq-item,
  .care-card,
  .panel,
  .review{ break-inside:avoid; }
  .care-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; }
  .care-card{ border:1px solid #999; border-radius:8px; }
  .care-note,
  .craft-note,
  .ritual-note{ border-left:2px solid #000; }
}