*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#f8fafc;color:#0f172a}
a{color:inherit}
.nav{display:flex;gap:1rem;align-items:center;padding:.75rem 1rem;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.06);position:sticky;top:0;z-index:10}
.brand{font-weight:700;text-decoration:none}
.search{margin-left:auto;display:flex;gap:.5rem}
.search input,.search select{padding:.5rem .6rem;border:1px solid #e2e8f0;border-radius:.5rem}
.search button,.btn{padding:.55rem .9rem;border:0;border-radius:.5rem;background:#2563eb;color:#fff;cursor:pointer}
.container{max-width:1100px;margin:1.5rem auto;padding:0 1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.06);display:flex;flex-direction:column}
.card img{width:100%;height:150px;object-fit:cover;background:#e5e7eb}
.card-body{padding:1rem;display:grid;gap:.5rem}
.price{font-weight:700}
.add{display:flex;gap:.5rem;align-items:center}
.add input[type=number]{width:70px}
.cart-icon{font-weight:600;text-decoration:none}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:.75rem;overflow:hidden}
th,td{padding:.75rem;border-bottom:1px solid #e2e8f0;text-align:left}
.total{font-size:1.1rem}
.muted{color:#64748b}
@media (max-width:800px){.grid{grid-template-columns:1fr}}