/* ============================================================
   Moonlight Meadows — shared stylesheet
   Loaded on every page. Aesthetic: glam pastel (blush /
   lavender / sky / cream) with a soft gold glow + sage accent
   pulled from the logo. Cormorant Garamond display, Jost body.
   ============================================================ */

:root{
  --ink:#3a3357; --ink-soft:#6f668c; --cream:#fbf6ef;
  --gold:#ffcf8a; --glow:#ffb86b;
  --sage:#7fa07a; --sage-deep:#5d7d59; --sage-soft:#e4efe1;
  --blush:#f6dfe3; --lav:#e6dcf2; --sky:#dcebf7;
  --night1:#16142e; --night2:#241f47;
  --t:0; /* scroll 0=dawn 1=night, set by JS on home */
}

*{margin:0;padding:0;box-sizing:border-box}
/* hide scrollbars site-wide while keeping scrolling functional */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
/* keep the vertical scroll track ALWAYS reserved so the viewport width never
   changes when page height crosses the fold (card reveals, font swap, filter
   re-render) — this is what was causing the intermittent horizontal shift. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  font-family:'Jost',sans-serif;color:var(--ink);
  /* overflow-y:scroll (not the implied 'auto') = no scrollbar appear/disappear toggle */
  overflow-x:hidden;overflow-y:scroll;position:relative;min-height:100vh;min-height:100dvh;
  /* flex column so the footer is a sticky bottom sibling on every page */
  display:flex;flex-direction:column;
  /* shared dawn backdrop for EVERY page — identical to the home #sky at scroll 0
     so navigating to/from the top of home has no hard background cut. */
  background:linear-gradient(180deg,#fbeef0,#dce7f6) fixed;
}
h1,h2,h3,h4,.disp{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.3px;line-height:1.06}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.pad{padding:90px 0}
section{position:relative}

/* ---------- Day → night sky (home only) ---------- */
#sky{position:fixed;inset:0;z-index:-3;background:linear-gradient(180deg,#fbeef0,#dce7f6);transition:background .25s linear}
#stars{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0}
#stars span{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:tw 3.5s infinite}
@keyframes tw{0%,100%{opacity:.35}50%{opacity:1}}
#moon{position:fixed;right:11%;top:16%;width:120px;height:120px;border-radius:50%;z-index:-2;
  background:radial-gradient(circle at 38% 36%,#fffdf6,#f2e6c9 60%,#e6d3a8);
  box-shadow:0 0 60px 18px rgba(255,247,214,.55), inset -14px -10px 0 rgba(0,0,0,.04);opacity:0;transform:translateY(40px)}
.haze{position:fixed;left:0;right:0;bottom:0;height:42vh;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,210,170,0))}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:'Jost';font-weight:500;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;
  padding:14px 30px;border-radius:40px;background:var(--ink);color:var(--cream);border:1.5px solid var(--ink);transition:.25s;cursor:pointer}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.btn.light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn.light:hover{background:rgba(255,255,255,.15)}
.btn.sage{background:var(--sage);border-color:var(--sage)}
.btn.sage:hover{background:transparent;color:var(--sage-deep);border-color:var(--sage)}

/* ============================================================
   HEADER / NAV
   ============================================================ */
header.site-header{position:fixed;top:0;left:0;right:0;z-index:120;transition:.3s}
header.site-header.scrolled{backdrop-filter:blur(12px);background:rgba(255,255,255,.6);box-shadow:0 1px 30px rgba(58,51,87,.10)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:46px;width:auto;aspect-ratio:500/309}
.links{display:flex;gap:32px;font-size:13.5px;letter-spacing:1px;text-transform:uppercase;font-weight:400}
.links a{position:relative;opacity:.9;color:var(--ink)}
.links a.active{opacity:1;color:var(--sage-deep)}
.links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:currentColor;transition:.25s}
.links a:hover::after,.links a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:14px}
.navcart{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;border:1.5px solid var(--ink);color:var(--ink);
  padding:8px 16px;border-radius:30px;cursor:pointer;background:transparent;transition:.2s}
