/*
Theme Name: YourStore Starter
Author: You
Description: Minimal WooCommerce ready starter theme
Version: 1.0
*/

:root{--accent:#b33}
body{font-family:Inter, Arial, sans-serif;margin:0;background:#f6f6f7;color:#111}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.site-header{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.04)}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{background:#fff;padding:12px;border-radius:10px}
.product-card img{width:100%;height:220px;object-fit:cover;border-radius:8px}
.site-footer{background:#111;color:#eee;padding:28px 0;margin-top:28px}
@media (max-width:900px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.products-grid{grid-template-columns:1fr}}
/* Hero Banner */
.hero-banner {
  background: url('https://picsum.photos/1600/600?blur') no-repeat center/cover;
  border-radius: 14px;
  padding: 100px 20px;
  text-align: center;
  color: #fff;
  margin-bottom: 40px;
}
.hero-banner h1 { font-size: 2.5rem; margin-bottom: 12px; }
.hero-banner p { font-size: 1.2rem; margin-bottom: 20px; }
.btn-primary {
  background: var(--accent);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}
.btn-primary:hover { background: #111; }

/* Section titles */
.section-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: 700;
}

/* Featured Categories */
.featured-categories .categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 20px;
}
.category-card {
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  text-align:center;
  transition:.3s;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.category-card img { width:100%; height:180px; object-fit:cover; }
.category-card:hover { transform:translateY(-4px); }

/* Trending Products */
.trending-products .products-slider .product {
  padding: 10px;
}
.trending-products h2 { margin-bottom:15px; }

/* Newsletter */
.newsletter {
  background:#fff;
  padding:40px 20px;
  margin:40px 0;
  border-radius:12px;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.newsletter-form {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:15px;
}
.newsletter-form input {
  padding:10px;
  border:1px solid #ccc;
  border-radius:6px;
  width:240px;
}
.newsletter-form button {
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:10px 20px;
  cursor:pointer;
}
.newsletter-form button:hover { background:#111; }