/* Shared listing layout for Search, Home, Explore, and Song (browse-* classes).
   Home-only extras stay in browsehome-*.css; Song overrides in browsesong.css. */

/* ─── Browse page layout ───────────────────────────────────────────────── */

.browse-page {
    position: relative;
    padding: 0;
    overflow: clip; /* clip ::before bleed (both axes) without creating a scroll container (preserves sticky) */
}

.browse-layout {
    display: flex;
    align-items: stretch;
    gap: 40px;
    padding: 16px;
    max-width: 1600px;
    margin: 0 auto;
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */

.browse-sidebar {
    flex: 0 0 253px;
    width: 253px;
    background: transparent;
    padding-top: 8px;
    padding-right: 16px;
}

.browse-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 12px;
    border-bottom: 2px solid #e8e8e8;
    margin-bottom: 4px;
}

.browse-sidebar-title {
    font-weight: 700;
    font-size: 18px;
    color: #22313f;
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.browse-sidebar-icon--hamburger {
    position: relative;
    top: -1px;
}

.browse-sidebar-icon--close {
    display: none;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.browse-sidebar--open .browse-sidebar-icon--hamburger {
    display: none;
}

.browse-sidebar--open .browse-sidebar-icon--close {
    display: inline-flex;
}

@media (max-width: 767px) {
    .browse-sidebar-title {
        cursor: pointer;
    }
}

/* ─── Filter groups ─────────────────────────────────────────────────────── */

.browse-filter-group {
    border-bottom: 1px solid #e8e8e8;
    padding: 2px 0;
}

.browse-filter-group:last-child {
    border-bottom: none;
}

.browse-filter-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.browse-filter-group-header:hover .browse-filter-group-name {
    color: #22313f;
}

.browse-filter-group-name {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c7a84;
}

.browse-filter-chevron {
    font-size: 10px;
    color: #9aa5ad;
}

.browse-filter-chevron--down {
    transform: rotate(180deg);
}

.browse-filter-group-items {
    padding-bottom: 6px;
}

.browse-filter-group-items--collapsed {
    display: none;
}

/* ─── Filter items ──────────────────────────────────────────────────────── */

.browse-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    text-decoration: none;
    color: #22313f;
    font-size: 16px;
    line-height: 1.3;
    transition: background 120ms;
    /* Reset button defaults */
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.browse-filter-item:hover {
    text-decoration: none;
    color: #22313f;
    background: none;
}

.browse-filter-item--active .browse-filter-label {
    font-weight: 600;
    margin-top: -3px;
}
.browse-filter-item--active .browse-filter-star-label {
    margin-top: 0;
}

/* Difficulty dot indicator in filter panels. */
.browse-difficulty-dot {
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
}
.browse-difficulty-dot--easy         { background: #7FC98F; }
.browse-difficulty-dot--intermediate { background: #E0BE55; }
.browse-difficulty-dot--advanced     { background: #E8906A; }

/* "Official" filter info icon + tooltip */
.browse-filter-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 4px;
    top: -1px;
    cursor: default;
    line-height: 0;
}
.browse-filter-info-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #fff;
    color: #22313f;
    font-size: 12px;
    font-weight: 400;
    padding: 14px 14px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    pointer-events: none;
    z-index: 200;
}
.browse-filter-info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #E2E8F0;
}
.browse-filter-info-tooltip::before {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
    z-index: 1;
}
.browse-filter-info:hover .browse-filter-info-tooltip {
    display: block;
}

.browse-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid #b0bec5;
    border-radius: 3px;
    flex-shrink: 0;
    background: #F9F9F9;
    transition: background 150ms, border-color 150ms;
}

.browse-checkbox--checked {
    background: #2E9DE1;
    border-color: #2E9DE1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z' fill='white'/%3E%3C/svg%3E");
    background-size: 11px 11px;
    background-repeat: no-repeat;
    background-position: center;
}

.browse-filter-label {
    flex: 1;
    color: #22313f;
    line-height: 1;
    margin-top: 2px;
}

.browse-filter-star-label { display: flex; align-items: center; gap: 4px; margin-top: 0; }
.browse-filter-star-icon  { display: flex; height: 24px; align-items: center; position: relative; top: -1px; }
.browse-filter-star-text  { color: #62717A; font-size: 14px; font-style: normal; font-weight: 600; line-height: 150%; }

.browse-filter-count {
    font-size: 14px;
    color: #9aa5ad;
    margin-left: auto;
    flex-shrink: 0;
}

/* Filter item counts are rendered via ::after so the count stays outside the
   element's text content (accessible name = label only, not "Label 123").
   Applies to both nav-link <a> and JS-filter <button> items. */
a.browse-filter-item[data-count]::after,
button.browse-filter-item[data-count]::after {
    content: attr(data-count);
    font-size: 14px;
    color: #9aa5ad;
    margin-left: auto;
    flex-shrink: 0;
}

@keyframes browse-filter-item-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.browse-filter-item--animating {
    animation: browse-filter-item-in 220ms ease both;
}

.browse-show-more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 16px 16px 26px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #22313f;
    line-height: 1;
}

.browse-show-more-btn:hover {
    color: #2E9DE1;
}

.browse-show-more-btn svg {
    flex-shrink: 0;
}

/* ─── Main content area ─────────────────────────────────────────────────── */

#browse-sidebar-container {
    flex: 0 0 auto;
    position: relative; /* anchors ::before so right:0 = sidebar right edge, not viewport right */
    /* Extend to the left/top/bottom edges of the layout by cancelling its padding */
    margin-top: -16px;
    margin-left: -16px;
    padding-top: 16px;
    padding-left: 16px;
    padding-bottom: 16px;
    background: #F9F9F9;
}

/* Bleed the grey background to the left page edge; clipped by overflow-x:clip on .browse-page */
#browse-sidebar-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: -100vw;
    background: #F9F9F9;
    z-index: -1;
}

/* The grey stripe and its bleed exist to make the control rail read as a panel distinct from the
   results. The treatment's card does that itself, so the stripe was left showing as a grey band
   above and to the left of the blue card (QA, 2026-08-05) — the seam the card was meant to remove.

   The class comes from the two views that own this wrapper rather than from :has() on the sidebar
   inside it, because those views already branch on the flag for the spotlight a few lines up, and
   an id + class here beats the id above without needing anything cleverer. Song browse and search
   wrap the panel in their own containers and are unaffected. */
#browse-sidebar-container.browse-sidebar-container--exp {
    background: none;
}

#browse-sidebar-container.browse-sidebar-container--exp::before {
    content: none;
}

#browse-results-container {
    flex: 1;
    min-width: 0;
    background: #fff;
}

.browse-main {
    width: 100%;
    padding-top: 10px;
}

.browse-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.browse-results-header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.browse-heading {
    font-size: 24px;
    font-weight: 700;
    color: #22313f;
    margin: 0;
}

.browse-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.browse-sort-label {
    font-size: 14px;
    color: #6c7a84;
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 100%;
}

.browse-sort-select {
    font-size: 14px;
    font-weight: 600;
    color: #22313f;
    border: 1px solid #dce1e6;
    border-radius: 4px;
    padding: 5px 28px 5px 10px;
    height: 32px;
    box-sizing: border-box;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236c7a84'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
}

.browse-sort-select:hover {
    border-color: #1a6bab;
}

.browse-sort-select:focus {
    border-color: #1a6bab;
    box-shadow: 0 0 0 2px rgba(26, 107, 171, 0.2);
}

.browse-sidebar-title:only-child {
    margin-top: 2px;
}

.browse-clear-all {
    font-size: 13px;
    color: #22313f;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.browse-clear-all:hover {
    text-decoration: underline;
    color: #22313f;
}

/* ─── Card grid ─────────────────────────────────────────────────────────── */

.browse-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
}

@media (min-width: 500px)  { .browse-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .browse-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .browse-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .browse-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .browse-grid { grid-template-columns: repeat(5, 1fr); } }

/* On the top-filters layout there's no left rail eating into the results column, so it
   has comfortable room for a 4th card well before the 1200px breakpoint above (which is
   sized for the left-sidebar layout, ~300px narrower at the same viewport width) — cards
   were sitting needlessly wide with only 3 per row from 1000-1199px. */
@media (min-width: 1000px) {
    .browse-page:has(.browse-sidebar--top) .browse-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ─── Product card – matches PDP inline arrangements carousel ────────────── */

.browse-card {
    position: relative;
    width: 100%;
    min-width: 0; /* allow 1fr columns to shrink below min-content (long unwrapped text) */
    container-type: inline-size;
}

.browse-card-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.browse-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.browse-card-inner {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 6px;
}

/*
 * Background-image approach: the sheet music thumbnail is a CSS background,
 * not an <img> element, so global stylesheet rules that resize <img> tags
 * cannot touch it.  The padding-top hack on this div is then unbreakable —
 * a CSS background never expands its container.
 */
.browse-card-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 130%;   /* 10:13 portrait ratio */
    overflow: hidden;
    background-color: #ffffff;
}

.browse-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    display: block;
}

.browse-picks-card .browse-card-image img {
    image-rendering: auto;
}

/* Container for stacked image badges (scoring, difficulty, lyrics). */
.browse-card-badges {
    position: absolute;
    bottom: 3px;
    right: 3px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    max-width: calc(100% - 6px);
}

