/* Category UI component isolation layer.
   New category component styles live here to prevent cross-feature regressions. */
.category-results-toolbar,
.category-filter-panel-header,
.category-active-filter-chip,
.category-color-choice,
.category-stock-filter-toggle {
    box-sizing: border-box;
}

/* Toolbar isolation: all controls stay in one RTL row. */
.category-results-toolbar {
    direction: rtl;
    width: 100%;
}

.category-results-toolbar-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    direction: rtl;
    width: 100%;
    flex-wrap: nowrap;
}


.category-results-count {
    white-space: nowrap;
    font-weight: 500;
    color: #333;
    padding: 0 4px;
    flex-shrink: 0;
}

.category-sort-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    direction: rtl;
    flex-shrink: 0;
}

.category-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    direction: rtl;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 0;
}

/* Desktop category scrolling model.
   The document remains the primary scroll container. The filter rail stays in
   normal document flow, so the category row is never shorter than the visible
   filter shell. The anchor is natively sticky and bounded by its stretched
   Bootstrap column: it pins below Top Chrome while results scroll, then releases
   with the end of the category row so the footer can enter normally. Only the
   facet body has its own scrollbar. */
@media (min-width: 768px) {
    .category-results-toolbar {
        position: sticky;
        top: var(--site-top-chrome-height, 0px);
        z-index: 1020;
        padding-block: 8px;
        background: var(--theme-category-bg, #fff);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .category-filter-column,
    .category-filter-anchor {
        min-width: 0;
    }

    .category-filter-column {
        align-self: stretch;
    }

    .category-filter-anchor {
        position: sticky;
        top: calc(var(--site-top-chrome-height, 0px) + 12px);
        width: 100%;
        max-height: calc(100dvh - var(--site-top-chrome-height, 0px) - 24px);
    }

    #category-filter-desktop {
        width: 100%;
        max-height: inherit;
        box-sizing: border-box;
    }

    #category-filter-desktop .filter-sidebar,
    #category-filter-desktop .category-filter-card {
        width: 100%;
        max-height: inherit;
        min-height: 0;
        box-sizing: border-box;
    }

    #category-filter-desktop .category-filter-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #category-filter-desktop .category-filter-card-header {
        flex: 0 0 auto;
        padding: 16px 16px 10px;
        background: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    #category-filter-desktop .category-filter-scroll-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        padding: 10px 16px 16px;
    }
}