:root {
        --nav-height: 96px;
        }

        /* Full-bleed background rail behind sticky filter panel (match media/news) */
        #catalog-filters.filter-panel { position: sticky; top: var(--nav-height, 100px); z-index: 400; isolation: isolate; background: transparent; }
        #catalog-filters.filter-panel::before {
            content: "";
            position: absolute;
            top: 0; bottom: 0; left: 50%; right: 50%;
            margin-left: -50vw; margin-right: -50vw;
            background: rgba(82, 82, 82, 0.152);
            border-top: 1px solid var(--glass-border);
            border-bottom: 1px solid var(--glass-border);
            -webkit-backdrop-filter: saturate(1.1) blur(calc(var(--glass-blur) - 8px));
            backdrop-filter: saturate(1.1) blur(calc(var(--glass-blur) - 8px));
            box-shadow: var(--glass-shadow);
            z-index: -1;
        }
        [data-theme="dark"] #catalog-filters.filter-panel::before {
            background: var(--glass-bg);
            border-top-color: var(--glass-border);
            border-bottom-color: var(--glass-border);
            box-shadow: var(--glass-shadow);
        }
        /* Neutralize base panel borders/shadow when using frosted rail */
        #catalog-filters.u-glass-rail {
            background: transparent;
            border-top-color: transparent;
            border-bottom-color: transparent;
            box-shadow: none;
        }
        /* Mobile dropdown/menu layering fixes: ensure filter menus render above results and remain clickable */
        @media (max-width: 1024px) {
            /* Raise the entire filter panel above the results */
            div.filter-panel#catalog-filters,
            body div.filter-panel#catalog-filters,
            .filter-panel { z-index: 400 !important; position: sticky !important; }
            /* Ensure dropdown panels stack above the filter panel itself */
            .dropdown-content, .multi-select-content { z-index: 2200 !important; pointer-events: auto; }
            /* Create a local stacking context for safety on mobile */
            .filter-controls { position: relative; z-index: 2101; }
            /* Backdrop that sits under menus to capture taps and keep menus interactive */
            #mobile-dropdown-backdrop { position: fixed; inset: 0; background: transparent; z-index: 2150; display: none; pointer-events: none; }
            #mobile-dropdown-backdrop.show { display: block; pointer-events: auto; }
        }
        /* Ensure contents can overflow visibly for dropdowns */
        .filter-content { overflow: visible !important; background: rgba(246, 251, 255, 0.215); }
        /* Disable cover-hover overlays inside New Releases section so Learn More only appears on the image */
        #catalog-new-releases-host .card-cover-hover-overlay,
        #catalog-new-releases-host .cover-hover-overlay,
        #catalog-new-releases-host .card-cover-learn,
        #catalog-new-releases-host .cover-learn { display: none !important; }

        /* RESULTS (Search Media Catalog): hide detailed overlay content (titles, instrumentation, chips, description, CTA) */
        .results-section .composition-hover-overlay .composition-overlay-content,
        .results-section .ov-title,
        .results-section .ov-instrument,
        .results-section .ov-row,
        .results-section .ov-description,
        .results-section .ov-btn { display: none !important; visibility: hidden !important; }
        /* keep overlay container inert so it never blocks clicks */
        .results-section .composition-hover-overlay { pointer-events: none !important; opacity: 0 !important; }
        /* Portal container used on mobile to render menus above all content */
        .dropdown-portal { position: fixed; z-index: 3000; }
        /* Catalog dropdown styling (aligned to media.html) */
        .dropdown { position: relative; }
        .dropdown-btn { min-width: 160px; padding: .45rem .7rem; border:1px solid var(--gray-200); border-radius: 10px; background: var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.6rem; color: var(--gray-800); font-size: .98rem; font-weight: 500; }
        .dropdown-btn::after { content:""; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid var(--gray-600); margin-left:.5rem; transition: transform .15s ease; }
        .dropdown.show .dropdown-btn::after { transform: rotate(180deg); }
        .dropdown-menu { position:absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border:1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,.08); display:none; visibility:hidden; opacity:0; transition: opacity .12s ease; max-height: 320px; overflow:auto; z-index: 2200; min-width: 220px; pointer-events:auto; padding: .35rem 0; }
        .dropdown.show .dropdown-menu { display:block; visibility:visible; opacity:1; }
        .opt { padding:.55rem .75rem; cursor:pointer; color: var(--gray-800); display:flex; align-items:center; }
        .opt:hover { background: var(--gray-50); }
        .opt .ck { display:inline-block; width:16px; height:16px; margin-right:.5rem; position:relative; background:#fff; border-radius:4px; border:1.5px solid var(--gray-900); flex-shrink:0; }
        .opt .ck.on { background:#fff; border-color: var(--gray-900); }
        .opt .ck.on::after { content:""; position:absolute; left:3px; top:4px; width:8px; height:4px; border:2px solid var(--gray-900); border-top:0; border-right:0; transform: rotate(-45deg); }

        /* Divider — match media and news pages */
        .divider { height:1px; background: var(--gray-200); border:0; margin:.4rem 0; }