:root{
  --bg:#faf6f1; --bg-2:#f3ece3; --card:#fffdfb;
  --ink:#241e1a; --ink-soft:#6b615a; --ink-faint:#948a80;
  --line:#e7ded3; --line-strong:#d8cdbf;
  --dark:#221a15; --dark-2:#2c231c; --cream:#f5ece0; --cream-soft:#c9bdae;
  --accent:#b5613a; --accent-strong:#9a4e2c; --accent-ink:#8a4526;
  --gold:#c9863c; --brown:#b5613a; --white-swatch:#efe7d8;
  --shadow-sm:0 1px 2px rgba(40,28,18,.06),0 2px 8px rgba(40,28,18,.05);
  --shadow-md:0 6px 16px rgba(40,28,18,.09),0 2px 6px rgba(40,28,18,.06);
  --shadow-lg:0 24px 60px rgba(40,28,18,.20),0 8px 24px rgba(40,28,18,.12);
  --r:14px; --r-lg:22px;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:66px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:500; line-height:1.08; margin:0; letter-spacing:-.01em; color:var(--ink)}
p{margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
picture{display:block}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,48px)}
.eyebrow{font-family:"Manrope"; font-weight:600; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-ink)}
.icon{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-weight:600; font-size:.95rem; letter-spacing:.015em; padding:.85em 1.5em; border-radius:100px; transition:transform .18s var(--ease),background .2s,box-shadow .2s,color .2s; min-height:48px}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-strong); box-shadow:var(--shadow-md)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{border:1.5px solid var(--line-strong); background:var(--card); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink); background:#fff}
.btn-dark{background:var(--cream); color:var(--dark)}
.btn-dark:hover{background:#fff}
.btn-block{width:100%}

/* ============ NAV ============ */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h); display:flex; align-items:center; transition:background .3s var(--ease),box-shadow .3s,border-color .3s; border-bottom:1px solid transparent}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%; max-width:none; padding:0 clamp(16px,2.4vw,36px)}
.brand{display:flex; align-items:center}
.brand .logo{height:58px; width:auto; display:block; transition:filter .3s var(--ease),transform .4s var(--ease)}
@media (max-width:640px){.brand .logo{height:48px}}
.nav-support{font-size:.9rem; font-weight:500; letter-spacing:.03em; color:var(--cream); opacity:.9; margin-right:.5rem; transition:opacity .2s,color .2s}
.nav-support:hover{opacity:1}
.nav.scrolled .nav-support,.nav.menu-open .nav-support{color:var(--ink)}
/* logo is black artwork: render white on dark backgrounds, keep black on light */
.brand .logo{filter:brightness(0) invert(1)}
.nav.scrolled .brand .logo,.nav.menu-open .brand .logo{filter:none}
.brand:hover .logo{transform:scale(1.03)}
.footer-brand .logo{height:70px; filter:brightness(0) invert(1)}
.nav-links{display:flex; align-items:center; gap:2rem}
.nav-links a{font-size:.9rem; font-weight:500; letter-spacing:.03em; color:var(--cream); opacity:.9; transition:opacity .2s,color .2s; position:relative}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-right{display:flex; align-items:center; gap:.4rem}
.icon-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--cream); transition:background .2s,color .2s}
.icon-btn:hover{background:rgba(245,236,224,.14)}
.cart-count{position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--accent); color:#fff; font-size:.68rem; font-weight:700; display:none; align-items:center; justify-content:center; line-height:1; font-family:"Manrope"}
.cart-count.show{display:flex}
.nav-toggle{display:none}
/* nav scrolled state */
.nav.scrolled{background:rgba(250,246,241,.86); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(40,28,18,.03)}
.nav.scrolled .brand,.nav.scrolled .nav-links a,.nav.scrolled .icon-btn{color:var(--ink)}
.nav.scrolled .icon-btn:hover{background:rgba(40,28,18,.06)}

/* ============ HERO ============ */
.hero{position:relative; overflow:hidden; background:var(--dark)}
.hero-media{position:relative; width:100%; aspect-ratio:6016/3329; max-height:92svh; min-height:460px; overflow:hidden; background:var(--dark)}
.hero-media picture{display:block; width:100%; height:100%}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 50%}
.hero-scrim{position:absolute; inset:0; pointer-events:none; background:
   linear-gradient(to bottom, rgba(20,14,10,.6) 0%, rgba(20,14,10,.22) 20%, rgba(20,14,10,.28) 58%, rgba(20,14,10,.62) 100%),
   radial-gradient(95% 85% at 50% 50%, rgba(20,14,10,.32), rgba(20,14,10,0) 72%)}
@media (max-width:640px){ .hero-media{aspect-ratio:1340/2092} .hero-media img{object-position:center 45%} }
.hero-inner{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:calc(var(--nav-h) + 20px) clamp(20px,5vw,48px) clamp(28px,5vh,56px)}
.hero .eyebrow{color:#f1cb92}
.hero h1{color:#fff; font-size:clamp(1.85rem,3.6vw,3.15rem); font-weight:400; margin:0; letter-spacing:-.005em; line-height:1.24; max-width:22ch; text-shadow:0 2px 34px rgba(0,0,0,.45)}
.hero-sub{color:rgba(255,253,250,.92); font-size:clamp(1.02rem,1.7vw,1.24rem); max-width:46ch; margin:1.2rem auto 0; line-height:1.55; text-shadow:0 1px 22px rgba(0,0,0,.4)}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem 1.2rem; margin-top:2rem; align-items:center; justify-content:center}


/* ============ SECTION SHELL ============ */
.section{padding:clamp(64px,10vw,130px) 0}
.sec-head{max-width:640px; margin-bottom:clamp(36px,5vw,60px)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.3rem); margin-top:.6rem}
.sec-head p{color:var(--ink-soft); font-size:1.08rem; margin-top:1rem; line-height:1.6}

/* ============ FEATURES ============ */
.features{display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,34px)}
.feature{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s}
.feature:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.feature .fico{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(140deg,#f7ede0,#f0dcc4); color:var(--accent-ink); margin-bottom:1.1rem}
.feature .fico svg{width:26px; height:26px; stroke-width:1.6}
.feature h3{font-size:1.28rem}
.feature p{color:var(--ink-soft); margin-top:.55rem; font-size:.98rem}

/* ============ COLLECTION / PRODUCT CARDS ============ */
.lamps-grid{display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,48px); max-width:440px; margin-inline:auto}
.lamp-card{position:relative; text-align:left; background:none; border:none; padding:0; display:block; width:100%; transition:transform .35s var(--ease)}
.lamp-card:hover{transform:translateY(-4px)}
.lamp-card .thumb{position:relative; display:block; width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--dark-2)}
.lamp-card .thumb picture{display:block; width:100%; height:100%}
.lamp-card .thumb img{width:100%; height:100%; object-fit:cover; object-position:center}
.lamp-card .thumb-alt{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--ease)}
.lamp-card:hover .thumb-alt,.lamp-card:focus-visible .thumb-alt{opacity:1}
@media (prefers-reduced-motion:reduce){.lamp-card .thumb-alt{transition:none}}
.lamp-info{margin-top:0; padding:12px 2px 0; display:flex; flex-direction:column; gap:0; text-align:left}
.lamp-info .name{font-family:"Fraunces",serif; font-size:1.28rem; font-weight:500; letter-spacing:.004em; line-height:1.08; color:var(--ink)}
.lamp-info .variant{font-size:.63rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:7px}
.lamp-info .price{font-family:"Fraunces",serif; font-size:.85rem; font-weight:500; color:var(--ink-soft); margin-top:3px; font-variant-numeric:tabular-nums}
.collection-foot{text-align:center; margin-top:clamp(30px,4.5vw,48px)}
.quiet-link{display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); padding-bottom:4px; border-bottom:1px solid var(--line-strong); transition:color .2s,border-color .2s}
.quiet-link:hover{color:var(--ink); border-color:var(--ink)}
@media (min-width:640px){
  .lamps-grid{grid-template-columns:1fr 1fr; max-width:none}
}

