/* ════════════════════════════════════════════════════════════════════════════
 * patch-7.1-cat-material.css
 *
 * Фильтр «Материал» в шапке категории — multi-select чекбоксов из pa_material.
 * URL: ?filter_pa_material=slug,slug — WC layered_nav обрабатывает сам
 * (OR-семантика закреплена фильтром woocommerce_layered_nav_default_query_type
 * в catalog-filter.php). Counts — kp_cat_available_materials.
 *
 * Архитектура зеркалит Наличие (patch-7.0) + скролл/sticky-footer Цвета (patch-6.9):
 *   <div class="kp-cat-fpill-drop kp-cat-fpill-drop--material" data-kp-fpill-drop>
 *     <div class="kp-cat-fpill-mat-list">  // скроллируемый список
 *       <button class="kp-cat-fpill-mat [is-selected]"
 *               data-kp-fpill-input="filter_pa_material"
 *               data-kp-fpill-value="khlopok"
 *               data-kp-fpill-multi>
 *         <span class="kp-cat-fpill-mat-check"></span>
 *         <span class="kp-cat-fpill-mat-name">Хлопок</span>
 *         <span class="kp-cat-fpill-mat-count">2163</span>
 *       </button>
 *       … 17 строк ещё (Одежда даёт 18 материалов) …
 *     </div>
 *     <div class="kp-cat-fpill-drop-foot"> Сбросить · Применить </div>
 *   </div>
 *
 * ВАЖНО (баг Цвета не повторяем):
 *   На модификаторе .kp-cat-fpill-drop--material НЕ задаём display:flex/grid —
 *   только min-width / max-height / padding. flex-on-drop включается ТОЛЬКО
 *   через .is-open .kp-cat-fpill-drop--material (как у patch-6.9:180-183 для
 *   Цвета). Иначе закрытый дроп будет виден всегда — баг patch-5.8/5.9.
 *
 * Скоуп: body.kp-body .kp-cat-fpill-mat* / .kp-cat-fpill-drop--material.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Дроп: контейнер, размеры. display не трогаем здесь (см. блок выше). */
body.kp-body .kp-cat-fpill-drop--material {
    min-width: 320px;
    max-height: 420px;
    padding: 16px;
}

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

/* Список — скроллируется при длинном перечне (Одежда=18 материалов). */
body.kp-body .kp-cat-fpill-mat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Строка-кнопка чекбокса. Паттерн зеркалит .kp-cat-fpill-stock из patch-7.0,
 * но строки чуть плотнее (список длинный — нужно вместить 10-18 строк без скролла). */
body.kp-body .kp-cat-fpill-mat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
body.kp-body .kp-cat-fpill-mat:hover {
    background: var(--fog, #f5f5f5);
}
body.kp-body .kp-cat-fpill-mat.is-selected {
    background: var(--yellow-soft, #fff8d6);
}

/* Квадратик-чекбокс. Тот же приём, что в patch-7.0:64-91 для Наличия —
 * имитация нативного checkbox без <input> (квадрат + ::after-галочка). */
body.kp-body .kp-cat-fpill-mat-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--line, #e5e5e5);
    background: #fff;
    box-sizing: border-box;
    position: relative;
    transition: background .15s, border-color .15s;
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-check {
    background: var(--ink, #0a0a0a);
    border-color: var(--ink, #0a0a0a);
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* Имя материала — flex-grow, влезает за счёт min-width:0 в overflow если нужно. */
body.kp-body .kp-cat-fpill-mat-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2, #6b6b6b);
    line-height: 1.2;
    /* На случай длинных названий вроде «Переработанный полиэстер» — wrap по словам. */
    white-space: normal;
    overflow-wrap: break-word;
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-name {
    color: var(--ink, #0a0a0a);
    font-weight: 700;
}

/* Счётчик справа. */
body.kp-body .kp-cat-fpill-mat-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #a0a0a0);
    font-variant-numeric: tabular-nums;
}
body.kp-body .kp-cat-fpill-mat.is-selected .kp-cat-fpill-mat-count {
    color: var(--ink-2, #6b6b6b);
}

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

/* Mobile ≤760: дроп уже на всю ширину контейнера через patch-6.9:150-156.
 * Дополнительно — чуть меньше max-height. */
@media (max-width: 760px) {
    body.kp-body .kp-cat-fpill-drop--material {
        min-width: 0;
        max-height: 360px;
    }
}