:root { color-scheme: light; --ink:#172528; --muted:#53666a; --paper:#f7f4ec; --card:#fffdf8; --line:#d8d5c9; --pine:#123f3a; --amber:#d88c36; --blue:#22628c; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body { margin:0; color:var(--ink); background:var(--paper); font:17px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:#155b75; text-underline-offset:.2em; }
a:hover, a:focus-visible { color:#8c4a15; }
.skip-link { position:absolute; left:1rem; top:-5rem; padding:.7rem 1rem; background:white; z-index:10; }
.skip-link:focus { top:1rem; }
.site-header { background:var(--pine); color:white; }
.header-inner { max-width:1120px; margin:auto; min-height:78px; padding:1rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { color:white; text-decoration:none; font-size:1.35rem; font-weight:800; letter-spacing:.04em; }
.site-nav ul, .footer-nav { display:flex; flex-wrap:wrap; gap:1.2rem; margin:0; padding:0; list-style:none; }
.site-nav a { color:#f7f4ec; }
main { max-width:1120px; min-height:calc(100vh - 160px); margin:auto; padding:2rem 1.4rem 5rem; }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1.5rem; padding:0; list-style:none; color:var(--muted); font-size:.92rem; }
.breadcrumbs li:not(:last-child)::after { content:"/"; margin-left:.45rem; color:#99a3a2; }
h1 { max-width:820px; margin:.2rem 0 .6rem; font:800 clamp(2rem,5vw,4.2rem)/1.03 Georgia,serif; letter-spacing:-.025em; }
h2 { margin:2.3rem 0 1rem; font:700 1.55rem/1.2 Georgia,serif; }
.lede { max-width:720px; margin:0 0 2rem; color:var(--muted); font-size:1.12rem; }
.eyebrow { margin:0 0 .55rem; color:#8c4a15; font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero { padding:3rem 0 1.2rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.5rem; }
.button-link { display:inline-block; padding:.75rem 1.05rem; border:2px solid var(--pine); border-radius:.35rem; background:var(--pine); color:white; font-weight:750; text-decoration:none; }
.button-link.secondary { background:transparent; color:var(--pine); }
.category-grid, .product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:1.1rem; margin:1.4rem 0; }
.category-card, .product-card, .notice { border:1px solid var(--line); border-radius:.65rem; background:var(--card); box-shadow:0 8px 25px rgba(24,43,40,.055); }
.category-card, .product-card { padding:1.25rem; }
.category-card h2, .product-card h2 { margin:.15rem 0 .45rem; font:750 1.25rem/1.25 Georgia,serif; }
.category-card p, .product-card p { margin:.3rem 0; color:var(--muted); }
.product-card .facts { color:var(--ink); font-size:.95rem; }
.swatch { width:100%; height:8px; margin:-1.25rem -1.25rem 1rem; width:calc(100% + 2.5rem); border-radius:.65rem .65rem 0 0; background:var(--swatch,#85999c); }
.long-list { display:grid; grid-template-columns:1fr; gap:1rem; max-width:850px; }
.long-list .product-card { min-height:190px; display:grid; align-content:center; }
.bottle-opening { min-height:calc(100vh + 1px); }
.results-summary { padding:.8rem 1rem; border-left:4px solid var(--amber); background:#fff9ed; }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; }
.product-detail { display:grid; grid-template-columns:minmax(230px,.75fr) minmax(300px,1.25fr); gap:2rem; margin-top:2rem; align-items:start; }
.product-visual { min-height:350px; border-radius:.8rem; background:linear-gradient(145deg,var(--tone,#326b83),#e8dfc7); display:grid; place-items:center; color:white; font:800 1.15rem Georgia,serif; text-align:center; padding:2rem; }
.details { margin:1.3rem 0 1.8rem; }
.details div { display:grid; grid-template-columns:minmax(125px,.42fr) 1fr; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.details dt { color:var(--muted); font-weight:700; }
.details dd { margin:0; }
.notice { max-width:760px; padding:1.2rem 1.4rem; }
button { padding:.7rem 1rem; border:0; border-radius:.35rem; background:var(--pine); color:white; font:700 1rem system-ui,sans-serif; cursor:pointer; }
.status { min-height:1.6em; margin-top:1rem; padding:.6rem; background:#edf2ed; }
footer { border-top:1px solid var(--line); background:#eee9dc; }
.footer-inner { max-width:1120px; margin:auto; padding:1.5rem 1.4rem; color:var(--muted); font-size:.9rem; }
@media (max-width:700px) { .header-inner { align-items:flex-start; flex-direction:column; gap:.5rem; } .product-detail { grid-template-columns:1fr; } .product-visual { min-height:220px; } }