:root{--night:#0f1712;--pine:#18241c;--cream:#f2ead7;--paper:#faf6ec;--ink:#1a221d;--muted:#5d6a61;--gold:#c8a55e;--gold2:#e2c88f;--rust:#a4502f;--line:rgba(26,34,29,.12);
  --display:'Bodoni Moda',Didot,Georgia,serif;--ui:'Manrope',system-ui,sans-serif;--pad:clamp(1.1rem,4vw,3.5rem);--ease:cubic-bezier(.2,.75,.1,1)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.55 var(--ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.5rem 1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:var(--pine);color:var(--cream);text-decoration:none;font:600 .8rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;padding:1rem 1.5rem;border-radius:99px;border:0;cursor:pointer;transition:background .25s,transform .25s var(--ease)}
.btn:hover{background:#26382c;transform:translateY(-1px)}
.btn.gold{background:var(--gold);color:var(--night)}.btn.gold:hover{background:var(--gold2)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem var(--pad);background:rgba(15,23,18,.94);color:var(--cream);backdrop-filter:blur(10px)}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:500 1.05rem/1 var(--display)}
.mark img{width:32px}
.hdr nav{display:flex;gap:1.6rem;font:600 .74rem var(--ui);letter-spacing:.16em;text-transform:uppercase}
.hdr nav a{text-decoration:none;opacity:.8}.hdr nav a:hover,.hdr nav a[aria-current]{opacity:1;color:var(--gold2)}
.pill{font:600 .72rem var(--ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:.6rem 1.1rem;border-radius:99px;box-shadow:inset 0 0 0 1px currentColor}
.pill b{display:inline-grid;place-items:center;min-width:1.4em;height:1.4em;margin-left:.4em;border-radius:99px;background:var(--gold);color:var(--night);font-size:.7rem}
.pill b[hidden]{display:none}
.wrap{max-width:1280px;margin:0 auto;padding:clamp(1.6rem,4vw,3rem) var(--pad) 4rem}
.eyebrow{font:600 .7rem var(--ui);letter-spacing:.28em;text-transform:uppercase;color:#7a6534;margin:0 0 .7rem}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:1.6rem}
.page-head h1{font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1}
.page-head h1 em{color:var(--rust)}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:.55rem 1rem;font:600 .78rem var(--ui);letter-spacing:.06em;cursor:pointer;color:var(--ink)}
.tabs button[aria-pressed=true]{background:var(--pine);color:var(--cream);border-color:var(--pine)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(1rem,2vw,1.6rem)}
.tile{display:block;text-decoration:none;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(30,24,10,.4);transition:transform .35s var(--ease),box-shadow .35s}
.tile:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 26px 50px -26px rgba(30,24,10,.5)}
.tile canvas{display:block;width:100%;aspect-ratio:1;background:#ece9e5}
.tile .meta{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding:.9rem 1rem 1rem}
.tile .t{font:italic 400 1.2rem/1.2 var(--display)}
.tile .s{font-size:.8rem;color:var(--muted)}
.tile .pr{font-weight:600;white-space:nowrap}
/* product page */
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.4rem,4vw,3.5rem);align-items:start}
.pdp-media{position:sticky;top:84px}
.pdp-media canvas{width:100%;aspect-ratio:1;border-radius:16px;background:#ece9e5;box-shadow:0 30px 60px -36px rgba(30,24,10,.55);transition:opacity .3s}
.pdp-media canvas.busy{opacity:.6}
.views{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.8rem}
.views button{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#ece9e5;cursor:pointer}
.views button[aria-pressed=true]{border-color:var(--rust)}
.views canvas{width:100%;aspect-ratio:1;display:block}
.views span{display:block;font:600 .66rem var(--ui);letter-spacing:.1em;text-transform:uppercase;padding:.3rem 0;background:#fff}
.pdp h1{font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;margin-bottom:.3rem}
.credit{font-size:.82rem;color:var(--muted);margin:0 0 1.2rem}
.price{font:500 1.8rem var(--display);margin:.2rem 0 1.4rem}
.opt{margin:0 0 1.3rem}
.opt-l{display:flex;justify-content:space-between;font:600 .7rem var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chips button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.6rem .9rem;font:600 .85rem var(--ui);cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.chips button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.chips i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.arts{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.arts button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.35rem;cursor:pointer}
.arts button[aria-pressed=true]{border-color:var(--rust);box-shadow:inset 0 0 0 1px var(--rust)}
.arts img{width:100%;aspect-ratio:1;object-fit:contain}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;background:#fff}
.qty button{width:2.4rem;height:2.4rem;border:0;background:none;font-size:1.1rem;cursor:pointer}
.qty input{width:2.6rem;text-align:center;border:0;font:600 1rem var(--ui);background:none}
.buy{display:flex;gap:.8rem;align-items:center;margin:1.4rem 0}
.buy .btn{flex:1}
.fine{font-size:.82rem;color:var(--muted)}
.facts{border-top:1px solid var(--line);margin-top:1.4rem;padding-top:1rem;font-size:.9rem}
.facts dt{font-weight:600;margin-top:.6rem}.facts dd{margin:0;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,calc(100% + 60px));visibility:hidden;background:var(--pine);color:var(--cream);padding:.9rem 1.2rem;border-radius:12px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);transition:transform .4s var(--ease);z-index:60;display:flex;gap:1rem;align-items:center}
.toast.on{transform:translate(-50%,0);visibility:visible}
.toast a{color:var(--gold2);font-weight:600}
/* cart */
.cart{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:2rem;align-items:start}
.lines{list-style:none;margin:0;padding:0;background:#fff;border-radius:14px;box-shadow:0 1px 0 var(--line)}
.line{display:grid;grid-template-columns:96px 1fr auto;gap:1rem;align-items:center;padding:1rem;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line canvas{width:96px;height:96px;border-radius:10px;background:#ece9e5}
.line .t{font:italic 400 1.15rem var(--display)}
.line .s{font-size:.82rem;color:var(--muted)}
.line .rm{background:none;border:0;color:var(--rust);font:600 .75rem var(--ui);cursor:pointer;padding:0;margin-top:.4rem}
.sum{background:#fff;border-radius:14px;padding:1.4rem;box-shadow:0 1px 0 var(--line);position:sticky;top:84px}
.sum .row{display:flex;justify-content:space-between;margin:.45rem 0}
.sum .tot{font:500 1.4rem var(--display);border-top:1px solid var(--line);padding-top:.8rem;margin-top:.8rem}
.sum label{display:block;font:600 .7rem var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .4rem}
.sum input{width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;font:500 1rem var(--ui)}
.sum .btn{width:100%;margin-top:1rem}
.err{color:var(--rust);font-size:.88rem;min-height:1.2em}
.shop-soon{margin:1rem 0 0;padding:.9rem 1rem;background:#f6efe0;border-radius:10px;font:italic 1.05rem/1.45 var(--display);color:var(--ink)}
.sum .shop-soon + .btn{margin-top:.9rem}
.empty{padding:3rem;text-align:center;background:#fff;border-radius:14px}
.badge{display:inline-block;font:600 .66rem var(--ui);letter-spacing:.12em;text-transform:uppercase;padding:.25rem .55rem;border-radius:99px;background:#e9e2d0}
.badge.test{background:#fde9c9;color:#7a4b00}
.ftr{border-top:1px solid var(--line);padding:2rem var(--pad);font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
@media (max-width:900px){
  .hdr nav{display:none}
  .pdp,.cart{grid-template-columns:1fr}
  .pdp-media{position:relative;top:0}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .tile .meta{flex-direction:column;gap:.1rem;padding:.6rem .7rem .8rem}.tile .t{font-size:1rem}
  .line{grid-template-columns:72px 1fr;}.line canvas{width:72px;height:72px}.line .end{grid-column:2}
  .sum{position:relative;top:0}
}