.browse-card-tag {
    background: #E2DFDF;
    border: 1px solid rgba(90,90,84,0.20);
    color: #1F1F1C;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browse-card-tag--pick                    { background: #D6EAF8; border: 1px solid #2E9DE133; color: #1B4F72; display: inline-flex; align-items: center; gap: 4px; }
.browse-card-tag--pick::before {
    content: "\2726";
    color: #E5941A;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.arrangement-play-btn {
    position: absolute;
    top: 6px; right: 6px;
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0.9;
}

.browse-card .arrangement-play-btn {
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    overflow: visible;
    z-index: 3;
    display: block;
    line-height: 0;
    font-size: 0;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    /* backdrop-filter forces overflow:hidden in WebKit/Blink and clips the SVG */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.browse-card .arrangement-play-btn svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: visible;
}

.browse-card-title {
    font-size: 15px;
    font-weight: 700;
    margin: 10px 0 3px 0;
    color: #09283a;
    line-height: 1.25;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.browse-card-artist {
    font-size: 14px;
    margin: 0 0 4px 0;
    color: #666;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Rating stars inside browse cards ──────────────────────────────────── */

.browse-card .arrangement-rating:empty {
    display: none;
}

.browse-card .arrangement-rating {
    margin-top: 2px;
}

.browse-card .arrangement-rating .rating-stars ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 1px;
}

.browse-card .arrangement-rating .rating-stars ul > li.star > button.fa {
    font-size: 12px;
    padding: 0;
    background: none;
    border: none;
    cursor: default;
    pointer-events: none;
}

.browse-card .arrangement-rating .rating-stars ul > li.star:not(.selected) {
    display: none;
}

/* ─── Synthetic Ratings: numeric average + count beside the stars ─────────
   Only treatment rows carry .stars-row--rated, so control cards are untouched.
   Stars + average + count stay on one row (desktop and mobile use the same
   config per Figma); the row wraps only if the card is too narrow to fit. */

.arrangement-rating .stars-row--rated {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* Average + count wrapper: baseline-align so the count sits on the average's text
   baseline, while the group as a whole stays centred with the stars. */
.arrangement-rating .stars-row--rated .rating-label-group {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

/* Synthetic rows show all five positions: filled/half in orange, empties in grey
   (matching Figma). Control rows keep showing only their filled stars. */
.browse-card .arrangement-rating .stars-row--rated .rating-stars ul > li.star:not(.selected),
.arrangement-rating .stars-row--rated .rating-stars ul > li.star:not(.selected) {
    display: inline-block;
}

.arrangement-rating .stars-row--rated .rating-stars ul > li.star > button.fa {
    display: inline-block;
    width: .84em !important;
    height: 1em !important;
    font-size: 24px;
    color: transparent !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url('/images/icons/rating-star-empty.svg') !important;
}

.arrangement-rating .stars-row--rated .rating-stars ul > li.star.selected > button.fa {
    background-image: url('/images/icons/rating-star-full.svg') !important;
}

.arrangement-rating .stars-row--rated .rating-stars ul > li.star.selected.half > button.fa {
    background-image: url('/images/icons/rating-star-half.svg') !important;
}

.arrangement-rating .rating-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #2C3235;
}

.arrangement-rating .rating-count-label {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #666666;
}

/* ─── Empty state ────────────────────────────────────────────────────────── */

.browse-empty {
    padding: 48px 0;
    text-align: center;
    color: #6c7a84;
}

.browse-empty-title {
    font-size: 19px;
    font-weight: 700;
    color: #22313f;
    margin-bottom: 8px;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */

.browse-pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 28px 0 16px;
}

.browse-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.browse-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #dce1e6;
    border-radius: 4px;
    font-size: 13px;
    color: #22313f;
    text-decoration: none;
    background: #fff;
    transition: background 150ms, border-color 150ms;
}

.browse-page-btn:hover {
    background: #f0f4f8;
    text-decoration: none;
    color: #22313f;
}

.browse-page-btn--active {
    background: #1a6bab;
    border-color: #1a6bab;
    color: #fff;
    font-weight: 600;
}

/* Circular prev/next arrow buttons */
.browse-page-nav-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: #F3F5F6;
    color: #1E2225;
    cursor: pointer;
    transition: background 150ms;
}

.browse-page-nav-btn:hover {
    background: #e4e8eb;
    color: #1E2225;
    border: none;
}

/* Ghost (disabled) state — no circle, just a muted chevron */
.browse-page-nav-btn--ghost {
    background: transparent;
    border: none;
    color: #ACB7BE;
    cursor: default;
    pointer-events: none;
}

.browse-page-nav-btn--ghost:hover {
    background: transparent;
    color: #ACB7BE;
}

/* ─── Homepage carousels (no-filter state) ───────────────────────────────── */

.browse-carousels {
    width: 100%;
}

.browse-carousel-section {
    margin-bottom: 36px;
    position: relative; /* for right-fade overlay */
}

.browse-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.browse-carousel-heading {
    font-size: 20px;
    font-weight: 700;
    color: #22313f;
    margin: 0;
}

.browse-carousel-section--picks {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(9, 40, 58, 0.08);
    padding: 20px 20px 16px;
    margin-bottom: 28px;
    /* Narrower than the results column's own max-width (.browse-layout caps at 1600px,
       minus its padding), so the panel doesn't push everything else below the fold —
       centred rather than left-aligned so it doesn't read as a truncated/cut-off card
       row. A fixed value rather than a %, so it doesn't shrink further on layouts whose
       results column is already narrower than this (e.g. with a left sidebar). */
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.browse-picks-header {
    margin-bottom: 16px;
}

.browse-picks-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    color: #09283a;
    margin: 0;
    line-height: 1.2;
}

.browse-picks-heading::before {
    content: "\2726";
    color: #E5941A;
    font-weight: 700;
    line-height: 1;
}

/* Same horizontal strip as Best Selling / New & Trending — three picks sit
   in a row. Do not use CSS grid here: under 768px a 1-col grid stacked them. */
.browse-picks-grid {
    display: flex;
}

.browse-picks-grid > .browse-picks-card {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.browse-picks-card .browse-card-image {
    isolation: isolate;
}

.browse-picks-card .arrangement-play-btn {
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    z-index: 3;
}

.browse-picks-card .browse-picks-why {
    position: absolute;
    top: auto;
    left: auto;
    right: 3px;
    bottom: 3px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 6px);
    padding: 5px 9px;
    border-radius: 20px;
    background: #0D3A54;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: none;
}

.browse-picks-card .browse-picks-why::before {
    content: "\2726";
    color: #E5941A;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .browse-picks-grid > .browse-picks-card {
        flex: 0 0 calc((100% - 16px) / 2);
        width: calc((100% - 16px) / 2);
    }

    /* Below this width the panel's own padding/shadow chrome already reads as a
       distinct block on a narrow screen; the 80% cap above is a desktop-only device
       for reclaiming the fold, not something that should shrink an already-tight
       mobile layout further. */
    .browse-carousel-section--picks {
        max-width: 100%;
    }
}

@media (max-width: 499px) {
    .browse-carousel-section--picks .browse-carousel-clip {
        overflow: visible;
    }

    .browse-picks-grid {
        flex-direction: column;
        overflow-x: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .browse-picks-grid > .browse-picks-card {
        flex: 0 0 auto;
        width: 100%;
    }
}

.browse-carousel-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.browse-carousel-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    border: none;
    background: #F3F5F6;
    color: #1E2225;
    cursor: pointer;
    transition: background 150ms;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.browse-carousel-nav-btn:hover {
    background: #e4e8eb;
}

.browse-carousel-nav-btn--ghost {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
    background: transparent;
}

.browse-carousel-nav-btn--ghost:hover {
    background: transparent;
}

/* Clips the scrollbar track out of view — works on all browsers/OS settings */
.browse-carousel-clip {
    overflow: hidden;
}

.browse-carousel-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Push the scrollbar track below the visible area; .browse-carousel-clip hides it */
    padding-bottom: 20px;
    margin-bottom: -20px;
}

.browse-carousel-card {
    scroll-snap-align: start;
}


/*
 * Card sizing — same column counts and gap (16px) as the "Explore sheet music" grid:
 * formula: (100% - (N-1)×16px) / N
 *   <768px  → 2 cols   1200px+ → 4 cols
 *   768px+  → 3 cols   1400px+ → 5 cols
 */

/* Default / mobile: 2 columns */
.browse-carousel-card {
    flex: 0 0 calc((100% - 16px) / 2);
    width: calc((100% - 16px) / 2);
}

/* 768px+: 3 columns */
@media (min-width: 768px) {
    .browse-carousel-card {
        flex: 0 0 calc((100% - 32px) / 3);
        width: calc((100% - 32px) / 3);
    }
}

/* 1200px+: 4 columns */
@media (min-width: 1200px) {
    .browse-carousel-card {
        flex: 0 0 calc((100% - 48px) / 4);
        width: calc((100% - 48px) / 4);
    }
}

/* 1400px+: 5 columns */
@media (min-width: 1400px) {
    .browse-carousel-card {
        flex: 0 0 calc((100% - 64px) / 5);
        width: calc((100% - 64px) / 5);
    }
}

/* ─── Loading state ──────────────────────────────────────────────────────── */

.browse-loading #browse-results-container {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 150ms;
}

/* ─── Arrangement entrance animations ────────────────────────────────────── */

@keyframes mn-fade-in {
    to { opacity: 1; }
}
@keyframes mn-pop-hdr {
    from { transform: translateY(10px) scale(0.85); }
    to   { transform: none; }
}
@keyframes mn-pop-card {
    from { transform: translateY(16px) scale(0.92); }
    to   { transform: none; }
}

.browse-animate .browse-picks-heading {
    opacity: 0;
    animation:
        mn-fade-in  0.3s cubic-bezier(0, 0, 0.58, 1)       0.05s forwards,
        mn-pop-hdr  0.3s cubic-bezier(0.45, 1.45, 0.8, 1)  0.05s forwards;
}

.browse-animate .browse-picks-card {
    opacity: 0;
    animation:
        mn-fade-in   0.4s cubic-bezier(0, 0, 0.58, 1)      var(--mn-delay, 0.15s) forwards,
        mn-pop-card  0.4s cubic-bezier(0.45, 1.45, 0.8, 1) var(--mn-delay, 0.15s) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .browse-animate .browse-picks-heading,
    .browse-animate .browse-picks-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Plain (non-animated) hide, server-rendered directly onto the heading/cards (see
   _TopPicksCarousel.cshtml) so a hard refresh or AJAX swap never paints them in their
   final state even for an instant — JS (triggerEntranceAnimations) strips this class
   right before either running the pop-in animation above or, for suppressed
   navigations, revealing them plainly. */
.browse-picks-heading.browse-picks-pending,
.browse-picks-card.browse-picks-pending {
    opacity: 0;
}

/* ─── Notes loading motif overlay ────────────────────────────────────────── */

/* Sized and positioned by JS (left/top/width/height inline) to exactly cover the Top
   picks frame it is replacing while results reload — it only ever renders docked to a
   real frame, never as a generic floating spinner. See explore-animations.js. */
.browse-notes-loading {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    box-sizing: border-box;
    padding: 20px;
    overflow: hidden;
    /* Below the open top-filter dropdown menu (.listing-top-open-menu, z-index: 40) so a
       filter change that triggers this motif never buries an already-open dropdown —
       still comfortably above the (unpositioned, stacking-context-less) Top picks cards
       it's covering. */
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms;
}

.browse-notes-loading--visible {
    opacity: 1;
}

/* Mobile stacked layout only (top-picks-motif.js dockOverlay): grows the box from one
   card's height back to the full three-card height as the motif hands off, instead of
   fading out a short box while the real row pops in underneath at full height. */
.browse-notes-loading--expanding {
    transition: opacity 180ms, height 320ms ease, top 320ms ease;
}

/* Scaled up as a unit by JS (dockOverlay) so the motif reads at full size instead of
   sitting tiny in the middle of a much larger Top picks frame. */
.browse-notes-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    transform-origin: 50% 50%;
}

