/*
 * yar-led / Точка Света — редизайн КАТАЛОГА
 * Scope: страницы каталога (архив товаров, категории, бренды).
 * Грузится ПОВЕРХ redesign.css. Тема: «Тёплый минимал» (перенесено из
 * прототипа catalog5) — тёплая светлая палитра, амбер-акцент, тёплые тени.
 * Прежняя жёлто-графитовая версия сохранена как снапшот:
 * catalog-redesign-2026_05.css + страница /catalog-2026-05/.
 *
 * Структура файла — пронумерованные шаги в маркерах "ШАГ N".
 * Откат к шагу N: удалить блоки с номером > N. Подробности — docs/catalog-redesign-journal.md.
 *
 * Сокращения скоупа (см. ниже):
 *   --- листинги: архив товаров + категории + бренды
 *   --- все: то же + карточка товара (single-product)
 */

/* ==== ШАГ 1: Фундамент — токены, фон, типографика ==== */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand,
    body.single-product) {
    --c-yellow: #f5a524;
    --c-yellow-strong: #e8940f;
    --c-yellow-soft: #fdecd2;

    --c-ink: #2b241c;
    --c-ink-soft: #4a4033;
    --c-muted: #6f6555;
    --c-muted-soft: #a49781;

    --c-bg: #fffdfa;
    --c-bg-soft: #fffcf7;
    --c-line: #ece4d8;
    --c-line-strong: #ddd2c0;

    --c-display: 'Montserrat', 'Inter', system-ui, sans-serif;
    --c-body: 'Inter', system-ui, sans-serif;
    --c-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --c-radius: 16px;
    --c-radius-lg: 24px;
    --c-radius-pill: 12px;
    --c-shadow-soft: 0 8px 24px rgba(80, 50, 10, .08);
    --c-shadow-lift: 0 24px 60px rgba(80, 50, 10, .16);

    font-optical-sizing: auto;
}

/* Фото товара: белый фон растворяется в подложке (приём из catalog5) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card-media img {
    mix-blend-mode: multiply;
}

/* Светлый фон контентной зоны (как мягкий фон секций Главной) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) main {
    background: var(--c-bg-soft);
}

/* Заголовки каталога — Montserrat, как display на Главной (перебиваем мёртвый Onest) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) :is(h1, h2, h3) {
    font-family: var(--c-display);
    letter-spacing: -.015em;
    color: var(--c-ink);
}
/* ==== /ШАГ 1 ==== */


/* ==== ШАГ 2: Eyebrow — жёлтый uppercase, как на Главной ==== */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .eyebrow {
    font-family: var(--c-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-yellow);
}
/* ==== /ШАГ 2 ==== */


