* { box-sizing: border-box; }
body { font-family: -apple-system, Arial, sans-serif; margin: 0; color: #222; background: #f7f7f5; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

.site-header { background: #2e5339; color: #fff; padding: 16px 0; }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; }
.site-header .logo { color: #fff; font-weight: bold; font-size: 1.2em; text-decoration: none; }
.site-header nav a { color: #fff; margin-left: 20px; text-decoration: none; }

main.wrap { padding: 30px 20px; min-height: 60vh; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.product-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
.product-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; }
.product-card h2 { font-size: 1.05em; margin: 10px 0 4px; }
.product-card a { color: #2e5339; text-decoration: none; }
.price { font-weight: bold; color: #2e5339; }
.out-of-stock { color: #b33; font-style: italic; }

.notice { background: #e6f4ea; padding: 10px 14px; border-radius: 6px; }
.error { color: #b33; }

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { text-align: left; padding: 10px; border-bottom: 1px solid #eee; }
.cart-total { font-size: 1.2em; margin-top: 16px; }

.button, button { background: #2e5339; color: #fff; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; }
.button:hover, button:hover { background: #24422d; }

.checkout-form label { display: block; margin-bottom: 12px; }
.checkout-form input, .checkout-form textarea { width: 100%; max-width: 400px; padding: 8px; margin-top: 4px; }

.site-footer { text-align: center; padding: 20px; color: #777; }