:root{
 --card-bg: rgba(18,22,45,.6);
 --card-border: rgba(255,255,255,.08);
 --radius:16px;
}
.cards-grid{
 display:grid;
 grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
 gap:20px;
 align-items:stretch;
}
.cards-grid > .card{
 display:flex;
 flex-direction:column;
 background:var(--card-bg);
 border:1px solid var(--card-border);
 border-radius:var(--radius);
 overflow:hidden;
 backdrop-filter: blur(6px);
}
.card__image{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.card__image img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__badge{
 position:absolute; top:10px; left:10px;
 background:rgba(136,84,208,.95); color:#fff;
 padding:4px 8px; border-radius:999px; font-size:12px; letter-spacing:.3px;
}
.card__body{ padding:16px; display:flex; flex-direction:column; gap:8px; }
.card__title{ font-weight:700; line-height:1.25; }
.card__desc{ opacity:.85; font-size:.95rem; }
.card__price{ margin-top:auto; font-weight:700; }
.card__actions{ display:flex; gap:10px; padding:16px; padding-top:0; }
.skeleton{ background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
 background-size:200% 100%; animation:shimmer 1.5s infinite; }
@keyframes shimmer{ to{ background-position-x:-200%; } }