/* ============ GALLERY ============ */
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.4vw,16px); grid-auto-flow:dense}
.gitem{position:relative; overflow:hidden; border-radius:var(--r); background:var(--dark-2); cursor:zoom-in; aspect-ratio:1/1}
.gitem img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.gitem:hover img{transform:scale(1.05)}
.gitem::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(24,17,12,.35),transparent 45%); opacity:0; transition:opacity .3s}
.gitem:hover::after{opacity:1}
.gitem .cap{position:absolute; left:14px; bottom:12px; color:var(--cream); font-size:.82rem; font-weight:500; z-index:1; opacity:0; transform:translateY(6px); transition:.3s var(--ease)}
.gitem:hover .cap{opacity:1; transform:translateY(0)}
.gitem.wide{grid-column:span 2; aspect-ratio:16/10}
.gitem.wide.sq{aspect-ratio:1/1} /* square source photos: never letterbox-crop them on mobile */
@media (min-width:760px){
  .gallery{grid-template-columns:repeat(4,1fr)}
  .gitem.tall{grid-row:span 2; aspect-ratio:auto}
  .gitem.wide{grid-column:span 2; aspect-ratio:auto}
}

/* ============ SPEC BAND ============ */
.spec{background:var(--dark); color:var(--cream); padding-bottom:clamp(44px,5vw,60px)}
.spec .eyebrow{color:#e9b985}
.spec h2{color:var(--cream)}
.spec-grid{display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,60px); align-items:center}
.spec-media{border-radius:var(--r-lg); overflow:hidden; background:#efe9e3; box-shadow:var(--shadow-lg)}
.spec-media img{width:100%; height:auto; display:block}
.spec-list{list-style:none; padding:0; margin:1rem 0 0}
.spec-list li{display:flex; gap:.85rem; padding:11px 0; border-bottom:1px solid rgba(245,236,224,.12); align-items:center}
.spec-list li:last-child{border-bottom:none}
.spec-list .si{width:34px; height:34px; border-radius:10px; background:rgba(245,236,224,.08); color:var(--gold); display:grid; place-items:center; flex:none}
.spec-list .si svg{width:17px;height:17px}
.spec-list li > span:last-child{display:flex; flex-direction:column; gap:1px}
.spec-list .st{font-weight:600; color:var(--cream); font-size:.98rem}
.spec-list .sd{color:var(--cream-soft); font-size:.85rem; line-height:1.35}
.spec h2{font-size:clamp(1.6rem,3vw,2.2rem)}
@media (min-width:760px){.spec-grid{grid-template-columns:minmax(380px,500px) 1fr; align-items:center; gap:clamp(24px,3vw,44px)}}

/* ============ STORY ============ */
.story{display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,56px); align-items:center}
.story-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md)}
.story-media img{width:100%; height:auto; display:block}
.story-body p{color:var(--ink-soft); font-size:1.08rem; margin-top:1.1rem; line-height:1.7}
.story-body .signature{font-family:"Fraunces",serif; font-style:italic; font-size:1.2rem; color:var(--ink); margin-top:1.5rem}
@media (min-width:900px){.story{grid-template-columns:1.05fr .95fr} .story.rev .story-media{order:2}}

