
*{box-sizing:border-box;margin:0;padding:0}
:root{--cream:#faf6ee;--card:#fffdf8;--ink:#2c2620;--soft:#6d6155;--ochre:#c07f38;--fern:#4a6b4f;--line:#e8ded0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.01em}
/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(250,246,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:26px;height:66px}
.logo{font-family:Georgia,serif;font-size:21px;font-weight:700}
.logo span{color:var(--ochre)}
nav .links{margin-left:auto;display:flex;gap:22px;font-size:14.5px;color:var(--soft)}
nav .links a:hover{color:var(--ochre)}
/* hero */
header.hero{padding:66px 0 40px;text-align:center}
header.hero h1{font-size:clamp(34px,5.2vw,54px);line-height:1.12;margin-bottom:16px}
header.hero p{max-width:620px;margin:0 auto;color:var(--soft);font-size:17.5px}
.stats{display:flex;gap:40px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.stat b{display:block;font-family:Georgia,serif;font-size:30px;color:var(--ochre)}
.stat span{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
/* controls */
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:34px 0 26px}
#q{flex:1;min-width:230px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:15px;color:var(--ink)}
#q:focus{outline:2px solid var(--ochre);outline-offset:-1px}
.chip{padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13.5px;color:var(--soft);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--ochre);color:var(--ochre)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:26px;padding-bottom:70px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(60,45,25,.13)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#efe7da}
.card .body{padding:15px 17px 18px}
.card h3{font-size:17.5px;margin-bottom:5px}
.card .meta{font-size:13px;color:var(--soft);display:flex;justify-content:space-between;align-items:center}
.price{color:var(--ochre);font-weight:700}
/* product gallery */
.prod{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:44px;align-items:start}
@media(max-width:900px){.prod{grid-template-columns:1fr;gap:26px}}
.gal{position:relative}
.gal .main{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.gal .main img{width:100%;display:block;cursor:zoom-in}
.gal .main img[hidden]{display:none}
.gal .main video{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#efe7da}
.gal .main video[hidden]{display:none}
.thumbs .vthumb{position:relative}
.thumbs .vthumb span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 background:rgba(30,25,20,.45);color:#fff;font-size:20px;border-radius:7px}
.gal .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
 background:rgba(255,253,248,.92);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
 cursor:pointer;font-size:20px;color:var(--ink);user-select:none;transition:.15s}
.gal .nav:hover{background:var(--ink);color:#fff}
.gal .prev{left:12px}.gal .next{right:12px}
.gal .count{position:absolute;right:12px;bottom:12px;background:rgba(44,38,32,.78);color:#fff;font-size:12.5px;
 padding:4px 10px;border-radius:999px}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs button{padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;background:none;cursor:pointer;line-height:0;transition:.15s}
.thumbs img{width:86px;height:66px;object-fit:cover;display:block}
.thumbs button:hover{border-color:var(--line)}
.thumbs button[aria-current=true]{border-color:var(--ochre)}
/* buy panel */
.panel{position:sticky;top:88px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.panel h1{font-size:27px;line-height:1.2;margin-bottom:6px}
.panel .p{font-family:Georgia,serif;font-size:31px;color:var(--ochre);margin:10px 0 4px}
.panel .sub{font-size:13px;color:var(--soft);margin-bottom:18px}
.panel .buy{width:100%;justify-content:center;margin-bottom:16px}
.panel ul{list-style:none;font-size:14.5px;color:var(--soft)}
.panel li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:9px}
.panel li:last-child{border:0}
.panel li b{color:var(--ink);font-weight:600}
.check{color:var(--fern);font-weight:700}
/* lightbox */
.lb{position:fixed;inset:0;background:rgba(30,25,20,.93);display:none;align-items:center;justify-content:center;z-index:99;padding:26px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:8px}
.lb .x{position:absolute;top:18px;right:24px;color:#fff;font-size:34px;cursor:pointer;line-height:1;z-index:2}
.lb video{max-width:100%;max-height:100%;border-radius:8px}
.lb video[hidden],.lb img[hidden]{display:none}
.lbnav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
 background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;
 font-size:26px;cursor:pointer;user-select:none;transition:.15s;z-index:2}
.lbnav:hover{background:rgba(255,255,255,.3)}
.lbprev{left:26px}.lbnext{right:26px}
@media(max-width:640px){.lbprev{left:10px}.lbnext{right:10px}}
/* detail */
.detail{padding:36px 0 80px}
.back{font-size:14px;color:var(--soft)}
.detail h1{font-size:clamp(28px,4vw,42px);margin:16px 0 10px}
.lede{color:var(--soft);max-width:760px;font-size:17px;margin-bottom:22px}
.buy{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:14px 26px;border-radius:11px;font-weight:600;font-size:16px;transition:.15s}
.buy:hover{background:var(--ochre)}
.buy.soon{background:var(--card);color:var(--soft);border:1px dashed var(--line);cursor:default}
.facts{display:flex;gap:26px;flex-wrap:wrap;margin:24px 0 34px;font-size:14px;color:var(--soft)}
.facts b{color:var(--ink)}
.shots{display:grid;gap:22px}
.shots img{width:100%;border-radius:13px;border:1px solid var(--line);display:block}
.taglist{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.taglist span{font-size:12.5px;color:var(--soft);background:var(--card);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
/* misc */
section.band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0;margin-top:20px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px}
.cols h3{font-size:17px;margin-bottom:8px;color:var(--fern)}
.cols p{font-size:14.5px;color:var(--soft)}
footer{padding:44px 0;text-align:center;color:var(--soft);font-size:13.5px}
.empty{padding:60px 0;text-align:center;color:var(--soft)}