.browse-notes-row {
    position: relative;
    width: 260px;
    height: 90px;
    overflow: hidden;
}

.browse-note-slot {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 36px;
    margin-left: -18px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
    color: #09283A;
    line-height: 0;
    /* Duration/delay are set per-slot by JS (see explore-animations.js) so the nine
       glyphs land evenly spaced along the belt; this only owns the shape of the motion. */
    animation-name: mn-note-drift;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    /* Paused by default (and whenever the overlay is hidden, below) so a docked-but-
       inactive motif never spends CPU animating something nobody can see. */
    animation-play-state: paused;
}

.browse-notes-loading--visible .browse-note-slot {
    animation-play-state: running;
}

/*
 * Nine belt slots, each held (flat, identical start/end value = a true pause, not just a
 * slow ease) for 0.5s, then eased across to the next slot — a "hop, rest, hop" motion
 * rather than a continuous drift. Position/scale/opacity all peak at slot 0 (dead centre
 * of the belt) and fall off toward the edges (slots 4 and 5, the furthest apart), mirroring
 * back so the whole thing loops seamlessly. Keep in sync with CYCLE_S / SLOT_COUNT in
 * explore-animations.js if the hold/step timing changes.
 */
@keyframes mn-note-drift {
    0%, 6.944%   { transform: translateX(0px)    scale(1.2);   opacity: 1; }
    11.111%, 18.056% { transform: translateX(46px)   scale(1.052); opacity: 0.8; }
    22.222%, 29.167% { transform: translateX(92px)   scale(0.781); opacity: 0.433; }
    33.333%, 40.278% { transform: translateX(138px)  scale(0.614); opacity: 0.206; }
    44.444%, 51.389% { transform: translateX(184px)  scale(0.56);  opacity: 0.134; }
    55.556%, 62.5%   { transform: translateX(-184px) scale(0.56);  opacity: 0.134; }
    66.667%, 73.611% { transform: translateX(-138px) scale(0.614); opacity: 0.206; }
    77.778%, 84.722% { transform: translateX(-92px)  scale(0.781); opacity: 0.433; }
    88.889%, 95.833% { transform: translateX(-46px)  scale(1.052); opacity: 0.8; }
    100%         { transform: translateX(0px)    scale(1.2);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .browse-note-slot {
        animation: none;
        transform: none;
        opacity: 1;
    }

    .browse-notes-loading--expanding {
        transition: opacity 180ms;
    }
}

.browse-note-slot svg {
    height: 56px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.browse-notes-loading-caption {
    font-size: 16px;
    font-weight: 600;
    color: #09283a;
    text-align: center;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.005em;
}

.browse-notes-loading-star {
    color: #E5941A;
    line-height: 1;
    flex-shrink: 0;
}

.browse-apps-wrapper {
    background: #ffffff;
}

/* ─── CTA background image — bypass lazy-bg/yall, apply directly ────────── */

#home-downloadscount .row {
    background-image: url(/s/images/home/downloads-704.png);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: 100% 50%;
}

.webp #home-downloadscount .row {
    background-image: url(/s/images/home/downloads-704.webp);
}

@media screen and (max-width: 767px) {
    #home-downloadscount .row {
        background-size: 63%;
        background-position: 50% 0%;
    }
}

/* ─── SEO section spacing — tighter than the global section-gap (64px) ──── */

.bh-trust.section-gap,
.bh-testimonials.section-gap,
.bh-blog.section-gap {
    margin-top: 32px;
}

.bh-trust.section-gap,
.bh-testimonials.section-gap {
    padding-top: 32px;
    padding-bottom: 32px;
}

.bh-blog {
    padding-top: 32px;
    padding-bottom: 32px;
}

.bh-faq {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

@media (max-width: 991px) {
    .bh-trust.section-gap,
    .bh-testimonials.section-gap {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

@media (max-width: 767px) {
    .bh-trust.section-gap,
    .bh-testimonials.section-gap,
    .bh-blog.section-gap {
        margin-top: 16px;
    }

    .bh-trust.section-gap,
    .bh-testimonials.section-gap {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .bh-blog {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .bh-faq {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .browse-carousel-section {
        margin-bottom: 20px;
    }
}

/* ─── Mobile: sidebar as slide-in drawer ─────────────────────────────────── */

/* Mobile bar: hidden on desktop, shown on mobile as two equal-width buttons */
.browse-mobile-bar {
    display: none;
}

.browse-mobile-filter-btn {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #F3F5F6;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14px;
    color: #22313f;
    cursor: pointer;
}

.browse-mobile-sort {
    display: none;
    flex: 1;
    position: relative;
}

.browse-mobile-bar.has-filters .browse-mobile-sort {
    display: block;
}

.browse-mobile-sort-btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #F3F5F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2382929B' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center;
    border: none;
    border-radius: 6px;
    padding: 10px 32px 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #22313f;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
}

.browse-mobile-sort-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dce1e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 200;
}

.browse-mobile-sort-menu--open {
    display: block;
}

.browse-mobile-sort-option {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #22313f;
    cursor: pointer;
}

.browse-mobile-sort-option:hover {
    background: #F3F5F6;
}

.browse-mobile-sort-option--active {
    font-weight: 700;
    color: #1a6bab;
}

.browse-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1049;
}

@media (max-width: 767px) {
    .browse-page-btn--far {
        display: none;
    }

    .browse-mobile-bar {
        display: flex;
        gap: 8px;
        margin: 12px 16px 0;
    }

    .browse-sort {
        display: none;
    }

    .browse-layout {
        display: block;
        padding: 12px;
    }

    /* Reset the desktop grey-stripe treatment — on mobile the sidebar is a fixed drawer */
    #browse-sidebar-container {
        align-self: auto;
        background: none;
        margin: 0;
        padding: 0;
        position: static;
    }

    #browse-sidebar-container::before {
        display: none;
    }

    .browse-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        height: 100dvh; /* dvh excludes browser chrome (address bar, nav buttons) */
        width: 280px;
        max-height: 100vh;
        max-height: 100dvh;
        background: #F9F9F9;
        border-right: none;
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.18);
        z-index: 1050;
        overflow-y: auto;
        transition: left 350ms ease-in-out;
    }

    .browse-sidebar--open {
        left: 0;
    }

    .browse-overlay--visible {
        display: block;
    }

    /* No grey strip on mobile — sidebar is a drawer */
    .browse-apps-wrapper {
        background: none !important;
    }

}

/* ─── Search filter prompt (showSearchFilterPopup / showSearchFilterTooltip) ── */

.sfp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.sfp-overlay[hidden] {
    display: none;
}

.sfp-overlay--visible {
    opacity: 1;
}

.sfp-no-scroll {
    overflow: hidden;
}

.sfp-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 742px;
    max-width: 100%;
    padding: 48px;
    background: #fff;
    border: 1px solid #d7dce0;
    border-radius: 40px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: translateY(8px);
    transition: transform 200ms ease-out;
}

.sfp-overlay--visible .sfp-modal {
    transform: translateY(0);
}

/* Opening moves focus here so a keyboard shopper lands inside the dialog. It is not a control
   anyone tabs to, and a dimmed page behind a card is already unmistakable, so it does not need a
   ring of its own — and a ring on the card would be as misleading as one around Piano.

   Written to beat _Layout's site-wide accessibility block, which draws a blue ring on anything
   focusable and carries !important on every declaration:

       [tabindex]:focus-visible          { outline: 2px solid #4A90E2 !important }
       body.keyboard-nav [tabindex]:focus { outline: 2px solid #4A90E2 !important }

   This card has tabindex="-1" purely so opening can move focus into it, so both rules match it and
   it was getting a ring right around the modal (QA, 2026-08-05).

   Three things are load-bearing here, and dropping any one brings the ring back:

   - !important, because theirs has it.
   - The **id**, not `.sfp-modal`. That was the first attempt and it did not take: as a class it
     ties the :focus-visible rule on specificity, and their block is an inline <style> at the foot
     of the document while this file is a <link> in the head, so the tie goes to them. It also
     loses outright to the keyboard-nav rule, which is more specific again. An id clears both.
   - Both pseudo-classes, since the two rules use one each.

   Narrowed to this one element rather than relaxing the layout block, which is doing its job
   everywhere else — including on the chips and Skip inside this dialog, where a keyboard shopper
   needs to see what is focused. Here it ringed a container that cannot be actioned. */
#sfp-modal:focus,
#sfp-modal:focus-visible {
    outline: none !important;
}

.sfp-title {
    margin: 0 0 36px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #1e2225;
    text-align: center;
}

.sfp-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.sfp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 13px 0 9px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    box-shadow: 1px 1px 1.5px rgba(13, 58, 84, 0.04), 2px 5px 3px rgba(13, 58, 84, 0.03), 6px 11px 4px rgba(13, 58, 84, 0.02);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.15px;
    color: #0a0a0a;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

.sfp-chip:hover {
    border-color: rgba(0, 0, 0, 0.24);
}

.sfp-chip--selected,
.sfp-chip--selected:hover {
    background: #0083d3;
    border-color: #0083d3;
    color: #fff;
}

.sfp-chip-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.sfp-chip-icon--piano {
    -webkit-mask-image: url("/images/icons/instruments/piano.svg");
            mask-image: url("/images/icons/instruments/piano.svg");
}

.sfp-chip-icon--guitar {
    -webkit-mask-image: url("/images/icons/instruments/guitar.svg");
            mask-image: url("/images/icons/instruments/guitar.svg");
}

.sfp-chip-icon--voice {
    -webkit-mask-image: url("/images/icons/instruments/voice.svg");
            mask-image: url("/images/icons/instruments/voice.svg");
}

.sfp-chip-icon--drums {
    -webkit-mask-image: url("/images/icons/instruments/drums.svg");
            mask-image: url("/images/icons/instruments/drums.svg");
}

