/* Loaded after the Portal bundle so this layout can be released independently. */
@media (min-width: 901px) {
    .catalog-layout > .catalog-filters {
        position: sticky;
        top: 16px;
        align-self: start;
        height: auto;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow: hidden;
    }

    .catalog-layout > .catalog-filters form {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
    }

    .catalog-layout > .catalog-filters .cf-fields {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .catalog-layout > .catalog-filters .cf-brand-list {
        max-height: clamp(240px, 35vh, 480px);
        max-height: clamp(240px, 35dvh, 480px);
        overflow-y: auto;
    }

    .catalog-layout > .catalog-filters footer {
        position: static;
        flex-shrink: 0;
    }
}

/* Dense attribute lists keep long compositions and size ranges readable. */
.catalog-filters > header {
    padding: 14px 16px;
}

.catalog-filters .cf-fields {
    padding-right: 14px;
    padding-left: 14px;
}

.catalog-filters .cf-fields section {
    padding: 14px 0;
}

.catalog-filters .cf-group > summary {
    padding: 12px 0;
}

.catalog-filters .cf-group-body {
    padding-bottom: 10px;
}

.catalog-filters .cf-dynamic-values {
    gap: 4px;
    max-height: 176px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    padding: 4px;
    margin: -4px;
}

.catalog-filters .cf-dynamic-values label {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    min-height: 28px;
    gap: 4px;
    padding: 5px 6px;
    line-height: 1.35;
}

.catalog-filters .cf-dynamic-values label > span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.catalog-filters .cf-dynamic-values label > small {
    flex-shrink: 0;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.catalog-filters .cf-group-body > .cf-note {
    margin-top: 6px;
}

@media (max-width: 900px), (pointer: coarse) {
    .catalog-filters .cf-dynamic-values {
        max-height: 240px;
    }

    .catalog-filters .cf-dynamic-values label {
        min-height: 44px;
        padding: 8px;
        font-size: 12px;
    }

    .catalog-filters .cf-group > summary {
        min-height: 44px;
    }
}