:root {
  --ink: #15171c; --muted: #606978; --paper: #f6f7f4; --panel: #fff; --line: #d9ded7;
  --accent: #9f4d52; --gold: #c4832d; --shadow: 0 24px 70px rgba(21,23,28,.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: linear-gradient(180deg,#f2eeee,var(--paper) 440px); }
.site-header { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px max(20px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid rgba(217,222,215,.86); background: rgba(246,247,244,.9); backdrop-filter: blur(16px); }
.brand, nav a { color: var(--ink); text-decoration: none; font-weight: 900; }
nav { display: flex; flex-wrap: wrap; gap: 6px; }
nav a { border-radius: 8px; padding: 9px 11px; color: var(--muted); }
nav a:hover { background: var(--panel); color: var(--ink); }
.hero, .product-grid, .story, .cart-preview { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.hero { min-height: calc(100vh - 67px); display: grid; grid-template-columns: minmax(0,.82fr) minmax(380px,.92fr); gap: clamp(34px,6vw,76px); align-items: center; padding: 54px 0; }
.hero img, .product-grid img { width: 100%; display: block; object-fit: cover; }
.hero img { height: 560px; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.eyebrow, .cart-preview span { margin: 0 0 14px; color: var(--accent); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
h1,h2,p { margin-top: 0; }
h1 { margin-bottom: 22px; font-size: clamp(3rem,5.6vw,5.7rem); line-height: .98; letter-spacing: 0; }
h2 { line-height: 1.05; letter-spacing: 0; }
p { color: var(--muted); font-size: 1.04rem; line-height: 1.68; }
.button, button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border: 0; border-radius: 8px; padding: 0 18px; background: var(--accent); color: #fff; font: inherit; font-weight: 850; text-decoration: none; cursor: pointer; }
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; padding-bottom: 76px; }
.product-grid article { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.product-grid img { height: 310px; }
.product-grid div { padding: 22px; }
.product-grid h2 { margin-bottom: 8px; font-size: 1.35rem; }
.product-grid strong { color: var(--gold); font-size: 1.45rem; }
.story { display: grid; grid-template-columns: .82fr 1fr; gap: 56px; padding: 70px 0; border-top: 1px solid var(--line); }
.store-notes { display: grid; gap: 14px; }
.store-notes p { margin: 0; border-left: 4px solid var(--accent); padding: 18px 20px; background: rgba(255,255,255,.72); }
.cart-preview { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 84px; border-radius: 8px; padding: 34px; background: var(--ink); color: #fff; }
.cart-preview h2 { margin-bottom: 8px; font-size: clamp(1.7rem,3vw,3rem); }
.cart-preview p { margin-bottom: 0; color: rgba(255,255,255,.76); }
.cart-preview button { background: #fff; color: var(--ink); }
@media (max-width: 900px) { .site-header, .hero, .product-grid, .story { grid-template-columns: 1fr; } .site-header, .cart-preview { align-items: flex-start; flex-direction: column; } .hero img { height: 380px; } }