/* ============ CTA BAND ============ */
.cta-band{text-align:center; background:linear-gradient(150deg,#2c231c,#3a2c20 60%,#4a3524); color:var(--cream); border-radius:var(--r-lg); padding:clamp(44px,7vw,88px) clamp(20px,5vw,60px); position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(233,167,101,.35),transparent 68%); top:-140px; right:-90px; filter:blur(8px)}
.cta-band h2{color:var(--cream); font-size:clamp(2rem,5vw,3.2rem); position:relative}
.cta-band p{color:var(--cream-soft); max-width:44ch; margin:1rem auto 2rem; position:relative}
.cta-band .hero-actions{justify-content:center; position:relative}

/* ============ FOOTER ============ */
.footer{background:var(--dark-2); color:var(--cream-soft); padding:clamp(48px,7vw,80px) 0 32px}
.footer-top{display:grid; grid-template-columns:1fr; gap:2.4rem; padding-bottom:2.6rem; border-bottom:1px solid rgba(245,236,224,.1)}
.footer .brand{color:var(--cream); font-size:1.5rem}
.footer-blurb{margin-top:1rem; max-width:34ch; font-size:.95rem; line-height:1.6}
.footer-col h4{font-family:"Manrope"; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); font-weight:700; margin-bottom:1rem}
.footer-col a,.footer-col p{display:block; color:var(--cream-soft); font-size:.95rem; padding:5px 0; transition:color .2s}
.footer-col a:hover{color:var(--cream)}
.footer-bottom{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-top:26px; font-size:.85rem; color:var(--cream-soft)}
.footer-legal{display:flex; gap:1.4rem}
.footer-legal a{color:var(--cream-soft); transition:color .2s}
.footer-legal a:hover{color:var(--cream)}
@media (min-width:760px){.footer-top{grid-template-columns:2fr 1fr 1fr}}

/* ============ OVERLAYS (product + cart + lightbox) ============ */
/* Always rendered so the drawer/scrim can animate; overflow clips the
   off-screen closed drawer (no shadow peek, no scroll); pointer-events
   let clicks pass through when closed. */
.overlay{position:fixed; inset:0; z-index:200; overflow:hidden; pointer-events:none}
.overlay.open{pointer-events:auto}
.overlay-scrim{position:absolute; inset:0; background:rgba(24,17,12,.55); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s}
.overlay.open .overlay-scrim{opacity:1}

/* product modal */
.pm{position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:clamp(0px,3vw,40px); overflow:auto; scrollbar-gutter:stable both-edges}
.pm-box{position:relative; background:var(--bg); width:min(980px,100%); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); transform:translateY(24px) scale(.98); opacity:0; transition:transform .4s var(--ease),opacity .3s; margin:auto}
.overlay.open .pm-box{transform:none; opacity:1}
.pm-grid{display:grid; grid-template-columns:1fr}
.pm-gallery{background:var(--dark-2); padding:clamp(14px,2vw,22px)}
.pm-main{aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; background:var(--dark)}
.pm-main img{width:100%; height:100%; object-fit:cover}
.pm-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin}
.pm-thumb{flex:none; width:62px; height:62px; border-radius:9px; overflow:hidden; border:2px solid transparent; opacity:.7; transition:.2s; background:var(--dark)}
.pm-thumb img{width:100%;height:100%;object-fit:cover}
.pm-thumb.active{border-color:var(--gold); opacity:1}
.pm-thumb:hover{opacity:1}
.pm-info{padding:clamp(24px,3vw,40px)}
.pm-cat{color:var(--accent-ink); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase}
.pm-info h2{font-size:clamp(1.8rem,3.5vw,2.5rem); margin:.4rem 0 .1rem}
.pm-price{font-family:"Manrope"; font-size:1.3rem; font-weight:600; letter-spacing:.02em; margin-top:.5rem; font-variant-numeric:tabular-nums}
.pm-desc{color:var(--ink-soft); margin-top:1rem; font-size:.98rem; line-height:1.6}
.opt-label{font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:1.6rem 0 .7rem; display:flex; gap:.5rem}
.opt-label .val{color:var(--ink-soft); font-weight:500; text-transform:none; letter-spacing:0}
.color-opts{display:flex; gap:.7rem}
.color-opt{display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:8px; border:1.5px solid var(--line-strong); border-radius:12px; background:var(--card); transition:.2s; min-width:66px}
.color-opt:hover{border-color:var(--ink-faint)}
.color-opt.sel{border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,97,58,.14)}
.color-opt .cchip{width:30px; height:30px; border-radius:50%; border:1px solid rgba(0,0,0,.1); box-shadow:inset 0 0 0 2px #fff}
.color-opt .cname{font-size:.78rem; font-weight:600}
/* product options (color swatches / plug pills / trust) */
.pm-tax{color:var(--ink-faint); font-size:.82rem; margin-top:.35rem}
.pm-rule{border:none; border-top:1px solid var(--line); margin:1.5rem 0 .2rem}
.swatches{display:flex; gap:.6rem; margin-bottom:.4rem}
.swatch{padding:3px; border-radius:50%; display:grid; place-items:center; border:none; background:none; transition:transform .15s}
.swatch .sw{width:28px; height:28px; border-radius:50%; border:1px solid rgba(0,0,0,.14); box-shadow:inset 0 1px 2px rgba(0,0,0,.12); transition:box-shadow .2s}
.swatch:hover{transform:translateY(-1px)}
.swatch[aria-checked="true"] .sw{box-shadow:inset 0 1px 2px rgba(0,0,0,.12), 0 0 0 2px var(--ink)}
.pill-opts{display:flex; flex-wrap:wrap; gap:.55rem}
.pill{padding:.55rem 1.05rem; border:1.5px solid var(--line-strong); border-radius:10px; background:var(--card); font-weight:600; font-size:.9rem; color:var(--ink); transition:.2s; min-height:44px; display:inline-flex; align-items:center}
.pill:hover{border-color:var(--ink-faint)}
.pill.sel{border-color:var(--ink); background:var(--ink); color:var(--cream)}
.pill-static{cursor:default}
.trust{list-style:none; padding:0; margin:1.6rem 0 0; display:flex; flex-direction:column; gap:.75rem}
.trust li{display:flex; gap:.7rem; align-items:center; font-size:.86rem; color:var(--ink-soft); line-height:1.35}
.trust b{color:var(--ink); font-weight:600}
.trust .ti{width:34px; height:34px; border-radius:9px; background:var(--bg-2); color:var(--accent-ink); display:grid; place-items:center; flex:none}
.trust .ti svg{width:18px; height:18px; stroke-width:1.6}
.qty-cart{display:flex; gap:.8rem; margin-top:1.8rem; align-items:stretch}
.stepper{display:flex; align-items:center; border:1.5px solid var(--line-strong); border-radius:100px; background:var(--card)}
.stepper button{width:44px; height:48px; display:grid; place-items:center; color:var(--ink); border-radius:100px}
.stepper button:hover{color:var(--accent)}
.stepper input{width:36px; text-align:center; border:none; background:none; font-family:inherit; font-weight:600; font-size:1rem; color:var(--ink); -moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty-cart .btn-primary{flex:1}
.pm-meta{display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.4rem; color:var(--ink-soft); font-size:.85rem}
.pm-meta span{display:inline-flex; align-items:center; gap:.4rem}
.pm-meta svg{width:16px;height:16px; color:var(--accent-ink)}
.accordion{margin-top:1.6rem; border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%; display:flex; justify-content:space-between; align-items:center; padding:15px 2px; font-weight:600; font-size:.96rem; text-align:left}
.acc-head svg{transition:transform .3s}
.acc-item.open .acc-head svg{transform:rotate(45deg)}
.acc-body{max-height:0; overflow:hidden; transition:max-height .35s var(--ease)}
.acc-body-inner{padding:0 2px 16px; color:var(--ink-soft); font-size:.92rem; line-height:1.6}
.acc-body-inner ul{margin:.3rem 0; padding-left:1.1rem}
.acc-body-inner li{margin:.25rem 0}
.pm-close{position:absolute; top:12px; right:12px; z-index:3; width:42px; height:42px; border-radius:50%; background:rgba(255,253,251,.92); color:var(--ink); display:grid; place-items:center; box-shadow:var(--shadow-md); transition:.2s}
.pm-close:hover{background:#fff; transform:rotate(90deg)}
.added-toast{position:absolute; left:50%; bottom:16px; transform:translateX(-50%) translateY(20px); background:var(--dark); color:var(--cream); padding:10px 18px; border-radius:100px; font-size:.88rem; font-weight:500; display:inline-flex; align-items:center; gap:.5rem; opacity:0; pointer-events:none; transition:.3s var(--ease); z-index:4}
.added-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.added-toast svg{width:16px;height:16px;color:#7ec89a}
@media (min-width:820px){
  .pm-grid{grid-template-columns:1.05fr 1fr}
  .pm-gallery{position:sticky; top:0}
}

/* cart drawer */
.cart{position:absolute; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--bg); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .38s var(--ease); display:flex; flex-direction:column}
.overlay.open .cart{transform:none}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line)}
.cart-head h3{font-size:1.3rem}
.cart-items{flex:1; overflow-y:auto; padding:6px 22px}
.cart-empty{text-align:center; color:var(--ink-soft); padding:48px 20px}
.cart-empty svg{width:48px;height:48px;color:var(--line-strong); margin:0 auto 14px; stroke-width:1.4}
.ci{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line)}
.ci-img{width:72px; height:88px; border-radius:10px; overflow:hidden; background:var(--dark-2); flex:none}
.ci-img img{width:100%;height:100%;object-fit:cover}
.ci-main{flex:1; min-width:0}
.ci-main h4{font-family:"Manrope"; font-weight:700; font-size:.98rem}
.ci-var{color:var(--ink-soft); font-size:.85rem; margin-top:2px}
.ci-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:10px}
.ci-stepper{display:flex; align-items:center; border:1.5px solid var(--line-strong); border-radius:100px}
.ci-stepper button{width:30px; height:32px; display:grid; place-items:center; color:var(--ink)}
.ci-stepper span{min-width:22px; text-align:center; font-weight:600; font-size:.9rem}
.ci-price{font-family:"Fraunces",serif; font-weight:500; font-size:1.05rem}
.ci-remove{color:var(--ink-faint); font-size:.8rem; background:none; padding:4px; transition:color .2s}
.ci-remove:hover{color:var(--accent)}
.cart-foot{padding:20px 22px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--card)}
.cart-sub{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.cart-sub .lab{font-weight:600}
.cart-sub .amt{font-family:"Fraunces",serif; font-size:1.5rem; font-weight:500}
.cart-note{color:var(--ink-faint); font-size:.8rem; margin-bottom:14px}
.cart-close{width:42px;height:42px;border-radius:50%; display:grid; place-items:center; color:var(--ink); transition:.2s}
.cart-close:hover{background:rgba(40,28,18,.06)}

/* checkout form */
.cart-view{display:flex; flex-direction:column; height:100%}
.checkout-view{display:none; flex-direction:column; height:100%}
.cart.checkout .cart-view{display:none}
.cart.checkout .checkout-view{display:flex}
.checkout-body{flex:1; overflow-y:auto; padding:8px 22px 22px}
.co-error{margin-top:14px; padding:12px 14px; border-radius:10px; background:#faeee9; border:1px solid #e5c4b2; color:#8a4526; font-size:.88rem; line-height:1.5}
.co-error a{color:#8a4526; font-weight:600; text-decoration:underline}
.back-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-soft);font-size:.88rem;font-weight:500;padding:8px 0;margin-bottom:6px}
.back-link:hover{color:var(--ink)}
.field{margin-top:14px}
.field label{display:block; font-size:.82rem; font-weight:600; margin-bottom:5px; color:var(--ink)}
.field input,.field textarea{width:100%; padding:12px 14px; border:1.5px solid var(--line-strong); border-radius:10px; font-family:inherit; font-size:.95rem; background:var(--card); color:var(--ink); transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,97,58,.12)}
.field .hint{font-size:.78rem; color:var(--ink-faint); margin-top:4px}
.field.err input,.field.err textarea{border-color:var(--accent)}
.field .msg{color:var(--accent-strong); font-size:.78rem; margin-top:4px; display:none}
.field.err .msg{display:block}
.co-summary{background:var(--bg-2); border-radius:12px; padding:14px 16px; margin-top:16px; font-size:.9rem}
.co-summary .row{display:flex; justify-content:space-between; padding:3px 0; color:var(--ink-soft)}
.co-summary .row.total{color:var(--ink); font-weight:700; border-top:1px solid var(--line); margin-top:6px; padding-top:8px}

