:root { --bg:#fff; --fg:#111; --muted:#6b7280; --brand:#2563eb; --bord:#eee; }
html,body{margin:0;padding:0;font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;background:var(--bg);color:var(--fg)}
.container{width:min(1100px,92%);margin-inline:auto}
.touch-lg *{font-size:18px}
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);border-bottom:1px solid var(--bord);}
.topbar .container{display:flex;gap:.5rem;padding:.8rem 0;align-items:center}
.toolbar{display:flex;gap:.75rem;flex-wrap:wrap;padding:1rem 0 0}
.chips{display:flex;gap:.5rem;overflow:auto;padding-bottom:.5rem}
.chip{padding:.45rem .8rem;border:1px solid var(--bord);border-radius:999px;background:#fff;cursor:pointer;white-space:nowrap}
.chip[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.grid{list-style:none;padding:0;margin:1rem 0 5.5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{border:1px solid var(--bord);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.card img{width:100%;height:180px;object-fit:cover;background:#f3f4f6}
.card .pad{padding:.9rem;display:flex;flex-direction:column;gap:.5rem}
.card h3{margin:0;font-size:20px}
.card .desc{color:var(--muted);font-size:16px}
.card .row{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.price{font-weight:600}
.btn{min-height:48px;padding:.75rem 1rem;border-radius:14px;border:1px solid var(--bord);background:#fff;cursor:pointer}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-secondary{background:#111;color:#fff;border-color:#111}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.action-bar{position:sticky;bottom:0;z-index:50;display:flex;gap:.75rem;padding:.75rem;background:rgba(255,255,255,.97);border-top:1px solid var(--bord)}
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);padding:.6rem .9rem;border-radius:12px;background:#111;color:#fff;opacity:0;transition:.25s;z-index:60}
.toast.show{opacity:1}
.empty{text-align:center;color:var(--muted);padding:2rem 0}