/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.8-cat-chips-wrap.css
 *
 * Ряд пилюль подкатегорий — wrap вместо горизонтального скролла, с collapse
 * до 2 рядов и кнопкой «Показать все (N) / Свернуть» когда контента больше.
 *
 * Перебиваем patch-5.1:
 *   - :136-143 — flex+overflow-x:auto+scroll-snap (трек скроллился).
 *   - :550-553 — mask-image+padding-right:60px (fade-arrow стиль).
 *   - .kp-cat-chips-arrow (:555-570, :887) — стрелка больше не используется,
 *     её разметку убрали в archive-product.php. Старые правила становятся
 *     мёртвыми (по политике «не редактируем patch-5.1» оставляем как есть).
 *
 * Высота пилюли — 42px (patch-5.1:151).
 * 2 ряда = padding-top 4 + chip 42 + row-gap 10 + chip 42 + padding-bottom 8 = 106px.
 *
 * Mobile ≤760: max-height:none — пилюли переносятся естественно, всё видно,
 * тогглер скрывается JS-ом (clientHeight == scrollHeight).
 *
 * Без `!important`: специфичность совпадает с patch-5.1, побеждаем порядком
 * загрузки (этот патч позже). См. CLAUDE.md ловушка №8.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Трек: wrap, 2 ряда по умолчанию ──────────────────────────────────── */
body.kp-body .kp-cat-chips-track {
    flex-wrap: wrap;
    overflow: visible;                /* снимаем overflow-x:auto из patch-5.1:139 */
    overflow-y: hidden;               /* нужно для клипа третьего ряда */
    mask-image: none;                 /* снимаем fade из patch-5.1:551 */
    -webkit-mask-image: none;
    padding-right: 0;                 /* снимаем резерв под стрелку из patch-5.1:553 */
    padding-left: 0;
    row-gap: 10px;                    /* отступ между рядами (gap из 5.1 = 10 на оба) */
    max-height: 106px;                /* ровно 2 ряда: 4 + 42 + 10 + 42 + 8 */
    transition: max-height .3s ease;
    scroll-snap-type: none;           /* снимаем scroll-snap из patch-5.1:142 */
}

/* ── Раскрыто — JS вешает .is-expanded на .kp-cat-chips ────────────────── */
body.kp-body .kp-cat-chips.is-expanded .kp-cat-chips-track {
    max-height: 2000px;               /* достаточно для любого реалистичного числа */
}

/* ── Кнопка-тогглер: текст-ссылка с жёлтым underline ───────────────────── */
body.kp-body .kp-cat-chips-toggle {
    display: none;                    /* база — скрыта; JS показывает при is-clipped */
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing:normal;
    text-transform: uppercase;
    color: var(--ink-2, #6b6b6b);
    text-decoration: underline;
    text-decoration-color: var(--yellow, #FECE15);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color .15s;
}
body.kp-body .kp-cat-chips-toggle:hover {
    color: var(--ink, #0a0a0a);
}

/* Видим, только если контент реально клипается (JS ставит .is-clipped) */
body.kp-body .kp-cat-chips.is-clipped .kp-cat-chips-toggle {
    display: inline-block;
}

/* ── Mobile ≤760: тот же collapse-механизм, но на 4 ряда ─────────────────
 * Каскад-аудит подтвердил: .kp-cat-chip height/padding/font НЕ переопределяются
 * в патчах под @760/@480 — пилюля на мобильном остаётся 42px высотой.
 * 4 ряда: 4 + 4×42 + 3×10 + 8 = 210px.
 *
 * is-expanded в раскрытом состоянии работает без отдельной mobile-правки:
 * `body.kp-body .kp-cat-chips.is-expanded .kp-cat-chips-track` имеет
 * специфичность 0,0,3,1 — выше чем у mobile-правила ниже (0,0,2,1), поэтому
 * max-height:2000px из базы побеждает специфичностью независимо от media.
 */
@media (max-width: 760px) {
    body.kp-body .kp-cat-chips-track {
        max-height: 210px;            /* 4 ряда — см. расчёт выше */
    }
}