/* ============================ CONFIG ============================ */
/* Set this to your Apps Script Web App URL (the SAME /exec URL the admin app uses).
   No secret is needed here — the public endpoints only write to the review inbox. */
:root{
  --bone:#F7F4EF; --surface:#FFFFFF; --ink:#26302A; --muted:#7C8279;
  --green:#2F3E36; --green-soft:#E7ECE8; --amber:#B45309; --line:#E4DED2;
  --sand:#EFE9DE; --clay:#C9B79C; --shadow:rgba(38,48,42,.10);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bone);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em}
.serif{font-family:var(--serif)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:680px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600}
.lead{font-size:19px;color:var(--muted);font-weight:400}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:.02em;padding:14px 26px;border-radius:999px;border:1.5px solid var(--green);
  background:var(--green);color:#fff;cursor:pointer;transition:all .25s ease;text-align:center}
.btn:hover{background:#26342c;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--green)}
.btn.ghost:hover{background:var(--green);color:#fff}
.btn.light{background:#fff;color:var(--green);border-color:#fff}
.btn.light:hover{background:transparent;color:#fff;border-color:#fff}
.btn.sm{padding:10px 18px;font-size:13px}

/* ---- top nav ---- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(247,244,239,.82);backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s}
header.nav.scrolled{border-bottom-color:var(--line)}
.navrow{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:var(--serif);font-size:24px;letter-spacing:.32em;font-weight:500;padding-left:.32em}
.navlinks{display:flex;gap:30px;align-items:center;margin-left:auto;margin-right:16px}
.navlinks a{font-size:14px;font-weight:500;color:var(--ink);position:relative;padding:4px 0;transition:color .2s}
.navlinks a:hover{color:var(--green)}
.navlinks a::after{content:'';position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--green);transition:width .25s}
.navlinks a:hover::after,.navlinks a.active::after{width:100%}
.navtoggle{display:none;background:none;border:none;cursor:pointer;font-size:24px;color:var(--ink)}
.jp{font-size:16.5px;line-height:1.85;margin:0 0 18px;color:var(--ink)}
.jlead::first-letter{font-family:var(--serif);font-weight:400;font-size:3.3em;float:left;line-height:.78;padding:6px 10px 0 0;color:var(--green)}
.jh2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.6vw,26px);margin:30px 0 12px;color:var(--ink)}
.jlist{margin:0 0 18px 22px;font-size:16.5px;line-height:1.85}
.jlist li{margin-bottom:7px}
.jlist li::marker{color:var(--green)}
.navavatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--green);color:var(--green)}
.navavatar svg{width:16px;height:16px}
.navlogin{font-size:13px;padding:7px 14px;border:1.5px solid var(--green);border-radius:999px;color:var(--green);font-weight:600;white-space:nowrap}
.bagbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:999px;color:var(--ink);flex-shrink:0;transition:background .2s,color .2s}
.bagbtn:hover{background:var(--green-soft)}
.bagbtn.active{color:var(--green);background:var(--green-soft)}
.bagbtn .cartbadge{position:absolute;top:1px;right:-1px;margin-left:0;border:2px solid var(--bone)}
.mobnav{display:none}
body.navopen header.nav{background:var(--bone);backdrop-filter:none;border-bottom-color:var(--line)}

/* ---- hero ---- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
/* dvh tracks the visible viewport, so the hero doesn't jump as mobile browser
   chrome hides/shows (the classic "it looked fine until I scrolled" wobble). */
@supports (height:100dvh){ .hero{min-height:88dvh} }
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .ph{height:100%;width:100%}
.hero-inner{position:relative;z-index:2;max-width:680px}
.hero h1{font-size:clamp(44px,7vw,86px);font-weight:300;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--green)}
.hero .lead{margin:22px 0 32px;max-width:480px;font-size:20px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(247,244,239,.96) 0%,rgba(247,244,239,.82) 42%,rgba(247,244,239,.30) 100%)}

/* ---- placeholder imagery (swapped for real photos later) ---- */
.ph{position:relative;background:
  radial-gradient(120% 120% at 20% 15%, var(--sand) 0%, transparent 55%),
  radial-gradient(120% 140% at 85% 80%, var(--green-soft) 0%, transparent 50%),
  linear-gradient(135deg, #efe7d8 0%, #e4ece6 55%, #dfe6df 100%);
  overflow:hidden}
.ph::after{content:'';position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(var(--clay) .5px, transparent .5px);background-size:7px 7px;mix-blend-mode:multiply}
.ph .ph-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  font-family:var(--serif);font-style:italic;color:var(--green);opacity:.5;font-size:15px;letter-spacing:.04em;text-align:center;width:80%}
.ph.tall{aspect-ratio:3/4}
.ph.square{aspect-ratio:1/1}
.ph.wide{aspect-ratio:16/10}

/* ---- real product photography ---- */
.imgframe{position:relative;overflow:hidden;background:linear-gradient(135deg,#efe7d8 0%,#e4ece6 55%,#dfe6df 100%)}
.imgframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.imgframe.tall{aspect-ratio:3/4}.imgframe.square{aspect-ratio:1/1}.imgframe.wide{aspect-ratio:16/10}
.card .imgframe{aspect-ratio:4/5}
/* .imgframe positions its <img> absolutely, so it needs a ratio or it collapses
   to zero height and the photo silently disappears. Every context that uses one
   must therefore set a default — this is the .scent one. A size class on the
   element (.tall/.square/.wide) still overrides it. */
.scent .imgframe{border-radius:14px;margin-bottom:14px;aspect-ratio:3/4}
.split .imgframe{border-radius:18px}
.result .imgframe{width:170px;aspect-ratio:3/4;border-radius:14px;margin:0 auto 22px}

/* ---- stock + pre-order ---- */
.badge{position:absolute;top:12px;left:12px;z-index:4;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 11px;border-radius:999px}
.badge.pre{background:var(--green);color:#fff}
.badge.low{background:#FCEFD6;color:#92591A}
.card .price .pre-tag{color:var(--clay);font-weight:700;font-size:12px;letter-spacing:.02em;display:block;margin-top:4px}
.notebox{background:var(--green-soft);border-left:3px solid var(--green);padding:16px 18px;border-radius:10px;
  color:#33413a;font-size:14px;line-height:1.6;margin:16px 0}
.notebox strong{font-family:var(--serif);font-weight:600}
.notebox.clay{background:rgba(201,183,156,.16);border-left-color:var(--clay)}
.shipnote{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.55}
.etacard{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.etacard:last-child{border-bottom:none}
.etacard .eta{color:var(--green);font-weight:600;white-space:nowrap}
.etacard .nm small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;font-weight:400}

/* ---- webstore: cart / checkout / account ---- */
.cartbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:999px;
  background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:0 5px;margin-left:6px;vertical-align:1px}
.cartrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cartrow .imgframe{width:74px;aspect-ratio:4/5;border-radius:10px;flex-shrink:0}
.cartrow .nm{flex:1 1 150px;min-width:130px}.cartrow .nm h4{font-family:var(--serif);font-size:17px;font-weight:500;margin-bottom:2px}
.cartrow .nm .sub{font-size:12.5px;color:var(--muted)}
.cartrow .ctrls{display:flex;align-items:center;gap:14px;margin-left:auto}
.cartrow .lineprice{font-weight:600;min-width:64px;text-align:right}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.qty button{width:42px;height:42px;border:none;background:var(--bone);font-size:21px;line-height:1;cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.qty button:active{background:var(--line)}
.qty .qin{width:48px;height:42px;border:none;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);text-align:center;font-weight:600;font-size:15px;color:var(--ink);background:#fff;-moz-appearance:textfield;appearance:textfield}
.qty .qin:focus{outline:2px solid var(--green);outline-offset:-2px}
.qty .qin::-webkit-outer-spin-button,.qty .qin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty span{min-width:30px;text-align:center;font-weight:600;font-size:14px}
.giftrow{display:flex;gap:10px;align-items:stretch}.giftrow input{flex:1 1 auto;min-width:0}.giftrow .btn{flex:0 0 auto;white-space:nowrap}
.rm{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;margin-top:4px}
.totrow{display:flex;justify-content:space-between;padding:8px 0;font-size:14.5px}
.totrow.grand{font-weight:700;font-size:18px;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.payopt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:pointer;background:var(--bone)}
.payopt input{margin-top:3px;accent-color:var(--green)}
.payopt.on{border-color:var(--green);background:#fff}
.payopt .t{font-weight:600;font-size:14.5px}.payopt .d{font-size:12.5px;color:var(--muted);margin-top:2px}
.acct-tabs{display:flex;gap:8px;margin-bottom:22px}
.acct-tabs button{flex:1;padding:11px;border-radius:999px;border:1.5px solid var(--line);background:var(--bone);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.acct-tabs button.on{background:var(--green);border-color:var(--green);color:#fff}
.opill{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--green-soft);color:var(--green)}
.opill.warn{background:#FEF6E7;color:#B45309}.opill.bad{background:#FBEAEA;color:#B42318}
.orow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.orow:last-child{border-bottom:none}
.bankbox{background:var(--green-soft);border-radius:12px;padding:18px 20px;margin:16px 0}
.bankbox table{font-size:14px;border-collapse:collapse}.bankbox td{padding:3px 16px 3px 0}
.bankbox td:first-child{color:var(--muted)}.bankbox td:last-child{font-weight:600}

/* ---- the four fragrances row ---- */
.scent-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
.scent{cursor:pointer;transition:transform .3s}
.scent:hover{transform:translateY(-4px)}
.scent .ph{border-radius:14px;margin-bottom:14px}
.scent h3{font-size:21px}
.scent .note{font-size:13.5px;color:var(--muted);margin-top:2px}
.scent .fam{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-top:8px}

/* ---- section header ---- */
.sec-head{max-width:620px;margin-bottom:44px}
.sec-head h2{font-size:clamp(30px,4.5vw,46px);margin:14px 0 16px;font-weight:300}

/* ---- products grid ---- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:0 1px 0 var(--line);transition:box-shadow .3s,transform .3s;cursor:pointer}
.card:hover{box-shadow:0 18px 44px var(--shadow);transform:translateY(-3px)}
.card .ph{aspect-ratio:4/5}
.card .body{padding:22px 22px 26px}
.card h3{font-size:22px;margin-bottom:4px}
.card .fam{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:600}
.card .desc{font-size:14.5px;color:var(--muted);margin:10px 0 16px;min-height:44px}
.card .price{font-size:14px;color:var(--ink);font-weight:500}
.card .cardcta{margin-top:16px}

/* ---- story split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev{direction:rtl}.split.rev>*{direction:ltr}
.split .ph{border-radius:18px}
.split-copy h2{font-size:clamp(28px,4vw,42px);font-weight:300;margin-bottom:18px}
.split-copy p{margin-bottom:16px;color:#3a463d}

/* ---- quiz / fragrance finder ---- */
.finder{background:var(--green);color:#fff;border-radius:22px;padding:56px 44px;position:relative;overflow:hidden}
.finder::before{content:'';position:absolute;width:340px;height:340px;right:-90px;top:-90px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,183,156,.32),transparent 70%)}
.finder .eyebrow{color:var(--clay)}
.finder h2{color:#fff;font-size:clamp(28px,4vw,42px);font-weight:300;margin:12px 0 14px;position:relative}
.finder p{color:rgba(255,255,255,.78);max-width:460px;position:relative;margin-bottom:26px}
.qstep{position:relative}
.qprog{display:flex;gap:6px;margin-bottom:26px}
.qprog span{height:3px;flex:1;background:rgba(255,255,255,.22);border-radius:2px;transition:background .3s}
.qprog span.on{background:var(--clay)}
.qstep h3{color:#fff;font-size:26px;font-weight:300;margin-bottom:22px}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qopt{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);border-radius:14px;
  padding:18px 20px;color:#fff;font-size:15.5px;font-weight:500;cursor:pointer;text-align:left;transition:all .2s;font-family:var(--sans)}
.qopt:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.qback{background:none;border:none;color:rgba(255,255,255,.6);font-size:13px;cursor:pointer;margin-top:20px;font-family:var(--sans)}
.qback:hover{color:#fff}
.result{text-align:center;position:relative}
.result .ph{width:180px;aspect-ratio:3/4;border-radius:14px;margin:0 auto 22px}
.result .fam{color:var(--clay);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.result h3{color:#fff;font-size:38px;font-weight:300;margin:6px 0 12px}
.result p{margin:0 auto 26px;color:rgba(255,255,255,.8)}

/* ---- forms ---- */
.formcard{background:var(--surface);border-radius:18px;padding:40px;box-shadow:0 1px 0 var(--line)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:.01em}
.field input,.field textarea,.field select{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--bone);border:1.5px solid var(--line);border-radius:11px;padding:13px 15px;transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--green);background:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.field textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.5}
.consent input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--green)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formnote{font-size:13px;color:var(--muted);margin-top:14px}
.msg-ok{background:var(--green-soft);border-left:3px solid var(--green);padding:20px 22px;border-radius:10px;color:var(--ink)}
.msg-ok strong{font-family:var(--serif);font-size:18px;display:block;margin-bottom:4px}
.msg-err{background:#FBEAEA;border-left:3px solid var(--danger);padding:16px 18px;border-radius:10px;color:var(--danger);font-size:14px;margin-top:14px}
.newsletter-backdrop{position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center;background:rgba(38,48,42,.32);padding:18px}
.newsletter-backdrop.on{display:flex}
.newsletter-modal{width:min(480px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 22px 70px rgba(38,48,42,.22);position:relative}
.newsletter-modal h3{font-size:28px;font-weight:300;margin:8px 0 10px}
.newsletter-modal p{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.newsletter-close{position:absolute;right:12px;top:10px;border:none;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
.newsletter-row{display:flex;gap:8px;align-items:stretch}
.newsletter-row input{flex:1 1 auto;min-width:0}
.newsletter-row .btn{flex:0 0 auto;white-space:nowrap}

/* ---- stockists ---- */
.stockist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stockist{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px}
.stockist h3{font-size:19px;margin-bottom:4px}
.stockist .area{font-size:13px;color:var(--muted)}

/* ---- info strips ---- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.trust .t h3{font-size:17px;margin:0 0 6px;font-family:var(--sans);font-weight:600}
.trust .t p{font-size:14px;color:var(--muted)}
.trust .t .ic{font-family:var(--serif);font-size:30px;color:var(--clay);margin-bottom:10px}

/* ---- footer ---- */
footer{background:var(--green);color:rgba(255,255,255,.74);padding:64px 0 36px;margin-top:0}
.footrow{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
footer .brand{color:#fff;display:block;margin-bottom:14px}
footer p{font-size:14px;max-width:300px}
footer h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;font-weight:600;font-family:var(--sans)}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{font-size:14px;transition:color .2s}
footer a:hover{color:#fff}
.footbase{border-top:1px solid rgba(255,255,255,.16);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px}

/* ---- page transitions ---- */
.page{display:none;animation:fade .5s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media(max-width:860px){
  section{padding:64px 0}
  .navlinks{display:none}
  .navtoggle{display:block}
  .bagbtn{margin-left:auto;margin-right:2px}
  /* Full-screen, fully opaque sheet under the (solidified) header. The body is
     scroll-locked while it's open, so nothing moves behind it. */
  .mobnav{display:block;position:fixed;inset:0;z-index:49;background:var(--bone);
    padding:104px 24px 40px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
  .mobnav.open{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .22s ease}
  .mobnav a{display:block;font-family:var(--serif);font-size:26px;color:var(--ink);
    padding:16px 0;border-bottom:1px solid var(--line)}
  .mobnav a:last-child{border-bottom:none}
  .mobnav a:active{color:var(--green)}
  .scent-row{grid-template-columns:1fr 1fr;gap:14px}
  .prod-grid{grid-template-columns:1fr 1fr;gap:16px}
  .split{grid-template-columns:1fr;gap:28px}
  .split.rev{direction:ltr}
  .stockist-grid{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr;gap:28px}
  .footrow{grid-template-columns:1fr;gap:28px}
  .qopts{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .finder{padding:40px 26px}
  .hero .lead{font-size:18px}
  .scrim{background:linear-gradient(180deg,rgba(247,244,239,.7) 0%,rgba(247,244,239,.92) 100%)}
}
@media(max-width:520px){
  .cartrow{gap:12px}
  .cartrow .imgframe{width:58px}
  .cartrow .ctrls{flex-basis:100%;margin-left:0;justify-content:space-between;border-top:1px dashed var(--line);padding-top:12px;margin-top:2px}
  .newsletter-row{display:block}
  .newsletter-row .btn{width:100%;justify-content:center;margin-top:8px}
  .scent-row{grid-template-columns:1fr 1fr}
  .prod-grid{grid-template-columns:1fr}
  .stockist-grid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .formcard{padding:26px}
}

/* ---- in-app legal / compliance pages (wording mirrors the static /<slug>.html) ---- */
.legaldoc{line-height:1.65;color:#36433b}
.legaldoc .eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.legaldoc h1{font-family:var(--serif);font-weight:300;font-size:clamp(30px,5vw,46px);margin:12px 0 6px;line-height:1.1;color:var(--ink)}
.legaldoc .upd{color:var(--muted);font-size:13px;margin-bottom:26px}
.legaldoc h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:30px 0 10px;color:var(--ink)}
.legaldoc h3{font-size:16px;font-weight:600;margin:18px 0 6px;color:var(--ink)}
.legaldoc p,.legaldoc li{margin-bottom:12px;color:#36433b}
.legaldoc ul{padding-left:20px;margin-bottom:4px}
.legaldoc .callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:10px;padding:16px 18px;margin:18px 0}
.legaldoc .callout strong{font-family:var(--serif);font-weight:600}
.legaldoc a{color:var(--green)}
.legaldoc .back{display:inline-block;margin-top:18px;font-size:14px;font-weight:600;cursor:pointer}

/* ---- home hero carousel ---- */
.hero-slides{position:absolute;inset:0}
/* Hero media fills the stage and is cropped, never squashed. The crop point is
   adjustable per slide (--hero-pos, set from the admin's hero settings), which
   is what keeps a wide laptop clip from cutting the subject out of frame on a
   tall phone. object-fit can be switched to "contain" per slide for artwork
   that must be shown whole. */
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,50% 50%);opacity:0;transition:opacity 1s ease-in-out;background:var(--bone)}
.hero-slide.on{opacity:1}
.hero-slide.fit-contain{object-fit:contain}
.hero-controls{position:absolute;z-index:4;right:24px;bottom:22px;display:flex;align-items:center;gap:12px;background:rgba(247,244,239,.55);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.hero-controls.single{display:none}
.hero-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--green);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s}
.hero-arrow:hover{background:var(--sand)}
.hero-dots{display:flex;gap:7px}
.hero-dot{width:8px;height:8px;border-radius:50%;border:0;background:var(--clay);opacity:.55;cursor:pointer;padding:0;transition:opacity .2s,transform .2s}
.hero-dot.on{opacity:1;transform:scale(1.35);background:var(--green)}
@media(prefers-reduced-motion: reduce){ .hero-slide{transition:none} }
@media(max-width:640px){
  .hero-controls{right:50%;transform:translateX(50%)}
  /* A phone screen is far taller than it is wide, so a landscape photo or clip
     cropped to a full-height hero shows only a narrow strip of its middle.
     A shorter hero on small screens keeps much more of the frame visible —
     this is the single biggest reason hero media "looks sloppy on a phone". */
  .hero{min-height:66vh}
}
@supports (height:100dvh){ @media(max-width:640px){ .hero{min-height:66dvh} } }

/* ---- Founding batch line (launch trust layer) ---- */
.founding{font-family:var(--serif);font-style:italic;color:#8A6A45;font-size:15.5px;letter-spacing:.01em;margin:10px 0 0}
.hero .founding{color:#F5EDE0;margin-top:14px;font-size:15px;text-shadow:0 1px 10px rgba(20,26,22,.55)}
.sec-head .founding{margin-top:8px}
/* ---- Reviews (trust layer) ---- */
.revsec{padding:52px 0 26px}
.revwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:8px}
.revcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:0}
.revcard blockquote{margin:0 0 10px;color:#3a463d;font-size:15.5px;line-height:1.65}
.revcard figcaption{font-size:13px;color:var(--muted)}
.revstars{display:block;color:#B9975B;letter-spacing:2.5px;margin-bottom:8px;font-size:14px}
.revver{color:var(--green);font-weight:600}
.revform{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin-top:18px;max-width:560px}
.revform h3{font-family:var(--serif);font-weight:400;font-size:20px;margin:0 0 2px}
.revform input,.revform select,.revform textarea{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--bone);width:100%}
.revformrow{display:flex;gap:10px;margin-bottom:10px}
.revformrow input{flex:1}
.revformrow select{width:auto}

/* ---- Unified shop: filter bar + sort (brand-styled, mobile rail) ---- */
.shopbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 26px}
.fpills{display:flex;gap:8px;flex-wrap:wrap}
.fpill{border:1px solid var(--line);background:var(--surface);color:#3a463d;border-radius:999px;padding:9px 16px;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.fpill span{color:var(--clay);font-size:11px;margin-left:5px;font-weight:600;letter-spacing:.02em}
.fpill:hover{border-color:var(--clay)}
.fpill.on{background:var(--green);border-color:var(--green);color:var(--bone)}
.fpill.on span{color:var(--clay)}
.fsort{padding:10px 36px 10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;color:#3a463d;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C9B79C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.fsort:focus{outline:none;border-color:var(--clay)}
@media(max-width:760px){
  .shopbar{flex-direction:column;align-items:stretch;gap:12px}
  .fpills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -22px;padding:2px 22px 10px;scrollbar-width:none}
  .fpills::-webkit-scrollbar{display:none}
  .fpill{flex:0 0 auto;white-space:nowrap}
  .fsort{width:100%;background-position:right 16px center}
}
/* ---- Nav: Shop dropdown ---- */
.navdrop{position:relative;display:inline-block}
.navdrop>a .caret{font-size:9px;opacity:.55;margin-left:4px;vertical-align:1px}
.navmenu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px -18px rgba(38,48,42,.35);padding:8px;min-width:220px;z-index:60}
.navdrop:hover .navmenu,.navdrop:focus-within .navmenu{display:block}
.navmenu a{display:block;padding:9px 14px;border-radius:8px;font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap}
.navmenu a:hover{background:var(--bone)}
.mobcats{display:flex;flex-direction:column}
.mobcats a{padding:8px 0 8px 20px;font-size:14.5px;color:var(--muted)}
/* ---- Home: range banner cards ---- */
.rangewrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.rangecard{position:relative;border-radius:18px;overflow:hidden;background:var(--green);color:#fff;min-height:230px;display:flex;align-items:flex-end;cursor:pointer}
.rangecard img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform .4s ease}
.rangecard:hover img{transform:scale(1.04)}
.rangecard .rc{position:relative;padding:20px 22px;background:linear-gradient(transparent,rgba(24,32,27,.85));width:100%}
.rangecard h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 2px;color:#fff}
.rangecard .n{font-size:12.5px;color:rgba(255,255,255,.82)}

/* ===== Product image carousel =====
   Scroll-snap rather than JS transforms: swiping on a phone then behaves like
   the rest of the OS (native momentum, native rubber-banding) and the arrows
   are only a scrollTo on top of it. Aspect-ratio on the slide keeps the frame
   from collapsing before the image loads, so the page does not jump. */
.carousel{position:relative;border-radius:18px;overflow:hidden;background:var(--surface,#fff)}
.car-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative;aspect-ratio:3/4;
  background:linear-gradient(135deg,#efe7d8 0%,#e4ece6 55%,#dfe6df 100%)}
.car-slide picture,.car-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:0;cursor:pointer;
  width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.86);color:#26302A;
  font-size:22px;line-height:1;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.12);
  opacity:0;transition:opacity .18s ease}
.car-nav.prev{left:10px}.car-nav.next{right:10px}
.carousel:hover .car-nav,.carousel:focus-within .car-nav{opacity:1}
.car-nav:hover{background:#fff}
.car-dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;justify-content:center;gap:7px}
.car-dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.12);transition:width .18s ease,background .18s ease}
.car-dot.on{width:20px;background:#fff}
.carousel.single .car-nav,.carousel.single .car-dots{display:none}
/* Touch devices have no hover, so the arrows would never appear — the swipe is
   the primary gesture there and the dots already signal there is more. */
@media (hover:none){.car-nav{display:none}}

/* ===== Format selector (candle / mist / pairing) =====
   Sits directly under the product name, above the long copy, because it is the
   decision the visitor actually came to make. */
.fmtpick{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.fmtpick button{font:inherit;font-size:13.5px;cursor:pointer;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line,#E4DED2);background:var(--surface,#fff);color:var(--ink,#26302A);
  display:inline-flex;align-items:center;gap:8px;transition:border-color .15s ease,background .15s ease}
.fmtpick button .p{color:var(--muted,#7C8279);font-size:12.5px}
.fmtpick button:hover{border-color:var(--clay,#C9B79C)}
.fmtpick button.on{background:var(--green,#2F3E36);border-color:var(--green,#2F3E36);color:#fff}
.fmtpick button.on .p{color:rgba(255,255,255,.78)}
.fmtpick button.gone{opacity:.55}