.filters { display:flex; gap:8px; margin:8px 0 4px; flex-wrap:wrap; }
.pill { border:1px solid #cfd3d7; background:#fff; border-radius:999px; padding:6px 12px; cursor:pointer; font:inherit; }
.pill.active { background:#042d4d; color:#fff; border-color:#042d4d; }

.card-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width:900px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .card-grid{ grid-template-columns: 1fr; } }

.card { display:flex; flex-direction:column; border:1px solid #e6e6e6; border-radius:12px; overflow:hidden; background:#fff; }
.card-img { width:100%; height:180px; object-fit:cover; background:#f0f2f4; }
.card-body { padding:16px; display:flex; flex-direction:column; gap:10px; }
.card-title { margin:0; font-size:1.1rem; font-weight:700; }
.card-text { margin:0; color:#333; }
.card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:#111; }
.price { font-weight:700; }
.badge { background:#eef2f6; border:1px solid #d4dbe3; border-radius:999px; padding:2px 8px; font-size:.8rem; }
.card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }