@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');

:root{
  --primary:#3D5140;
  --primary-soft:#4F6852;
  --secondary:#8FA383;
  --accent:#B5623C;
  --accent-dark:#9A4F2D;
  --bg:#FAF8F3;
  --surface:#FFFFFF;
  --surface-2:#F2EEE5;
  --fg:#2A2E28;
  --fg-muted:#6B6F66;
  --border:#DFD9CB;
  --ring:#3D5140;
  --shadow-sm:0 1px 2px rgba(42,46,40,.06), 0 2px 6px rgba(42,46,40,.04);
  --shadow-md:0 2px 4px rgba(42,46,40,.06), 0 8px 20px rgba(42,46,40,.08);
  --shadow-lg:0 4px 8px rgba(42,46,40,.07), 0 18px 40px rgba(42,46,40,.12);
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:72px;
  --z-nav:100; --z-overlay:900; --z-modal:1000;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Raleway', system-ui, -apple-system, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Lora', Georgia, serif; margin:0; line-height:1.2; text-wrap:balance;}
img,svg{max-width:100%;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:var(--r-sm);}

.wrap{max-width:1200px; margin:0 auto; padding-inline:var(--sp-4);}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(250,248,243,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); height:68px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-mark{width:32px; height:32px; flex:none;}
.brand-name{font-family:'Lora',serif; font-size:20px; font-weight:600; letter-spacing:.02em; color:var(--primary);}
.nav-links{display:flex; gap:var(--sp-4); list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none; font-size:15px; font-weight:500; color:var(--fg-muted);
  padding:10px 4px; display:inline-block; transition:color .2s ease;
}
.nav-links a:hover{color:var(--primary);}
.nav-cta{
  background:var(--primary); color:#fff; border:none; border-radius:var(--r-sm);
  padding:11px 20px; font-size:14px; font-weight:600; min-height:44px;
  transition:background .2s ease, transform .2s ease;
}
.nav-cta:hover{background:var(--primary-soft);}
.nav-cta:active{transform:scale(.98);}
@media(max-width:760px){ .nav-links{display:none;} }

/* ---------- Hero ---------- */
.hero{padding-block:var(--sp-7) var(--sp-6);}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-6); align-items:center;}
.eyebrow{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--accent); margin-bottom:var(--sp-3);
}
.hero h1{font-size:clamp(36px,5vw,58px); font-weight:600; color:var(--primary);}
.hero p.lede{font-size:18px; color:var(--fg-muted); max-width:52ch; margin:var(--sp-3) 0 var(--sp-4);}
.hero-actions{display:flex; gap:var(--sp-3); flex-wrap:wrap;}
.btn{
  border-radius:var(--r-sm); padding:13px 26px; font-size:15px; font-weight:600;
  min-height:44px; border:1.5px solid transparent; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-secondary{background:transparent; color:var(--primary); border-color:var(--border);}
.btn-secondary:hover{border-color:var(--primary);}
.btn:active{transform:scale(.98);}
.hero-visual{display:flex; justify-content:center; align-items:end; gap:var(--sp-3);}
.hero-visual svg{filter:drop-shadow(0 18px 30px rgba(42,46,40,.13));}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr; gap:var(--sp-5);}
  .hero-visual{order:-1;}
}

/* ---------- Trust strip ---------- */
.trust{background:var(--surface-2); border-block:1px solid var(--border);}
.trust-inner{display:flex; flex-wrap:wrap; gap:var(--sp-5); justify-content:space-between; padding-block:var(--sp-4);}
.trust-item{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--fg-muted);}
.trust-item svg{flex:none; color:var(--primary);}

/* ---------- Sections ---------- */
.section{padding-block:var(--sp-7);}
.section-head{max-width:60ch; margin-bottom:var(--sp-5);}
.section-head h2{font-size:clamp(26px,3.4vw,38px); font-weight:600; color:var(--primary);}
.section-head p{color:var(--fg-muted); margin-top:var(--sp-2); font-size:16.5px;}

/* ---------- Scent library ---------- */
.scents{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);}
@media(max-width:900px){ .scents{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .scents{grid-template-columns:1fr;} }
.scent{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-4); box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease, transform .25s ease;
}
.scent:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.scent-swatch{width:40px; height:40px; border-radius:50%; margin-bottom:var(--sp-3);}
.scent h3{font-size:19px; color:var(--primary); margin-bottom:4px;}
.scent .notes{font-size:13.5px; color:var(--fg-muted); line-height:1.55;}
.scent .pitch{font-size:14px; margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border); color:var(--fg);}

