/**
 * Long filter facets scroll inside themselves — 8 options visible, the rest on
 * a scroll (Mehmood's rule, 18 Aug). Two surfaces, one behaviour:
 *
 *   1. The PLP sidebar, our own markup — the container carries
 *      `.lux-facet-scroll`, emitted by category/plp.phtml only when the facet
 *      has MORE than 8 options, so short facets keep their exact height.
 *   2. The search results "SHOP BY" panel, which is Hyvä's stock layered
 *      navigation. There is no template of ours in that path, so the same rule
 *      is expressed as a selector: a list is capped only when a 9th <li>
 *      exists. `:has()` does the counting, so no PHP override is needed and
 *      nothing changes for a list of 8 or fewer.
 *
 * ⚠ The two max-heights differ because the ROWS differ, and both are measured
 * rather than guessed: a sidebar option is 47px (py-[7px] around a 12px label
 * over a 10px count) and a SHOP BY row is 32px (py-1 around a single line).
 * If either row's padding or type size changes, re-measure — 8 rows is the
 * contract, not the pixel value.
 */

/* PLP sidebar — 8 × 47px */
.lux-facet-scroll {
    max-height: 376px;
}

/* Search "SHOP BY" — 8 × 32px, only once a 9th option exists */
.filter-options-content ol.items:has(> li:nth-child(9)) {
    max-height: 256px;
}

.lux-facet-scroll,
.filter-options-content ol.items:has(> li:nth-child(9)) {
    overflow-y: auto;
    /* a facet that reaches its end must not scroll the page behind it */
    overscroll-behavior: contain;
    padding-inline-end: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;

    /* Subtle bottom fade — the discoverability cue. macOS draws OVERLAY
     * scrollbars, so the bar is invisible until you actually scroll, and a
     * list that stops flush on a row boundary reads as a complete list. The
     * last rows dim instead, which says "there is more" without adding a
     * control the design never asked for. Removed by `.is-end` (facet-scroll
     * JS) once the shopper reaches the bottom, so the final option is never
     * left looking greyed out. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), rgba(0, 0, 0, 0.08));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), rgba(0, 0, 0, 0.08));
}

.lux-facet-scroll.is-end,
.filter-options-content ol.items.is-end {
    -webkit-mask-image: none;
    mask-image: none;
}

/* Chromium-only: without an explicit rule the thumb inherits the page's, which
 * is heavier than this panel wants. Standard scrollbar-* above wins where it
 * is supported; this is the fallback, not a duplicate. */
.lux-facet-scroll::-webkit-scrollbar,
.filter-options-content ol.items:has(> li:nth-child(9))::-webkit-scrollbar {
    width: 3px;
}

.lux-facet-scroll::-webkit-scrollbar-track,
.filter-options-content ol.items:has(> li:nth-child(9))::-webkit-scrollbar-track {
    background: transparent;
}

.lux-facet-scroll::-webkit-scrollbar-thumb,
.filter-options-content ol.items:has(> li:nth-child(9))::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 9999px;
}