
:root { --primary: #2C5F3F; --bg: #FDF8F0; --font: 'Lora', serif; --text: #1a1a1a; }
body { margin: 0; padding: 0; font-family: var(--font); background: var(--bg); color: var(--text); }
a { text-decoration: none; color: inherit; }
header { padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.1); background: #fff; }
.logo { font-size: 28px; font-weight: bold; color: var(--primary); }
nav ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.btn { background: var(--primary); color: #fff; padding: 10px 20px; cursor: pointer; border: none; text-transform: uppercase; font-weight: bold; }
.hero { height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(to right, rgba(0,0,0,0.05), rgba(0,0,0,0.02)); padding: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.hero h1 { font-size: 3rem; color: var(--primary); margin: 0 0 10px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 40px; }
.product img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 1px solid rgba(0,0,0,0.1); }
.product h3 { margin: 10px 0 5px; font-size: 1.1rem; }
.product .price { font-weight: bold; color: var(--primary); margin-bottom: 10px; }
/* Product Detail */
.product-single { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.product-single img { width: 100%; max-width: 500px; object-fit: cover; margin:0 auto; display:block; }
.badge { display: inline-block; background: #e2e8f0; padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; margin-bottom: 10px; }
.reviews { margin-top: 40px; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 20px; }
.review { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.05); }
/* Cart / Checkout */
.cart-drawer { display:none; }
input, select { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; box-sizing: border-box; }
.form-group { margin-bottom: 15px; }
.cart-drawer-content { max-width: 800px; margin: 40px auto; background: #fff; padding: 20px; border: 1px solid rgba(0,0,0,0.1); }
