/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.9-cat-filters.css
 *
 * Фильтр-пилюли категории — дропдауны (паттерн на все будущие фильтры).
 * Первая рабочая пилюля — «Цена» (min_price/max_price через URL → WC бэк).
 *
 * Архитектура:
 *   <div class="kp-cat-fpill" role="button" tabindex="0"
 *        data-kp-fpill-toggle aria-expanded="false">
 *     <span>Цена</span> [<span class="kp-cat-fpill-count">N</span>] <chevron>
 *     <div class="kp-cat-fpill-drop" data-kp-fpill-drop>
 *       … input[data-kp-fpill-input="min_price"] …
 *       … button[data-kp-fpill-apply] …
 *     </div>
 *   </div>
 *
 * is-active и .kp-cat-fpill-count бейдж — уже стилизованы в patch-5.1:226-242,
 * переиспользуем без переопределения.
 *
 * Сортировка (.kp-cat-fsort-pill) — отдельный механизм, не трогаем.
 *
 * patch-5.1 не редактируем. Скоуп строго .kp-cat-fpill* / [data-kp-fpill-*].
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Пилюля как div: position-relative + cursor ─────────────────────────── */
body.kp-body .kp-cat-fpill[data-kp-fpill-toggle] {
    position: relative;
    cursor: pointer;
    user-select: none;
}
body.kp-body .kp-cat-fpill[data-kp-fpill-toggle]:focus-visible {
    outline: 2px solid var(--ink, #0a0a0a);
    outline-offset: 2px;
}

/* ── Сам дропдаун ───────────────────────────────────────────────────────── */
body.kp-body .kp-cat-fpill-drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 20;
    padding: 16px;
    display: none;
    cursor: default;             /* перебиваем cursor:pointer родителя */
    white-space: normal;         /* родитель имеет white-space:nowrap (patch-5.1:218) */
}
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop {
    display: block;
}

/* ── Ряд инпутов от/до ─────────────────────────────────────────────────── */
body.kp-body .kp-cat-fpill-drop-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
body.kp-body .kp-cat-fpill-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.kp-body .kp-cat-fpill-field-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing:normal;
    color: var(--ink-3, #a0a0a0);
}

/* ── Сброс WoodMart-overrides на input[type=number] ─────────────────────── */
body.kp-body .kp-cat-fpill-field input[type=number] {
    height: 40px;
    padding: 0 12px;
    margin: 0;                   /* WoodMart любит ставить margin */
    background: #fff;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: var(--radius-sm, 8px);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;              /* WoodMart может ставить высокий line-height */
    color: var(--ink, #0a0a0a);
    width: 100%;
    box-sizing: border-box;
    -moz-appearance: textfield;  /* убрать спинеры в Firefox */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s;
}
body.kp-body .kp-cat-fpill-field input[type=number]::-webkit-outer-spin-button,
body.kp-body .kp-cat-fpill-field input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;    /* убрать спинеры в WebKit */
    margin: 0;
}
body.kp-body .kp-cat-fpill-field input[type=number]:focus {
    outline: 0;
    border-color: var(--ink, #0a0a0a);
}

/* ── Подвал: reset слева (опц.), apply справа ──────────────────────────── */
body.kp-body .kp-cat-fpill-drop-foot {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.kp-body .kp-cat-fpill-reset {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    text-decoration: underline;
    text-decoration-color: var(--yellow, #FECE15);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
body.kp-body .kp-cat-fpill-reset:hover {
    color: var(--ink, #0a0a0a);
}

/* Тёмная CTA «Применить». margin-left:auto всегда — apply справа независимо
 * от наличия reset (когда фильтр не активен, reset не рендерится). */
body.kp-body .kp-cat-fpill-apply {
    margin-left: auto;
    height: 40px;
    padding: 0 22px;
    background: var(--ink, #0a0a0a);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing:normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-apply:hover {
    background: #1a1a1a;
}

/* ── Mobile ≤760: drop на всю ширину контейнера ─────────────────────────── */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop {
        left: 0;
        right: 0;
        min-width: 0;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * Дроп фильтра «Цвет» — multi-select свотчей.
 * data-kp-fpill-multi на кнопках-свотчах; toggle .is-selected по клику.
 * Спецсвотчи (filterid 22/17152) — классы .kp-swatch-transparent /
 * .kp-swatch-rainbow; стилевые паттерны зеркалят patch-6.4 (шахматка/радуга),
 * но привязаны к нашему .kp-cat-fpill-color-swatch, чтобы изменения свотчей
 * карточек не задели фильтр и наоборот.
 * ════════════════════════════════════════════════════════════════════════ */

/* Дроп шире — нужна сетка из 4 свотчей.  Sticky footer + скролл при много цветов.
 * display НЕ задаём здесь: иначе display:flex со специфичностью 0,0,2,1 перебивал бы
 * базовый display:none (стр. 48) у закрытого дропа — дроп был виден всегда. flex-колонка
 * включается ниже только при .is-open. */
body.kp-body .kp-cat-fpill-drop--colors {
    min-width: 360px;
    max-height: 420px;
    padding: 16px;
}

/* Открытое состояние Цвета: flex-колонка (sticky footer + скролл грида).
 * Специфичность 0,0,3,1 == общему .is-open .kp-cat-fpill-drop {display:block} (стр. 52),
 * порядок ниже в файле — flex побеждает block. */
body.kp-body .kp-cat-fpill.is-open .kp-cat-fpill-drop--colors {
    display: flex;
    flex-direction: column;
}

body.kp-body .kp-cat-fpill-colors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 10px;
    overflow-y: auto;
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Кнопка-свотч: круг + имя под ним. */
body.kp-body .kp-cat-fpill-color {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-color:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-color.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Сам кружок. Размер крупнее, чем в карточках (32 vs 16) — нужна узнаваемость. */
body.kp-body .kp-cat-fpill-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12);
    box-sizing: border-box;
    transition: box-shadow .15s;
    flex-shrink: 0;
}
body.kp-body .kp-cat-fpill-color.is-selected .kp-cat-fpill-color-swatch {
    box-shadow: inset 0 0 0 2.5px var(--ink, #0a0a0a);
}

/* Спецсвотчи в фильтре — зеркальный код шахматки и радуги из patch-6.4:19-39,
 * но узко привязанные к нашему классу, чтобы не сцепляться с карточками. */
body.kp-body .kp-cat-fpill-color-swatch.kp-swatch-transparent {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #ddd 25%, transparent 25%),
        linear-gradient(-45deg, #ddd 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ddd 75%),
        linear-gradient(-45deg, transparent 75%, #ddd 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
body.kp-body .kp-cat-fpill-color-swatch.kp-swatch-rainbow {
    background: conic-gradient(
        #D32F2F, #F57C00, #FBC02D, #43A047,
        #1AA89A, #1B4D8F, #7B3FA0, #E91E63, #D32F2F
    );
}

/* Имя цвета. */
body.kp-body .kp-cat-fpill-color-name {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-2, #6b6b6b);
    text-align: center;
}
body.kp-body .kp-cat-fpill-color.is-selected .kp-cat-fpill-color-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Sticky footer внутри дропа Цвета (кнопки всегда видны над скроллом грида). */
body.kp-body .kp-cat-fpill-drop--colors .kp-cat-fpill-drop-foot {
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e5e5e5);
    background: #fff;
}

/* Mobile ≤760: 3 свотча в ряд, дроп на всю ширину контейнера. */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop--colors {
        min-width: 0;
        max-height: 360px;
    }
    body.kp-body .kp-cat-fpill-colors-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}