:root { --border:#e5e7eb; --text:#111827; --muted:#6b7280; --accent:#111827; --bg:#f9fafb; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, sans-serif; color:var(--text); background:var(--bg); }
.topbar { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 24px; background:#fff; border-bottom:1px solid var(--border); }
h1 { margin:0; font-size:26px; } p { margin:4px 0 0; color:var(--muted); }
main { max-width:1280px; margin:0 auto; padding:22px; }
.filters { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:12px; margin-bottom:22px; }
input, select { width:100%; padding:12px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:15px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.card { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 20px rgba(0,0,0,.04); }
.card img { width:100%; height:260px; object-fit:cover; background:#f3f4f6; }
.card-body { padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.brand { font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.item { font-weight:700; line-height:1.25; min-height:45px; }
.meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:14px; }
.price { font-size:20px; font-weight:800; }
.qty-control { display:flex; align-items:center; gap:8px; margin-top:auto; }
.qty-control button, .cart-button, .primary-button, .icon-button { cursor:pointer; border:0; border-radius:10px; font-weight:700; }
.qty-control button { width:38px; height:38px; font-size:20px; background:#e5e7eb; }
.qty-control input { text-align:center; padding:10px; }
.add-button, .primary-button, .cart-button { background:var(--accent); color:#fff; padding:12px; }
.add-button { width:100%; margin-top:10px; }
.cart-panel { position:fixed; right:-420px; top:0; width:400px; max-width:100%; height:100vh; background:#fff; z-index:30; box-shadow:-14px 0 30px rgba(0,0,0,.15); transition:right .2s ease; display:flex; flex-direction:column; }
.cart-panel.open { right:0; }
.cart-header { display:flex; justify-content:space-between; align-items:center; padding:18px; border-bottom:1px solid var(--border); }
.icon-button { width:38px; height:38px; background:#f3f4f6; font-size:24px; }
.cart-items { padding:14px; overflow:auto; flex:1; }
.cart-row { border-bottom:1px solid var(--border); padding:12px 0; display:grid; gap:8px; }
.cart-row-title { font-weight:700; }
.checkout { border-top:1px solid var(--border); padding:16px; display:grid; gap:10px; }
.message { color:#047857; font-weight:700; }
.empty { color:var(--muted); padding:20px; text-align:center; }
@media (max-width:760px) { .filters { grid-template-columns:1fr; } .topbar { align-items:flex-start; flex-direction:column; } }