/* styles.css - improved */
:root{
  --accent:#2b6cb0;
  --muted:#6b7280;
  --card:#ffffff;
  --bg:#f3f4f6;
}
*{box-sizing:border-box}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0; background:var(--bg); color:#111827;
}
.site-header{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  padding:16px 24px; background:linear-gradient(90deg,#fff,#eef2ff); box-shadow:0 2px 6px rgba(2,6,23,0.06);
}
.site-header h1{margin:0;font-size:1.1rem;flex:1}
.site-header nav{display:flex;gap:8px;flex-wrap:wrap}
.site-header nav input,.site-header nav select{
  padding:6px 8px;border-radius:6px;border:1px solid #d1d5db
}
.site-header nav button{
  background:var(--accent); color:#fff; border:0; padding:8px 12px; border-radius:8px; cursor:pointer;
}

.banner{
  text-align:center;padding:30px 10px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.05);margin-bottom:20px
}
.banner h2{margin:0 0 10px;font-size:1.4rem}
.banner p{margin:0;color:var(--muted)}

main{max-width:1200px;margin:24px auto;padding:0 16px; display:flex; gap:20px; align-items:flex-start;}
.products{flex:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}

.card{
  background:var(--card); padding:14px; border-radius:10px; box-shadow:0 6px 18px rgba(15,23,42,0.06); display:flex; flex-direction:column
}
.card img{width:100%; height:180px; object-fit:cover; border-radius:8px}
.card h3{margin:10px 0 6px; font-size:1rem}
.card p{margin:0 0 8px; color:var(--muted); font-size:0.9rem;flex-grow:1}
.card .price{font-weight:700; margin-bottom:8px}
.card button{background:#111827;color:#fff;border:0;padding:8px 10px;border-radius:8px;cursor:pointer}

.cart{
  width:320px; background:var(--card); padding:12px; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,0.08);
}
.hidden{display:none}
.cart ul{list-style:none;padding:0;margin:0;max-height:340px;overflow:auto}
.cart li{display:flex; justify-content:space-between; padding:8px 0;border-bottom:1px solid #eef2ff}
.cart-footer{margin-top:12px; display:flex; gap:8px; align-items:center; justify-content:space-between}
.cart-footer button{padding:8px 10px;border-radius:8px;border:0;cursor:pointer}

footer{margin-top:36px;text-align:center;padding:18px 8px;color:var(--muted);font-size:0.9rem}
@media(max-width:800px){
  main{flex-direction:column}
  .cart{width:100%}
}