:root{--bg:#fbf8f3;--sand:#f3ece2;--ink:#2b1a12;--brown:#4a2511;--gold:#a9733f;--gold2:#c99a62;--mut:#85705f;--line:#e8dccd;--r:14px;--ff:'Cormorant Garamond',Georgia,serif;--fs:'Jost',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font:300 16px/1.65 var(--fs);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}
.wrap{width:min(1200px,92%);margin:auto}
h1,h2,h3,h4{font-family:var(--ff);font-weight:500;line-height:1.1;color:var(--brown)}
h2,.h2{font-size:clamp(2rem,4vw,2.9rem)}h3{font-size:1.3rem}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;font-weight:400}
.lead{color:var(--mut);font-size:1.08rem;max-width:34rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.8rem;background:var(--brown);color:#fff;border:1px solid var(--brown);border-radius:999px;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem;font-weight:400;cursor:pointer;transition:.3s}
.btn:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--brown)}.btn.ghost:hover{background:var(--brown);color:#fff;border-color:var(--brown)}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));border-color:var(--gold)}.btn.gold:hover{filter:brightness(1.08)}
.btn.sm{padding:.6rem 1rem;width:100%;font-size:.68rem}.btn[disabled]{opacity:.45;pointer-events:none}
/* header */
.hd{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:1.5rem;height:68px}
.brand{display:flex;align-items:center;gap:.6rem}.brand b{font:600 1.7rem/1 var(--ff);color:var(--brown);letter-spacing:.01em}.brand b span{color:var(--gold)}
.nav{display:flex;align-items:center;gap:1.7rem;margin-left:auto;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.nav a{position:relative;padding:.3rem 0}.nav a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:.3s}.nav a:hover:after{width:100%}
.srch input,.bar input,.bar select{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.5rem 1rem;font-size:.85rem;outline:none;transition:.3s}
.srch input{width:150px}.srch input:focus,.bar input:focus{border-color:var(--gold);width:200px}
.ic{background:none;border:0;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;position:relative;font-size:1.8rem;color:var(--brown)}
.bag em{position:absolute;top:2px;right:0;min-width:18px;height:18px;border-radius:9px;background:var(--gold);color:#fff;font:500 .68rem/18px var(--fs);text-align:center;font-style:normal;display:none}
.nav-t{display:none}.nav-t i,.nav-t i:before,.nav-t i:after{display:block;width:22px;height:1.5px;background:var(--brown);position:relative;transition:.3s}.nav-t i:before,.nav-t i:after{content:"";position:absolute;left:0}.nav-t i:before{top:-7px}.nav-t i:after{top:7px}
/* hero */
.hero{padding:clamp(2rem,5vw,4.5rem) 0 clamp(2.5rem,6vw,5rem)}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.2rem);margin-bottom:1.3rem;letter-spacing:-.01em}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.arch{aspect-ratio:4/5;max-width:440px;margin-left:auto;width:100%;border-radius:999px 999px 28px 28px;background:linear-gradient(165deg,#f6efe4,#e9d6bd);display:grid;place-items:center;overflow:hidden;outline:1px solid var(--gold2);outline-offset:10px}
.arch img{width:100%;height:100%;object-fit:cover}.arch .mk{width:56%;height:auto;object-fit:contain}
/* sections */
.sec{padding:clamp(3rem,7vw,6rem) 0}.sec.alt{background:var(--sand)}.sh{text-align:center;margin-bottom:2.5rem}.sh .lead{margin:1rem auto 0}
.sh h2:after,.sh .h2:after{content:"";display:block;width:48px;height:1px;background:var(--gold);margin:1.1rem auto 0}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.tile{aspect-ratio:3/4;border-radius:var(--r);background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:1.3rem;color:#fff;overflow:hidden;position:relative;transition:.5s}
.tile.g0{background-color:#4a2511}.tile.g1{background-color:#7a4a28}.tile.g2{background-color:#a9733f}.tile.g3{background-color:#6b3a1d}
.tile:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(74,37,17,.6)}
.tile b{display:block;font:500 1.7rem/1.1 var(--ff)}.tile small{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1.6rem 1.3rem}
.card .im{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--sand);position:relative}
.card .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.card:hover .im img{transform:scale(1.06)}
.ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(160deg,#f1e6d6,#e3cdae)}.ph span{font:500 5rem var(--ff);color:var(--gold)}
.tag{position:absolute;top:.7rem;left:.7rem;background:var(--brown);color:#fff;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;padding:.25rem .7rem;border-radius:99px}
.ci{padding:.9rem .2rem 0}.cat{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ci h3{margin:.2rem 0 .3rem;font-size:1.28rem}.pr{color:var(--brown);font-weight:400;margin-bottom:.7rem}.pr small{color:var(--mut);font-size:.8rem}.por{color:var(--mut);font-style:italic}
.more{text-align:center;margin-top:2.5rem}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;text-align:center}.perks p{color:var(--mut);margin-top:.5rem}
/* shop */
.bar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;margin-bottom:2rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}.chips a{padding:.45rem 1.1rem;border:1px solid var(--line);border-radius:99px;font-size:.8rem;letter-spacing:.06em;transition:.25s}
.chips a:hover,.chips a.on{background:var(--brown);color:#fff;border-color:var(--brown)}.bar input{flex:1;min-width:140px;max-width:260px}
.empty{text-align:center;color:var(--mut);padding:3rem 0}.empty a{color:var(--gold);text-decoration:underline}
.pager{display:flex;justify-content:center;gap:.4rem;margin-top:2.5rem}.pager a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}.pager a.on{background:var(--brown);color:#fff}
/* product */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
.gal .main{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--sand)}.gal .main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}.thumbs button{width:68px;height:84px;border:1px solid var(--line);border-radius:8px;overflow:hidden;padding:0;cursor:pointer;background:none}.thumbs img{width:100%;height:100%;object-fit:cover}
.crumb{font-size:.78rem;color:var(--mut);margin-bottom:1rem}.crumb a:hover{color:var(--gold)}
.info h1{font-size:clamp(2.2rem,4vw,3.2rem)}.pr.big{font-size:1.7rem;margin:1rem 0 .3rem;font-family:var(--ff);font-weight:500}.pr.big small{font-family:var(--fs)}
.stock{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.4rem}.stock.in{color:#3d7a4f}.stock.out{color:#a33}
.desc{color:#4d3b30;margin-bottom:1.8rem;max-width:36rem}
.qty{display:inline-flex;border:1px solid var(--line);border-radius:99px;background:#fff;overflow:hidden}.qty button{width:44px;border:0;background:none;font-size:1.3rem;cursor:pointer}.qty button:hover{background:var(--sand)}
.qty input{width:52px;text-align:center;border:0;background:none;outline:none;-moz-appearance:textfield}.qty input::-webkit-inner-spin-button{display:none}
/* footer */
.ft{background:var(--sand);padding:3.5rem 0 0;margin-top:0;border-top:1px solid var(--line)}
.ft-in{display:grid;grid-template-columns:1.4fr 1fr 1.4fr;gap:2.5rem}.ft p{color:var(--mut);margin-top:.8rem}
.ft h4{font-size:1.25rem;margin-bottom:.8rem}.ft-in a,.ft-in span{display:block;color:var(--mut);margin-bottom:.35rem}.ft-in a:hover{color:var(--gold)}
.copy{text-align:center;font-size:.78rem;padding:2rem 0 1.5rem;margin:0!important}
/* drawer */
.ov{position:fixed;inset:0;background:rgba(43,26,18,.45);opacity:0;pointer-events:none;transition:.35s;z-index:90}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg);z-index:100;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
body.cart-open .ov{opacity:1;pointer-events:auto}body.cart-open .drawer{transform:none}body.cart-open{overflow:hidden}
.dh{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.3rem;border-bottom:1px solid var(--line)}.dh h2{font-size:1.7rem}
.dl{flex:1;overflow:auto;padding:1rem 1.3rem}.dl .none{text-align:center;color:var(--mut);margin-top:3rem}
.it{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--line);align-items:center}
.it img,.it .ph{width:64px;height:80px;object-fit:cover;border-radius:8px}.it .ph span{font-size:1.8rem}
.it b{font:500 1.1rem/1.2 var(--ff);color:var(--brown);display:block}.it small{color:var(--mut)}
.it .q{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;margin-top:.4rem}.it .q button{width:28px;height:28px;border:0;background:none;cursor:pointer}.it .q span{min-width:24px;text-align:center;font-size:.9rem}
.it .rm{background:none;border:0;color:var(--mut);cursor:pointer;font-size:1.3rem}
.df{padding:1.1rem 1.3rem;border-top:1px solid var(--line);display:grid;gap:.8rem}.tot{display:flex;justify-content:space-between;font-size:1.1rem}.tot b{font:600 1.5rem var(--ff);color:var(--brown)}
.df .btn.off{opacity:.4;pointer-events:none}.note{font-size:.76rem;color:var(--mut);text-align:center}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--brown);color:#fff;padding:.7rem 1.4rem;border-radius:99px;font-size:.85rem;opacity:0;transition:.35s;z-index:120;pointer-events:none}.toast.on{opacity:1;transform:translate(-50%,0)}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}.js .rv.in{opacity:1;transform:none}
@media(max-width:900px){.nav-t{display:grid}.hd-in{gap:.5rem}.brand{margin-right:auto}
 .nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:.5rem 4%;max-height:0;overflow:hidden;opacity:0;transition:.35s;margin:0}
 .nav a{padding:.9rem 0;border-bottom:1px solid var(--line)}.srch{padding:.8rem 0}.srch input,.srch input:focus{width:100%}
 body.nav-open .nav{max-height:480px;opacity:1}.hd-in{position:relative}
 .hero-in,.pd{grid-template-columns:1fr}.arch{margin:1rem auto 0;max-width:340px}.tiles{grid-template-columns:1fr 1fr}.perks,.ft-in{grid-template-columns:1fr;gap:1.6rem}}
@media(max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:1.2rem .8rem}.ci h3{font-size:1.1rem}.btn.sm{padding:.55rem .4rem;letter-spacing:.06em}.cta .btn{flex:1}.bar input{max-width:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}.js .rv{opacity:1;transform:none}}
