/* Video listings, collection details, and existing search filters. */
.videos-content { gap: 24px; }
.listing-header, .listing-section, .listing-container { min-width: 0; width: 100%; }
.listing-header h1 { margin: 0; color: #f4f5f7; font: 700 clamp(22px,2.4vw,28px)/1.1 'Space Grotesk',sans-serif; letter-spacing: -.03em; overflow-wrap: anywhere; }
.listing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.listing-toolbar:has(> div:only-child:empty) { display: none; }
.listing-toolbar__actions { position: relative; flex: 0 0 auto; }
.filter-toggle, .collection-search__toggle, .collection-search__close { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.05); color: #f4f5f7; font: 600 13px Manrope,sans-serif; transition: background .15s,border-color .15s; }
.filter-toggle:hover, .filter-toggle[aria-expanded=true], .collection-search__toggle:hover, .collection-search__close:hover { background: rgba(255,255,255,.07); border-color: rgba(222,23,34,.8); }
.filter-toggle > svg, .collection-search svg { width: 17px; height: 17px; flex-shrink: 0; }
.filter-toggle.dropdown-toggle::after { display: none; }
.filter-toggle__badge { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 6px; background: #de1722; color: #fff; font: 700 10px ui-monospace,Menlo,monospace; }
.filter-menu { top: calc(100% + 8px); left: 0; min-width: 220px; max-width: calc(100vw - 32px); max-height: min(520px,70dvh); overflow-y: auto; margin: 0; padding: 6px; border-radius: 14px; background: #181b21; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px rgba(0,0,0,.6); z-index: 40; }
.filter-menu.show { animation: modal-enter .18s ease; }
.filter-menu__title { padding: 10px 12px 6px; color: #6b717c; font: 600 10px ui-monospace,Menlo,monospace; letter-spacing: .12em; text-transform: uppercase; }
.site-page .filter-menu__option { display: block; padding: 10px 12px; border-radius: 9px; color: #9aa1ad; font: 600 13px/1.4 Manrope,sans-serif; transition: background .15s,color .15s; }
.site-page .filter-menu__option:hover { background: rgba(255,255,255,.07); color: #f4f5f7; }
.site-page .filter-menu__option.is-active { background: rgba(222,23,34,.12); color: #f4f5f7; }
.collection-search { position: relative; min-width: 0; margin-left: auto; }
.collection-search__toggle, .collection-search__close { width: 36px; padding: 0; }
.collection-search__form { display: none; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.collection-search.is-open .collection-search__toggle { display: none; }
.collection-search__form.is-open { display: flex; animation: fade-in .2s ease; }
.collection-search__field { display: flex; align-items: center; width: min(320px,45vw); min-width: 0; height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.04); overflow: hidden; }
.collection-search__field:focus-within { border-color: rgba(222,23,34,.8); }
.collection-search__field input { min-width: 0; width: 100%; padding: 0 10px 0 0; border: 0; outline: none; color: #f4f5f7; background: transparent; font: 500 12.5px Manrope,sans-serif; }
.collection-search__field input::placeholder { color: #6b717c; }
.collection-search__submit { flex: 0 0 36px; height: 34px; border: 0; background: transparent; color: #9aa1ad; }
.site-page .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 32px 0 0; padding: 0; }
.site-page .pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); color: #9aa1ad; font: 600 12px Manrope,sans-serif; transition: border-color .15s,background .15s,color .15s; }
.site-page .pagination__link:hover { color: #f4f5f7; border-color: rgba(222,23,34,.8); background: rgba(255,255,255,.07); }
.site-page .pagination__link.is-active { color: #fff; background: #de1722; border-color: #de1722; }
.site-page .pagination__link.is-disabled { opacity: .4; pointer-events: none; }
.site-page .pagination__ellipsis { border-color: transparent; background: transparent; }
.empty-state { grid-column: 1/-1; padding: 40px 24px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.03); text-align: center; }
.empty-state strong { color: #f4f5f7; font: 700 20px 'Space Grotesk',sans-serif; }
.empty-state p { margin: 10px 0 0; color: #9aa1ad; font: 500 13px/1.6 Manrope,sans-serif; }
.listing-ad { margin-top: 32px; min-width: 0; max-width: 100%; }
.ad-slot { max-width: 100%; overflow: hidden; }
.collection-banner { display: flex; align-items: center; gap: 24px; margin-top: 24px; min-width: 0; }
.collection-banner > img{ flex: 0 0 144px; width: 144px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #252833; object-fit: cover; }
.collection-banner__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.collection-banner__copy strong{ display: block; margin: 0; color: #f4f5f7; font: 700 20px/1.2 'Space Grotesk',sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.collection-banner__stats{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: #9aa1ad; }
.collection-banner__stats { margin-top: 8px; }
.collection-banner__stats small{ font: 500 11px/1.5 ui-monospace,Menlo,monospace; letter-spacing: .02em; }

.site-page:has(.filter-modal) > .modal-backdrop { background: transparent; }
.filter-modal { padding: 0 !important; overflow: hidden; background: rgba(8,9,12,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.filter-modal.fade { transition: opacity .2s ease; }
.filter-modal .modal-dialog { width: calc(100% - 32px); max-width: 440px; height: calc(100% - 32px); margin: 16px auto; }
.filter-modal.fade .modal-dialog { transform: translateY(10px) scale(.98); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.filter-modal.show .modal-dialog { transform: none; }
.filter-modal .filter-content { max-height: 100%; padding: 28px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: rgba(24,27,33,.92); color: #f4f5f7; }
.filter-modal .modal-header { gap: 12px; align-items: flex-start; padding: 0 0 20px; border: 0; }
.filter-modal .modal-title { display: flex; align-items: center; gap: 10px; margin: 0; color: #f4f5f7; font: 700 24px/1.2 'Space Grotesk',sans-serif; letter-spacing: -.03em; }
.filter-modal .modal-title svg { width: 20px; height: 20px; }
.filter-modal .btn-close { flex-shrink: 0; width: 16px; height: 16px; padding: 10px; margin: -6px -10px 0 0; border-radius: 10px; opacity: .6; }
.filter-modal .btn-close:hover { opacity: 1; }
.filter-modal .modal-body { padding: 0; }
.filter-handle { display: none; }
.filter-block { min-width: 0; }
.filter-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.filter-choice { position: relative; margin: 0; cursor: pointer; }
.filter-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filter-choice > span { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 42px; padding: 10px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.03); color: #9aa1ad; font: 600 12px/1.4 Manrope,sans-serif; text-align: center; transition: background .15s,border-color .15s,color .15s; }
.filter-choice:hover > span { border-color: rgba(255,255,255,.2); color: #f4f5f7; }
.filter-choice input:checked + span { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.filter-choice input:focus-visible + span { outline: 2px solid #ff4b55; outline-offset: 2px; }
.filter-divider { height: 1px; margin: 22px 0; background: rgba(255,255,255,.08); }
.filter-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: #f4f5f7; font: 700 16px 'Space Grotesk',sans-serif; }
.filter-heading svg { width: 18px; height: 18px; }
.filter-fields { display: flex; flex-direction: column; gap: 18px; }
.filter-field { position: relative; min-width: 0; }
.filter-field > span { display: block; margin-bottom: 7px; color: #9aa1ad; font: 600 10px ui-monospace,Menlo,monospace; letter-spacing: .1em; text-transform: uppercase; }
.filter-chip-shell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(0,0,0,.25); }
.filter-chip-shell:focus-within { border-color: rgba(222,23,34,.8); }
.filter-chip-list { display: contents; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px; border: 0; border-radius: 7px; background: rgba(255,255,255,.1); color: #f4f5f7; font: 600 11px Manrope,sans-serif; }
.filter-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip button { width: 16px; height: 16px; padding: 0; border: 0; background: transparent; color: #9aa1ad; line-height: 1; }
.filter-chip button svg { width: 12px; height: 12px; }
.filter-chip-input { flex: 1 1 120px; min-width: 0; width: 100%; height: 30px; padding: 0; border: 0; outline: none; background: transparent; color: #f4f5f7; font: 500 12px Manrope,sans-serif; }
.filter-chip-input::placeholder { color: #6b717c; }
.filter-results { margin-top: 6px; max-height: 180px; overflow-y: auto; padding: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: #181b21; }
.filter-results:empty { display: none; }
.filter-result, .filter-category-choice { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #9aa1ad; font: 500 12px/1.4 Manrope,sans-serif; text-align: left; cursor: pointer; }
.filter-result:hover, .filter-result.is-active, .filter-category-choice:hover { background: rgba(255,255,255,.07); color: #f4f5f7; }
.filter-category-choice input { accent-color: #de1722; }
.filter-no-results { padding: 10px; color: #6b717c; font: 500 12px/1.4 Manrope,sans-serif; }
.filter-modal .filter-actions { display: flex; gap: 10px; padding: 20px 0 0; border: 0; }
.site-page .filter-reset, .filter-apply { display: inline-flex; justify-content: center; align-items: center; flex: 1; min-height: 44px; padding: 0 16px; margin: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: #f4f5f7; background: rgba(255,255,255,.03); font: 700 13px Manrope,sans-serif; transition: background .15s,border-color .15s; }
.site-page .filter-reset:hover { color: #fff; background: rgba(255,255,255,.07); }
.filter-apply { border-color: #de1722; background: #de1722; color: #fff; }
.filter-apply:hover { background: #f0222e; border-color: #f0222e; }

@media (max-width: 899px) {
  .collection-banner { gap: 18px; }
  .collection-banner > img{ flex-basis: 104px; width: 104px; }
  .collection-banner__copy strong{ font-size: 18px; }
  .filter-modal .filter-content { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-modal.fade .modal-dialog { transition-duration: .01ms; }
}