* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #222; background: #fafafa; }
a { color: #333; text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.site-header { background: #111; color: #fff; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.site-header nav a { margin-left: 12px; color: #ddd; }
.hero { background: linear-gradient(135deg,#f5f5f5,#eaeaea); padding: 40px 0; text-align: center; }
.hero h2 { margin: 0 0 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.card { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.card img { width: 100%; height: 150px; object-fit: cover; background: #eee; }
.card-body { padding: 12px; }
.card h4 { margin: 0 0 6px; font-size: 16px; }
.price { font-weight: bold; }
.price-old { color: #b00; margin-left: 6px; font-weight: normal; }
.btn { display: inline-block; padding: 8px 12px; background: #eee; border: none; border-radius: 6px; cursor: pointer; }
.btn.primary { background: #0077ff; color: #fff; }
.btn.danger { background: #cc2b2b; color: #fff; }
.cart-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.cart-table th, .cart-table td { border-bottom: 1px solid #e5e5e5; padding: 8px; text-align: left; }
.cart-total { text-align: right; margin-top: 8px; }
.checkout { margin-top: 12px; display: flex; gap: 8px; }
.checkout input { padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
.site-footer { background: #111; color: #aaa; margin-top: 40px; }
.site-footer .container { padding: 20px 0; text-align: center; }