/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', sans-serif; line-height:1.6; color:#111; background:#f9f9f9; }

/* Navbar */
.navbar {
  display:flex; justify-content:space-between; align-items:center;
  background:#1a1a1a; color:#fff; padding:1rem 6%;
}
.logo { font-size:1.8rem; font-weight:bold; }
.nav-links { display:flex; list-style:none; gap:2.5rem; }
.nav-links a { color:#fff; text-decoration:none; }
.cart-icon { cursor:pointer; font-size:1.4rem; }

/* Breadcrumb */
.breadcrumb { padding:0.8rem 6%; background:#eee; font-size:0.95rem; }
.breadcrumb a { color:#0066cc; text-decoration:none; }

/* Hero */
.hero { text-align:center; padding:5rem 6%; background:linear-gradient(to right, #2c3e50, #3498db); color:#fff; }

/* Products Grid – Flexbox (tableless) */
.products { padding:3rem 6%; }
.product-grid {
  display:flex; flex-wrap:wrap; gap:2rem; justify-content:center;
}
.product-card {
  width:240px; border:1px solid #ddd; border-radius:10px; overflow:hidden;
  text-align:center; background:#fff; transition:transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { transform:translateY(-8px); box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.thumbnail { width:100%; height:240px; object-fit:cover; }
.price { font-weight:bold; color:#e74c3c; margin:0.6rem 0; font-size:1.2rem; }
.add-to-cart { background:#2ecc71; color:#fff; border:none; padding:0.7rem; cursor:pointer; width:85%; margin:0.5rem auto; border-radius:5px; }

/* Cart Overlay */
.cart-overlay {
  position:fixed; top:0; right:-360px; width:360px; height:100%;
  background:#fff; box-shadow:-5px 0 20px rgba(0,0,0,0.25); transition:right 0.35s ease;
  z-index:1000; overflow-y:auto;
}
.cart-overlay.active { right:0; }
.cart-content { padding:2rem 1.5rem; }
.cart-items { list-style:none; margin:1.5rem 0; }
.cart-items li { display:flex; justify-content:space-between; align-items:center; margin:1rem 0; border-bottom:1px solid #eee; padding-bottom:0.8rem; }
.qty { width:60px; text-align:center; padding:0.4rem; }
.total { font-weight:bold; text-align:right; font-size:1.3rem; margin:1.5rem 0; }
.checkout { background:#27ae60; color:#fff; padding:1rem; border:none; width:100%; border-radius:6px; cursor:pointer; margin-bottom:0.8rem; }
.close-cart { background:#c0392b; color:#fff; padding:1rem; border:none; width:100%; border-radius:6px; cursor:pointer; }

/* Product Detail */
.product-detail {
  display:flex; gap:4rem; max-width:1100px; margin:3rem auto; padding:0 6%;
}
.product-image img { max-width:100%; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.15); }
.product-info { flex:1; }
.description { margin:1.8rem 0; font-size:1.1rem; }
.add-section { display:flex; gap:1.5rem; align-items:center; }

/* Footer */
footer { text-align:center; padding:2rem; background:#1a1a1a; color:#ddd; margin-top:3rem; }

/* Responsive */
@media (max-width: 768px) {
  .navbar { flex-direction:column; gap:1rem; padding:1.2rem 4%; }
  .product-grid { gap:1.5rem; }
  .product-detail { flex-direction:column; gap:2rem; }
}