/* Basic reset and layout */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #1f2937; background: #f8fafc; }
a { color: #0ea5e9; text-decoration: none; }
a:hover { text-decoration: underline; }

body { min-height: 100vh; display: flex; flex-direction: column; }

.container { max-width: 960px; margin: 0 auto; padding: 1rem; }
.site-header { background: #0f172a; color: white; }
.site-title a { color: white; }
.site-main { padding: 2rem 0; flex: 1 0 auto; }
.site-footer { background: #0f172a; color: #e5e7eb; padding: 1rem 0; }

section h2 { margin-top: 0; font-size: 1.75rem; }

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.product-card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.product-media { background: #f1f5f9; display: flex; align-items: center; justify-content: center; height: 160px; }
.product-media img { max-width: 80%; max-height: 80%; object-fit: contain; }
.product-body { padding: 0.75rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.product-title { margin: 0; font-size: 1.1rem; }
.product-desc { margin: 0; color: #475569; font-size: 0.95rem; }
.product-price { margin: 0; font-weight: 600; }
.product-price span { color: #475569; font-weight: 500; margin-right: 0.25rem; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
.gallery-grid img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
.gallery-grid.cards .gallery-card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: transform .15s ease, box-shadow .15s ease; }
.gallery-grid.cards .gallery-card:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.08); }
.gallery-grid.cards .gallery-card img { height: 160px; border-radius: 0; }
.gallery-grid.cards .gallery-card figcaption { padding: 0.5rem 0.75rem; font-size: 0.9rem; color: #334155; }

/* Carousel */
.carousel { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid #e5e7eb; background: #ffffff; }
.carousel-track { display: flex; transition: transform 400ms ease-in-out; will-change: transform; }
.carousel-slide { min-width: 100%; flex: 0 0 100%; display: flex; flex-direction: column; }
.carousel-slide img { width: 100%; height: 240px; object-fit: cover; display: block; }
.carousel-slide figcaption { padding: 0.5rem 0.75rem; font-size: 0.9rem; color: #334155; }

@media (min-width: 768px) {
  .carousel-slide { min-width: 50%; flex-basis: 50%; }
  .carousel-slide img { height: 280px; }
}