.sfp-chip-icon--violin {
    -webkit-mask-image: url("/images/icons/instruments/violin.svg");
            mask-image: url("/images/icons/instruments/violin.svg");
}

.sfp-chip-icon--cello {
    -webkit-mask-image: url("/images/icons/instruments/cello.svg");
            mask-image: url("/images/icons/instruments/cello.svg");
}

.sfp-chip-icon--trumpet {
    -webkit-mask-image: url("/images/icons/instruments/trumpet.svg");
            mask-image: url("/images/icons/instruments/trumpet.svg");
}

.sfp-chip-icon--clarinet {
    -webkit-mask-image: url("/images/icons/instruments/clarinet.svg");
            mask-image: url("/images/icons/instruments/clarinet.svg");
}

.sfp-chip-icon--flute {
    -webkit-mask-image: url("/images/icons/instruments/flute.svg");
            mask-image: url("/images/icons/instruments/flute.svg");
}

.sfp-chip-icon--saxophone {
    -webkit-mask-image: url("/images/icons/instruments/saxophone.svg");
            mask-image: url("/images/icons/instruments/saxophone.svg");
}

/* Anything design has not drawn a glyph for. Keyed explicitly rather than defaulted
   so a missing rule shows as a blank chip instead of quietly reading as a note. */
.sfp-chip-icon--generic {
    -webkit-mask-image: url("/images/icons/instruments/generic.svg");
            mask-image: url("/images/icons/instruments/generic.svg");
}

/* Step 2: revealed once an instrument is picked. Height is driven inline by
   search-filter-prompt.js so the modal grows into it. */
.sfp-refine {
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transition: height 250ms ease-out, opacity 200ms ease-out;
}

.sfp-refine--visible {
    opacity: 1;
}

.sfp-refine-inner {
    padding-top: 28px;
}

.sfp-refine-divider {
    height: 1px;
    margin-bottom: 28px;
    background: #e3e7ea;
}

.sfp-refine-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #4c565d;
    text-align: center;
}

/* 8px between rows, 4px between chips (2026-08-05). The single 4px gap made a wrapped second row
   look like the first row's descender rather than a row of its own. */
.sfp-refine-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 4px;
}

.sfp-refine-chip {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #d7dce0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #62717a;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

.sfp-refine-chip:hover {
    border-color: #9fb0ba;
}

.sfp-refine-chip--selected,
.sfp-refine-chip--selected:hover {
    background: #0083d3;
    border-color: #0083d3;
    color: #fff;
}

/* Reveals the rows of refinements held back behind "More filters". */
.sfp-refine-chip--extra {
    display: none;
}

.sfp-refine--expanded .sfp-refine-chip--extra {
    display: inline-block;
}

.sfp-more-filters {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding: 8px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #2c3235;
    cursor: pointer;
    white-space: nowrap;
}

.sfp-more-filters:hover {
    text-decoration: underline;
}

.sfp-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 38px;
}

.sfp-cta {
    height: 44px;
    padding: 0 18px;
    background: #09283a;
    border: none;
    border-radius: 800px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color 120ms ease-out, opacity 120ms ease-out;
}

.sfp-cta:hover:not(:disabled) {
    background: #0d3a54;
}

.sfp-cta:disabled {
    opacity: 0.4;
    cursor: default;
}

.sfp-skip {
    position: absolute;
    right: 0;
    padding: 8px 16px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #62717a;
    cursor: pointer;
}

.sfp-skip:hover {
    text-decoration: underline;
}

/* 767, matching the panel drawer, the handoff callout and MOBILE_QUERY in
   search-filter-analytics.js. At 768 this rule gave a shopper the mobile modal against a desktop
   panel, reported as device_type: desktop. */
@media (max-width: 767px) {

    .sfp-modal {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .sfp-title {
        font-size: 20px;
        margin-bottom: 24px;
    }

    .sfp-chips {
        gap: 8px;
    }

    .sfp-refine-inner {
        padding-top: 20px;
    }

    .sfp-refine-divider {
        margin-bottom: 20px;
    }

    .sfp-actions {
        flex-direction: column;
        gap: 8px;
        margin-top: 28px;
    }

    .sfp-cta {
        font-size: 15px;
    }

    .sfp-skip {
        position: static;
    }

}

/* ─── Filter-experience sidebar (useHighlightedFilterPanel) ────────────────── */

/* How wide the panel is once it collapses into the mobile drawer. A constant, and declared up
   here because two elements set it — the card, and the clip wrapper song browse puts around it —
   and a drawer whose two halves disagree is a drawer with a seam.

   It has to be a constant at all because `width: auto` on a fixed-position element is
   shrink-to-fit, so the drawer was as wide as its longest row: applying a filter changed the facet
   lists, "Holiday & Special Occasion" arrived in Genres, and the drawer visibly jumped wider
   underneath the shopper's finger (QA, 2026-08-05). 300px is roughly where it settled in that
   wider state, so this is the size QA was reaching for, held still. 95vw keeps a small gutter
   visible on narrow phones, which is what tells the shopper the drawer is a drawer. */
:root {
    --sfx-drawer-width: min(95vw, calc(100vw - 12px));
}

.browse-sidebar--exp {
    /* Wider than the standard rail: the card needs room for 20px group headings. */
    flex: 0 0 365px;
    width: 365px;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    padding: 24px;
    background: #e0f0fa;
    border: none;
    border-radius: 32px;
}

/* Right-aligned at the top of the card, above the first group. */
.browse-sidebar--exp .browse-clear-row {
    order: -5;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 20px;
    margin-bottom: 20px;
}

.browse-clear-all--exp {
    font-size: 14px;
    font-weight: 600;
    color: #0083d3;
}

.browse-clear-all--exp:hover {
    color: #0083d3;
}

.browse-sidebar--exp .browse-sidebar-header {
    display: none;
}

/* ── Group order, independent of the DOM ──
   The four surfaces emit these groups in four different orders, and two of them are appended by
   other experiments. Ordering here rather than reshuffling four views keeps the panel identical
   everywhere. Anything unnamed sorts to the bottom rather than jumping to the top. */
.browse-sidebar--exp .browse-filter-group            { order: 50; }
.browse-sidebar--exp #browse-filter-group-popular,
.browse-sidebar--top #browse-filter-group-popular    { order: 1; }
.browse-sidebar--exp #browse-filter-group-difficulty,
.browse-sidebar--top #browse-filter-group-difficulty { order: 2; }
.browse-sidebar--exp #browse-filter-group-instrument,
.browse-sidebar--top #browse-filter-group-instrument { order: 3; }
.browse-sidebar--exp #browse-filter-group-scoring,
.browse-sidebar--top #browse-filter-group-scoring    { order: 4; }
.browse-sidebar--exp #browse-filter-group-genre,
.browse-sidebar--top #browse-filter-group-genre      { order: 5; }
.browse-sidebar--exp #browse-filter-group-producttype,
.browse-sidebar--top #browse-filter-group-producttype { order: 6; }
/* Not in the design's list; parked last so the ratings experiment cannot displace the six. */
.browse-sidebar--exp #browse-filter-group-minrating,
.browse-sidebar--top #browse-filter-group-minrating  { order: 7; }

/* The filter taxonomy test's two new groups. Numbered past Rating rather than reusing 5 and 6, which
   Genres and Product Type hold: those two never render alongside these — the taxonomy treatment drops
   them — but a stylesheet that only reads correctly once you know that is a trap for the next reader.
   Final order is still a design question; this is DOM order made explicit, not a decision. */
.browse-sidebar--exp #browse-filter-group-feature,
.browse-sidebar--top #browse-filter-group-feature    { order: 8; }
.browse-sidebar--exp #browse-filter-group-quality,
.browse-sidebar--top #browse-filter-group-quality    { order: 9; }

/* Removed: the 4-column override at 1400px+ was only firing on Search (different DOM structure)
   and was not needed — BrowseHome/Explore work fine with 5 columns at this breakpoint. */

/* "Filters" is redundant next to the heading; keep it for the mobile close affordance only. */
.browse-sidebar--exp .browse-sidebar-title {
    display: none;
}

/* 12px above and below the heading, not 16px: every group renders open now, so the space between
   them is the budget that decides how many headings clear the fold. */
.browse-sidebar--exp .browse-filter-group {
    padding: 12px 0;
    border-bottom: 1px solid rgba(215, 220, 224, .7);
}

/* No rule under the bottom group: a divider separates two groups, and that one separates the last
   group from the edge of the card (QA, 2026-08-05).

   The base panel gets this from `.browse-filter-group:last-child`, which cannot work here for two
   reasons. It loses to the rule above on specificity, and even winning it would pick the wrong
   group — `order` above decides what sits at the bottom, and on every surface the DOM order is
   something else. So the bottom group is named instead. Two can hold that position: Product Type
   normally, and Rating when the ratings experiment is also on, since it is parked after it. */
.browse-sidebar--exp #browse-filter-group-producttype,
.browse-sidebar--top #browse-filter-group-producttype,
.browse-sidebar--exp #browse-filter-group-minrating,
.browse-sidebar--top #browse-filter-group-minrating,
/* Quality & Source is last in the taxonomy treatment, where neither of those two renders. */
.browse-sidebar--exp #browse-filter-group-quality,
.browse-sidebar--top #browse-filter-group-quality {
    border-bottom: none;
}

/* ...except then Product Type is mid-panel and does need its divider back. Falls back to leaving
   it off in a browser without :has(), which is the smaller of the two wrong answers. */
.browse-sidebar--exp:has(#browse-filter-group-minrating) #browse-filter-group-producttype {
    border-bottom: 1px solid rgba(215, 220, 224, .7);
}

/* Icon and heading read as one unit on the left, chevron alone on the right — so the row is packed
   from the start rather than spread, and the chevron is pushed over by its own margin. */
.browse-sidebar--exp .browse-filter-group-header {
    justify-content: flex-start;
    gap: 8px;
    min-height: 30px;
    padding: 0;
}

.browse-sidebar--exp .browse-filter-group-name {
    font-size: 20px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #2c3235;
}

.browse-sidebar--exp .browse-filter-chevron {
    margin-left: auto;
    font-size: 15px;
    color: #2c3235;
}

