:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f7f3ed; color: #1d1a16; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: inherit; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1rem, 4vw, 3rem); background: #fffaf2; border-bottom: 1px solid #e5dacb; position: sticky; top: 0; }
.brand { font-weight: 800; text-decoration: none; }
nav { display: flex; gap: 1rem; }
.container { width: min(1100px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0; }
.narrow { width: min(760px, calc(100% - 2rem)); }
.hero { padding: 4rem clamp(1rem, 5vw, 4rem); background: #261f17; color: #fff8ed; border-radius: 2rem; margin-bottom: 3rem; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 5rem); line-height: .95; max-width: 850px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: #ffc56e; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card { background: #fffaf2; border: 1px solid #e5dacb; border-radius: 1.25rem; padding: 1rem; box-shadow: 0 10px 30px rgba(54, 39, 20, .08); }
.product-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .9rem; background: #f1e5d2; }
.product-link { display: block; text-decoration: none; }
.storefront-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.storefront-gallery img:first-child { grid-row: span 2; }
.storefront-gallery img:not(:first-child) { aspect-ratio: 1 / 1; }
.storefront-gallery img:nth-child(n + 4) { display: none; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 2rem; align-items: start; }
.gallery-main { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1.25rem; background: #f1e5d2; border: 1px solid #e5dacb; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .75rem; margin-top: .75rem; }
.thumb { border: 2px solid transparent; border-radius: .8rem; padding: .25rem; background: #fffaf2; cursor: pointer; }
.thumb.active { border-color: #dc6b21; }
.thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .55rem; display: block; }
.product-info { position: sticky; top: 5rem; }
@media (max-width: 760px) { .product-detail { grid-template-columns: 1fr; } .product-info { position: static; } }
.price { font-size: 1.3rem; font-weight: 800; }
.button { display: inline-flex; justify-content: center; border: 0; border-radius: 999px; background: #1d1a16; color: #fff8ed; padding: .8rem 1rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.button.primary { background: #dc6b21; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.cart-line { display: grid; grid-template-columns: 1fr 5rem auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid #e5dacb; }
input, textarea { width: 100%; border: 1px solid #d2c2ad; border-radius: .8rem; padding: .8rem; font: inherit; background: #fff; }
label { display: grid; gap: .35rem; margin: .75rem 0; font-weight: 700; }
.inline { display: flex; align-items: center; gap: .5rem; }
.inline input { width: auto; }
.form-card { margin: 1.5rem 0; }
.total { text-align: right; font-size: 1.2rem; }
.status { min-height: 1.5rem; color: #6b4d1f; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.account-hero h1 { font-size: clamp(2rem, 5vw, 3.75rem); }
.account-actions { justify-content: space-between; }
.stacked-list { display: grid; gap: .75rem; }
.list-item { display: grid; gap: .25rem; padding: .9rem; border: 1px solid #e5dacb; border-radius: .9rem; background: #fff; }
.error { color: #a21515; }
.success { text-align: center; }
pre { white-space: pre-wrap; background: #1d1a16; color: #fff8ed; padding: 1rem; border-radius: 1rem; overflow: auto; }