:root{
  --bg:#f6f7fb;--card:#fff;--accent:#ff4d6d;--muted:#666;--gap:1rem;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial,Helvetica,sans-serif;background:var(--bg);color:#222}
.site-header{
  display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.04);position:sticky;top:0;z-index:40;
}
.brand{margin:0;font-size:1.25rem}
.header-actions{display:flex;align-items:center;gap:.5rem}
button{padding:.5rem .8rem;border-radius:8px;border:0;background:var(--accent);color:#fff;cursor:pointer}
button.ghost{background:transparent;color:var(--accent);border:1px solid #eee}
button.secondary{background:#ddd;color:#222}
.close{background:transparent;border:0;font-size:1.05rem;cursor:pointer}
.hero{padding:2rem 1.25rem;text-align:center}
.controls{display:flex;gap:.5rem;padding:0 1.25rem;margin-bottom:.5rem}
.controls input,.controls select{flex:1;padding:.6rem;border-radius:8px;border:1px solid #e6e6e6}

.products-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding:0 1.25rem 2rem;
}
.card{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.06);display:flex;flex-direction:column}
.card img{width:100%;height:200px;object-fit:cover;border-radius:8px}
.card h4{margin:.6rem 0 0;font-size:1rem}
.card .price{font-weight:700;color:var(--accent);margin-top:.35rem}
.card .actions{margin-top:auto;display:flex;gap:.5rem}

.cart-modal, .auth-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:1rem;
}
.cart-content, .auth-content{width:420px;background:#fff;padding:1rem;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.hidden{display:none}

#cart-items{list-style:none;padding:0;margin:0;max-height:260px;overflow:auto}
#cart-items li{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #f0f0f0}
.cart-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;gap:.5rem}

.auth-content .tabs{display:flex;gap:.5rem;margin-bottom:.75rem}
.auth-form{display:flex;flex-direction:column;gap:.5rem}
.auth-form input{padding:.6rem;border-radius:8px;border:1px solid #e6e6e6}

@media (max-width:1000px){ .products-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .card img{height:150px}
  .cart-content,.auth-content{width:92%}
}
@media (max-width:420px){
  .products-grid{grid-template-columns:1fr}
  .controls{flex-direction:column}
}