/* ── Group heading icons ──
   Keyed off the group's canonical id, so the four views need no markup for this and the icon
   cannot appear in control. A group with no icon of its own — Rating, or anything a later
   experiment appends — simply gets no ::before rather than an empty 18px gap.

   background-image rather than a mask: these are the designer's own multi-colour glyphs (a red
   heart, three coloured difficulty bars, a white-bodied piano) and currentColor would flatten
   them to one ink.

   Inlined as data URIs rather than served from /images/icons/filters/, which is where they started.
   A background-image on a pseudo-element is not fetched until that element is styled, so six files
   meant six requests that could not begin before first paint: the headings drew, then the icons
   popped in a moment later. This stylesheet is already render-blocking, so carrying the 5.2kB inside
   it costs one round trip nobody was waiting on and the icons arrive with the text.

   Percent-encoded, not base64, so each one is still legible as SVG and editable in place — these
   are the source now, the .svg files are gone. */
.browse-sidebar--exp #browse-filter-group-popular  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-popular  .browse-filter-group-header::before,
.browse-sidebar--exp #browse-filter-group-difficulty  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-difficulty  .browse-filter-group-header::before,
.browse-sidebar--exp #browse-filter-group-instrument  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-instrument  .browse-filter-group-header::before,
.browse-sidebar--exp #browse-filter-group-scoring  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-scoring  .browse-filter-group-header::before,
.browse-sidebar--exp #browse-filter-group-genre  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-genre  .browse-filter-group-header::before,
.browse-sidebar--exp #browse-filter-group-producttype  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-producttype  .browse-filter-group-header::before,
/* The taxonomy test's two groups take the box but have no artwork yet — Design owes two icons. The
   empty box is deliberate: without it their headings would start 18px left of every sibling's, and a
   misaligned column of headings reads as more broken than a missing glyph. */
.browse-sidebar--exp #browse-filter-group-feature  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-feature  .browse-filter-group-header::before,
.browse-sidebar--exp #browse-filter-group-quality  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-quality  .browse-filter-group-header::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.browse-sidebar--exp #browse-filter-group-feature  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-feature  .browse-filter-group-header::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.87154%200.771202C8.55198%200.306178%209.44802%200.306178%2010.1285%200.771202L12.6004%202.46056C12.684%202.51769%2012.7718%202.56839%2012.8631%202.61222L15.5621%203.90832C16.3051%204.2651%2016.7531%205.04108%2016.6906%205.86288L16.4635%208.84834C16.4559%208.9493%2016.4559%209.0507%2016.4635%209.15166L16.6906%2012.1371C16.7531%2012.9589%2016.3051%2013.7349%2015.5621%2014.0917L12.8631%2015.3878C12.7718%2015.4316%2012.684%2015.4823%2012.6004%2015.5394L10.1285%2017.2288C9.44802%2017.6938%208.55198%2017.6938%207.87153%2017.2288L5.39958%2015.5394C5.31598%2015.4823%205.22816%2015.4316%205.13689%2015.3878L2.43788%2014.0917C1.69494%2013.7349%201.24692%2012.9589%201.30942%2012.1371L1.53647%209.15166C1.54414%209.0507%201.54414%208.9493%201.53647%208.84834L1.30942%205.86288C1.24692%205.04108%201.69494%204.2651%202.43788%203.90832L5.13689%202.61222C5.22816%202.56839%205.31598%202.51769%205.39958%202.46056L7.87154%200.771202Z%22%20fill%3D%22%232C3235%22%2F%3E%3Cpath%20d%3D%22M10.3246%204.36328C9.40999%204.36328%208.66854%205.10474%208.66854%206.01937V9.782C8.46318%209.70913%208.23796%209.66276%208.0061%209.66276C6.90646%209.66276%206.0188%2010.5504%206.0188%2011.6501C6.0188%2012.7497%206.90646%2013.6374%208.0061%2013.6374C9.10575%2013.6374%209.99341%2012.7497%209.99341%2011.6501V6.6818C9.99341%206.13302%2010.4383%205.68815%2010.9871%205.68815H11.3183C11.6841%205.68815%2011.9807%205.39157%2011.9807%205.02572C11.9807%204.65986%2011.6841%204.36328%2011.3183%204.36328H10.3246Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
    background-size: 16px;
}

.browse-sidebar--exp #browse-filter-group-quality  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-quality  .browse-filter-group-header::before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='icon-product-type'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.9375 1.6875C3.34076 1.6875 2.76847 1.92455 2.34651 2.34651C1.92455 2.76847 1.6875 3.34076 1.6875 3.9375V7.176C1.68763 7.77269 1.92476 8.34489 2.34675 8.76675L9.53175 15.9525C10.2217 16.6425 11.3243 16.842 12.1927 16.2735C13.8191 15.2085 15.2082 13.8196 16.2735 12.1935C16.842 11.3235 16.6425 10.2218 15.9525 9.5325L8.7675 2.34675C8.55853 2.13771 8.31041 1.9719 8.03734 1.85878C7.76426 1.74567 7.47158 1.68746 7.176 1.6875H3.9375ZM4.78125 5.625C5.00503 5.625 5.21964 5.53611 5.37787 5.37787C5.53611 5.21964 5.625 5.00503 5.625 4.78125C5.625 4.55747 5.53611 4.34286 5.37787 4.18463C5.21964 4.02639 5.00503 3.9375 4.78125 3.9375C4.55747 3.9375 4.34286 4.02639 4.18463 4.18463C4.02639 4.34286 3.9375 4.55747 3.9375 4.78125C3.9375 5.00503 4.02639 5.21964 4.18463 5.37787C4.34286 5.53611 4.55747 5.625 4.78125 5.625Z' fill='%232C3235'/%3E %3C/g%3E %3C/svg%3E");
    background-size: 16px;
}

.browse-sidebar--exp #browse-filter-group-popular  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-popular  .browse-filter-group-header::before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='icon-popular'%3E %3Cpath d='M8.99993 15.4786L7.98293 14.5516C4.06793 11.0146 1.50293 8.69256 1.50293 5.84856C1.50293 3.52656 3.32093 1.72656 5.62493 1.72656C6.92993 1.72656 8.18993 2.33856 8.99993 3.28356C9.80993 2.33856 11.0699 1.72656 12.3749 1.72656C14.6789 1.72656 16.4969 3.52656 16.4969 5.84856C16.4969 8.69256 13.9319 11.0146 10.0169 14.5606L8.99993 15.4786Z' fill='%23DD6B5E'/%3E %3C/g%3E %3C/svg%3E");
}

.browse-sidebar--exp #browse-filter-group-difficulty  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-difficulty  .browse-filter-group-header::before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='icon-difficulty'%3E %3Cpath d='M4.0501 10.3516H2.2501C1.75304 10.3516 1.3501 10.7545 1.3501 11.2516V15.7516C1.3501 16.2486 1.75304 16.6516 2.2501 16.6516H4.0501C4.54715 16.6516 4.9501 16.2486 4.9501 15.7516V11.2516C4.9501 10.7545 4.54715 10.3516 4.0501 10.3516Z' fill='%2389D594'/%3E %3Cpath d='M9.9002 5.85156H8.1002C7.60314 5.85156 7.2002 6.25451 7.2002 6.75156V15.7516C7.2002 16.2486 7.60314 16.6516 8.1002 16.6516H9.9002C10.3973 16.6516 10.8002 16.2486 10.8002 15.7516V6.75156C10.8002 6.25451 10.3973 5.85156 9.9002 5.85156Z' fill='%23FFD97A'/%3E %3Cpath d='M15.7498 1.35156H13.9498C13.4527 1.35156 13.0498 1.75451 13.0498 2.25156V15.7516C13.0498 16.2486 13.4527 16.6516 13.9498 16.6516H15.7498C16.2469 16.6516 16.6498 16.2486 16.6498 15.7516V2.25156C16.6498 1.75451 16.2469 1.35156 15.7498 1.35156Z' fill='%23FBCEB4'/%3E %3C/g%3E %3C/svg%3E");
}

.browse-sidebar--exp #browse-filter-group-instrument  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-instrument  .browse-filter-group-header::before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='icon-instruments'%3E %3Cpath d='M14.8501 2.69922H3.1501C2.15599 2.69922 1.3501 3.50511 1.3501 4.49922V13.4992C1.3501 14.4933 2.15599 15.2992 3.1501 15.2992H14.8501C15.8442 15.2992 16.6501 14.4933 16.6501 13.4992V4.49922C16.6501 3.50511 15.8442 2.69922 14.8501 2.69922Z' fill='white' stroke='%232C3235' stroke-width='1.3'/%3E %3Cpath d='M5.5801 2.69922H3.6001V9.89922H5.5801V2.69922Z' fill='%232C3235'/%3E %3Cpath d='M9.98977 2.69922H8.00977V9.89922H9.98977V2.69922Z' fill='%232C3235'/%3E %3Cpath d='M14.3999 2.69922H12.4199V9.89922H14.3999V2.69922Z' fill='%232C3235'/%3E %3C/g%3E %3C/svg%3E");
}

.browse-sidebar--exp #browse-filter-group-scoring  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-scoring  .browse-filter-group-header::before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='icon-scoring'%3E %3Cpath d='M11.25 4.5H2.25V6H11.25V4.5ZM11.25 7.5H2.25V9H11.25V7.5ZM2.25 12H8.25V10.5H2.25V12ZM12.75 4.5V10.635C12.5175 10.5525 12.2625 10.5 12 10.5C10.755 10.5 9.75 11.505 9.75 12.75C9.75 13.995 10.755 15 12 15C13.245 15 14.25 13.995 14.25 12.75V6H16.5V4.5H12.75Z' fill='%232C3235'/%3E %3C/g%3E %3C/svg%3E");
}

