/* Shared Decfort Vue Posts sorting; component classes contain the styles. */
.catalog-sort-overlay {
    position: fixed;
    inset: 0;
    background: var(--blackOpacity300);
    z-index: 9997;
}
.catalog-sort-icon {
    display: block;
    flex-shrink: 0;
}
.catalog-sort-select {
    position: relative;
}
.catalog-sort-select .select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    
    padding: 0 16px !important;
    border: 0;
    border-radius: 4px;
    background: var(--inputDefaultBg);
    color: var(--contentColor);
    font: 400 19px/24px var(--textFont, 'Onest', sans-serif);
    letter-spacing: -.38px;
    white-space: nowrap;
    cursor: pointer;
}
.catalog-sort-select .select-trigger::after {
    content: none;
}
.catalog-sort-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: auto;
    z-index: 20;
    box-sizing: border-box;
    width: 281px;
    max-width: calc(100vw - 32px);
    padding: 0 20px 4px;
    border-radius: 8px;
    background: var(--pageBg);
    box-shadow: 0 2px 4px var(--blackOpacity200);
}
.catalog-sort-select .catalog-sort-title,
.catalog-sort-select .catalog-sort-overlay {
    display: none;
}
.catalog-sort-select .options-list {
    position: static;
    width: auto;
    min-width: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    list-style: none;
}
.catalog-sort-select .option-item {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--blackOpacity100);
    background: none;
    color: var(--contentColor);
    font: 400 19px/24px var(--textFont, 'Onest', sans-serif);
    letter-spacing: -.38px;
    cursor: pointer;
}
.catalog-sort-select .option-item:last-child {
    border-bottom: 0;
}
.catalog-sort-select .option-item::before,
.catalog-sort-select .option-item::after {
    content: none;
}
.catalog-sort-select .option-item.is-active {
    background: var(--inputDefaultBg);
}
.catalog-sort-radio {
    display: block;
    flex: 0 0 auto;
}
.catalog-sort-select :is(button, [role='listbox']):focus-visible {
    outline: 2px solid var(--primary500);
    outline-offset: 3px;
}
@media (max-width: 767px) {
.catalog-filter-toolbar .catalog-sort-select {
        width: 100%;
    }
.catalog-sort-select .select-trigger {
        min-height: 44px;
        font-size: 16px;
        line-height: 20px;
    }
.catalog-sort-select .catalog-sort-overlay {
        display: block;
    }
.catalog-sort-menu {
        position: fixed;
        inset: auto 0 0;
        z-index: 9998;
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 24px 16px max(24px, env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        box-shadow: none;
    }
.catalog-sort-select .catalog-sort-title {
        display: block;
        margin: 0 0 16px;
        font: 500 18px/22px var(--titleFont, 'Onest', sans-serif);
        letter-spacing: -.54px;
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
    }
.catalog-sort-select .option-item {
        flex-direction: row-reverse;
        justify-content: space-between;
        min-height: 54px;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -.32px;
    }
}
@media (hover: hover) {
.catalog-sort-select .select-trigger:hover { color: var(--contentOpacityColor); }
.catalog-sort-select .option-item:hover { background: var(--inputDefaultBg); }
}
.catalog-sort-select .select-trigger[aria-expanded='true'] { color: var(--contentColor); }
.catalog-sort-icon,
.catalog-sort-radio {
    display: block;
    flex: 0 0 auto;
    mask: var(--catalog-sort-asset) center / contain no-repeat;
    background: currentColor;
}
.catalog-sort-icon { --catalog-sort-asset: url('../assets/catalog-filters/sort.svg'); width: 24px; height: 24px; }
.catalog-sort-radio { --catalog-sort-asset: url('../assets/catalog-filters/radio.svg'); width: 22px; height: 22px; color: var(--contentColor); }
.catalog-sort-radio.is-selected { --catalog-sort-asset: url('../assets/catalog-filters/radio-selected.svg'); color: var(--contentPrimaryColor); }