.lib-grid { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.lib-card { background: var(--surface, transparent); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.lib-logo { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--border); border-radius: 8px; overflow: hidden; font-size: 28px; font-weight: 700; color: var(--muted); }
.lib-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lib-title { font-weight: 600; overflow-wrap: anywhere; }
.lib-search { margin: 0; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.lib-search .search-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-search .search-row .input[type=search] { flex: 1 1 220px; }
.vod-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.vod-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-content: stretch; }
.vod-cards .product-card { height: 100%; }
.vod-layout > .lib-search { justify-content: center; }
@media (min-width: 900px) {
    .vod-layout:has(.vod-cards) { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
}