.browse-sidebar--exp #browse-filter-group-genre  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-genre  .browse-filter-group-header::before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='icon-genres'%3E %3Cpath d='M14.9638 1.23857C15.0333 1.29105 15.0897 1.35894 15.1285 1.43689C15.1672 1.51485 15.1874 1.60075 15.1873 1.68782V12.2276C15.1872 12.7165 15.0279 13.192 14.7335 13.5823C14.439 13.9725 14.0254 14.2563 13.5553 14.3906L12.5653 14.6733C12.3222 14.7472 12.0667 14.7719 11.8139 14.7461C11.561 14.7202 11.3159 14.6443 11.0927 14.5227C10.8695 14.4011 10.6728 14.2363 10.5139 14.0379C10.3551 13.8395 10.2373 13.6115 10.1675 13.3671C10.0977 13.1227 10.0773 12.8669 10.1074 12.6145C10.1375 12.3622 10.2175 12.1183 10.3429 11.8972C10.4682 11.6761 10.6362 11.4821 10.8373 11.3266C11.0383 11.1712 11.2683 11.0573 11.5138 10.9916L13.1241 10.5318C13.3591 10.4647 13.5659 10.3228 13.7131 10.1277C13.8604 9.93254 13.94 9.69477 13.9401 9.45032V5.24582L7.1901 7.17482V14.4776C7.18999 14.9665 7.03066 15.442 6.7362 15.8323C6.44174 16.2225 6.02818 16.5063 5.5581 16.6406L4.5681 16.9233C4.32492 16.9972 4.06947 17.0219 3.81663 16.9961C3.56379 16.9702 3.31864 16.8943 3.09545 16.7727C2.87226 16.6511 2.67552 16.4863 2.51668 16.2879C2.35784 16.0895 2.24009 15.8615 2.1703 15.6171C2.1005 15.3727 2.08006 15.1169 2.11015 14.8645C2.14025 14.6122 2.22029 14.3683 2.34561 14.1472C2.47092 13.9261 2.639 13.7321 2.84004 13.5766C3.04109 13.4212 3.27108 13.3073 3.5166 13.2416L5.12685 12.7818C5.36189 12.7147 5.56867 12.5728 5.7159 12.3777C5.86313 12.1825 5.9428 11.9448 5.94285 11.7003V3.93782C5.94287 3.8156 5.9827 3.69671 6.05632 3.59914C6.12993 3.50158 6.23332 3.43064 6.35085 3.39707L14.2258 1.14707C14.3124 1.11981 14.4043 1.1139 14.4936 1.12983C14.5829 1.14577 14.6671 1.18307 14.7388 1.23857H14.9638Z' fill='%232C3235'/%3E %3C/g%3E %3C/svg%3E");
}

.browse-sidebar--exp #browse-filter-group-producttype  .browse-filter-group-header::before,
.browse-sidebar--top #browse-filter-group-producttype  .browse-filter-group-header::before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='icon-product-type'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.9375 1.6875C3.34076 1.6875 2.76847 1.92455 2.34651 2.34651C1.92455 2.76847 1.6875 3.34076 1.6875 3.9375V7.176C1.68763 7.77269 1.92476 8.34489 2.34675 8.76675L9.53175 15.9525C10.2217 16.6425 11.3243 16.842 12.1927 16.2735C13.8191 15.2085 15.2082 13.8196 16.2735 12.1935C16.842 11.3235 16.6425 10.2218 15.9525 9.5325L8.7675 2.34675C8.55853 2.13771 8.31041 1.9719 8.03734 1.85878C7.76426 1.74567 7.47158 1.68746 7.176 1.6875H3.9375ZM4.78125 5.625C5.00503 5.625 5.21964 5.53611 5.37787 5.37787C5.53611 5.21964 5.625 5.00503 5.625 4.78125C5.625 4.55747 5.53611 4.34286 5.37787 4.18463C5.21964 4.02639 5.00503 3.9375 4.78125 3.9375C4.55747 3.9375 4.34286 4.02639 4.18463 4.18463C4.02639 4.34286 3.9375 4.55747 3.9375 4.78125C3.9375 5.00503 4.02639 5.21964 4.18463 5.37787C4.34286 5.53611 4.55747 5.625 4.78125 5.625Z' fill='%232C3235'/%3E %3C/g%3E %3C/svg%3E");
}

.browse-sidebar--exp .browse-filter-group-items {
    padding: 4px 0 0;
}

/* The 8px inset gives the row a hover target wider than its text, so rows sit
   slightly indented from the group headings — as designed. */
.browse-sidebar--exp .browse-filter-item {
    gap: 10px;
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
}

.browse-sidebar--exp .browse-filter-label,
.browse-sidebar--exp .browse-filter-count,
.browse-sidebar--exp a.browse-filter-item[data-count]::after,
.browse-sidebar--exp button.browse-filter-item[data-count]::after {
    font-size: 16px;
    line-height: 1.5;
    color: #62717a;
}

/* Flex children default to min-width:auto, so a long label refuses to shrink and the row
   clips without an ellipsis — which is why Scoring looked cut earlier than Popular even when
   Popular's string was longer. min-width:0 lets the label shrink; title= on the span (set in
   the taxonomy partial) is the hover readout. Additive: control's .browse-filter-label is
   untouched. */
.browse-sidebar--exp .browse-filter-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* When the label contains an info icon, don't clip — the tooltip is absolutely positioned
   inside .browse-filter-info (which is a child of the label) and overflow:hidden on an
   ancestor clips abs-pos descendants even when their containing block is nested inside it.
   "Official" is 8 characters so it never needs truncation. */
.browse-sidebar--exp .browse-filter-label:has(.browse-filter-info) {
    overflow: visible;
}

/* Regular weight even when checked — the blue checkbox carries the selected state. */
.browse-sidebar--exp .browse-filter-label,
.browse-sidebar--exp .browse-filter-item--active .browse-filter-label,
.browse-sidebar--exp .browse-filter-count,
.browse-sidebar--exp a.browse-filter-item[data-count]::after,
.browse-sidebar--exp button.browse-filter-item[data-count]::after {
    font-weight: 400;
    margin-top: 0;
}

/* background-color, not the shorthand: the checked state's tick is a background-image
   on the base rule and the shorthand would drop it. */
.browse-sidebar--exp .browse-checkbox {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1.5px solid #d7dce0;
    border-radius: 4px;
}

.browse-sidebar--exp .browse-checkbox--checked {
    background-color: #0083d3;
    background-size: 12px 12px;
    border-color: #0083d3;
}

/* Line the toggle up with the labels rather than the checkboxes. */
.browse-sidebar--exp .browse-show-more-btn {
    padding: 8px 0 0 38px;
    font-size: 14px;
    color: #62717a;
}

/* Extra rows start hidden. Show more sets display:flex eight at a time. */
.browse-sidebar--exp .browse-filter-item--extra {
    display: none;
}

/* ── Song browse: undo the rail its collapse wrapper paints ──
   That surface parks the panel in a 253px clip container with overflow:hidden and forces the
   sidebar transparent, all from ID selectors in browsesong.css. Against the treatment card that
   clipped the group chevrons and the right-aligned Clear all off the right edge, so the panel
   looked like it had neither. The clip itself stays, since it is what animates the panel away on
   collapse; it just has to be as wide as the card. */
#song-sidebar-inner.song-sidebar--exp-clip {
    width: 365px;
}

#song-sidebar-inner.song-sidebar--exp-clip > .browse-sidebar--exp {
    background: #e0f0fa;
    padding: 24px;
}

/* The grey bleed exists to make the rail read as a panel; the card does that itself now. */
#song-sidebar-outer.song-sidebar--exp-wrap::before {
    display: none;
}

#song-sidebar-outer.song-sidebar--exp-wrap {
    margin: 0 40px 0 0;
}

@media (max-width: 767px) {

    .browse-sidebar--exp {
        flex-basis: auto;
        width: var(--sfx-drawer-width);
        padding: 16px;
        border-radius: 0;
    }

    #song-sidebar-inner.song-sidebar--exp-clip {
        width: var(--sfx-drawer-width);
    }

    #song-sidebar-inner.song-sidebar--exp-clip > .browse-sidebar--exp {
        padding: 16px;
    }

    #song-sidebar-outer.song-sidebar--exp-wrap {
        margin: 0;
    }

    /* The drawer still needs its close affordance, above the clear row. */
    .browse-sidebar--exp .browse-sidebar-header {
        display: flex;
        order: -6;
    }

    .browse-sidebar--exp .browse-sidebar-title {
        display: flex;
    }

}

/* ── Song browse: the mobile drawer ──
   The other three surfaces style their drawer from `.browse-sidebar`, so the treatment card simply
   overrides it. Song browse styles the same element from `#browse-sidebar` in browsesong.css, and
   paints the background `!important` — so on that surface alone the drawer stayed #F9F9F9 while the
   panel inside it was the treatment's, and it was 280px wide where the others size to content.

   Restated here at a specificity that reaches it. `!important` only on the background, because
   `!important` is the only thing that beats `!important`; the rest wins on the id + class alone.

   768px, not the 767px used elsewhere in this file, because these declarations exist to answer
   browsesong.css's own `max-width: 768px` block — matching it is what stops the drawer going white
   again at exactly 768px. That 1px is also why the selector names song browse's wrapper: at exactly
   768px the other three surfaces are still desktop, and a bare `#browse-sidebar` would hand them a
   drawer's width and height while they are laid out as a card. */
@media (max-width: 768px) {

    #song-sidebar-inner #browse-sidebar.browse-sidebar--exp {
        width: var(--sfx-drawer-width);
        background: #e0f0fa !important;
        /* dvh excludes the browser chrome; the vh values browsesong sets survive as the fallback.
           The treatment opens every group, so the drawer is long enough for the difference between
           the two to decide whether the last group is reachable. */
        height: 100dvh;
        max-height: 100dvh;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

}

/* ─── Prompt handoff: dim the results and point at the panel ───────────────── */