/* ---------- Filters ---------- */
.filters{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-5);}
.chip{
  background:var(--surface); border:1.5px solid var(--border); color:var(--fg-muted);
  border-radius:999px; padding:9px 18px; font-size:14px; font-weight:600; min-height:44px;
  transition:all .2s ease;
}
.chip:hover{border-color:var(--secondary); color:var(--primary);}
.chip[aria-pressed="true"]{background:var(--primary); border-color:var(--primary); color:#fff;}

/* ---------- Product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-4);}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column; text-align:left; padding:0;
  box-shadow:var(--shadow-sm); transition:box-shadow .25s ease, transform .25s ease;
}
.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px);}
.card:active{transform:translateY(-1px) scale(.995);}
.card-media{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border-bottom:1px solid var(--border); padding:var(--sp-3);
}
.card-media svg{height:100%; width:auto; filter:drop-shadow(0 8px 14px rgba(42,46,40,.12));}
.card-body{padding:var(--sp-3) var(--sp-4) var(--sp-4); display:flex; flex-direction:column; gap:6px; flex:1;}
.card-format{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--fg-muted);}
.card-name{font-family:'Lora',serif; font-size:19px; font-weight:600; color:var(--primary);}
.card-notes{font-size:13.5px; color:var(--fg-muted); line-height:1.5; flex:1;}
.card-foot{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); margin-top:var(--sp-2);}
.price{font-size:19px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums;}
.size{font-size:13px; color:var(--fg-muted);}
.badge{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-sm); width:fit-content;
}
.badge-now{background:#E4EDE0; color:#3D5140;}
.badge-soon{background:#F6E7DE; color:#9A4F2D;}

/* ---------- Gift sets ---------- */
.set-picker{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4);}
.set-picker-label{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--fg-muted);}
.sets{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4);}
@media(max-width:900px){ .sets{grid-template-columns:1fr;} }
.set{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-4); box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:box-shadow .25s ease, transform .25s ease;
}
.set:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.set.featured{border:2px solid var(--accent); box-shadow:var(--shadow-md);}
.set-tag{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--accent); margin-bottom:var(--sp-2); min-height:16px;
}
.set h3{font-size:21px; color:var(--primary); margin-bottom:var(--sp-1);}
.set-sub{font-size:13.5px; color:var(--fg-muted); margin-bottom:var(--sp-3);}
.set-art{display:flex; align-items:flex-end; justify-content:center; gap:6px; height:112px; margin-bottom:var(--sp-3);}
.set-art svg{height:100%; width:auto; filter:drop-shadow(0 6px 10px rgba(42,46,40,.12));}
.set-items{list-style:none; margin:0 0 var(--sp-3); padding:0; display:flex; flex-direction:column; gap:6px;}
.set-items li{display:flex; justify-content:space-between; gap:var(--sp-2); font-size:14px; color:var(--fg-muted);}
.set-items .v{font-variant-numeric:tabular-nums;}
.set-price{border-top:1px solid var(--border); padding-top:var(--sp-3); margin-top:auto;}
.set-price-row{display:flex; align-items:baseline; gap:10px;}
.set-now{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--fg);}
.set-was{font-size:15px; color:var(--fg-muted); text-decoration:line-through; font-variant-numeric:tabular-nums;}
.set-save{font-size:13px; font-weight:700; color:var(--accent);}
.set-econ{
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px dashed var(--border);
  display:flex; flex-direction:column; gap:5px;
}
.set-econ div{display:flex; justify-content:space-between; font-size:13px; color:var(--fg-muted);}
.set-econ .hl{color:var(--primary); font-weight:700;}
.set-econ .v{font-variant-numeric:tabular-nums;}
.set-note{
  margin-top:var(--sp-4); font-size:14px; color:var(--fg-muted);
  background:var(--surface-2); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
}

/* ---------- Test-mode banner ---------- */
.testbar{
  background:#7A3E22; color:#FBEFE8; text-align:center;
  font-size:13px; font-weight:600; padding:8px 16px; letter-spacing:.02em;
}

