:root{
  --brand:#d32f2f;
  --brand-dark:#1b1b1b;
  --accent:#ffd54f;
  --muted:#6b6b6b;
  --bg:#ffffff;
  --max-width:1200px;
  --gap:1rem;
  --radius:8px;
  --container-padding:1rem;
  --shadow: 0 6px 18px rgba(0,0,0,0.08);
  --transition:200ms ease;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:#111;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

/* Utility container */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}

/* Header */
.site-header{border-bottom:1px solid #eee;background:#fff;position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;gap:1rem;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}
.brand-logo{width:40px;height:40px;object-fit:contain}
.brand-name{font-weight:700;font-size:1.1rem;color:var(--brand-dark)}
.search{flex:1;display:flex;gap:.5rem}
.search input[type="search"]{flex:1;padding:.5rem .75rem;border:1px solid #ddd;border-radius:6px}
.btn{display:inline-block;padding:.5rem .75rem;border-radius:6px;text-decoration:none;border:0;cursor:pointer}
.btn-primary{background:var(--brand);color:#fff}
.btn-cta{background:var(--brand-dark);color:#fff;padding:.75rem 1rem}
.btn-outline{background:transparent;border:1px solid #ddd;color:var(--brand-dark)}
.header-actions{display:flex;gap:.75rem;align-items:center}
.icon-link{color:var(--muted);text-decoration:none}
.cart{position:relative}
.cart-count{background:var(--brand);color:#fff;padding:2px 6px;border-radius:999px;font-size:.8rem;margin-left:.4rem}

/* Main nav */
.main-nav{background:var(--brand-dark);color:#fff}
.nav-inner{display:flex;gap:1rem;padding:.5rem 0}
.main-nav a{color:#fff;text-decoration:none;padding:.5rem .5rem;font-weight:600;letter-spacing:.02em}
.main-nav a.sale{color:var(--accent)}

/* Hero */
.hero{padding:1.5rem 0;background:linear-gradient(180deg,#fff,#fafafa)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
.hero-content h1{font-size:1.6rem;margin:0 0 .5rem}
.lead{color:var(--muted);margin-bottom:1rem}
.hero-image img{width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow)}

/* Promos */
.promos{padding:1.25rem 0}
.promo-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.promo-card{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:10px;background:#fff;box-shadow:var(--shadow)}
.promo-card img{width:96px;height:96px;object-fit:cover;border-radius:8px}
.promo-card h3{margin:0;font-size:1.05rem}

/* Categories */
.top-categories{padding:1.25rem 0}
.categories-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.cat{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:8px;background:#fff;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.cat img{width:48px;height:48px}

/* Products */
.featured{padding:1.25rem 0}
.products-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.product-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.product-card img{width:100%;height:180px;object-fit:cover}
.product-body{padding:.75rem}
.product-title{margin:.25rem 0;font-size:1rem}
.price{color:var(--brand);font-weight:700}
.old{text-decoration:line-through;color:var(--muted);margin-right:.5rem}
.badge.sale{background:var(--brand);color:#fff;padding:2px 6px;border-radius:6px;font-size:.75rem;margin-left:.5rem}

/* Footer */
.site-footer{background:#111;color:#fff;padding:1.25rem 0;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.footer-grid h4{margin:0 0 .5rem}
.footer-bar{border-top:1px solid rgba(255,255,255,0.06);padding:.75rem 0;margin-top:1rem}
.site-footer a{color:#fff;text-decoration:underline}

/* Responsive breakpoints */
@media(min-width:700px){
  .hero-grid{grid-template-columns:1fr 480px}
  .promo-grid{grid-template-columns:repeat(3,1fr)}
  .categories-grid{grid-template-columns:repeat(4,1fr)}
  .products-grid{grid-template-columns:repeat(4,1fr)}
  .header-inner{gap:1.5rem}
  .search input[type="search"]{max-width:640px}
}

@media(min-width:1000px){
  .container{padding:0 1.5rem}
}