.filters{ display:flex; gap:14px; flex-wrap:wrap; margin:8px 0 14px; }
.filters a{ text-decoration:none; padding:8px 12px; border-radius:999px; background:linear-gradient(180deg,#ffffff10,#00000025); border:1px solid rgba(255,255,255,.08); color:#e8e3ee; font-weight:600; box-shadow:0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04); }
.filters a.active{ background:radial-gradient(120% 100% at 50% -30%, #6a0dad 0%, #3a1a62 70%); color:#fff; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; }
.card{ background:#0a0a0f; border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.card img{ width:100%; display:block;  object-fit: contain; }
.card-title{ padding:10px 10px 6px; font-weight:700; font-size:14px; color:#f4f2f8; }
.meta-row{ display:flex; gap:8px; align-items:center; padding:0 10px 12px; font-size:12px; color:#cfcfd4; }
.badge{ display:inline-block; padding:2px 6px; border-radius:8px; background:#5d2ea0; color:#fff; font-weight:800; font-size:12px; }
@media (max-width: 640px){ .grid{ grid-template-columns:repeat(3, 1fr); gap:12px; } .card-title{ font-size:12px; } }

/* === Streaming HERO normalization (desktop 3-up) === */
.vf-hero-track{display:flex;gap:12px;transition:transform .5s ease}
.vf-hero-slide{flex:0 0 100%}
.vf-hero-card{background-size:cover;background-position:center}
.vf-hero-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media (min-width:1024px){
  .vf-hero-slide{flex:0 0 calc((100% - 24px)/3)}
  .vf-hero{max-width:1280px;margin-left:auto;margin-right:auto;box-sizing:border-box;padding:0 12px}
}
.vf-hero-card, .vf-hero-slide{aspect-ratio:16/9}