/* ==== ШАГ 3: Hero каталога — светлая шапка + панель-карточка ==== */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-hero {
    background: var(--c-bg);
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-line);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-hero h1 {
    font-weight: 700;
    line-height: 1.04;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-hero .lead {
    color: var(--c-muted);
}

/* Панель показателей справа — чистая карточка на мягком фоне */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-hero-panel {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius-lg);
    backdrop-filter: none;
    padding: 28px;
    box-shadow: var(--c-shadow-soft);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-hero-panel div {
    border-bottom-color: var(--c-line);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-hero-panel dt {
    color: var(--c-ink);
    font-family: var(--c-display);
    letter-spacing: -.01em;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-hero-panel dd {
    color: var(--c-muted);
}

/* Сводка активных фильтров */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-active-filter {
    background: var(--c-yellow-soft);
    border: 1px solid var(--c-yellow);
    color: var(--c-ink);
    border-radius: 999px;
}
/* ==== /ШАГ 3 ==== */


/* ==== ШАГ 4: Панель фильтров — карточка + скруглённые поля ==== */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-filter-panel {
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius-lg);
    box-shadow: var(--c-shadow-soft);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .filter-panel-head h2 {
    color: #ffffff;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-filters label span,
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .filter-note {
    color: var(--c-muted);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-filters :is(input, select) {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    color: var(--c-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-filters :is(input, select):focus {
    outline: none;
    border-color: var(--c-yellow);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, .25);
}
/* ==== /ШАГ 4 ==== */


/* ==== ШАГ 5: Карточки товаров — радиус, подъём при наведении, чипы ==== */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card {
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    color: var(--c-ink);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card:hover {
    transform: translateY(-4px);
    border-color: var(--c-yellow);
    box-shadow: var(--c-shadow-lift);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card-media {
    background: var(--c-bg-soft);
    border-bottom: 1px solid var(--c-line);
}

/* Бейджи бренда/категории — чипы */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .term-badges span {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line-strong);
    color: var(--c-ink-soft);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
}

/* Единственный бейдж в term-badges теперь — категория */

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card h2 {
    letter-spacing: -.01em;
    font-family: var(--c-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card h2 a {
    color: var(--c-ink);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card-note,
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card-specs :is(dt, dd) {
    color: var(--c-muted);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card-specs dd {
    color: var(--c-ink);
    font-family: var(--c-mono);
    font-size: 13px;
}
/* ==== /ШАГ 5 ==== */


/* ==== ШАГ 6: Кнопки-пилюли, ссылки и пагинация ==== */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .button {
    background: var(--c-yellow);
    color: var(--c-ink);
    border: 1px solid var(--c-yellow);
    font-weight: 600;
    letter-spacing: 0;
    transition: transform .15s ease, background .15s ease, box-shadow .2s ease, border-color .15s ease;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .button:hover {
    transform: translateY(-1px);
    background: var(--c-yellow-strong);
    border-color: var(--c-yellow-strong);
    box-shadow: 0 8px 24px rgba(245, 197, 24, .35);
}

/* Вторичная — призрачная, как btn-light на Главной */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .button-secondary {
    background: transparent;
    color: var(--c-ink);
    border: 1px solid var(--c-line-strong);
    box-shadow: none;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .button-secondary:hover {
    background: var(--c-bg-soft);
    border-color: var(--c-yellow);
    box-shadow: none;
}

/* Текстовая ссылка с жёлтым подчёркиванием */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .text-link {
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-yellow);
    padding-bottom: 2px;
    transition: color .15s ease;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .text-link:hover {
    color: var(--c-muted);
}

/* Пагинация — пилюли */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .page-numbers {
    display: inline-flex;
    min-width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 10px;
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    color: var(--c-ink);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) a.page-numbers:hover {
    border-color: var(--c-yellow);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .page-numbers.current {
    background: var(--c-yellow);
    border-color: var(--c-yellow);
    color: var(--c-ink);
    font-weight: 700;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: var(--c-muted);
}
/* ==== /ШАГ 6 ==== */

/* ==== Пикер «товаров на странице» (30/60/90/Все) — в шапке результатов ==== */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-per-page-label {
    color: var(--c-muted);
    font-size: 14px;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-per-page-btn {
    min-width: 40px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--c-radius-pill);
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    color: var(--c-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-per-page-btn:hover {
    border-color: var(--c-yellow);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-per-page-btn.is-active {
    background: var(--c-yellow);
    border-color: var(--c-yellow);
    color: var(--c-ink);
}
/* ==== /Пикер «товаров на странице» ==== */

/* ==== Подвал списка: нумерация страниц (только внизу) ==== */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-results-foot {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* Разделитель только когда есть сама нумерация (1 страница — див пустой, без линии) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-pagination {
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid var(--c-line);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
/* ==== /Подвал списка ==== */

/* Кнопка «Загрузить ещё» — добавляет карточки по клику (без автоподгрузки по скроллу) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-load-more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-load-more[hidden] {
    display: none;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: var(--c-radius-pill);
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    color: var(--c-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-load-more-btn:hover {
    border-color: var(--c-yellow);
    color: var(--c-ink);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-load-more-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--c-line-strong);
    border-top-color: var(--c-yellow);
    display: none;
    animation: yarLoadSpin .7s linear infinite;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-load-more.is-loading .catalog-load-more-spinner {
    display: inline-block;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-load-more.is-loading .catalog-load-more-text {
    opacity: .7;
}

@keyframes yarLoadSpin {
    to { transform: rotate(360deg); }
}
/* ==== /Кнопка «Загрузить ещё» ==== */


/* ==== ШАГ 7: Интерактивный выбор мощность→поток в карточке ==== */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .card-variant-pick {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 4px;
}

.card-variant-pick .cvp-field {
    display: flex;
    gap: 12px;
    padding: 7px 12px;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: var(--c-bg-soft);
    transition: border-color .15s ease, background .15s ease;
}

.card-variant-pick .cvp-power {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.card-variant-pick .cvp-flux {
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.card-variant-pick .cvp-label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-muted-soft);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Обёртка селекта — со стрелкой-индикатором */
.card-variant-pick .cvp-select {
    position: relative;
    display: block;
}

/* В горизонтальных полях (мощность) — растягиваем вправо */
.card-variant-pick .cvp-power .cvp-select {
    flex: 1;
    min-width: 0;
}

.card-variant-pick .cvp-select::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--c-muted);
    border-bottom: 1.5px solid var(--c-muted);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.card-variant-pick select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0 18px 0 0;
    border: none;
    background: transparent;
    color: var(--c-ink);
    font-family: var(--c-mono);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.card-variant-pick select:focus-visible {
    outline: 2px solid var(--c-yellow);
    outline-offset: 2px;
    border-radius: 4px;
}

.card-variant-pick .cvp-value {
    font-family: var(--c-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.2;
    text-align: right;
}

.card-variant-pick .cvp-power select {
    text-align: center;
}

.card-variant-pick .cvp-ip,
.card-variant-pick .cvp-cct {
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Строка чипов (IP и CCT) */
.card-variant-pick .cvp-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

/* Контейнер CCT — колонка из строк (K + цвета) */
.card-variant-pick .cvp-cct-chips {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Базовый чип (IP и CCT-числа) */
.card-variant-pick .cvp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1.5px solid var(--c-line-strong);
    background: var(--c-bg);
    color: var(--c-muted);
    font-family: var(--c-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s, box-shadow .12s;
    user-select: none;
}

.card-variant-pick .cvp-chip:hover {
    border-color: var(--c-muted);
    color: var(--c-ink);
}

.card-variant-pick .cvp-chip.is-active {
    border-color: var(--c-yellow);
    background: var(--c-yellow-soft);
    color: var(--c-ink);
}

/* Цветной кружок (Amber, R, RGB и т.д.) */
.card-variant-pick .cvp-chip.is-color {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 2.5px solid var(--c-bg);
    box-shadow: 0 0 0 1.5px var(--c-line-strong);
    font-size: 0;
    overflow: hidden;
}

.card-variant-pick .cvp-chip.is-color:hover {
    box-shadow: 0 0 0 2.5px var(--c-muted);
    transform: scale(1.1);
}

.card-variant-pick .cvp-chip.is-color.is-active {
    box-shadow: 0 0 0 2.5px var(--c-yellow);
    border-color: var(--c-bg);
}

/* Точка тепла/холода внутри K-чипа */
.card-variant-pick .cvp-cct-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.08);
}

/* ЦТ кружками в spec-листе карточки каталога (без текста, подпись в tooltip) */
.product-card-specs .cct-dots {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
}
.product-card-specs .cct-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: default;
    box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
    transition: transform .15s ease;
}
.product-card-specs .cct-dot:hover {
    transform: scale(1.25);
}
.product-card-specs .cct-dot.is-white {
    box-shadow: 0 0 0 1px var(--c-line-strong) inset;
}

/* Подсветка пары, когда мощность выбрана */
.card-variant-pick.is-picked .cvp-power {
    border-color: var(--c-yellow);
    background: var(--c-yellow-soft);
}

.card-variant-pick.is-picked .cvp-flux {
    border-color: var(--c-yellow);
}

/* Недоступные чипы (нет комбо при текущих фильтрах) */
.card-variant-pick .cvp-chip.is-disabled {
    opacity: .32;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--c-line);
    color: var(--c-muted-soft);
}
.card-variant-pick .cvp-chip.is-color.is-disabled {
    filter: saturate(.25);
    box-shadow: none;
}
/* ==== /ШАГ 7 ==== */


/* ==== ШАГ 8: Ряд плашек категорий под хлебными крошками (без пиктограмм) ==== */
.catalog-cat-icons {
    margin: 14px 0 4px;
}

.catalog-cat-icons-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.catalog-cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 9px 14px;
    text-align: center;
    text-decoration: none;
    color: var(--c-ink);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    transition: border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .15s ease;
}

.catalog-cat-icon:hover {
    color: var(--c-ink);
    border-color: var(--c-yellow);
    box-shadow: var(--c-shadow-soft);
    transform: translateY(-2px);
}

.catalog-cat-icon-label {
    font-family: var(--c-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: inherit;
}

@media (max-width: 768px) {
    .catalog-cat-icons-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .catalog-cat-icon {
        padding: 14px 10px;
    }
    .catalog-cat-icon-label {
        font-size: 13px;
    }
}
/* ==== /ШАГ 8 ==== */


/* ==== ШАГ 9: Переключатель вида (сетка / список) ==== */

/* Обёртка правой части шапки результатов */
.catalog-results-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Поиск в шапке результатов (слева от переключателя вида) */
.catalog-search {
    position: relative;
    display: flex;
    align-items: center;
}
.catalog-search-icon {
    position: absolute;
    left: 12px;
    color: var(--c-muted);
    pointer-events: none;
}
.catalog-search input[type="search"] {
    width: 240px;
    max-width: 100%;
    padding: 10px 12px 10px 34px;
    font: inherit;
    font-size: 14px;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    color: var(--c-ink);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.catalog-search input[type="search"]:focus {
    outline: none;
    background: var(--c-bg);
    border-color: var(--c-yellow);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, .25);
}

@media (max-width: 900px) {
    .catalog-results-head-actions {
        flex-wrap: wrap;
        width: 100%;
    }
    .catalog-search {
        flex: 1 1 100%;
        order: -1;
    }
    .catalog-search input[type="search"] {
        width: 100%;
    }
}

/* Кнопки переключения */
.catalog-view-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: var(--c-bg-soft);
}

.view-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    flex-shrink: 0;
}

.view-btn[aria-pressed="true"] {
    background: var(--c-bg);
    color: var(--c-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.view-btn:hover:not([aria-pressed="true"]) {
    color: var(--c-ink);
    background: rgba(0, 0, 0, .04);
}

/* ── Вид «сетка» (не список): карточка — флекс-колонка ──
   Бренд|категория теперь прямой ребёнок article ПЕРЕД картинкой → в потоке
   оказывается сверху. Флекс-колонка корректно работает при разном числе
   модулей, footer прижимается вниз через margin-top:auto. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card {
    display: flex;
    flex-direction: column;
}

/* Картинка целиком: фиксированная высота вместо жёсткого aspect-ratio:4/3,
   которое при разных пропорциях исходников обрезало низ. object-fit:contain. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-media {
    aspect-ratio: auto;
    height: 220px;
    min-height: 0;
}

/* Картинку жёстко вписываем в бокс. Медиа — display:grid с авто-строкой, поэтому
   height:100% у img не резолвится (circular) и откатывается к height:auto →
   квадратные картинки растут по ширине колонки и вылезают за бокс с overflow:hidden
   → срез снизу. Решение: абсолютное позиционирование img внутри бокса (position
   относительно медиа), тогда размер берётся от бокса, а object-fit:contain вписывает
   изображение целиком. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card-media {
    position: relative;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
}

/* Кнопку «Открыть» — вниз и вправо */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-footer {
    margin-top: auto;
    justify-content: flex-end;
}


/* Списочный вид — один товар в строку */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list {
    grid-template-columns: 1fr;
    gap: 10px;
}

/* 3 колонки: картинка | название | бренд-категория; body/footer тянутся на 2-3 */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card {
    display: grid;
    padding: 0;
    grid-template-columns: 260px minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: none;
    gap: 0;
}

/* Левая колонка: только картинка, на всю высоту карточки.
   Гасим унаследованный aspect-ratio: 4/3 — иначе при заданной высоте он растягивал
   ширину картинки за пределы колонки и параметры наезжали. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card-media {
    grid-column: 1;
    grid-row: 1 / 4;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    min-height: 270px;
    border-right: 1px solid var(--c-line);
}

/* Верхняя строка справа: название (col2, слева) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card-meta {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 16px 12px 12px 20px;
    border-bottom: 1px solid var(--c-line);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card-meta h2 {
    min-width: 0;
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card-meta h2 a {
    color: var(--c-ink);
}

/* Бренд|категория (col3, справа) — на одной строке с названием */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card > .term-badges {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px 12px 12px;
    border-bottom: 1px solid var(--c-line);
}

/* Середина: данные тянутся на колонки 2-3 */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card-body {
    grid-column: 2 / 4;
    grid-row: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 20px;
}

/* Низ: кнопка «Открыть» на колонки 2-3, прижата вправо */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card-footer {
    grid-column: 2 / 4;
    grid-row: 3;
    min-width: 0;
    margin-top: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--c-line);
    justify-content: flex-end;
    align-self: end;
}

/* Пикер мощность→поток в 2 столбца (2×2 сетка) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .card-variant-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
}

/* Защита и ЦТ — чипы по правому краю ячейки */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .card-variant-pick .cvp-chips-row {
    justify-content: flex-end;
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 200px));
    width: fit-content;
}

/* На узких экранах (< 640px) список → вертикальный вид.
   Сбрасываем явные grid-column/row — элементы идут потоком в один столбец
   в исходном порядке: картинка → мета → данные → кнопки. */
@media (max-width: 640px) {
    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .product-grid--list .product-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .product-grid--list .product-card > * {
        grid-column: 1;
        grid-row: auto;
    }

    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .product-grid--list .product-card-media {
        height: 220px;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid var(--c-line);
    }
}
/* ==== /ШАГ 9 ==== */

/* ==== Блок подкатегорий на странице категории ==== */
.category-subcats {
    margin: 0 0 8px;
}

.category-subcats > .eyebrow {
    margin: 0 0 14px;
}

.category-subcats-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.subcat-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px 18px;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow-soft);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.subcat-tile:hover,
.subcat-tile:focus-visible {
    border-color: var(--c-ink);
    box-shadow: var(--c-shadow-lift);
    transform: translateY(-2px);
}

.subcat-tile-name {
    font-family: var(--c-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    color: var(--c-ink);
}

.subcat-tile-count {
    font-size: 13px;
    color: var(--c-muted);
}

.subcat-tile-arrow {
    margin-top: 6px;
    font-size: 18px;
    line-height: 1;
    color: var(--c-yellow);
    transition: transform .15s ease;
}

.subcat-tile:hover .subcat-tile-arrow,
.subcat-tile:focus-visible .subcat-tile-arrow {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    /* На мобильном на странице подкатегории не показываем плашки
       под-подкатегорий — там уже открыт список товаров */
    body.product-subcategory .category-subcats {
        display: none;
    }
}

/* ==== Панель фильтров: шапка-кнопка + аккордеон на мобильных ==== */
button.filter-panel-head {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    width: 100%;
    font: inherit;
    text-align: left;
    color: #fff;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.filter-panel-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-panel-title {
    font-family: var(--c-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #fff;
}

.filter-panel-chevron {
    display: none;
    flex: none;
    color: #fff;
    transition: transform .2s ease;
}

/* На десктопе кнопка-шапка не интерактивна (панель всегда раскрыта). */
.filter-sheet-close,
.filter-fab,
.filter-sheet-overlay {
    display: none;
}

/* ==== Чипы активных фильтров ==== */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    border-radius: 999px;
    background: var(--c-bg);
    border: 1px solid var(--c-line-strong);
    color: var(--c-ink);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.filter-chip:hover,
.filter-chip:focus-visible {
    border-color: var(--c-ink);
    background: var(--c-ink);
    color: #fff;
}

.filter-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--c-bg-soft);
    color: var(--c-muted);
    font-size: 15px;
    line-height: 1;
}

.filter-chip:hover .filter-chip-x,
.filter-chip:focus-visible .filter-chip-x {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.filter-chips-reset {
    font-size: 13px;
    color: var(--c-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.filter-chips-reset:hover {
    color: var(--c-ink);
}

/* Чипы активных фильтров — теперь кнопки (JS), сбрасываем дефолтный вид кнопки */
.filter-chip,
.filter-chips-reset {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
}
.filter-chips-reset {
    background: none;
    border: 0;
    padding: 0;
}

/* ==== Панель фильтров: секции, поля, чипы выбора ==== */
.filter-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--c-yellow);
    color: var(--c-ink);
    font-family: var(--c-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}
.filter-active-badge[hidden] {
    display: none;
}

.filter-panel-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 16px;
}

.filter-group {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.filter-field-label,
.filter-group > legend {
    display: block;
    padding: 0;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.filter-field {
    display: block;
}
.filter-field > .filter-field-label {
    margin-bottom: 6px;
}
.catalog-filters :is(input, select) {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
}

/* Ряд чипов выбора (IP / CCT / поток / пресеты мощности) */
.fchip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--c-line-strong);
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
button.fchip {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
}
.fchip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.fchip:hover {
    border-color: var(--c-ink);
}
.fchip.is-active {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 32, .18);
}
.fchip.is-disabled {
    opacity: .4;
    pointer-events: none;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.catalog-filters :is(input, select):focus-visible,
.fchip:focus-within {
    outline: none;
    border-color: var(--c-yellow);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, .3);
}

.fchip-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}
.fchip.is-active .fchip-count {
    color: rgba(255, 255, 255, .7);
}

/* Кружок цветовой температуры внутри чипа */
.fchip .cct-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
}

/* Перебиваем базовые .catalog-filters label/span (display:grid, muted span). */
.catalog-filters label.fchip {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.catalog-filters .fchip .fchip-label {
    color: inherit;
    font-size: 13px;
}
.catalog-filters .fchip .fchip-count {
    color: var(--c-muted);
    font-size: 11px;
}
.catalog-filters .fchip.is-active .fchip-label {
    color: #fff;
}
.catalog-filters .fchip.is-active .fchip-count {
    color: rgba(255, 255, 255, .7);
}
.catalog-filters .filter-field-label {
    font-size: 12px;
    color: var(--c-muted);
}

/* Диапазон мощности (после пресетов) */
/* Однострочный диапазон «от – до» (мощность, поток) */
.range-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}
.range-inline input {
    min-width: 0;
    flex: 1 1 0;
    text-align: center;
}
.range-dash {
    flex: none;
    color: var(--c-muted);
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.filter-actions .button {
    flex: 1 1 auto;
}

/* Заметка-CTA в самом низу панели */
.filter-note-foot {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--c-muted);
}

.filter-cta {
    width: 100%;
    margin-top: 8px;
}
button.text-link {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    font: inherit;
    padding: 0;
    cursor: pointer;
}

/* ==== Мультиселект: кнопка-итог + сворачиваемый список чекбоксов ==== */
.ms {
    position: relative;
}
.ms-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    text-align: left;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-radius: 10px;
    color: var(--c-ink);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ms-toggle:hover {
    border-color: var(--c-line-strong);
}
.ms.is-open .ms-toggle,
.ms-toggle:focus-visible {
    outline: none;
    border-color: var(--c-yellow);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, .25);
}
.ms-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-muted);
}
.ms.has-selected .ms-summary {
    color: var(--c-ink);
    font-weight: 500;
}
.ms-chevron {
    flex: none;
    color: var(--c-muted);
    transition: transform .2s ease;
}
.ms.is-open .ms-chevron {
    transform: rotate(180deg);
}

.ms-panel {
    display: none;
    margin-top: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    box-shadow: var(--c-shadow-soft);
}
.ms.is-open .ms-panel {
    display: block;
}

/* Поле быстрого поиска внутри списка */
.ms-search {
    position: sticky;
    top: 0;
    background: var(--c-bg);
    padding: 2px 2px 6px;
    margin-bottom: 2px;
    z-index: 1;
}
.catalog-filters .ms-search input[type="text"] {
    width: 100%;
    min-height: 0;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-radius: 8px;
    color: var(--c-ink);
}
.catalog-filters .ms-search input[type="text"]:focus {
    outline: none;
    border-color: var(--c-yellow);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, .22);
}
.ms-option.ms-hidden,
.catalog-filters label.ms-option.ms-hidden {
    display: none;
}
.ms-empty {
    padding: 10px 8px;
    font-size: 13px;
    color: var(--c-muted);
    text-align: center;
}

/* Крестик очистки в полях поиска (список + шапка) */
.ms-search-field {
    position: relative;
    display: block;
}
.catalog-filters .ms-search input[type="text"] {
    padding-right: 30px;
}
.catalog-search input[type="search"] {
    padding-right: 34px;
}
.catalog-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.ms-search-clear,
.catalog-search-clear {
    display: none;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-bg-soft);
    color: var(--c-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.catalog-search-clear {
    right: 10px;
}
.ms-search-clear:hover,
.catalog-search-clear:hover {
    color: var(--c-ink);
    background: var(--c-line);
}
.ms-search-field input:not(:placeholder-shown) + .ms-search-clear,
.catalog-search input[type="search"]:not(:placeholder-shown) ~ .catalog-search-clear {
    display: inline-flex;
}

.ms-option,
.catalog-filters label.ms-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--c-ink);
}
.catalog-filters .ms-option .ms-option-name {
    color: var(--c-ink);
    font-size: 14px;
}
.catalog-filters .ms-option .ms-option-count {
    font-size: 12px;
}
.ms-option:hover {
    background: var(--c-bg-soft);
}
.ms-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ms-check {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--c-line-strong);
    border-radius: 5px;
    background: var(--c-bg);
    position: relative;
    transition: background .12s ease, border-color .12s ease;
}
.ms-option input:checked + .ms-check {
    background: var(--c-yellow);
    border-color: var(--c-yellow);
}
.ms-option input:checked + .ms-check::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--c-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ms-option input:focus-visible + .ms-check {
    box-shadow: 0 0 0 3px rgba(245, 197, 24, .3);
}
.ms-option-name {
    flex: 1 1 auto;
    min-width: 0;
}
.ms-option-count {
    flex: none;
    font-size: 12px;
    color: var(--c-muted);
    font-variant-numeric: tabular-nums;
}
.ms-option.is-disabled {
    opacity: .4;
    pointer-events: none;
}
.ms-option .cct-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
}

/* ==== Иерархический фильтр категорий ==== */

/* Разделитель между группами корневых категорий */
.ms-tree-divider {
    height: 1px;
    background: var(--c-line);
    margin: 4px 2px;
}

/* Родительская категория — чуть жирнее */
.ms-option--parent {
    font-weight: 500;
}

/* Подкатегории — отступ слева + приглушённый цвет текста.
   Специфичность повышена до .catalog-filters label.ms-option[attr], чтобы
   перебить базовый .catalog-filters label.ms-option { padding: 7px 8px }. */
.catalog-filters label.ms-option[data-ms-depth] {
    padding-left: 22px;
}
.catalog-filters label.ms-option[data-ms-depth="2"] {
    padding-left: 38px;
}
.ms-option[data-ms-depth] .ms-option-name {
    color: var(--c-muted);
    font-size: 13px;
}

/* Вертикальная направляющая линия для подкатегорий (depth=1) */
.catalog-filters label.ms-option[data-ms-depth="1"] {
    position: relative;
}
.catalog-filters label.ms-option[data-ms-depth="1"]::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: var(--c-line);
    border-radius: 1px;
}

/* Глубокие подкатегории (depth=2): просто доп. отступ */
.catalog-filters label.ms-option[data-ms-depth="2"] {
    position: relative;
}

/* indeterminate-состояние чекбокса родителя — горизонтальная полоска вместо галочки */
.ms-option input:indeterminate + .ms-check {
    background: var(--c-yellow);
    border-color: var(--c-yellow);
}
.ms-option input:indeterminate + .ms-check::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    width: 10px;
    height: 2px;
    background: var(--c-ink);
    transform: translateY(-50%);
    border: none;
}

/* ==== /Иерархический фильтр категорий ==== */

/* Состояние загрузки результатов */
.catalog-results-body[aria-busy="true"] {
    opacity: .55;
    transition: opacity .15s ease;
    pointer-events: none;
}

/* ==== Мобильный bottom-sheet ==== */
@media (max-width: 900px) {
    .filter-panel-chevron {
        display: none;
    }

    .catalog-filter-panel {
        position: fixed;
        z-index: 60;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 88vh;
        margin: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(15, 23, 32, .25);
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .catalog-filter-panel.is-sheet-open {
        transform: translateY(0);
    }

    .filter-panel-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        margin-top: 12px;
    }

    /* Кнопка «Показать N» закреплена снизу листа */
    .filter-actions {
        position: sticky;
        bottom: 0;
        margin: 4px -4px 0;
        padding: 12px 4px;
        background: var(--c-bg);
        border-top: 1px solid var(--c-line);
    }

    .filter-sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 12px;
        right: 14px;
        z-index: 2;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: var(--c-bg-soft);
        color: var(--c-ink);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .filter-sheet-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 59;
        background: rgba(15, 23, 32, .45);
        animation: yarFadeIn .2s ease;
    }
    .filter-sheet-overlay[hidden] {
        display: none;
    }
    body.has-filter-sheet {
        overflow: hidden;
    }

    /* Плавающая кнопка вызова фильтров */
    .filter-fab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        z-index: 55;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        padding: 13px 22px;
        border: 0;
        border-radius: 999px;
        background: var(--c-ink);
        color: #fff;
        font-family: var(--c-body);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(15, 23, 32, .35);
    }
    .filter-fab-badge {
        font-weight: 700;
        color: var(--c-yellow);
    }
    .filter-fab-badge:empty {
        display: none;
    }
    body.has-filter-sheet .filter-fab {
        display: none;
    }
}

/* ==== ШАГ 10: Карточка/hero 1:1 c прототипом catalog5 («Тёплый минимал») ====
   Фото — во всю ширину карточки (без внутреннего паддинга), квадрат 1:1,
   mix-blend-mode:multiply (Шаг 1). Характеристики — пилюли вместо dl-таблицы,
   ЦТ — отдельной шкалой-градиентом под пилюлями. Пикер мощности (Шаг 7) —
   тоже пилюли, без рамок. Кнопки — полная скруглённость. Список (list-view)
   не трогаем — у него другая, самостоятельная геометрия. */

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card {
    border-radius: var(--c-radius-lg);
}

:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .button {
    border-radius: 999px;
}

/* Фото во всю ширину: карточка теряет общий паддинг, mета/тело/футер получают свой */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card {
    padding: 0;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-meta {
    padding: 16px 20px 0;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-body {
    padding: 0 20px 20px;
    background: radial-gradient(ellipse at 50% 0%, var(--c-bg-soft), var(--c-bg) 75%);
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-footer {
    padding: 0 20px 20px;
    border-top: 0;
}

/* Квадратное фото, плоская светлая подложка, без разделительной линии */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-media {
    aspect-ratio: 1 / 1;
    height: auto;
    background: var(--c-bg);
    border-bottom: 0;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-media img {
    padding: 3px;
}

/* Характеристики — пилюли вместо серой dl-таблицы (подписи остаются для скринридеров) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    background: none;
    border: 0;
    margin: 4px 0 0;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-specs div {
    min-width: 0;
    background: var(--c-bg);
    border-radius: 999px;
    padding: 5px 12px;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-specs dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    margin: -1px;
    padding: 0;
    border: 0;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-specs dd {
    margin: 0;
    font-family: var(--c-body);
    font-weight: 500;
    font-size: 12.5px;
    color: var(--c-ink-soft);
}

/* Пикер мощности (Шаг 7) — пилюли в ряд вместо колонки бордер-боксов, подписи скрыты визуально */
.card-variant-pick {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7px;
}
.card-variant-pick .cvp-field {
    border: 0;
    border-radius: 999px;
    background: var(--c-bg);
    padding: 5px 12px;
    justify-content: center;
}
.card-variant-pick .cvp-power,
.card-variant-pick .cvp-flux,
.card-variant-pick .cvp-ip,
.card-variant-pick .cvp-cct {
    padding-top: 5px;
    padding-bottom: 5px;
}
.card-variant-pick .cvp-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    margin: -1px;
}
.card-variant-pick .cvp-power .cvp-select {
    flex: none;
    min-width: 0;
}
.card-variant-pick select,
.card-variant-pick .cvp-value {
    text-align: center;
    font-family: var(--c-body);
    font-weight: 500;
    font-size: 12.5px;
    color: var(--c-ink-soft);
}
.card-variant-pick .cvp-chips-row {
    justify-content: center;
}
.card-variant-pick .cvp-chip {
    border-radius: 999px;
}
.card-variant-pick.is-picked .cvp-power,
.card-variant-pick.is-picked .cvp-flux {
    background: var(--c-yellow-soft);
    color: var(--c-ink);
}
/* ==== /ШАГ 10 ==== */


/* ==== ШАГ 11: Раскладка каталога 1:1 c catalog5 — drawer + 5 в ряд ====
   Панель фильтров превращается в выезжающую слева шторку (на всех ширинах),
   результаты занимают всю ширину, сетка — 5 карточек в ряд. Механика открытия/
   закрытия/оверлея переиспользует «sheet»-режим catalog-filter.js (класс
   .is-sheet-open, оверлей, ✕, Esc); добавлен инлайновый триггер «Фильтры». */

/* Полноширинные результаты: колонка-сайдбар больше не нужна */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-layout {
    display: block;
}

/* Панель фильтров → выезжающая слева шторка (перебивает sticky-сайдбар) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-filter-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: min(390px, 92vw);
    max-height: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0 24px 24px 0;
    box-shadow: 0 0 80px rgba(0, 0, 0, .35);
    transform: translateX(-101%);
    transition: transform .38s cubic-bezier(.22, .8, .2, 1);
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-filter-panel.is-sheet-open {
    transform: none;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-filter-panel .filter-panel-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* Кнопка «Показать N» закреплена внизу шторки */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-filter-panel .filter-actions {
    position: sticky;
    bottom: 0;
    margin: 4px -20px 0;
    padding: 12px 20px;
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
}

/* Оверлей и ✕ — на всех ширинах (JS уже создаёт их и переключает [hidden]) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .filter-sheet-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(15, 23, 32, .45);
    backdrop-filter: blur(2px);
    animation: yarFadeIn .2s ease;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .filter-sheet-overlay[hidden] {
    display: none;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .filter-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: var(--c-bg-soft);
    color: var(--c-ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
body.has-filter-sheet {
    overflow: hidden;
}

/* Инлайновый триггер «Фильтры» в шапке результатов */
.catalog-results-head-lead {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.catalog-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding: 11px 18px;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    background: var(--c-bg);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
    cursor: pointer;
    box-shadow: 0 6px 18px -10px rgba(80, 50, 10, .4);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.catalog-filter-trigger:hover {
    border-color: var(--c-yellow);
}
.catalog-filter-trigger-badge {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--c-yellow);
    color: #2a1a00;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.catalog-filter-trigger-badge[hidden] {
    display: none;
}

/* Сетка — 5 карточек в ряд, адаптив вниз */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1240px) {
    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .product-grid:not(.product-grid--list) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 980px) {
    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .product-grid:not(.product-grid--list) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 680px) {
    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .product-grid:not(.product-grid--list) {
        grid-template-columns: 1fr;
    }
    /* На мобильном триггер прячем — используется плавающая кнопка (FAB) */
    .catalog-filter-trigger {
        display: none;
    }
    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .catalog-filter-panel {
        width: 100vw;
        border-radius: 0;
    }
}
@media (max-width: 440px) {
    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .product-grid:not(.product-grid--list) {
        grid-template-columns: 1fr;
    }
}
/* ==== /ШАГ 11 ==== */


/* ==== ШАГ 12: Пикер карточки — ряды (мощность+поток / IP+крепление) +
   выбираемая шкала цветовой температуры ==== */

/* Пикер выкладывается рядами-строками, каждая строка — горизонтальные пилюли */
.card-variant-pick {
    flex-direction: column;
    gap: 8px;
}
/* Строка = ровно два поля на одной линии: левое (мощность/IP) по контенту,
   правое (поток/крепление) прижато к правому краю блока характеристик. */
.card-variant-pick .cvp-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    align-items: stretch;
}
.card-variant-pick .cvp-flux,
.card-variant-pick .cvp-mount {
    grid-column: 2;
    justify-self: end;
}
.card-variant-pick .cvp-field {
    padding: 5px 10px;
    min-width: 0;
}
.card-variant-pick select,
.card-variant-pick .cvp-value {
    font-size: 12px;
}
.card-variant-pick .cvp-ip .cvp-select,
.card-variant-pick .cvp-mount .cvp-select {
    flex: none;
    min-width: 0;
}
.card-variant-pick.is-ip-picked .cvp-ip,
.card-variant-pick.is-mount-picked .cvp-mount {
    background: var(--c-yellow-soft);
    color: var(--c-ink);
}
/* Крепление — значение может быть длинным, позволяем перенос */
.card-variant-pick .cvp-mount .cvp-value {
    white-space: normal;
    text-align: left;
}

/* Шкала цветовой температуры с выбираемыми пинами */
.cvp-cct-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}
.cvp-cct-caption {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.cvp-cct-selectable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.cvp-cct-selectable .cctbar {
    flex: 1 1 100%;
    margin: 4px 6px 32px;
}
/* Дорожка не перехватывает клики — они уходят на пины */
.cvp-cct-selectable .cctbar-track {
    pointer-events: none;
}
.cvp-cct-selectable .cctbar-tick {
    z-index: 2;
}
/* Пины-засечки — кликабельные кнопки */
.cvp-cct-selectable .cctbar-tick {
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cvp-cct-selectable .cctbar-tick:hover {
    transform: translate(-50%, -50%) scale(1.28);
}
.cvp-cct-selectable .cctbar-tick.is-active {
    box-shadow: 0 0 0 3px var(--c-yellow), 0 1px 4px rgba(20, 23, 28, .35);
    transform: translate(-50%, -50%) scale(1.2);
}
.cvp-cct-selectable .cctbar-tick.is-disabled {
    opacity: .3;
    pointer-events: none;
}
/* Разнос пересекающихся подписей: близкий пин уводит подпись на второй ряд */
.cvp-cct-selectable .cctbar-tick--alt .cctbar-tick-val {
    top: 26px;
}
/* Кружки цветов свечения — кликабельные */
.cvp-cct-selectable .cctbar-colors {
    display: inline-flex;
    gap: 6px;
    margin-top: 2px;
}
.cvp-cct-selectable .cctbar-swatch {
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cvp-cct-selectable .cctbar-swatch:hover {
    transform: scale(1.15);
}
.cvp-cct-selectable .cctbar-swatch.is-active {
    box-shadow: 0 0 0 3px var(--c-yellow);
}
.cvp-cct-selectable .cctbar-swatch.is-disabled {
    opacity: .3;
    pointer-events: none;
}
/* ==== /ШАГ 12 ==== */


/* ==== ШАГ 13: Полировка карточки — тень в покое, доступность, свои токены
   для иконок действий (раньше — тёмная тема main.css), контраст пилюль,
   кнопка «Открыть» на всю ширину. ==== */

/* Тень видна не только на hover — иначе карточка сливается с белым фоном страницы.
   :focus-within — тот же подъём при табуляции клавиатурой, не только мышью. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card {
    box-shadow: var(--c-shadow-soft);
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card:focus-within {
    transform: translateY(-4px);
    border-color: var(--c-yellow);
    box-shadow: var(--c-shadow-lift);
}

/* Иконки избранное/сравнение/поделиться — были на тёмной палитре main.css
   (var(--line)/var(--muted) тёмной темы), из-за чего выглядели чужеродно
   на кремовом фоне каталога. Переводим на тёплые c-токены. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .card-act {
    border-color: var(--c-line-strong);
    border-radius: 10px;
    color: var(--c-muted);
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .card-act:hover {
    background: var(--c-bg-soft);
    border-color: var(--c-ink-soft);
    color: var(--c-ink);
}

/* Точка перед «N исполнений» — была ярко-зелёной (тёмная тема main.css),
   читалась как «в наличии», хотя означает просто число вариантов. Нейтральный
   маленький кружок вместо цветного квадрата с ложным сигналом. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-card-note::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-muted-soft);
}

/* Пилюли характеристик (Шаг 10) — тонкая обводка для контраста на кремовом фоне,
   значение чуть плотнее по весу — быстрее считывается при сравнении карточек. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-specs div {
    border: 1px solid var(--c-line);
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-specs dd {
    font-weight: 600;
}

/* Кнопка «Открыть» — на всю ширину футера вместо мелкой ссылки в углу,
   стрелка-указатель усиливается на hover как признак перехода. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-footer .button {
    width: 100%;
    justify-content: center;
    gap: 8px;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-footer .button::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .product-card-footer .button:hover::after {
    transform: rotate(45deg) scale(1.25);
}
/* ==== /ШАГ 13 ==== */


/* ==== ШАГ 14: Вид «Список» — плотная таблица по образцу прототипа /catalog4/
   («Конфигуратор»). Каждая карточка дополнительно рендерит .pcard-row (в PHP);
   в grid-виде она скрыта, в list-виде показывается строкой-таблицей, а обычные
   части карточки (медиа/мета/тело/футер) скрываются. Столбцы:
   Модель | Мощность | Поток | IP | КСС | Цв. температура | переход. ==== */

/* Общий шаблон столбцов — один и тот же у шапки и у строк */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-results-body {
    /* Колонка модели — среднее между исходной (2.4fr/220px) и суженной (1.5fr/168px);
       остальное место — под выбор Мощности/IP/КСС */
    --pcols: minmax(195px, 1.95fr) 1fr 1fr .7fr 1.1fr 1.45fr 40px;
}

/* .pcard-row в grid-виде не нужна */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid:not(.product-grid--list) .pcard-row {
    display: none;
}

/* Шапка со столбцами — по умолчанию скрыта, видна только в list-виде.
   :has() по сетке в состоянии .product-grid--list (и не пустой). */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .pcard-thead {
    display: none;
    grid-template-columns: var(--pcols);
    align-items: center;
    gap: 14px;
    height: 42px;
    padding: 0 16px;
    margin-bottom: -1px;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line-strong);
    border-radius: 12px 12px 0 0;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .catalog-results-body:has(.product-grid--list:not([hidden])) .pcard-thead {
    display: grid;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .pcard-thead span {
    font-family: var(--c-body);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--c-muted);
}

/* Сетка в list-виде — единая рамка-панель таблицы (перебивает старый ШАГ 9).
   overflow:visible — чтобы увеличенное при наведении фото могло вылезать за
   пределы строки/панели (ШАГ 16); скругление низа держим на последней строке. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list {
    display: block;
    gap: 0;
    border: 1px solid var(--c-line-strong);
    border-radius: 0 0 12px 12px;
    overflow: visible;
    background: var(--c-bg);
    box-shadow: var(--c-shadow-soft);
}
/* Низ последней строки скругляем под панель (раньше это делал overflow:hidden) */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card:last-child .pcard-row {
    border-radius: 0 0 12px 12px;
}

/* Карточка в list-виде — просто обёртка строки; свою геометрию гасим.
   overflow:visible ОБЯЗАТЕЛЕН: .product-card в каталоге имеет overflow:hidden
   (ШАГ 5), из-за чего увеличенное фото обрезалось по границам строки и не
   перекрывало соседние. Здесь и у .pcard-model снимаем обрезку. */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card,
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .pcard-model {
    overflow: visible;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card {
    display: block;
    grid-template-columns: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card:hover,
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card:focus-within {
    transform: none;
    border: 0;
    box-shadow: none;
}
/* Прячем обычные части карточки, оставляя только строку-таблицу */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card > :not(.pcard-row) {
    display: none;
}

/* Собственно строка-таблица */
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .pcard-row {
    display: grid;
    grid-template-columns: var(--pcols);
    align-items: center;
    gap: 14px;
    min-height: 66px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-line);
    transition: background .14s ease;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .product-card:last-child .pcard-row {
    border-bottom: 0;
}
:is(body.post-type-archive-product,
    body.tax-product_category,
    body.tax-product_brand) .product-grid--list .pcard-row:hover {
    background: var(--c-yellow-soft);
}

/* Ячейка «Модель» — миниатюра + название + бренд·исп */
.pcard-model {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}
.pcard-thumb {
    flex: none;
    position: relative; /* якорь для всплывающего превью ×5 */
    width: 46px;
    height: 46px;
    border-radius: 8px;
    border: 1px solid var(--c-line);
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.pcard-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    max-width: none;
    object-fit: contain;
    padding: 3px;
    background-color: transparent;
    mix-blend-mode: multiply;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(40, 30, 10, 0);
    transform-origin: center center;
    transition:
        transform .3s cubic-bezier(.22, .8, .2, 1),
        top .3s cubic-bezier(.22, .8, .2, 1),
        width .3s cubic-bezier(.22, .8, .2, 1),
        height .3s cubic-bezier(.22, .8, .2, 1),
        padding .3s cubic-bezier(.22, .8, .2, 1),
        border-radius .3s ease,
        border-color .3s ease,
        background-color .25s ease,
        box-shadow .3s ease,
        filter .3s ease;
}
/* Двухуровневый зум с выходом за пределы строки (миниатюра и панель —
   overflow:visible, строка поднята по z-index):
   • наведение на строку — фото ×2;
   • наведение на само фото — фото ×5.
   Все промежуточные состояния меняют только анимируемые числовые свойства
   (top/width/height/transform/…), поэтому переход между ×1 → ×2 → ×5 плавный,
   без резкого «скачка» большого превью. */
.pcard-row:hover {
    position: relative;
    z-index: 50;
}
.pcard-row:hover .pcard-thumb {
    overflow: visible;
    z-index: 51;
}
/* Невидимая зона наведения — статичная, объединяет оба возможных «отпечатка»
   картинки: и выступ ×2 (transform: scale(2) от центра миниатюры выступает
   на 23px во все стороны), и превью ×5 (всплывает вверх). Без объединения
   зона наведения меняла форму вместе с самой картинкой: стоило курсору
   оказаться в хвосте ×2-выступа (который есть, а в зоне ×5 — уже нет),
   как включалось ×5 → картинка убирала этот выступ → курсор выпадал из
   hover-зоны → откат на ×2 → выступ возвращался → снова ×5 — бесконечное
   мигание. Особенно заметно на стыке товаров (в нижнем отступе строки).
   Активна только пока строка уже под курсором — overflow:hidden в
   состоянии покоя её обрезает, так что на соседние строки она не влияет. */
.pcard-row:hover .pcard-thumb::before {
    content: "";
    position: absolute;
    top: -238px;
    left: -23px;
    width: 253px;
    height: 307px;
}
/* Наведение на строку — ×2 от центра миниатюры (лёгкий зум на месте) */
.pcard-row:hover .pcard-thumb img {
    transform: scale(2);
    /* поверх фото не multiply, иначе на пёстром фоне бледнеет; тень для отрыва */
    mix-blend-mode: normal;
    filter: drop-shadow(0 8px 20px rgba(40, 30, 10, .3));
}
/* Наведение на само фото — крупное превью ×5, всплывающее ВВЕРХ над миниатюрой
   (не перекрывает название справа, остаётся на экране). Позиционируется абсолютно
   над миниатюрой, левый край выровнен с ней — не уходит за край экрана. */
.pcard-row:hover .pcard-thumb:hover img {
    top: -238px;
    left: 0;
    width: 230px;
    height: 230px;
    transform: scale(1);
    padding: 10px;
    background-color: #fff;
    border-color: var(--c-line);
    border-radius: 14px;
    box-shadow: 0 20px 44px rgba(40, 30, 10, .3);
    z-index: 60;
}
.pcard-thumb i {
    font-style: normal;
    font-family: var(--c-display);
    font-weight: 700;
    color: var(--c-line-strong);
}
.pcard-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pcard-name b {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pcard-name em {
    font-style: normal;
    font-size: 11.5px;
    color: var(--c-muted);
}
.pcard-row:hover .pcard-name b {
    color: var(--c-yellow-strong);
}

/* Числовые ячейки — моноширина, tabular-nums */
.pcard-val {
    font-family: var(--c-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.pcard-beam {
    font-family: var(--c-body);
    font-size: 12.5px;
    color: var(--c-ink-soft);
    /* КСС бывает длинным списком — держим ячейку компактной (2 строки + …) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ячейка ЦТ — компактная шкала-градиент */
.pcard-cct .cctbar {
    height: 7px;
    max-width: 150px;
    margin: 0 2px 14px;
}
.pcard-cct .cctbar-tick {
    width: 11px;
    height: 11px;
}
.pcard-cct .cctbar-tick-val {
    font-size: 8.5px;
}

/* Кружок-переход */
.pcard-go {
    display: flex;
    justify-content: flex-end;
}
.pcard-go > span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--c-bg-soft);
    color: var(--c-ink-soft);
    font-size: 14px;
    transition: background .14s ease, color .14s ease, transform .14s ease;
}
.pcard-row:hover .pcard-go > span {
    background: var(--c-yellow);
    color: #2a1a00;
    transform: translateX(2px);
}

/* Адаптив: ниже 900px строки превращаются в карточки с подписями (как catalog4) */
@media (max-width: 900px) {
    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .pcard-thead {
        display: none !important;
    }
    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .product-grid--list {
        border-radius: 12px;
    }
    :is(body.post-type-archive-product,
        body.tax-product_category,
        body.tax-product_brand) .product-grid--list .pcard-row {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 14px 16px;
        min-height: 0;
    }
    .pcard-model {
        padding-bottom: 10px;
    }
    .pcard-val,
    .pcard-beam {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-top: 1px solid var(--c-line);
    }
    .pcard-val::before,
    .pcard-beam::before {
        content: attr(data-th);
        font-family: var(--c-body);
        font-size: 11px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--c-muted);
        font-weight: 600;
    }
    .pcard-cct {
        padding-top: 8px;
        border-top: 1px solid var(--c-line);
    }
    .pcard-cct::before {
        content: attr(data-th);
        display: block;
        font-family: var(--c-body);
        font-size: 11px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--c-muted);
        font-weight: 600;
        margin: 2px 0 10px;
    }
    .pcard-cct .cctbar {
        max-width: 200px;
    }
    .pcard-go {
        display: none;
    }
}
/* ==== /ШАГ 14 ==== */


/* ==== ШАГ 15: Вид «Список» — интерактивный выбор Мощности/IP/КСС в строке
   (реиспользует пикер вариантов [data-variant-pick] + catalog-variants.js),
   ЦТ выбираемой шкалой с кружками Bread/Meat/цветов справа от полосы. ==== */

/* Компактные селекты внутри ячеек таблицы */
.pcard-sel {
    display: inline-flex;
    max-width: 100%;
}
.pcard-sel select {
    font: inherit;
    font-family: var(--c-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-ink);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line-strong);
    border-radius: 8px;
    padding: 5px 8px;
    max-width: 100%;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}
.pcard-kss .pcard-sel select {
    font-family: var(--c-body);
    font-weight: 500;
    font-size: 12px;
}
/* КСС-ячейка со статичным текстом обрезается в 2 строки (ШАГ 14), но с селектом
   -webkit-box ломает выкладку — отключаем обрезку, если внутри есть селект. */
.pcard-beam:has(.pcard-sel) {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}
.pcard-sel select:hover {
    border-color: var(--c-muted);
}
.pcard-sel select:focus-visible {
    outline: 2px solid var(--c-yellow);
    outline-offset: 1px;
}
/* Подсветка выбранной оси (классы навешивает catalog-variants.js на строку) */
.pcard-row.is-picked .pcard-power .pcard-sel select,
.pcard-row.is-ip-picked .pcard-ip .pcard-sel select,
.pcard-row.is-dist-picked .pcard-kss .pcard-sel select {
    border-color: var(--c-yellow);
    background: var(--c-yellow-soft);
}

/* Ячейка ЦТ: полоса и кружки цветов (Bread/Meat/RGB…) в один ряд, кружки справа */
.product-grid--list .pcard-cct {
    display: flex;
    align-items: center;
    gap: 10px;
}
.product-grid--list .pcard-cct .cvp-cct-wrap {
    flex: 1;
    min-width: 0;
    gap: 0;
}
/* Подпись столбца уже есть в шапке — внутреннюю не дублируем */
.product-grid--list .pcard-cct .cvp-cct-caption {
    display: none;
}
.product-grid--list .pcard-cct .cvp-cct-selectable {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}
/* Полоса не растягивается на всю ширину — рядом остаётся место под кружки */
.product-grid--list .pcard-cct .cvp-cct-selectable .cctbar {
    flex: 0 1 168px;
    max-width: 168px;
    margin: 0 2px 14px;
}
/* Кружки цветов свечения — справа от полосы, на уровне дорожки */
.product-grid--list .pcard-cct .cctbar-colors {
    flex: none;
    margin-top: 0;
    margin-bottom: 14px;
    align-self: center;
}

/* Разнос налезающих подписей шкалы (2,7К и 3,0К): вторую опускаем ниже.
   Селектор шкалы уже делает это в своём скоупе; здесь — для статической шкалы. */
.pcard-cct .cctbar-tick--alt .cctbar-tick-val,
.product-card-cct .cctbar-tick--alt .cctbar-tick-val {
    top: 23px;
}

/* Мобильный: в ячейке-строке полоса ЦТ и кружки тоже рядом, подпись столбца сверху */
@media (max-width: 900px) {
    .product-grid--list .pcard-cct {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    /* На узком экране полосу и кружки цветов кладём в столбик, чтобы кружки не
       налезали на подписи шкалы. Полосе — отступ слева, чтобы крайняя подпись
       (2,7К, центрируется под первой засечкой) не срезалась краем ячейки.
       Селекторы совпадают по специфичности с десктопными, но ниже по файлу
       (внутри media) → выигрывают. */
    .product-grid--list .pcard-cct .cvp-cct-selectable {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .product-grid--list .pcard-cct .cvp-cct-selectable .cctbar,
    .product-grid--list .pcard-cct .cctbar {
        flex: none;
        width: 200px;
        max-width: calc(100% - 16px);
        margin-left: 16px;
    }
    .product-grid--list .pcard-cct .cctbar-colors {
        margin: 0 0 0 16px;
    }
    .pcard-sel,
    .pcard-sel select {
        max-width: 100%;
    }
    /* На узком экране Мощность/IP/КСС остаются подписанными строками (data-th) */
    .pcard-power,
    .pcard-ip,
    .pcard-kss {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
        border-top: 1px solid var(--c-line);
    }
    .pcard-power::before,
    .pcard-ip::before,
    .pcard-kss::before {
        content: attr(data-th);
        font-family: var(--c-body);
        font-size: 11px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--c-muted);
        font-weight: 600;
    }
}
/* ==== /ШАГ 15 ==== */


@keyframes yarFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}