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

.browse-page {
    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;
    transition: transform 200ms;
}

.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;
}

/* "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;
    position: relative;
    bottom: 1px;
    align-self: center;
    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;
}

.browse-filter-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;
}

#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-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: 768px)  { .browse-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px)  { .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); } }

/* ─── 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) */
}

.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;
    /* background-image, background-size, etc. are set inline per-card */
}

.browse-card-tag {
    position: absolute;
    bottom: 3px;
    right: 3px;
    color: #000;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    white-space: nowrap;
    line-height: 1;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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-view-all-link {
    font-size: 14px;
    font-weight: 600;
    color: #22313f;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.browse-view-all-link:hover {
    color: #2E9DE1;
    text-decoration: none;
}

.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;
}

.browse-page-btn--disabled {
    color: #b0bec5;
    border-color: #e8e8e8;
    cursor: default;
    pointer-events: none;
}

/* 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-view-all {
    font-size: 13px;
    font-weight: 600;
    color: #22313f;
    text-decoration: none;
    white-space: nowrap;
    align-self: center;
    margin-right: 4px;
}

.browse-carousel-view-all:hover {
    color: #2E9DE1;
    text-decoration: none;
}

.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;
}

.browse-carousel-heading-link {
    color: #22313f;
    text-decoration: none;
}

.browse-carousel-heading-link:hover {
    color: #2E9DE1;
    text-decoration: none;
}

.browse-carousel-heading-link .fa {
    font-size: 14px;
    margin-left: 6px;
    color: #2E9DE1;
}


/* 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;
}

.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,
.bh-cta.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;
}

.bh-cta.section-gap {
    padding-top: 32px;
    padding-bottom: 32px;
}

@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,
    .bh-cta.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;
    }

    .bh-cta.section-gap {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .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;
    }

}