.navcart:hover{background:var(--ink);color:var(--cream)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
@media(max-width:820px){.links{display:none}.burger{display:flex}.brand img{height:40px}}

/* ---------- Mobile slide-in nav ---------- */
.mobile-nav{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none;overflow:hidden}
.mobile-nav .scrim{position:absolute;inset:0;background:rgba(22,20,46,.45);opacity:0;transition:.3s}
.mobile-nav .panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);
  background:linear-gradient(165deg,#fbeef1,#ece0f6 60%,#dfe9f7);
  box-shadow:-20px 0 60px rgba(58,51,87,.25);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,.1,.2,1);
  display:flex;flex-direction:column;padding:26px 28px}
.mobile-nav.open{visibility:visible;pointer-events:auto}
.mobile-nav.open .scrim{opacity:1}
.mobile-nav.open .panel{transform:translateX(0)}
.mobile-nav .m-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.mobile-nav .m-top img{height:38px;width:auto;aspect-ratio:500/309}
.m-close{background:none;border:none;font-size:30px;line-height:1;color:var(--ink);cursor:pointer;padding:4px 8px}
.mobile-nav .m-links a{display:block;font-family:'Cormorant Garamond';font-size:30px;color:var(--ink);padding:11px 0;border-bottom:1px solid rgba(58,51,87,.10)}
.mobile-nav .m-links a.active{color:var(--sage-deep)}
.mobile-nav .m-cart{margin-top:26px}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{min-height:100vh;display:flex;align-items:center;text-align:center;position:relative}
.hero-inner{max-width:760px;margin:0 auto;padding:140px 24px 80px}
.eyebrow{font-size:13px;letter-spacing:5px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
.hero h1{font-size:clamp(46px,8.5vw,98px);font-weight:500;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--sage-deep)}
.hero p{font-size:clamp(16px,2.2vw,20px);color:var(--ink-soft);max-width:520px;margin:24px auto 34px;line-height:1.6;font-weight:300}
.scrollhint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--ink-soft);opacity:.85}
.scrollhint .d{display:block;margin:8px auto 0;width:1px;height:34px;background:linear-gradient(var(--ink-soft),transparent);animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Section headers ---------- */
.center{text-align:center;max-width:640px;margin:0 auto 50px}
.center .eyebrow{margin-bottom:14px}
.center h2{font-size:clamp(32px,5.5vw,56px);color:var(--ink)}
.center p{color:var(--ink-soft);margin-top:14px;font-weight:300;line-height:1.6}
/* when JS marks the page deep into night, lift section text to light for contrast */
body.is-night .center h2{color:#f3eeff}
body.is-night .center .eyebrow,body.is-night .center p{color:#cbc2ec}
body.is-night .scrollhint{color:#cbc2ec}

/* ============================================================
   PRODUCT GRID + CARDS
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:880px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.card{background:rgba(255,255,255,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.75);
  border-radius:20px;overflow:hidden;transition:.3s;box-shadow:0 12px 40px rgba(58,51,87,.10);color:var(--ink);
  display:flex;flex-direction:column}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(58,51,87,.18)}
.pic{height:240px;position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;cursor:pointer}
/* pastel gradient placeholders — swap for real <img> later by setting product.image */
.pic.p1{background:linear-gradient(160deg,#f7e2e8,#efd5e6)}
.pic.p2{background:linear-gradient(160deg,#f4d9e6,#e9c4dd)}
.pic.p3{background:linear-gradient(160deg,#e7ddf6,#dcd0f1)}
.pic.p4{background:linear-gradient(160deg,#dcecf6,#cfe2f2)}
.pic.p5{background:linear-gradient(160deg,#e3f0f4,#d2e6ee)}
.pic.p6{background:linear-gradient(160deg,#dceef0,#cbe6e4)}
.pic.p7{background:linear-gradient(160deg,#f8ead7,#efdcc2)}
.pic.p8{background:linear-gradient(160deg,#f3ddc7,#e7c7a9)}
.pic.p9{background:linear-gradient(160deg,#e3efe0,#d3e7d2)}
.pic.p10{background:linear-gradient(160deg,#dfe7df,#c8d6c6)}
.pic.p11{background:linear-gradient(160deg,#fbe6dd,#f4d2c4)}
.pic.p12{background:linear-gradient(160deg,#efe0ee,#e2cbe6)}
.pic img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* CSS candle (placeholder until real photos) */
.candle{position:relative;width:96px;height:120px;margin-bottom:30px;filter:drop-shadow(0 10px 14px rgba(58,51,87,.18));pointer-events:none}
.jar{position:absolute;bottom:0;width:96px;height:92px;border-radius:14px 14px 18px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.55));border:1px solid rgba(255,255,255,.9)}
.wax{position:absolute;bottom:6px;left:6px;right:6px;height:18px;border-radius:0 0 12px 12px;background:rgba(255,255,255,.7)}
.flame{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:14px;height:24px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,#fff5cf,var(--glow) 60%,#ff8e5e);
  box-shadow:0 0 0 rgba(255,184,107,0);opacity:.85;transition:box-shadow .4s;animation:flick 1.6s infinite ease-in-out}
@keyframes flick{0%,100%{transform:translateX(-50%) scaleY(1) rotate(-1deg)}50%{transform:translateX(-50%) scaleY(1.08) rotate(1.5deg)}}
.card:hover .flame,.pickcard:hover .flame{box-shadow:0 0 26px 6px rgba(255,184,107,.8)}
body.is-night .flame{box-shadow:0 0 22px 5px rgba(255,184,107,.7)}
/* size-driven candle shapes (class set from product.size in app.js) */
.candle--tall{height:138px}
.candle--tall .jar{width:56px;height:112px;left:50%;transform:translateX(-50%)}
.candle--tall .flame{width:11px;height:26px}
.candle--short{height:108px}
.candle--short .jar{width:108px;height:74px;left:50%;transform:translateX(-50%)}
.candle--short .flame{width:16px;height:21px}
.tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.85);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  padding:5px 11px;border-radius:30px;color:var(--ink);z-index:2}
.size-chip{position:absolute;top:14px;right:14px;background:rgba(58,51,87,.78);color:#fff;font-size:10.5px;letter-spacing:1px;
  text-transform:uppercase;padding:5px 10px;border-radius:30px;z-index:2}
.card .body{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.card .body h3{font-size:24px;cursor:pointer}
.notes{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 0}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px}
.price{font-family:'Cormorant Garamond';font-size:23px;font-weight:600;color:var(--ink)}
.add{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;background:var(--ink);color:var(--cream);border:none;
  padding:10px 18px;border-radius:30px;cursor:pointer;transition:.25s}
.add:hover{background:var(--glow);color:var(--ink)}
/* scroll-reveal entrance for product cards (home featured + catalogue grid).
   GPU-friendly (opacity / transform / filter only). Disabled under reduced
   motion, and the .reveal class is stripped after the animation so card hover
   returns to its normal speed. */
@media (prefers-reduced-motion: no-preference){
  .card.reveal{opacity:0;transform:translateY(24px);filter:blur(8px);will-change:opacity,transform,filter;
    transition:opacity .65s cubic-bezier(.2,.6,.2,1),transform .65s cubic-bezier(.2,.6,.2,1),filter .65s cubic-bezier(.2,.6,.2,1)}
  .card.reveal.is-visible{opacity:1;transform:none;filter:blur(0)}
}

/* ============================================================
   MOOD MATCH
   ============================================================ */
.finder{border-radius:28px;padding:48px 30px;text-align:center;background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.75);color:var(--ink);box-shadow:0 16px 50px rgba(58,51,87,.10)}
.finder .eyebrow{color:var(--ink-soft)}
.finder h2{font-size:clamp(30px,5vw,48px);color:var(--ink)}
.moods{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px 0 30px}
.mood{font-family:'Jost';font-size:14px;letter-spacing:1px;padding:11px 22px;border-radius:40px;cursor:pointer;
  border:1.5px solid var(--ink-soft);color:var(--ink);background:transparent;transition:.2s}
.mood:hover{border-color:var(--ink)}
.mood.active{background:var(--sage);color:#fff;border-color:var(--sage)}
/* the recommended-candle card */
.pickcard{display:flex;gap:24px;align-items:center;text-align:left;max-width:620px;margin:0 auto;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);border-radius:22px;overflow:hidden;
  box-shadow:0 14px 40px rgba(58,51,87,.12);transition:.3s}
.pickcard .pick-pic{flex:0 0 150px;align-self:stretch;min-height:180px;position:relative;display:flex;align-items:flex-end;justify-content:center;cursor:pointer}
.pickcard .candle{transform:scale(.85);margin-bottom:18px}
.pickcard .pick-body{padding:22px 24px 22px 4px;flex:1}
.pickcard .pick-line{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--sage-deep);font-weight:500}
.pickcard h3{font-size:30px;margin:4px 0 2px;color:var(--ink)}
.pickcard .notes{margin-bottom:14px}
.pickcard .pick-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.pickcard .price{margin-right:auto}
.btn-mini{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;padding:9px 16px;border-radius:30px;cursor:pointer;border:1.5px solid var(--ink);background:transparent;color:var(--ink);transition:.2s}
.btn-mini:hover{background:var(--ink);color:var(--cream)}
.btn-mini.solid{background:var(--ink);color:var(--cream)}
.btn-mini.solid:hover{background:var(--glow);color:var(--ink);border-color:var(--glow)}
@media(max-width:560px){
  .pickcard{flex-direction:column}
  .pickcard .pick-pic{flex:0 0 auto;width:100%;min-height:160px}
  .pickcard .pick-body{padding:0 24px 24px}
  .pickcard .price{width:100%;margin-bottom:6px}
}

/* ============================================================
   COLLECTIONS strip
   ============================================================ */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:780px){.cols{grid-template-columns:1fr}}
.col{position:relative;height:210px;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px;color:#fff;box-shadow:0 14px 40px rgba(58,51,87,.16);transition:.3s}
.col:hover{transform:translateY(-6px);box-shadow:0 22px 56px rgba(58,51,87,.24)}
.col span{position:relative;z-index:2;font-family:'Cormorant Garamond';font-size:30px}
.col small{position:relative;z-index:2;font-family:'Jost';font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.95;margin-top:4px}
.col::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(40,30,60,.55))}
.c1{background:linear-gradient(150deg,#d8a7c4,#a87fb0)}
.c2{background:linear-gradient(150deg,#9fb8da,#7d93c4)}
.c3{background:linear-gradient(150deg,#caa98f,#9d7a86)}

/* ============================================================
   STORY teaser
   ============================================================ */
.story{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
@media(max-width:820px){.story{grid-template-columns:1fr;gap:30px}}
.story h2{font-size:clamp(32px,5vw,52px);margin-bottom:18px;color:var(--ink)}
.story .eyebrow{color:var(--sage-deep)}
.story p{color:var(--ink-soft);line-height:1.8;margin-bottom:14px;font-weight:300}
.story .frame{aspect-ratio:4/4.4;border-radius:24px;background:linear-gradient(160deg,#efe1f3,#dccdee);position:relative;
  display:grid;place-items:center;box-shadow:0 20px 50px rgba(58,51,87,.16);overflow:hidden}
.story .frame .candle{transform:scale(1.6)}
body.is-night .story h2{color:#f3eeff}
body.is-night .story p{color:#cbc2ec}

/* ============================================================
   NEWSLETTER (dark moonlit panel, white legible text)
   ============================================================ */
.news{text-align:center;border-radius:30px;padding:64px 30px;color:#fff;
  background:linear-gradient(155deg,#2a2550,#1b1838);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(20,16,40,.35);position:relative;overflow:hidden}
.news::before{content:"";position:absolute;top:-40px;right:-30px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#fffdf6,#f2e6c9 60%,#e6d3a8);opacity:.18;filter:blur(2px)}
.news .eyebrow{color:var(--gold)}
.news h2{font-size:clamp(30px,5vw,48px);color:#fff;position:relative}
.news p{color:#e8e2ff;margin:12px auto 26px;max-width:460px;font-weight:300;position:relative}
.news form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative}
.news input{padding:15px 22px;border-radius:40px;border:1.5px solid rgba(255,255,255,.3);min-width:280px;font-family:'Jost';
  font-size:15px;background:rgba(255,255,255,.12);color:#fff}
.news input::placeholder{color:rgba(255,255,255,.6)}
.news .btn{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.news .btn:hover{background:#fff;border-color:#fff}

/* ============================================================
   FOOTER (its own dark night background — always legible)
   ============================================================ */
footer.site-footer{padding:64px 0 36px;color:#e9e3ff;position:relative;z-index:2;margin-top:40px;flex-shrink:0;
  background:linear-gradient(180deg,#1b1838,#16142e)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px}
.foot .f-brand{max-width:260px}
.foot .f-brand img{height:54px;width:auto;aspect-ratio:500/309;margin-bottom:14px}
.foot .f-brand p{color:#cfc7ea;font-weight:300;font-size:14px;line-height:1.6}
.foot h4{font-family:'Jost';text-transform:uppercase;letter-spacing:2px;font-size:13px;margin-bottom:14px;color:#fff;font-weight:500}
.foot a{display:block;margin-bottom:9px;color:#cfc7ea;font-size:14px;font-weight:300;cursor:pointer}
.foot a:hover{color:#fff}
.copy{text-align:center;margin-top:40px;font-size:12px;letter-spacing:1px;color:#a99fce}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-drawer{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none;overflow:hidden}
.cart-drawer .scrim{position:absolute;inset:0;background:rgba(22,20,46,.5);opacity:0;transition:.3s}
.cart-drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(92vw,420px);
  background:linear-gradient(180deg,#fdf8f2,#f3ecfa);box-shadow:-20px 0 60px rgba(58,51,87,.28);
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,.1,.2,1);display:flex;flex-direction:column}
.cart-drawer.open{visibility:visible;pointer-events:auto}
.cart-drawer.open .scrim{opacity:1}
.cart-drawer.open .panel{transform:translateX(0)}
/* exit: keep visible while the panel slides back out + backdrop fades */
.cart-drawer.closing{visibility:visible;pointer-events:none}
.cart-drawer.closing .scrim{opacity:0}
.cart-drawer.closing .panel{transform:translateX(100%)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 16px;border-bottom:1px solid rgba(58,51,87,.12)}
.cart-head h3{font-size:28px;color:var(--ink)}
.cart-items{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 24px}
.cart-empty{text-align:center;color:var(--ink-soft);padding:60px 10px;font-weight:300}
.cart-empty .ce-moon{font-size:40px;display:block;margin-bottom:10px;opacity:.5}
.ci{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid rgba(58,51,87,.10)}
.ci .ci-pic{flex:0 0 64px;height:64px;border-radius:14px;overflow:hidden;position:relative}
.ci .ci-pic .candle{transform:scale(.42);margin:0;position:absolute;left:50%;top:50%;translate:-50% -50%}
.ci .ci-info{flex:1;min-width:0}
.ci .ci-info h4{font-family:'Cormorant Garamond';font-size:20px;color:var(--ink);margin-bottom:2px}
.ci .ci-info .ci-meta{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.ci .ci-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid rgba(58,51,87,.25);border-radius:30px;overflow:hidden}
.qty button{width:30px;height:30px;border:none;background:transparent;font-size:16px;cursor:pointer;color:var(--ink)}
.qty button:hover{background:rgba(58,51,87,.08)}
.qty span{min-width:26px;text-align:center;font-size:14px}
.ci .ci-line{font-family:'Cormorant Garamond';font-size:19px;font-weight:600;color:var(--ink)}
.ci-remove{background:none;border:none;color:var(--ink-soft);font-size:12px;letter-spacing:.5px;cursor:pointer;text-decoration:underline;margin-top:4px;padding:0}
.ci-remove:hover{color:#b05a6a}
.cart-foot{padding:20px 24px 26px;border-top:1px solid rgba(58,51,87,.12);background:rgba(255,255,255,.4)}
.cart-sub{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cart-sub span:first-child{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft)}
.cart-sub .sub-amt{font-family:'Cormorant Garamond';font-size:28px;font-weight:600;color:var(--ink)}
.cart-note{font-size:12px;color:var(--ink-soft);margin-bottom:16px;font-weight:300}
.cart-foot .btn{width:100%;text-align:center}
.icon-close{background:none;border:none;font-size:28px;line-height:1;color:var(--ink);cursor:pointer;padding:2px 6px}

/* ============================================================
   PRODUCT MODAL — frosted-glass bottom sheet (slides up)
   ============================================================ */
/* background scroll lock (set by app.js while modal / cart drawer is open)
   Non-repositioning: no position:fixed, so scroll position is never lost and
   there is no jump-to-top flash on close. The touchmove blocker in app.js
   handles iOS touch-scroll; overscroll-behavior stops rubber-band chaining. */
body.scroll-locked{overflow:hidden;overscroll-behavior:contain}
.modal{position:fixed;inset:0;z-index:400;visibility:hidden;pointer-events:none;overflow:hidden}
.modal .scrim{position:absolute;inset:0;background:rgba(22,20,46,.45);opacity:0;transition:.3s}
.modal .sheet{position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
  border-radius:30px 30px 0 0;transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,0,1);
  /* frosted candle glass */
  background:rgba(251,246,239,.62);backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);
  border-top:1px solid rgba(255,255,255,.7);box-shadow:0 -20px 60px rgba(58,51,87,.25)}
.modal.open{visibility:visible;pointer-events:auto}
.modal.open .scrim{opacity:1}
.modal.open .sheet{transform:translateY(0)}
/* exit: keep visible while the sheet slides back down + backdrop fades (mobile) */
.modal.closing{visibility:visible;pointer-events:none}
.modal.closing .scrim{opacity:0}
.modal.closing .sheet{transform:translateY(100%)}
.sheet-grip{width:46px;height:5px;border-radius:10px;background:rgba(58,51,87,.25);margin:12px auto 4px;cursor:grab}
/* swipe-to-close is a touch gesture — hide the grabber on desktop */
@media(min-width:768px){.sheet-grip{display:none}}
.sheet-inner{max-width:880px;margin:0 auto;padding:10px 30px 40px;display:grid;grid-template-columns:1fr 1fr;gap:34px}
.sheet .m-pic{border-radius:22px;min-height:300px;position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.sheet .m-pic .candle{transform:scale(1.25);margin-bottom:36px}
.sheet .m-info{padding:14px 0;position:relative}
/* mobile: no X — close via swipe-down or tap-outside. Shown only on desktop. */
.sheet .m-close{display:none;position:absolute;top:-2px;right:0;align-items:center;justify-content:center;background:rgba(255,255,255,.6);border:none;width:40px;height:40px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:var(--ink);z-index:3}
.sheet .m-fam{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--sage-deep);font-weight:500}
.sheet .m-info h2{font-size:clamp(34px,5vw,48px);margin:6px 0 8px;color:var(--ink)}
.sheet .m-notes{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
.sheet .m-blurb{color:var(--ink-soft);line-height:1.7;font-weight:300;margin-bottom:22px}
.sheet .m-spec{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.sheet .m-spec .spec{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);padding:8px 14px;border-radius:30px}
.sheet .m-buy{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sheet .m-price{font-family:'Cormorant Garamond';font-size:34px;font-weight:600;color:var(--ink)}
.sheet .m-buy .qty{border-color:rgba(58,51,87,.3)}
.sheet .m-buy .btn{flex:1;min-width:180px;text-align:center}
@media(max-width:680px){.sheet-inner{grid-template-columns:1fr;gap:20px;padding:6px 22px 36px}.sheet .m-pic{min-height:220px}}
/* DESKTOP: product modal becomes a centered dialog box that fades + scales in
   (mobile keeps the bottom-sheet slide-up). */
@media(min-width:768px){
  .modal .sheet{
    left:50%;right:auto;top:50%;bottom:auto;
    width:min(500px,92vw);max-height:88vh;
    border-radius:26px;border:1px solid rgba(255,255,255,.7);
    box-shadow:0 30px 80px rgba(58,51,87,.32);
    opacity:0;transform:translate(-50%,-50%) scale(.94);
    transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .modal.open .sheet{opacity:1;transform:translate(-50%,-50%) scale(1)}
  /* desktop exit: box scales down + fades while backdrop fades */
  .modal.closing .sheet{opacity:0;transform:translate(-50%,-50%) scale(.94)}
  .sheet-inner{grid-template-columns:1fr;gap:16px;padding:18px 30px 32px}
  .sheet .m-pic{min-height:210px}
  .sheet .m-info{padding-top:2px;position:static}
  /* desktop: X shown, pinned to the top-right corner of the centered box */
  .sheet .m-close{display:flex;top:14px;right:14px}
}

/* ============================================================
   TOAST
   ============================================================ */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:13px 26px;border-radius:40px;font-size:14px;letter-spacing:.5px;opacity:0;pointer-events:none;transition:.35s;z-index:500;
  box-shadow:0 14px 40px rgba(22,16,40,.4)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   SUB-PAGE HERO + CONTENT
   ============================================================ */
.page-hero{padding:160px 0 50px;text-align:center}
.page-hero .eyebrow{color:var(--sage-deep)}
.page-hero h1{font-size:clamp(40px,7vw,76px);color:var(--ink)}
.page-hero p{color:var(--ink-soft);max-width:600px;margin:18px auto 0;font-weight:300;line-height:1.7;font-size:17px}

.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:clamp(28px,4.5vw,40px);color:var(--ink);margin:42px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-soft);line-height:1.85;font-weight:300;margin-bottom:16px;font-size:16.5px}
.prose .lead{font-size:19px;color:var(--ink);font-weight:300}
.prose a.inline{color:var(--sage-deep);text-decoration:underline;text-underline-offset:3px}

/* two-column feature rows (story / ingredients) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin:0 auto 70px;max-width:1000px}
.feature:nth-child(even) .feature-media{order:2}
.feature-media{aspect-ratio:5/4;border-radius:24px;overflow:hidden;position:relative;display:grid;place-items:center;
  box-shadow:0 18px 50px rgba(58,51,87,.14)}
.feature-media .candle{transform:scale(1.5)}
.feature h2{font-size:clamp(26px,4vw,38px);color:var(--ink);margin-bottom:12px}
.feature .eyebrow{color:var(--sage-deep);margin-bottom:10px}
.feature p{color:var(--ink-soft);line-height:1.8;font-weight:300;margin-bottom:12px}
@media(max-width:760px){.feature{grid-template-columns:1fr;gap:24px;margin-bottom:48px}.feature:nth-child(even) .feature-media{order:0}}

/* info cards (ingredients / care steps) */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.info-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.info-grid{grid-template-columns:1fr}}
.info-card{background:rgba(255,255,255,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.75);
  border-radius:20px;padding:28px 24px;box-shadow:0 12px 40px rgba(58,51,87,.08)}
.info-card .ic-num{font-family:'Cormorant Garamond';font-size:30px;color:var(--sage);font-weight:600;margin-bottom:8px}
.info-card h3{font-size:22px;color:var(--ink);margin-bottom:8px}
.info-card p{color:var(--ink-soft);line-height:1.7;font-weight:300;font-size:15px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;max-width:1000px;margin:0 auto}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:30px}}
.contact-form label{display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.contact-form .field{margin-bottom:18px}
.contact-form input,.contact-form textarea{width:100%;padding:14px 18px;border-radius:16px;border:1.5px solid rgba(58,51,87,.22);
  font-family:'Jost';font-size:15px;background:rgba(255,255,255,.7);color:var(--ink)}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-info .ci-block{margin-bottom:26px}
.contact-info h3{font-size:24px;color:var(--ink);margin-bottom:6px}
.contact-info p{color:var(--ink-soft);font-weight:300;line-height:1.7}

/* ============================================================
   CATALOGUE
   ============================================================ */
/* footer-below-the-fold is now handled globally (body flex + main min-height).
   Catalogue only needs its content section to stretch within <main> so the
   grid/filters area fills nicely even with few / zero results. */
body[data-page="catalogue"] main.mm-main{display:flex;flex-direction:column}
body[data-page="catalogue"] .cat-section{flex:1 0 auto}
.cat-layout{display:grid;grid-template-columns:248px 1fr;gap:36px;align-items:start}
@media(max-width:820px){.cat-layout{grid-template-columns:1fr;gap:18px}}
.filters{position:sticky;top:96px;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.75);border-radius:22px;padding:24px 22px;box-shadow:0 12px 40px rgba(58,51,87,.08)}
@media(max-width:820px){.filters{position:static}}
.filters .f-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.filters .f-top h3{font-size:24px;color:var(--ink)}
.clear-all{background:none;border:none;color:var(--sage-deep);font-size:12px;letter-spacing:.5px;text-decoration:underline;cursor:pointer;padding:0}
.clear-all:hover{color:var(--ink)}
.fgroup{margin-top:20px}
.fgroup h4{font-family:'Jost';font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;font-weight:500}
.fopt{display:flex;align-items:center;gap:10px;margin-bottom:9px;cursor:pointer;font-size:15px;color:var(--ink)}
.fopt input{appearance:none;width:18px;height:18px;border:1.5px solid var(--ink-soft);border-radius:6px;cursor:pointer;position:relative;flex:0 0 auto;transition:.15s}
.fopt input:checked{background:var(--sage);border-color:var(--sage)}
.fopt input:checked::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}
.fopt:hover{color:var(--sage-deep)}
/* mobile filter toggle */
.filter-toggle{display:none}
@media(max-width:820px){
  .filter-toggle{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.6);border:1.5px solid rgba(58,51,87,.2);
    border-radius:30px;padding:11px 20px;font-size:13px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;color:var(--ink);margin-bottom:6px}
  .filters{display:none}
  .filters.show{display:block}
}
.cat-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.result-count{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft)}
.result-count b{color:var(--ink);font-weight:500}
.active-pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--sage-soft);color:var(--sage-deep);border:1px solid rgba(93,125,89,.25);
  font-size:12px;letter-spacing:.5px;padding:6px 12px;border-radius:30px;cursor:pointer}
.pill:hover{background:#d6e7d1}
.pill .x{font-size:14px;line-height:1}
.no-results{text-align:center;padding:70px 20px;color:var(--ink-soft)}
.no-results .nr-moon{font-size:42px;display:block;margin-bottom:12px;opacity:.5}
.no-results h3{font-size:28px;color:var(--ink);margin-bottom:8px}

/* utility */
.tc{text-align:center}
.mt-s{margin-top:14px}
.mt-m{margin-top:28px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ============================================================
   PAGE TRANSITIONS — JS-driven fade (identical in every browser)
   Only the per-page <main> animates; the static header + footer
   stay put so the chrome is persistent across navigation.
   - on load: <main> fades in + drifts gently up
   - on internal link click: app.js adds .mm-leaving to fade it
     out, then navigates (see initPageTransitions in app.js)
   - fully inert under prefers-reduced-motion: reduce
   ============================================================ */
/* The per-page content fills at least one full viewport, so the footer is
   always pushed BELOW the fold on load (only seen on scroll) on EVERY page.
   The header is fixed (no flow height) so 100dvh lands the footer just below
   the fold with no awkward gap; content-heavy pages just grow past it. */
main.mm-main{ will-change: opacity, transform; flex:1 0 auto; min-height:100vh; min-height:100dvh; }
@media (prefers-reduced-motion: no-preference){
  main.mm-main{ animation: mm-main-in .45s cubic-bezier(.2,.6,.2,1) both; }
  main.mm-main.mm-leaving{ animation: mm-main-out .28s cubic-bezier(.4,0,.2,1) both; }
  @keyframes mm-main-in { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  @keyframes mm-main-out{ from{ opacity:1; transform:none; }          to{ opacity:0; transform:translateY(-8px); } }
}