/* ---------- Cart button ---------- */
.cart-btn{
  position:relative; background:transparent; border:1.5px solid var(--border);
  border-radius:var(--r-sm); width:44px; height:44px; color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, background .2s ease;
}
.cart-btn:hover{border-color:var(--primary); background:var(--surface-2);}
.cart-count{
  position:absolute; top:-7px; right:-7px; min-width:21px; height:21px; padding:0 5px;
  background:var(--accent); color:#fff; border-radius:11px;
  font-size:11.5px; font-weight:700; line-height:21px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.cart-count[hidden]{display:none!important;}

/* ---------- Cart drawer ---------- */
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(440px,100%);
  background:var(--surface); z-index:var(--z-modal); display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.drawer.open{transform:translateX(0);}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4); border-bottom:1px solid var(--border); flex:none;
}
.drawer-head h2{font-size:21px; color:var(--primary);}
.drawer-body{flex:1; overflow-y:auto; padding:var(--sp-4);}
.drawer-foot{border-top:1px solid var(--border); padding:var(--sp-4); flex:none; background:var(--surface-2);}

.cart-line{display:flex; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--border);}
.cart-line:last-child{border-bottom:none;}
.cart-thumb{
  width:64px; height:64px; flex:none; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; padding:4px;
}
.cart-thumb svg{height:100%; width:auto;}
.cart-info{flex:1; min-width:0;}
.cart-info .n{font-family:'Lora',serif; font-size:15.5px; font-weight:600; color:var(--primary);}
.cart-info .f{font-size:12.5px; color:var(--fg-muted); margin-top:1px;}
.cart-info .p{font-size:14px; font-weight:600; margin-top:4px; font-variant-numeric:tabular-nums;}
.qty{display:flex; align-items:center; gap:2px; margin-top:8px;}
.qty button{
  width:30px; height:30px; border:1px solid var(--border); background:var(--surface);
  border-radius:var(--r-sm); color:var(--fg); font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:border-color .2s ease;
}
.qty button:hover{border-color:var(--primary);}
.qty .v{min-width:34px; text-align:center; font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums;}
.cart-remove{
  background:none; border:none; color:var(--fg-muted); font-size:12.5px;
  text-decoration:underline; padding:6px 0; margin-top:2px; min-height:auto;
}
.cart-remove:hover{color:var(--accent2);}

.cart-empty{text-align:center; padding:var(--sp-6) var(--sp-3); color:var(--fg-muted);}
.cart-empty svg{color:var(--border); margin-bottom:var(--sp-3);}
.cart-empty p{margin:0 0 var(--sp-4);}

.sum{display:flex; justify-content:space-between; font-size:14.5px; margin-bottom:8px; color:var(--fg-muted);}
.sum .v{font-variant-numeric:tabular-nums;}
.sum.total{font-size:19px; font-weight:700; color:var(--fg); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border);}
.btn-full{width:100%; justify-content:center; margin-top:var(--sp-3);}

/* ---------- Checkout form ---------- */
.field{margin-bottom:var(--sp-3);}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:5px;}
.field .req{color:var(--accent2);}
.field input, .field textarea{
  width:100%; min-height:44px; padding:11px 13px; font-family:inherit; font-size:15px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--fg);
}
.field textarea{min-height:80px; resize:vertical;}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(61,81,64,.12);}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{border-color:#B3261E;}
.field .err{font-size:13px; color:#B3261E; margin-top:5px; display:none;}
.field .err.show{display:block;}
.field .hint{font-size:12.5px; color:var(--fg-muted); margin-top:4px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);}
@media(max-width:420px){ .row2{grid-template-columns:1fr;} }

.back-link{
  background:none; border:none; color:var(--fg-muted); font-size:14px;
  display:inline-flex; align-items:center; gap:6px; padding:8px 0; min-height:44px;
}
.back-link:hover{color:var(--primary);}

/* ---------- Order confirmation ---------- */
.done{text-align:center; padding:var(--sp-5) var(--sp-2);}
.done-mark{
  width:64px; height:64px; border-radius:50%; background:#E4EDE0; color:#3D5140;
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-4);
}
.done h3{font-size:24px; color:var(--primary); margin-bottom:var(--sp-2);}
.done .ref{
  font-family:'Lora',serif; font-size:19px; letter-spacing:.05em;
  background:var(--surface-2); border:1px dashed var(--border); border-radius:var(--r-sm);
  padding:12px; margin:var(--sp-4) 0; font-variant-numeric:tabular-nums;
}
.done-list{text-align:left; margin-top:var(--sp-4);}

