:root { color-scheme: light; --bg:#f7f6f2; --surface:#fff; --fg:#181815; --muted:#66645e; --line:#d9d7cf; --accent:#315b43; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:16px; top:16px; background:#fff; padding:12px; z-index:2; }
.site-header,footer { display:flex; justify-content:space-between; gap:24px; padding:24px max(24px,calc((100vw - 1180px)/2)); border-bottom:1px solid var(--line); }
footer { border-top:1px solid var(--line); border-bottom:0; color:var(--muted); }
main { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:36px 0 72px; }
.breadcrumbs { display:flex; gap:10px; color:var(--muted); font-size:14px; }
.product-hero { padding:72px 0 48px; max-width:760px; }
.eyebrow { color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
h1 { margin:12px 0 20px; font:500 clamp(48px,8vw,92px)/.95 Georgia,serif; }
.product-hero>p:last-child { color:var(--muted); font-size:19px; line-height:1.7; }
.variant { padding:48px 0; border-top:1px solid var(--line); }
.variant-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:24px; }
.variant-heading h2 { margin:0; font:500 clamp(28px,4vw,46px)/1.05 Georgia,serif; }
.amazon-cta { display:inline-flex; padding:14px 20px; background:var(--fg); color:#fff; text-decoration:none; white-space:nowrap; }
.amazon-unavailable { color:var(--muted); }
.product-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.product-image { width:100%; aspect-ratio:1; object-fit:cover; background:var(--surface); }
li { margin:.6em 0; line-height:1.6; }
dl>div { display:grid; grid-template-columns:minmax(150px,.4fr) 1fr; border-top:1px solid var(--line); padding:12px 0; }
dt { color:var(--muted); } dd { margin:0; }
@media (max-width:720px) { .variant-heading { align-items:flex-start; flex-direction:column; } .product-gallery { grid-template-columns:1fr 1fr; } dl>div { grid-template-columns:1fr; gap:6px; } }