:root {
  --black: #000000;
  --white: #FFFFFF;
  --beige: #D4C3A3;
  --brown: #8B6B4A;
  --radius: 10px;
  --container: 1100px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--black); background: var(--white); }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.site-header { position: sticky; top: 0; backdrop-filter: blur(8px); background: rgba(255,255,255,0.8); border-bottom: 1px solid #00000010; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 16px; }
.logo img { height: 40px; width: auto; }
.nav a { margin: 0 10px; color: var(--black); text-decoration: none; font-weight: 400; }
.nav a:hover { text-decoration: underline; }
.cart-button { border: 1px solid var(--beige); background: var(--white); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.cart-count { background: var(--black); color: var(--white); border-radius: 50%; padding: 2px 6px; margin-right: 6px; font-size: 12px; }

.hero { display: grid; place-items: center; min-height: 86vh; background: linear-gradient(180deg, var(--white), #f9f6f1); border-bottom: 1px solid #00000010; }
.hero-media { text-align: center; padding: 80px 20px; }
.hero-badge { display: inline-block; background: var(--beige); color: var(--black); padding: 6px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .08em; }
.hero-title { font-size: clamp(40px, 7vw, 72px); font-weight: 300; margin: 16px 0 6px; }
.hero-sub { font-size: 18px; color: #333; margin-bottom: 24px; }
.btn { display: inline-block; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--black); text-decoration: none; color: var(--black); }
.btn.primary { background: var(--black); color: var(--white); border-color: var(--black); }
.btn.ghost { background: transparent; }
.btn.link { border: none; padding: 0; text-decoration: underline; border-radius: 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 60px 0; }
.tile { border: 1px solid #00000015; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; background: var(--white); }
.tile-img.placeholder { background: linear-gradient(135deg, #eee, #ddd); aspect-ratio: 4/5; }
.tile-meta { display:flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-top: 1px solid #00000010; }
.tile-meta span { color: #444; font-size: 14px; }

.banner { padding: 20px 0 80px; }
.banner-inner { background: var(--beige); border-radius: var(--radius); padding: 40px; display: grid; gap: 10px; }

.page-header { display:flex; align-items: center; justify-content: space-between; gap: 12px; padding: 40px 0 20px; }
.page-header h1 { font-weight: 400; }
.filters select { padding: 10px 12px; border-radius: 999px; border: 1px solid #00000030; background: var(--white); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; padding: 20px 0 60px; }
.product-card { border: 1px solid #00000015; border-radius: var(--radius); overflow:hidden; background: var(--white); display:flex; flex-direction:column; }
.product-card .img-wrap { position: relative; overflow: hidden; }
.product-card img { width:100%; height:auto; aspect-ratio:4/5; object-fit: cover; transition: transform .4s ease; }
.product-card:hover img { transform: scale(1.03); }
.product-card .meta { display:flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-top: 1px solid #00000010; }
.price { color: #333; }
.add-btn { border:none; background: var(--black); color: var(--white); padding: 10px 14px; border-radius: 999px; cursor: pointer; }

.masonry { columns: 3 280px; column-gap: 16px; padding-bottom: 60px; }
.m-item { break-inside: avoid; margin-bottom: 16px; border-radius: var(--radius); border: 1px solid #00000015; }

.narrow { max-width: 800px; }
.prose p { line-height: 1.7; }
blockquote { border-left: 4px solid var(--beige); padding-left: 12px; color: #333; }

.contact-form { display:grid; gap: 14px; padding-bottom: 60px; }
.contact-form input, .contact-form textarea { width:100%; padding: 12px; border:1px solid #00000025; border-radius: 8px; background: #fff; }
.small { font-size: 12px; }

.site-footer { border-top: 1px solid #00000010; margin-top: 20px; }
.footer-inner { padding: 24px 0; display:grid; gap: 6px; }
.muted { color: #555; }

.cart-drawer { position: fixed; inset: 0; display: none; z-index: 50; }
.cart-drawer.open { display:block; }
.cart-overlay { position:absolute; inset:0; background:#00000055; }
.cart-panel { position:absolute; right:0; top:0; bottom:0; width:min(420px, 100%); background:#fff; padding: 18px; display:flex; flex-direction:column; }
.cart-header { display:flex; align-items:center; justify-content: space-between; border-bottom:1px solid #00000010; padding-bottom: 8px; }
.cart-close { background:transparent; border:none; font-size: 28px; cursor:pointer; }
.cart-items { flex:1; overflow:auto; display:grid; gap: 10px; padding: 12px 0; }
.cart-item { display:grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items:center; }
.cart-item img { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid #00000015; }
.cart-item .ci-meta { display:grid; }
.cart-item .ci-actions button { background:transparent; border:none; cursor:pointer; padding: 6px; }
.cart-footer { border-top:1px solid #00000010; padding-top: 10px; display:grid; gap:10px; }
.cart-total { display:flex; align-items:center; justify-content: space-between; font-weight:500; }
.checkout-btn { background: var(--black); color: var(--white); border:none; padding: 12px 14px; border-radius: 999px; cursor: pointer; }

@media (max-width: 760px) {
  .nav { display:none; }
}