/* ---------- Modal ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(42,46,40,.5); backdrop-filter:blur(3px);
  z-index:var(--z-overlay); opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.overlay.open{opacity:1; pointer-events:auto;}
.modal{
  position:fixed; z-index:var(--z-modal); inset:auto 0 0 0; margin:0 auto;
  max-width:920px; width:100%; max-height:92vh; overflow-y:auto;
  background:var(--surface); border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--shadow-lg); transform:translateY(100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1); padding:var(--sp-5);
}
.modal.open{transform:translateY(0);}
@media(min-width:820px){
  .modal{inset:50% auto auto 50%; transform:translate(-50%,-46%) scale(.97); border-radius:var(--r-lg); opacity:0;}
  .modal.open{transform:translate(-50%,-50%) scale(1); opacity:1;}
}
.modal-close{
  position:absolute; top:var(--sp-3); right:var(--sp-3); width:44px; height:44px;
  border-radius:50%; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--fg-muted);
  transition:background .2s ease;
}
.modal-close:hover{background:var(--surface-2); color:var(--fg);}
.modal-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:var(--sp-5);}
@media(max-width:760px){ .modal-grid{grid-template-columns:1fr; gap:var(--sp-4);} }
.modal-media{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-4); min-height:280px;
}
.modal-media svg{height:260px; width:auto; filter:drop-shadow(0 14px 24px rgba(42,46,40,.14));}
.modal h3{font-size:28px; color:var(--primary); margin-bottom:var(--sp-1);}
.modal .m-format{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:var(--sp-2);}
.modal .m-desc{color:var(--fg-muted); font-size:15.5px; margin-block:var(--sp-3);}
.m-price-row{display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-4);}
.m-price{font-size:30px; font-weight:700; font-variant-numeric:tabular-nums;}
.spec{border-top:1px solid var(--border); padding-top:var(--sp-3); margin-top:var(--sp-3);}
.spec h4{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:var(--sp-2); font-family:'Raleway',sans-serif; font-weight:700;}
.spec-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.spec-list li{display:flex; justify-content:space-between; gap:var(--sp-3); font-size:14.5px; border-bottom:1px dashed var(--border); padding-bottom:6px;}
.spec-list li:last-child{border-bottom:none;}
.spec-list .k{color:var(--fg-muted);}
.spec-list .v{font-weight:600; text-align:right; font-variant-numeric:tabular-nums;}
.pitch-box{background:var(--surface-2); border-left:3px solid var(--accent); border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); margin-top:var(--sp-4);}
.pitch-box .k{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--accent); display:block; margin-bottom:6px;}
.pitch-box p{margin:0; font-size:15px;}

/* ---------- Story ---------- */
.story{background:var(--surface-2); border-block:1px solid var(--border);}
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:center;}
@media(max-width:820px){ .story-grid{grid-template-columns:1fr; gap:var(--sp-4);} }
.story h2{font-size:clamp(26px,3.2vw,36px); color:var(--primary); margin-bottom:var(--sp-3);}
.story p{color:var(--fg-muted); margin-bottom:var(--sp-3);}
.story-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-3); text-align:center;}
.stat .n{font-family:'Lora',serif; font-size:26px; font-weight:600; color:var(--primary); display:block;}
.stat .l{font-size:12.5px; color:var(--fg-muted); margin-top:2px; display:block;}

/* ---------- Footer ---------- */
.footer{background:var(--primary); color:#E8EDE6; padding-block:var(--sp-6) var(--sp-4);}
.footer a{color:#E8EDE6;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--sp-5); margin-bottom:var(--sp-5);}
@media(max-width:760px){ .footer-grid{grid-template-columns:1fr; gap:var(--sp-4);} }
.footer h4{font-size:15px; margin-bottom:var(--sp-3); color:#fff;}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.footer li{font-size:14px; opacity:.85;}
.footer-note{border-top:1px solid rgba(255,255,255,.18); padding-top:var(--sp-4); font-size:13px; opacity:.75; display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;}
.footer .brand-name{color:#fff;}

.disclaimer{
  background:#F6E7DE; border:1px solid #E5C3AF; border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); margin-block:var(--sp-5); font-size:14px; color:#7A3E22;
}
.disclaimer strong{color:#5E2E18;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important;}
}