/*
 * Разметка донора (.shopFilter > .contentTitle + .contentBody > form >
 * .filtersList), поэтому вид — из его перенесённого CSS: жёлтый заголовок,
 * характеристики вкладками, значения выпадают под полосой.
 *
 * Своё здесь одно: число товаров у значения. У доноров se его не было —
 * они не считали, сколько найдётся, — а фасеты витрины считают, и прятать
 * это было бы потерей. Класс свой, так что спорить с донорским CSS нечему.
 */
.shopFilter .filterValueCount { opacity: 0.55; margin-left: 0.4em; font-size: 0.9em; }
.shopFilter .filterValueItem.is-empty { opacity: 0.45; }
.shopFilter .filterValueItem.rangeFeature label { gap: 0.5em; }
.shopFilter .filterValueItem.rangeFeature .inpRange { width: 6em; }

/* Признак применённого отбора — в самой полосе, рядом с заголовком: у донора его не было
   вовсе, и со свёрнутой полосой нельзя было понять, почему выдача короткая. */
/* Скрытие атрибутом обязано побеждать: у элемента с [hidden] браузерное display:none
   слабее нашего inline-flex, и без этой пары правил признак висел бы всегда — в том числе
   на чистой странице раздела. */
.shopFilter .filterState[hidden] {
    display: none;
}

/* Признак живёт ВНУТРИ заголовочного блока полосы, а он узкий (у perscarpet 234 px) и
   стоит вплотную к тёмной ленте вкладок. Поэтому строка своя, перенос разрешён, ширина
   ограничена блоком: иначе «Сбросить» уезжает под соседнюю ленту и там обрезается. */
.shopFilter .filterState {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    max-width: 100%;
    margin: 3px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    white-space: normal;
}

/* Кружок с числом: сколько условий стоит. Круг, а не плашка, — чтобы читался как счётчик
   рядом с действием, а не как ещё одна подпись в заголовке. */
.shopFilter .filterStateCount {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Сброс — ссылка, а не кнопка: это переход на ту же страницу без параметров отбора,
   и вести он должен по-настоящему, в том числе средним щелчком и с клавиатуры. */
.shopFilter .filterStateReset {
    color: inherit;
    text-decoration: underline;
}

.shopFilter .filterStateReset:hover {
    text-decoration: none;
}