.sfp-spotlight {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.sfp-spotlight[hidden] {
    display: none;
}

.sfp-spotlight--visible {
    opacity: 1;
}

/* Lifted above the scrim so the panel stays legible while everything else dims. */
.browse-sidebar--spotlit {
    position: relative;
    z-index: 1041;
}

.sfp-handoff {
    position: absolute;
    left: calc(100% - 8px);
    z-index: 1042;
    width: 206px;
    padding: 9px 12px 11px;
    background: #2e9de1;
    border: 1px solid #fff;
    border-radius: 9px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.sfp-handoff[hidden] {
    display: none;
}

.sfp-handoff--visible {
    opacity: 1;
}

/* A rotated square, not a border triangle. The triangle sat outside the bubble's 1px white
   outline, so the outline ran straight across the arrow's base and the two read as a box with a
   pennant stuck to it; Figma draws one continuous shape whose outline traces the arrow too.

   A square rotated 45° gets both halves of that. Its outer two faces carry the same white border
   and continue the outline around the point, and because a positioned child paints above its
   parent's border, its inner half hides the length of bubble outline it overlaps.

   Geometry: side 16px gives a 22.6px base and 11.3px of reach, matching the triangle it replaces.
   Offsets are from the padding box, so `left: -8px` puts the tip 11.3px past it — 10.3px past the
   border edge. `top` is 8px above the old triangle's top since the square is positioned by its
   bounding box, and rotation is about the centre. */
.sfp-handoff::before {
    content: "";
    position: absolute;
    top: 45px;
    left: -8px;
    width: 16px;
    height: 16px;
    background: #2e9de1;
    /* Rotated 45° clockwise, the west-facing point is the corner where these two meet. */
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
}

.sfp-handoff-text {
    margin: 0;
    padding-right: 34px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}

.sfp-handoff-badge {
    position: absolute;
    top: 5px;
    right: 8px;
    padding: 4px;
    background: #ffeb9c;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    color: #976211;
}

@media (max-width: 767px) {

    /* Narrow enough to sit under the Filters button rather than spanning the screen. */
    .sfp-handoff {
        left: auto;
        right: auto;
        width: 206px;
        max-width: calc(100vw - 32px);
    }

    /* Fallback path only: if the panel is somehow on screen at this width the desktop branch
       positions the callout beside it, and a sideways arrow would point at nothing. */
    .sfp-handoff:not(.sfp-handoff--mobile)::before {
        display: none;
    }

}

/* Below 768px the panel is a drawer parked off-screen, so there is no panel to point at and
   the thing worth teaching is the button that opens it. The callout is fixed and reparented to
   the body rather than positioned inside the drawer, which is sitting at left:-100%. JS sets both
   the box's position and --sfp-arrow-left, the arrow's offset within it, from the button's rect. */
.sfp-handoff--mobile {
    position: fixed;
    right: auto;
    width: 206px;
    max-width: calc(100vw - 32px);
}

/* Same square, turned to point north: rotated 45° clockwise, that corner is where the top and
   left edges meet, so those are the two faces that carry the outline. */
.sfp-handoff--mobile::before {
    top: -8px;
    left: var(--sfp-arrow-left, 32px);
    margin-left: -8px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: none;
    border-bottom: none;
}

.browse-mobile-bar--spotlit {
    position: relative;
    z-index: 1041;
}

/* ── Top listing filters (useTopListingFilters) ────────────────────────────
   One layout for Search / Home / Explore / Song. The four hosts only add
   browse-sidebar--top; this block replaces the left rail with a chip bar,
   and listing-top-filters.js wraps the groups into a scroller. */

.browse-layout:has(.browse-sidebar--top),
#browse-layout.browse-layout:has(.browse-sidebar--top),
#song-browse-layout:has(.browse-sidebar--top) {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.browse-layout:has(.browse-sidebar--top) #browse-sidebar-container,
.browse-layout:has(.browse-sidebar--top) #browse-results-container {
    flex: none;
    width: 100%;
    min-width: 0;
}

/* Flatten results wrappers so the page header can sit above the chips. */
.browse-layout:has(.browse-sidebar--top) #browse-results-container,
.browse-layout:has(.browse-sidebar--top) .browse-main {
    display: contents;
}

#song-browse-layout:has(.browse-sidebar--top) #song-browse-results-wrap,
#song-browse-layout:has(.browse-sidebar--top) #browse-results-container,
#song-browse-layout:has(.browse-sidebar--top) .browse-main {
    display: contents;
}

.browse-page:has(.browse-sidebar--top) .browse-listing-head {
    order: 1;
    width: 100%;
    padding-top: 10px;
}

.browse-page:has(.browse-sidebar--top) .browse-listing-head .browse-results-header {
    margin-bottom: 12px;
}

.browse-page:has(.browse-sidebar--top) {
    overflow: visible;
}

.browse-page:has(.browse-sidebar--top) > .browse-layout > .browse-sidebar--top,
.browse-page:has(.browse-sidebar--top) #browse-sidebar-container,
.browse-page:has(.browse-sidebar--top) #song-sidebar-outer {
    order: 2;
    width: 100%;
    /* Pull in from both neighbours (the title above, Top picks/results below) by half
       of .browse-layout's 16px flex gap, so the chip bar doesn't read as more separated
       from the page than it needs to be. */
    margin-top: -8px;
    margin-bottom: -8px;
}

.listing-top-sticky-host {
    position: relative;
    z-index: 15;
    background: transparent;
}

.listing-top-sticky-host.listing-top-filters--stuck {
    position: sticky;
    top: 12px;
    padding-top: 4px;
    z-index: 15;
    will-change: transform;
}

.listing-top-sticky-host.listing-top-filters--stuck::after {
    content: "";
    position: absolute;
    top: -12px;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 6px 18px rgba(9, 40, 58, 0.12);
    z-index: -1;
    pointer-events: none;
}

.browse-page:has(.browse-sidebar--top) .browse-carousel-section--picks {
    order: 3;
    width: 100%;
}

.browse-listing-all-heading {
    display: none;
}

.browse-page:has(.browse-sidebar--top) .browse-listing-all-heading,
.browse-page:has(.browse-listing-show-all) .browse-listing-all-heading {
    display: block;
    order: 4;
    width: 100%;
    margin: 8px 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: #09283a;
    line-height: 1.2;
}

.browse-page:has(.browse-listing-show-all) .browse-listing-all-heading:has(.browse-listing-show-all[aria-expanded="false"]) {
    margin-bottom: 56px;
}

.browse-listing-show-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.browse-listing-show-all-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
}

.browse-listing-show-all[aria-expanded="true"] .browse-listing-show-all-chevron {
    transform: rotate(-135deg);
    margin-top: 2px;
}

.browse-listing-rest {
    width: 100%;
}

.browse-listing-rest[hidden] {
    display: none !important;
}

.browse-page:has(.browse-sidebar--top) .browse-listing-rest {
    order: 5;
    width: 100%;
}

.browse-page:has(.browse-sidebar--top) .browse-grid,
.browse-page:has(.browse-sidebar--top) .browse-empty,
.browse-page:has(.browse-sidebar--top) .browse-carousels,
.browse-page:has(.browse-sidebar--top) .browse-carousel-section:not(.browse-carousel-section--picks) {
    order: 5;
    width: 100%;
}

.browse-page:has(.browse-sidebar--top) .browse-pagination-container {
    order: 6;
    width: 100%;
}

.browse-page:has(.browse-sidebar--top) #song-preview-panel {
    order: 20;
}

.browse-page:has(.browse-sidebar--top) .browse-mobile-bar {
    display: none !important;
}

#browse-sidebar-container.browse-sidebar-container--top {
    background: transparent;
    margin: 0;
    padding: 0;
}

#browse-sidebar-container.browse-sidebar-container--top.listing-top-sticky-host.listing-top-filters--stuck {
    position: sticky;
    top: 12px;
    z-index: 15;
    padding-top: 4px;
}

#browse-sidebar-container.browse-sidebar-container--top::before {
    content: none;
}

.browse-sidebar.browse-sidebar--top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: none;
    width: 100%;
    max-width: none;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0;
    align-self: stretch;
    position: relative;
    left: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    z-index: 4;
}

.browse-sidebar.browse-sidebar--top:not(.listing-top-ready) {
    visibility: hidden;
    overflow: hidden;
    min-height: 40px;
    max-height: 40px;
    pointer-events: none;
}

.browse-page:has(.browse-sidebar--top) .browse-mobile-filter-btn,
.browse-page:has(.browse-sidebar--top) .browse-overlay {
    display: none !important;
}

#song-sidebar-outer.song-sidebar--top-wrap {
    width: 100%;
    flex: none;
    margin: 0 !important;
    display: block;
    overflow: visible;
}

#song-sidebar-outer.song-sidebar--top-wrap.listing-top-sticky-host.listing-top-filters--stuck {
    position: sticky;
    top: 12px;
    z-index: 15;
    padding-top: 4px;
    background: transparent;
}

#song-sidebar-outer.song-sidebar--top-wrap::before {
    display: none;
}

#song-sidebar-inner.song-sidebar--top-clip {
    width: 100% !important;
    overflow: visible;
}

#song-sidebar-inner.song-sidebar--top-clip > .browse-sidebar {
    width: 100%;
    padding: 0 !important;
    background: transparent !important;
}

#song-sidebar-outer.song-sidebar--top-wrap #sidebar-collapse-btn {
    display: none;
}

/* browsesong.css parks #browse-sidebar as a mobile drawer (ID + fixed + top:0).
   That outranks .browse-sidebar--top and pins the chips over the site header. */
#browse-sidebar.browse-sidebar--top {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 15 !important;
    transition: none !important;
}

#browse-sidebar.browse-sidebar--top.listing-top-sticky-host.listing-top-filters--stuck {
    position: sticky !important;
    top: 12px !important;
    padding-top: 4px !important;
}

.browse-sidebar--top:not(.listing-top-ready),
#browse-sidebar.browse-sidebar--top:not(.listing-top-ready) {
    visibility: hidden !important;
    overflow: hidden !important;
    height: 40px !important;
    max-height: 40px !important;
    pointer-events: none !important;
}

.listing-top-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 16px;
}

.listing-top-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
    position: relative;
}

.listing-top-filters-scroller {
    flex: 0 1 auto;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}

.listing-top-filters--overflow .listing-top-filters-scroller {
    flex: 1 1 auto;
    width: auto;
}

.listing-top-filters-scroller::-webkit-scrollbar {
    display: none;
}

.listing-top-filters-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: max-content;
}

.browse-sidebar--top .browse-filter-group,
.listing-top-filters-track .browse-filter-group {
    order: 50;
    flex: 0 0 auto;
    position: relative;
    border: none;
    padding: 0;
}

.browse-sidebar--top .browse-filter-group-header {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: 40px;
    min-height: 40px;
    padding: 0 12px 0 10px;
    border: none;
    border-radius: 999px;
    background: #E0F0FA;
    box-shadow: none;
    white-space: nowrap;
    cursor: pointer;
    width: auto;
}

.browse-sidebar--top .browse-filter-group.is-open .browse-filter-group-header,
.browse-sidebar--top .browse-filter-group-header[aria-expanded="true"] {
    background: #cfe6f4;
    box-shadow: none;
}

.browse-sidebar--top .browse-filter-group-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    color: #22313f;
    transform: translateY(-1px);
}

.listing-top-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 18px;
    width: 18px;
    height: 18px;
    padding: 1px 1px 0 0;
    border-radius: 50%;
    background: #2e9de1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.browse-sidebar--top .browse-filter-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    font-size: 0;
    line-height: 0;
    color: #1E2225;
    overflow: hidden;
    transform-origin: center center;
    transition: none;
}