/* lightbox */
.lb{position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; background:rgba(20,14,10,.92); padding:24px}
.lb.open{display:flex}
.lb img{max-width:94vw; max-height:88vh; border-radius:10px; box-shadow:var(--shadow-lg)}
.lb-close,.lb-nav{position:absolute; background:rgba(245,236,224,.12); color:var(--cream); width:50px; height:50px; border-radius:50%; display:grid; place-items:center; transition:.2s; backdrop-filter:blur(4px)}
.lb-close{top:20px; right:20px}
.lb-close:hover{background:rgba(245,236,224,.24); transform:rotate(90deg)}
.lb-nav{top:50%; transform:translateY(-50%)}
.lb-nav:hover{background:rgba(245,236,224,.24)}
.lb-prev{left:16px} .lb-next{right:16px}

/* reveal */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important; transform:none!important}
  .scroll-cue svg{animation:none}
  *{transition-duration:.01ms!important}
}

/* mobile nav */
@media (max-width:760px){
  .nav-links{position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:flex-start; gap:0; background:var(--bg); padding:8px clamp(20px,5vw,48px) 20px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-md); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s var(--ease)}
  .nav-links.open{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{color:var(--ink)!important; width:100%; padding:14px 0; border-bottom:1px solid var(--line); font-size:1.05rem}
  .nav-links a::after{display:none}
  .nav-toggle{display:inline-flex}
  .nav.menu-open{background:var(--bg); border-bottom-color:transparent}
  .nav.menu-open .brand,.nav.menu-open .icon-btn{color:var(--ink)}
}

