/* Active filter chips outside /stores: nothing when empty, then the row eases open. */

.wh-active-filters {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.wh-active-filters .active-filters-reveal {
    width: 100%;
    height: 0;
    overflow: hidden;
}

.wh-active-filters .active-filters-reveal__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-height: 0;
    padding-bottom: 8px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 220ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wh-active-filters.is-open .active-filters-reveal__inner {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .wh-active-filters .active-filters-reveal__inner {
        transition: none;
        transform: none;
    }
}

.wh-active-filters .wh-active-filters__tags,
.wh-active-filters #active-filters-list,
.wh-active-filters .brand-ads-active-filters-list,
.wh-active-filters .std-gads-active-filters-list,
.wh-active-filters .ad-rank-active-filters-list {
    display: flex !important;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.wh-active-filters #active-filters-list > div,
.wh-active-filters .brand-ads-filter-chip,
.wh-active-filters .std-gads-filter-chip,
.wh-active-filters .ad-rank-filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: min(320px, 100%);
    height: 28px !important;
    margin: 0 !important;
    padding: 0 3px 0 10px !important;
    background: #fff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04) !important;
    color: #111827 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    cursor: pointer;
}

.wh-active-filters #active-filters-list > div:hover,
.wh-active-filters .brand-ads-filter-chip:hover,
.wh-active-filters .std-gads-filter-chip:hover,
.wh-active-filters .ad-rank-filter-chip:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

.wh-active-filters #active-filters-list > div > span.font-medium,
.wh-active-filters .brand-ads-filter-chip-label,
.wh-active-filters .std-gads-filter-chip-label,
.wh-active-filters .ad-rank-filter-chip-label {
    flex: 0 0 auto;
    color: #6b7280 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.wh-active-filters #active-filters-list > div > span:not(.font-medium),
.wh-active-filters .brand-ads-filter-chip-value,
.wh-active-filters .std-gads-filter-chip-value,
.wh-active-filters .ad-rank-filter-chip-value {
    min-width: 0;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.wh-active-filters #active-filters-list > div > button,
.wh-active-filters .brand-ads-filter-chip-remove,
.wh-active-filters .std-gads-filter-chip-remove,
.wh-active-filters .ad-rank-filter-chip-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #6b7280 !important;
    cursor: pointer;
}

.wh-active-filters #active-filters-list > div > button:hover,
.wh-active-filters .brand-ads-filter-chip-remove:hover,
.wh-active-filters .std-gads-filter-chip-remove:hover,
.wh-active-filters .ad-rank-filter-chip-remove:hover {
    background: #f4f4f5 !important;
    color: #111827 !important;
}

.wh-active-filters .wh-active-filters__clear,
.wh-active-filters .brand-ads-clear-all-filters,
.wh-active-filters .std-gads-clear-all-filters,
.wh-active-filters .ad-rank-clear-all-filters {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    height: 28px;
    margin: 0 !important;
    padding: 0 8px;
    border: none !important;
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.wh-active-filters .wh-active-filters__clear:hover,
.wh-active-filters .brand-ads-clear-all-filters:hover,
.wh-active-filters .std-gads-clear-all-filters:hover,
.wh-active-filters .ad-rank-clear-all-filters:hover {
    background: #f4f4f5 !important;
    color: #111827 !important;
}

/* These bars used to be cards that appeared with display:none. The reveal owns that now. */
.wh-active-filters.brand-ads-active-filters,
.wh-active-filters.std-gads-active-filters,
.wh-active-filters.ad-rank-active-filters,
html[data-theme="dark"] .brand-detail-page-shell .wh-active-filters.brand-ads-active-filters,
html[data-theme="dark"] .store-detail-page-shell .wh-active-filters.std-gads-active-filters,
html[data-theme="dark"] .brand-detail-page-shell .wh-active-filters.ad-rank-active-filters,
html[data-theme="dark"] #tab-ad-rank .wh-active-filters.ad-rank-active-filters {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 0 !important;
}

.std-similar-explore-mount .active-filters-bar.is-empty {
    margin: 0 !important;
}

.std-similar-explore-mount .active-filters-bar .clear-filters {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.wh-active-label.is-empty,
.dashboard-filters-explore .wh-filter-summary {
    display: none !important;
}

@keyframes whCountIn {
    from { opacity: 0; translate: 0 3px; }
    to { opacity: 1; translate: 0 0; }
}
.wh-count-in {
    animation: whCountIn 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.add_list.is-refreshing > .one_add_wrapper,
.add_list.is-refreshing > .add_item,
table.is-refreshing tbody tr,
.explore-shops-tiles-wrap.is-refreshing .explore-shops-tile,
.explore-shops-tiles-grid.is-refreshing > * {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.dropdown-options,
.range-slider-dropdown {
    transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), scale 200ms cubic-bezier(0.22, 1, 0.36, 1), display 200ms allow-discrete;
    transform-origin: top center;
}
.dropdown-options:not(.show),
.range-slider-dropdown:not(.show) {
    opacity: 0;
    scale: 0.96;
}
.dropdown-options.show,
.range-slider-dropdown.show {
    opacity: 1;
    scale: 1;
}
@starting-style {
    .dropdown-options.show,
    .range-slider-dropdown.show {
        opacity: 0;
        scale: 0.96;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wh-count-in,
    .dropdown-options,
    .range-slider-dropdown,
    .add_list.is-refreshing > .one_add_wrapper,
    .add_list.is-refreshing > .add_item,
    table.is-refreshing tbody tr {
        animation: none;
        transition: none;
        opacity: 1;
        scale: 1;
    }
}

html[data-theme="dark"] .wh-active-filters #active-filters-list > div,
html[data-theme="dark"] .wh-active-filters .brand-ads-filter-chip,
html[data-theme="dark"] .wh-active-filters .std-gads-filter-chip,
html[data-theme="dark"] .wh-active-filters .ad-rank-filter-chip {
    background: var(--dk-surface-2) !important;
    border-color: #225aea !important;
    color: var(--dk-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .wh-active-filters #active-filters-list > div:hover,
html[data-theme="dark"] .wh-active-filters .brand-ads-filter-chip:hover,
html[data-theme="dark"] .wh-active-filters .std-gads-filter-chip:hover,
html[data-theme="dark"] .wh-active-filters .ad-rank-filter-chip:hover {
    background: var(--dk-surface-3) !important;
    border-color: #4c7cf0 !important;
}

html[data-theme="dark"] .wh-active-filters #active-filters-list > div > span.font-medium,
html[data-theme="dark"] .wh-active-filters .brand-ads-filter-chip-label,
html[data-theme="dark"] .wh-active-filters .std-gads-filter-chip-label,
html[data-theme="dark"] .wh-active-filters .ad-rank-filter-chip-label,
html[data-theme="dark"] .wh-active-filters .wh-active-filters__clear,
html[data-theme="dark"] .std-similar-explore-mount .active-filters-bar .clear-filters {
    color: var(--dk-text-3) !important;
}

html[data-theme="dark"] .wh-active-filters #active-filters-list > div > span:not(.font-medium),
html[data-theme="dark"] .wh-active-filters .brand-ads-filter-chip-value,
html[data-theme="dark"] .wh-active-filters .std-gads-filter-chip-value,
html[data-theme="dark"] .wh-active-filters .ad-rank-filter-chip-value {
    color: var(--dk-text) !important;
}

html[data-theme="dark"] .wh-active-filters #active-filters-list > div > button,
html[data-theme="dark"] .wh-active-filters .brand-ads-filter-chip-remove,
html[data-theme="dark"] .wh-active-filters .std-gads-filter-chip-remove,
html[data-theme="dark"] .wh-active-filters .ad-rank-filter-chip-remove {
    color: var(--dk-text-3) !important;
}

html[data-theme="dark"] .wh-active-filters .wh-active-filters__clear:hover,
html[data-theme="dark"] .std-similar-explore-mount .active-filters-bar .clear-filters:hover {
    background: var(--dk-surface-3) !important;
    color: var(--dk-text) !important;
}