
:root { --ink:#111; --green:#127926; --mint:#47C285; --paper:#f7f4ef; }
* { box-sizing: border-box; }
body { margin:0; font-family: Lato, sans-serif; color:var(--ink); background:var(--paper); }
.bar { background:#111; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:16px 28px; }
.logo img { height:42px; width:auto; display:block; }
nav a { color:#fff; text-decoration:none; margin-left:22px; font-weight:700; letter-spacing:.04em; }
nav a.on { color:var(--mint); }
main { max-width:1100px; margin:0 auto; padding:36px 20px 72px; }
h1, h2 { font-family: "Abril Fatface", serif; font-weight:400; }
.lede { font-size:1.15rem; max-width:40rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px; }
.card { background:#fff; text-decoration:none; color:inherit; display:block; }
.card img { width:100%; aspect-ratio:1; object-fit:contain; background:#fff; }
.card div { padding:12px 14px 16px; }
.price { color:var(--green); font-weight:700; }
.out { color:#8a3b2a; font-size:.85rem; }
.hero { padding:12px 0 28px; }
.product { display:grid; grid-template-columns:1.1fr .9fr; gap:32px; }
.product img.heroimg { width:100%; background:#fff; cursor:zoom-in; }
#lightbox { position:fixed; inset:0; z-index:30; background:#111; display:flex; align-items:center; justify-content:center; }
#lightbox[hidden] { display:none; }
#lightbox img { max-width:100vw; max-height:100vh; width:auto; height:auto; object-fit:contain; }
#light-close { position:absolute; top:12px; right:16px; z-index:2; border:0; background:transparent; color:#fff; font-size:36px; cursor:pointer; }
#lightbox .nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; border:0; background:#fff; color:#111; width:40px; height:40px; cursor:pointer; font-size:22px; }
#lightbox .prev { left:12px; }
#lightbox .next { right:12px; }
.frame { position:relative; background:#fff; }
.frame .nav { position:absolute; top:50%; transform:translateY(-50%); border:0; background:#111; color:#fff; width:36px; height:36px; cursor:pointer; font-size:22px; line-height:1; }
.frame .nav.prev { left:8px; }
.frame .nav.next { right:8px; }
.solo .nav { display:none; }
.thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.thumbs button { padding:0; border:2px solid transparent; background:#fff; cursor:pointer; }
.thumbs button.on { border-color:var(--green); }
.thumbs img { width:72px; height:72px; object-fit:cover; display:block; }
.choices { display:grid; gap:12px; margin:16px 0; }
.choices label { display:grid; gap:4px; font-weight:700; }
.choices select { font:inherit; padding:8px; border:1px solid #d9d0c4; background:#fff; }
#sku { color:#555; font-size:.9rem; }
.prose { max-width:46rem; line-height:1.55; }
.prose .spec { max-width:100%; height:auto; margin:12px 0; }
.video { position:relative; padding-top:56%; margin:16px 0; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
a.more { color:var(--green); font-weight:700; }
@media (max-width:800px) { .product { grid-template-columns:1fr; } .bar { flex-wrap:wrap; gap:12px; } }