.browse-sidebar--top .browse-filter-chevron::before {
    content: "";
    display: block;
    width: 12px;
    height: 7px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1.2 6.5L7 1.2l5.8 5.3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1.2 6.5L7 1.2l5.8 5.3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.browse-sidebar--top .browse-filter-group-items,
.browse-sidebar--top .browse-filter-group-items--collapsed {
    display: none;
}

/* Show every option in the chip dropdown — left-rail Show more stays. */
.browse-sidebar--top .browse-show-more-btn {
    display: none !important;
}

.browse-sidebar--top .browse-filter-item--extra,
.browse-sidebar--exp.browse-sidebar--top .browse-filter-item--extra {
    display: flex !important;
}

.browse-sidebar--top .browse-filter-group.is-open .browse-filter-group-items,
.listing-top-open-menu {
    --listing-top-menu-row: 36px;
    --listing-top-menu-pad: 16px;
    display: block;
    position: fixed;
    z-index: 40;
    min-width: 260px;
    max-width: min(360px, calc(100vw - 24px));
    /* Ten full rows + a sliver of the next so overflow is obvious. */
    max-height: min(
        calc(10 * var(--listing-top-menu-row) + var(--listing-top-menu-pad) + 14px),
        calc(100vh - 24px)
    );
    /* auto, not scroll — a menu that fits within the 10-row cap should not show a
       track/thumb at all. scrollbar-gutter reserves the space either way, so a
       neighbouring menu that does scroll never causes a width jump. */
    overflow-y: auto;
    scrollbar-gutter: stable;
    -ms-overflow-style: scrollbar;
    overscroll-behavior: contain;
    margin-top: 0;
    padding: 8px 4px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #eef2f5;
}

/* Overlay scrollbars (macOS) hide until you scroll. Force a classic track so
   a long list is obviously scrollable as soon as the menu opens. */
.browse-sidebar--top .browse-filter-group.is-open .browse-filter-group-items::-webkit-scrollbar,
.listing-top-open-menu::-webkit-scrollbar {
    -webkit-appearance: none;
    display: block;
    width: 10px;
    background: #eef2f5;
}

.browse-sidebar--top .browse-filter-group.is-open .browse-filter-group-items::-webkit-scrollbar-track,
.listing-top-open-menu::-webkit-scrollbar-track {
    background: #eef2f5;
    border-radius: 999px;
    margin: 6px 2px;
}

.browse-sidebar--top .browse-filter-group.is-open .browse-filter-group-items::-webkit-scrollbar-thumb,
.listing-top-open-menu::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
    min-height: 24px;
    border: 2px solid #eef2f5;
}

.browse-sidebar--top .browse-filter-group.is-open .browse-filter-group-items::-webkit-scrollbar-thumb:hover,
.listing-top-open-menu::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.browse-sidebar--top .browse-filter-group.is-open .browse-filter-group-items.listing-top-menu--fade-bottom::after,
.listing-top-open-menu.listing-top-menu--fade-bottom::after {
    content: "";
    position: sticky;
    bottom: -8px;
    display: block;
    height: 36px;
    margin-top: -36px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    z-index: 2;
}

.browse-sidebar--top .browse-filter-group.is-open .browse-filter-group-items .browse-filter-item,
.listing-top-open-menu .browse-filter-item {
    gap: 10px;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 6px;
}

.browse-sidebar--top .browse-filter-group.is-open .browse-filter-group-items .browse-filter-label,
.browse-sidebar--top .browse-filter-group.is-open .browse-filter-group-items .browse-filter-count,
.listing-top-open-menu .browse-filter-label,
.listing-top-open-menu .browse-filter-count {
    font-size: 14px;
    color: #62717a;
}

.listing-top-selected {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px 10px;
    width: 100%;
    margin-top: 12px;
}

.listing-top-selected-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.listing-top-selected .browse-clear-row,
.listing-top-selected .browse-clear-row--top {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 32px; /* match chip row height so Clear all sits centred on the first line */
    margin: 0;
    padding: 0;
    background: none;
    order: 0;
}

.browse-sidebar--top .browse-clear-all,
.browse-sidebar--top .browse-clear-all--exp {
    display: inline-flex;
    align-items: center;
    height: auto;
    padding: 0 0 0 4px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    color: #0083D3;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.browse-sidebar--top .browse-clear-all:hover,
.browse-sidebar--top .browse-clear-all--exp:hover {
    background: none;
    color: #0069a8;
    text-decoration: underline;
}

.listing-top-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px 0 12px;
    border: 1px solid #0083D3;
    border-radius: 999px;
    background: none;
    color: #0083D3;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.listing-top-selected-chip:hover {
    background: #E0F0FA;
    color: #0083D3;
    text-decoration: none;
}

.listing-top-selected-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.listing-top-filters-nav {
    display: none;
    flex: 0 0 auto;
    background: transparent;
}

.listing-top-filters-nav:hover {
    background: transparent;
}

.listing-top-filters--overflow .listing-top-filters-nav {
    display: inline-flex;
    position: relative;
    z-index: 2;
}

.listing-top-filters--overflow .listing-top-filters-nav:disabled {
    display: none;
}

.listing-top-filters--overflow .listing-top-filters-prev {
    margin-left: -12px;
}

.listing-top-filters--overflow .listing-top-filters-next {
    margin-right: -12px;
}

/* Tuck the chip row under the inner edge of the visible arrow. */
.listing-top-filters--fade-left .listing-top-filters-scroller {
    margin-left: -12px;
}

.listing-top-filters--fade-right .listing-top-filters-scroller {
    margin-right: -12px;
}

/* Mask the visible scrollport — abspos ::before/::after on overflow:auto
   pin to the scrollable content box, so the right fade sat off-screen. */
.listing-top-filters--fade-left .listing-top-filters-scroller,
.listing-top-filters--fade-right .listing-top-filters-scroller {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.listing-top-filters--fade-left .listing-top-filters-scroller {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000);
    mask-image: linear-gradient(to right, transparent, #000 24px, #000);
}

.listing-top-filters--fade-right .listing-top-filters-scroller {
    -webkit-mask-image: linear-gradient(to right, #000, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000, #000 calc(100% - 24px), transparent);
}

.listing-top-filters--fade-left.listing-top-filters--fade-right .listing-top-filters-scroller {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

/* First-use chip onboarding: ripple behind the first filter + tooltip on its chevron. */
.listing-top-wrap--onboarding .listing-top-filters-scroller {
    overflow: visible;
}

.listing-top-onboard-host {
    --listing-top-pulse-radius: 999px;
    position: relative;
    display: inline-flex;
    align-items: center;
    isolation: isolate;
    z-index: 1;
}

.listing-top-onboard-ring {
    position: absolute;
    inset: 0;
    background: #84C4EB;
    border-radius: var(--listing-top-pulse-radius);
    z-index: 0;
    pointer-events: none;
    animation: listing-top-onboard-pulse 1.8s ease-out infinite;
}

.listing-top-onboard-host > .browse-filter-group-header {
    position: relative;
    z-index: 1;
}

@keyframes listing-top-onboard-pulse {
    0% {
        inset: 0;
        border-radius: var(--listing-top-pulse-radius);
        opacity: 1;
    }
    83.33% {
        inset: -10px;
        border-radius: calc(var(--listing-top-pulse-radius) + 10px);
        opacity: 0;
    }
    100% {
        inset: -10px;
        border-radius: calc(var(--listing-top-pulse-radius) + 10px);
        opacity: 0;
    }
}

.listing-top-onboard-tip {
    position: absolute;
    z-index: 30;
    width: 214px;
    padding: 10px 14px 12px;
    background: #2e9de1;
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
    cursor: pointer;
}

.listing-top-onboard-tip::before {
    content: "";
    position: absolute;
    top: -7px;
    left: var(--arrow-left, 24px);
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #2e9de1;
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .listing-top-onboard-ring {
        animation: none;
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .browse-layout:has(.browse-sidebar--top) {
        display: flex;
        padding: 12px;
    }

    .browse-sidebar.browse-sidebar--top,
    #browse-sidebar.browse-sidebar--top {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none;
        z-index: 15 !important;
    }

    .listing-top-sticky-host.listing-top-filters--stuck,
    #browse-sidebar.browse-sidebar--top.listing-top-sticky-host.listing-top-filters--stuck {
        position: sticky !important;
        top: 12px !important;
        padding-top: 4px !important;
        background: transparent !important;
    }

    .browse-sidebar--top:not(.listing-top-ready),
    #browse-sidebar.browse-sidebar--top:not(.listing-top-ready) {
        visibility: hidden !important;
        overflow: hidden !important;
        height: 40px !important;
        max-height: 40px !important;
        pointer-events: none !important;
    }

    /* The desktop -8px pull-in (see .browse-page:has(.browse-sidebar--top)
       #browse-sidebar-container above) reads as too tight on mobile, where the chip bar
       sits closer to the page title and results below it. Matches that rule's selector
       (not just the plain ID) so it actually wins on specificity, not just source order —
       a plain #browse-sidebar-container here was silently losing to it. */
    .browse-page:has(.browse-sidebar--top) #browse-sidebar-container,
    .browse-page:has(.browse-sidebar--top) #song-sidebar-outer {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    #song-sidebar-outer.song-sidebar--top-wrap {
        position: relative;
        top: auto;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        z-index: 15;
        background: transparent;
    }

    #song-sidebar-outer.song-sidebar--top-wrap.listing-top-sticky-host.listing-top-filters--stuck {
        position: sticky !important;
        top: 12px !important;
        padding-top: 4px;
        background: transparent;
    }

    #song-sidebar-inner.song-sidebar--top-clip {
        width: 100% !important;
        overflow: visible !important;
    }

    #song-browse-layout:has(.browse-sidebar--top) {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    #song-browse-layout:has(.browse-sidebar--top) #song-browse-results-wrap {
        margin-left: 0 !important;
    }

    .browse-page:has(.browse-sidebar--top) .browse-mobile-bar {
        margin-bottom: 0;
    }

    .browse-layout:has(.browse-sidebar--top),
    #browse-layout.browse-layout:has(.browse-sidebar--top),
    #song-browse-layout:has(.browse-sidebar--top) {
        gap: 4px;
    }

    .browse-page:has(.browse-sidebar--top) .browse-listing-head {
        padding-top: 0;
    }

    .browse-page:has(.browse-sidebar--top) .browse-listing-head .browse-results-header {
        margin-bottom: 0;
    }

    .listing-top-wrap {
        margin-bottom: 8px;
    }

    .listing-top-selected {
        margin-top: 8px;
    }
}