/* ============ PRODUCT PAGE ============ */
.product-sec{padding-top:calc(var(--nav-h) + 34px)}
.breadcrumb{font-size:.85rem; color:var(--ink-soft); letter-spacing:.02em; margin-bottom:1.6rem}
.breadcrumb a{color:var(--ink-soft); transition:color .2s}
.breadcrumb a:hover{color:var(--ink)}
.product-sec .pm-grid{grid-template-columns:1fr; gap:2rem}
.product-sec .pm-gallery{background:none; padding:0; position:static}
.product-sec .pm-main{border-radius:var(--r-lg); background:var(--bg-2)}
.product-sec .pm-info{padding:0}
@media(min-width:900px){
  .product-sec .pm-grid{grid-template-columns:1.05fr 1fr; gap:clamp(30px,4vw,64px); align-items:start}
  .product-sec .pm-gallery{position:sticky; top:calc(var(--nav-h) + 24px)}
}

/* ============ TRUST BAR (under hero) ============ */
.trustbar{background:var(--dark); color:var(--cream)}
.trustbar .wrap{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:0; padding-top:15px; padding-bottom:15px}
.trustbar span{font-family:"Manrope"; font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; padding:2px clamp(14px,3vw,34px)}
.trustbar span + span{border-left:1px solid rgba(245,236,224,.2)}
@media (max-width:600px){ .trustbar span{padding:2px 12px; font-size:.62rem; letter-spacing:.1em} .trustbar span + span{border-left:none} }

/* ============ MAKER STRIP ============ */
.maker{background:var(--bg-2)}
.maker .wrap{max-width:820px; text-align:center}
.maker .eyebrow{display:block}
.maker-line{font-family:"Fraunces",serif; font-weight:400; font-size:clamp(1.4rem,2.7vw,2rem); line-height:1.36; letter-spacing:-.01em; color:var(--ink); margin-top:1rem}
.maker-line em{font-style:italic; color:var(--accent-ink)}

/* ============ REVIEWS ============ */
.reviews-grid{display:grid; grid-template-columns:1fr; gap:clamp(16px,2vw,24px); margin-top:clamp(30px,4vw,46px)}
@media (min-width:760px){ .reviews-grid{grid-template-columns:repeat(3,1fr)} }
.review-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px); box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.review-stars{display:flex; gap:3px; color:var(--gold); margin-bottom:13px}
.review-stars svg{width:16px; height:16px; fill:currentColor; stroke:none}
.review-text{color:var(--ink); font-size:1rem; line-height:1.62}
.review-who{margin-top:16px; font-size:.82rem; font-weight:600; letter-spacing:.03em; color:var(--ink-soft)}
.review-who .loc{color:var(--ink-faint); font-weight:500}