*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; font-weight: 300; line-height: 1.6; color: #333; background: #fff; }
a { color: inherit; text-decoration: none; }

/* Header */
.site-header { display: flex; align-items: center; max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem; border-bottom: 1px solid #e5e5e5; }
.logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase; color: #111; margin-right: 2.5rem; flex-shrink: 0; }
.header-nav { display: flex; align-items: center; gap: 2rem; flex: 1; }
.header-nav a { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: #555; transition: color 0.2s; }
.header-nav a:hover, .header-nav a.active { color: #111; }
.header-right { margin-left: auto; flex-shrink: 0; }
.bag-link { position: relative; display: inline-block; color: #333; }
.bag-link svg { width: 22px; height: 22px; }
.bag-badge { position: absolute; top: -6px; right: -8px; background: #111; color: #fff; font-size: 0.6rem; font-weight: 500; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; display: none; }
.bag-badge.has-items { display: flex; }

/* Main */
main { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* Hero */
.hero-image-wrapper { overflow: hidden; border-radius: 4px; margin-top: 1rem; }
.hero-image { width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block; }
.hero h2 { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #888; margin-bottom: 0.75rem; }
.hero h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 600; color: #111; line-height: 1.2; margin-bottom: 0.5rem; }
.hero p { font-size: 0.85rem; color: #999; letter-spacing: 0.1em; text-transform: uppercase; }

/* Section headings */
.section-title { font-family: 'Playfair Display', serif; font-size: 1.75rem; font-weight: 400; text-align: center; color: #111; margin: 3rem 0 2rem; }

/* Products grid */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2rem; padding: 1rem 0 4rem; }
.product-card { text-align: center; }
.product-card a { display: block; }
.product-card .product-image { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: #f0f0f0; display: block; }
.product-card .product-name { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 400; color: #222; margin-top: 1rem; }
.product-card .product-price { font-size: 0.85rem; color: #777; margin-top: 0.25rem; }
.product-card .product-stock { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; }
.in-stock { color: #6b9b6b; }
.out-of-stock { color: #c97a7a; }

/* Product detail */
.product-detail { display: flex; gap: 4rem; padding: 0 0 4rem; }
.product-detail .product-image { flex: 1; max-width: 550px; aspect-ratio: 3/4; object-fit: cover; background: #f0f0f0; }
.product-detail .product-info { flex: 1; padding-top: 1rem; }
.product-detail .product-info h1 { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 400; color: #111; margin-bottom: 0.5rem; }
.product-detail .product-info .price { font-size: 1.25rem; color: #555; margin-bottom: 1.5rem; }
.product-detail .product-info .description { color: #666; line-height: 1.8; margin-bottom: 1.5rem; }
.product-detail .product-info .meta { font-size: 0.8rem; color: #999; text-transform: uppercase; letter-spacing: 0.1em; }
.back-link { display: inline-block; font-size: 0.8rem; color: #999; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2rem; transition: color 0.2s; }
.back-link:hover { color: #333; }

/* Add to bag button */
.btn-add-bag { display: inline-block; padding: 0.85rem 2.5rem; background: #111; color: #fff; border: none; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; }
.btn-add-bag:hover { background: #333; }
.btn-add-bag:disabled { background: #ccc; cursor: not-allowed; }

/* Checkout */
.checkout { max-width: 600px; margin: 0 auto; padding: 2rem 0 4rem; }
.checkout h2 { font-family: 'Playfair Display', serif; font-size: 1.75rem; font-weight: 400; color: #111; margin-bottom: 1.5rem; }
.cart-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #eee; }
.cart-item-image { width: 70px; height: 93px; background: #f0f0f0; object-fit: cover; flex-shrink: 0; }
.cart-item-details { flex: 1; }
.cart-item-name { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: #222; }
.cart-item-price { font-size: 0.8rem; color: #777; margin-top: 0.15rem; }
.cart-item-actions { display: flex; align-items: center; gap: 0.75rem; }
.cart-item-actions button { background: none; border: 1px solid #ddd; width: 28px; height: 28px; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #555; }
.cart-item-actions button:hover { border-color: #999; }
.cart-item-qty { font-size: 0.85rem; min-width: 1.5rem; text-align: center; }
.cart-item-remove { background: none; border: none; color: #c97a7a; font-size: 0.75rem; cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 0.5rem; }
.cart-total { font-family: 'Playfair Display', serif; font-size: 1.25rem; text-align: right; padding: 1.5rem 0; border-bottom: 1px solid #eee; }
.cart-empty { text-align: center; color: #999; padding: 4rem 0; }
.checkout-form { margin-top: 2rem; }
.checkout-form label { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: #777; margin-bottom: 0.35rem; }
.checkout-form input { width: 100%; padding: 0.7rem; border: 1px solid #ddd; font-family: 'Inter', sans-serif; font-size: 0.85rem; margin-bottom: 1rem; outline: none; transition: border-color 0.2s; }
.checkout-form input:focus { border-color: #111; }
.checkout-form .btn-place-order { width: 100%; padding: 1rem; background: #111; color: #fff; border: none; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; margin-top: 0.5rem; transition: background 0.2s; }
.checkout-form .btn-place-order:hover { background: #333; }
.order-success { text-align: center; padding: 4rem 0; }
.order-success h2 { margin-bottom: 0.5rem; }
.order-success p { color: #777; margin-bottom: 1.5rem; }

/* Footer */
.site-footer { border-top: 1px solid #e5e5e5; text-align: center; padding: 2rem; margin-top: 4rem; font-size: 0.75rem; color: #aaa; letter-spacing: 0.1em; }