/* Каталог: табы категорий, колонка фильтров, сетка товаров, карточка в сетке.
 *
 * Зона Фазы 3.
 *
 * Файл выделен 31.08.2026 из общего brand.css, чтобы над редизайном можно было
 * работать в несколько сессий одновременно. Пока зоны жили в одном файле,
 * параллельная работа означала гонку: на сервере побеждал тот, кто выложил
 * последним, а в гите каждая правка давала конфликт. Теперь у каждой фазы свой
 * файл, и пересечение возможно только там, где оно и должно быть — в токенах.
 *
 * ПРАВИЛО: цвета только через var(--pwr-*), см. assets/tokens.css.
 */

/* Значки, которые нужны как ФОН (маска кнопки, галочка чекбокса) — их нельзя
   вставить в разметку виджета WooCommerce, там печатается голая ссылка.
   Объявлены здесь, а не в tokens.css: токены держат цвета, а это геометрия,
   и место ей рядом с правилами, которые её используют. Цвет у обоих значков
   берётся из currentColor через маску, поэтому в data-URI цвета нет. */
:root {
    --pwr-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3C/svg%3E");
    /* Шеврон вниз для нативного `<select>`: вставить его в разметку нельзя,
       фоном — можно. Цвет зашит в data-URI, потому что фон не наследует
       currentColor; взят приглушённый серый, читаемый в обеих палитрах. */
    --pwr-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6a6ae' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --pwr-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* ================================================================== *
 *  ТАБЫ КАТЕГОРИЙ НАД СЕТКОЙ
 *  Разметку печатает mu-плагин pwr-catalog-tabs.php
 * ================================================================== */

/* Полоса табов идёт во всю ширину страницы, над колонкой фильтров и сеткой
   (правка владельца 31.08). Разметку печатает pwr-catalog-tabs.php в свой
   `.ct-container` — геометрия та же, что у остального содержимого.

   ⚠️ ПОЧЕМУ ПОРЯДОК ЗАДАЁТСЯ РАСКЛАДКОЙ, А НЕ ХУКОМ.
   Единственный хук, который печатает НАД контейнером с колонкой и сеткой, —
   `woocommerce_before_main_content`, и он срабатывает раньше «героя» с
   заголовком H1. Полоса вставала над «Каталогом», а в макете она под ним.
   Хука между «героем» и контейнером у темы нет: «герой» печатает шаблон, а не
   действие (проверено обходом `$wp_filter` — на `before_main_content` висит
   только обработчик пустого поиска).

   Поэтому порядок задаётся флексом, и только на каталоге и категориях —
   на остальном сайте `main` остаётся блочным. Правило `> *` объявлено ПЕРВЫМ
   и с меньшей специфичностью: незнакомый блок, который тема добавит завтра,
   уедет вниз, а не встанет поверх заголовка. */
body.post-type-archive-product main.site-main,
body.tax-product_cat main.site-main {
    display: flex;
    flex-direction: column;
}
body.post-type-archive-product main.site-main > *,
body.tax-product_cat main.site-main > * { order: 3; }
body.tax-product_cat main.site-main > .pwr-cat-breadcrumbs { order: 0; }
body.post-type-archive-product main.site-main > .hero-section,
body.tax-product_cat main.site-main > .hero-section { order: 1; }
body.post-type-archive-product main.site-main > .pwr-ctabs-band,
body.tax-product_cat main.site-main > .pwr-ctabs-band { order: 2; }

/* Отступы вокруг полосы: сверху свои, снизу — чужие.
   Полоса переехала ИЗ контейнера НАД него, и вертикальный отступ контейнера
   (50 px у темы) оказался не над табами, а между табами и сеткой: на телефоне
   получалась дыра в 66 px, а сверху чипы липли к подзаголовку вплотную.
   Разводим: сверху ставим свой отступ, снизу подрезаем чужой. */
body.post-type-archive-product main.site-main > .ct-container,
body.tax-product_cat main.site-main > .ct-container { padding-top: 24px; }
.pwr-ctabs-band { margin: 18px 0 0; }
.pwr-ctabs {
    margin: 0;
    border-bottom: 1px solid var(--pwr-line);
}
.pwr-ctabs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 4px;
    /* Полоса горизонтально прокручивается, а не переносится: семь табов на
       узком ноутбуке уходили бы во вторую строку, и сетка товаров начиналась
       бы на 60 px ниже. Прокрутка честнее — она видна и обратима. */
    overflow-x: auto;
    scrollbar-width: none;
}
.pwr-ctabs__list::-webkit-scrollbar { display: none; }
/* Табы делят ширину полосы поровну и занимают её целиком (правка владельца
   31.08): семь пунктов занимали 911 px из 1260 и обрывались на середине,
   оставляя справа пустоту. Равные доли, а не размер по тексту, — иначе
   «Витамины и БАДы» были бы вдвое шире «Креатина», и ряд читался бы как
   случайный набор, а не как один переключатель.

   `min-width` держит нижнюю границу: когда семи пунктам по 104 px перестаёт
   хватать ширины, полоса начинает прокручиваться, а не сжимать подписи до
   нечитаемого. Без него `flex: 1` ужал бы их в столбики по букве. */
.pwr-ctabs__item { flex: 1 1 0; min-width: 104px; }

.pwr-ctab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 104px;
    padding: 14px 16px 12px;
    border: 1px solid transparent;
    border-radius: var(--pwr-radius-sm) var(--pwr-radius-sm) 0 0;
    color: var(--pwr-text);
    text-decoration: none;
    text-align: center;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.pwr-ctab__ico { width: 26px; height: 26px; flex: 0 0 26px; }
.pwr-ctab__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pwr-ctab:hover { color: var(--pwr-heading); background: var(--pwr-surface); }

/* Активный таб — рамка в акценте с открытым низом, как в макете: он
   «прирастает» к сетке под собой, а не висит отдельной кнопкой. Низ гасится
   собственным фоном поверх линии полосы, поэтому граница снизу не двоится. */
.pwr-ctab.is-active {
    color: var(--pwr-accent);
    border-color: var(--pwr-accent);
    background: var(--pwr-bg);
    position: relative;
}
.pwr-ctab.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--pwr-bg);
}
.pwr-ctab:focus-visible {
    outline: 2px solid var(--pwr-accent);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    /* На телефоне ряд превращается в чипы из мобильного макета: значок и
       подпись в строку, две строки чипов вместо горизонтальной прокрутки —
       прокручивать пальцем полосу над прокручиваемой страницей неудобно. */
    .pwr-ctabs-band { margin: 14px 0 0; }
    .pwr-ctabs { border-bottom: 0; }
    .pwr-ctabs__list { flex-wrap: wrap; overflow: visible; gap: 8px; }
    /* На телефоне ряд превращается в чипы, и равные доли им вредны: чип
       обязан быть по размеру своей подписи, иначе «Креатин» растянется на
       полстроки ради выравнивания с «Витаминами и БАДами». */
    .pwr-ctabs__item { flex: 0 0 auto; min-width: 0; }
    .pwr-ctab {
        flex-direction: row;
        min-width: 0;
        padding: 8px 14px;
        border-radius: var(--pwr-radius-pill);
        border-color: var(--pwr-line);
        background: var(--pwr-surface);
        gap: 7px;
    }
    .pwr-ctab__ico { width: 18px; height: 18px; flex: 0 0 18px; }
    .pwr-ctab__label { font-size: 11px; }
    .pwr-ctab.is-active {
        background: var(--pwr-accent);
        border-color: var(--pwr-accent);
        color: var(--pwr-on-accent);
    }
    .pwr-ctab.is-active::after { content: none; }
}

/* ================================================================== *
 *  ВЕРХНЯЯ СТРОКА СЕТКИ: НАЙДЕНО N + СОРТИРОВКА
 * ================================================================== */

.woo-listing-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
/* Селектор с `.woo-listing-top` — не украшение, а необходимость.
   Blocksy объявляет `.woo-listing-top .woocommerce-result-count { color:
   var(--theme-text-color) }` в своём woocommerce.min.css: два класса против
   нашего одного, и наше правило проигрывало по специфичности. На витрине
   строка «Найдено 121 товар» получалась тёмно-синей (rgb 58,79,102) на почти
   чёрном — контраст 2.33 при норме 4.5. Ровно та ловушка, из-за которой
   28.08 синими всплывали кнопки: неперехваченное Blocksy красит своей
   палитрой. Поймано замером контраста в браузере, а не чтением кода. */
.woo-listing-top .woocommerce-result-count,
.woocommerce-result-count {
    margin: 0;
    font-size: 14px;
    color: var(--pwr-accent);
    text-transform: none;
    letter-spacing: 0;
}
/* Селектор сортировки. Тема ставит `appearance: none` и НЕ подставляет свою
   стрелку — замер показал `background-image: none`. Получалось поле «Популярные»
   без единого признака, что оно раскрывается: владелец догадался, что это
   список, только попробовав нажать. Рисуем шеврон сами. */
.woocommerce-ordering select.orderby {
    background: var(--pwr-surface) var(--pwr-icon-chevron) right 12px center / 14px 14px no-repeat;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    color: var(--pwr-text-strong);
    padding: 9px 34px 9px 14px;
    font-size: 14px;
    cursor: pointer;
}
.woocommerce-ordering select.orderby:hover { border-color: var(--pwr-accent); }
.woocommerce-ordering select.orderby:focus-visible {
    outline: 2px solid var(--pwr-accent);
    outline-offset: 1px;
}

/* ================================================================== *
 *  СЕТКА
 * ================================================================== */

/* Четыре карточки в ряд, как в макете. Тема отдаёт три (`columns-3` в
   разметке), и при суженной до 240 px колонке фильтров четвёртая помещается
   свободно: на 1290 px контейнера это 236 px под карточку против 277 px у
   трёх. Ниже 1200 px возвращаемся к трём, ниже 1000 — к двум. */
@media (min-width: 1200px) {
    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* На телефоне — две карточки в ряд, как в мобильном макете. Тема отдаёт одну:
   карточка во всю ширину экрана показывает три товара на экран вместо шести,
   и до конца страницы каталога нужно вдвое больше движений пальцем. */
@media (max-width: 767.98px) {
    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products,
    body.search ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .woocommerce ul.products li.product { padding: 10px; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
        min-height: calc(2 * 1.35 * 13px) !important;
    }
    .woocommerce ul.products li.product .price { font-size: 16px; }
    .woocommerce ul.products li.product .ct-woo-card-actions .button { width: 36px; height: 36px; }
    .woocommerce ul.products li.product .ct-woo-card-actions .button .pwr-cart-ico {
        width: 17px; height: 17px; flex-basis: 17px;
    }
    /* Бейджи мельче: на карточке шириной 170 px две плашки в полный размер
       закрывали треть снимка. */
    .woocommerce ul.products li.product figure > .onsale,
    .woocommerce ul.products li.product figure > .out-of-stock-badge,
    .woocommerce ul.products li.product figure > .pwr-badge {
        left: 8px; padding: 4px 8px; font-size: 10px;
    }
    .woocommerce ul.products li.product figure > .onsale,
    .woocommerce ul.products li.product figure > .out-of-stock-badge { top: 8px; }
    .woocommerce ul.products li.product figure > .pwr-badge { top: 8px; }
    .woocommerce ul.products li.product figure:has(> .onsale) > .pwr-badge,
    .woocommerce ul.products li.product figure:has(> .out-of-stock-badge) > .pwr-badge {
        top: calc(8px + 18px + 5px);
    }
}

/* === КАРТОЧКИ ТОВАРОВ В СЕТКЕ === */
.woocommerce ul.products li.product {
    background: var(--pwr-surface); border-radius: var(--pwr-radius); padding: 14px;
    border: 1px solid var(--pwr-line);
    box-shadow: var(--pwr-shadow-1); transition: .2s;
    /* Позиционируем бейдж от карточки, а не от картинки: у товара без
       изображения `figure` схлопывается, и бейдж уехал бы за пределы плитки. */
    position: relative;
}
.woocommerce ul.products li.product:hover {
    box-shadow: var(--pwr-shadow-2);
    transform: translateY(-2px);
    border-color: var(--pwr-line);
}
.woocommerce ul.products li.product .price {
    color: var(--pwr-heading); font-weight: 700; font-size: 1.15em;
}
/* Банка показывается целиком, а не обрезается по квадрату. Подложка —
   отдельный токен: пока пакшот не обработан под тёмный фон, он остаётся
   картинкой на белом, и белая подложка ему нужна (см. tokens.css). */
.woocommerce ul.products li.product img {
    border-radius: var(--pwr-radius-sm);
    object-fit: contain !important;
    background: var(--pwr-media-bg-raw);
    aspect-ratio: 1 / 1; padding: 6px;
}
/* У обработанного пакшота фон вырезан, тень и контровой свет запечены в саму
   картинку — подложка ему не нужна и мешает: белый квадрат виден по углам,
   потому что банка вписана по контуру, а не по квадрату.
   Правило нужно ОТДЕЛЬНО от подложки контейнера: белый фон висел на самом
   <img>, и тёмный контейнер под ним ничего не менял. */
.woocommerce ul.products li.product.pwr-packshot-ready img {
    background: transparent;
    padding: 0;
}

a { color: var(--pwr-accent); }
h1, h2, h3 { color: var(--pwr-heading); }

/* === БЕЙДЖИ НА КАРТОЧКЕ === */
/* Разметку печатает pwr-catalog-tabs.php, правило приоритета — там же:
   «Распродано» вытесняет «Хит» и «New», их не бывает по два.

   ⚠️ Бейджей на карточке ДВА, и это не ошибка. Скидка (`.onsale`, блок ниже)
   с 31.08 стоит у всех 123 товаров — значит, отличать одну карточку от другой
   она не может и работает как постоянная плашка цены. «Хит» отличает, и место
   ему нужно своё. Поэтому они складываются столбиком в один левый угол, а не
   спорят за одну точку: геометрия у них общая, разъезжается только вертикаль.
   Если скидку когда-нибудь выключат, «Хит» сам поднимется наверх — смещение
   задано через `:has()`, а не безусловным отступом. */
.pwr-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 10px;
    border-radius: var(--pwr-radius-sm);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pwr-on-accent);
    background: var(--pwr-accent);
    pointer-events: none;
}
/* Вторым в столбике: 12 (отступ) + 22 (высота плашки) + 6 (зазор). */
.woocommerce ul.products li.product:has(.onsale) .pwr-badge { top: 40px; }
/* «Хит» рядом со скидкой не должен быть того же цвета: два оранжевых
   прямоугольника друг под другом читаются как один разорванный. */
.woocommerce ul.products li.product:has(.onsale) .pwr-badge--hit {
    background: var(--pwr-surface-3);
    color: var(--pwr-heading);
}
/* Скидка на то, чего нет в наличии, — реклама несбыточного. Прячем, и
   «Распродано» остаётся единственной плашкой на карточке. */
.woocommerce ul.products li.product.outofstock .onsale { display: none; }
.woocommerce ul.products li.product:has(.pwr-badge--out) .pwr-badge { top: 12px; }
.pwr-badge--new { background: var(--pwr-badge-new); }
/* «Распродано» намеренно не цветное: это не достижение товара, а его
   отсутствие, и оранжевый бейдж рекламировал бы то, чего нельзя купить. */
.pwr-badge--out {
    background: var(--pwr-surface-3);
    color: var(--pwr-text);
}

/* === ПОРЯДОК ВНУТРИ КАРТОЧКИ В СЕТКЕ === */
/* Порядок из макета: рейтинг → название → цена и кнопка в одной строке.
   Сделано раскладкой, а не перестановкой хуков WooCommerce: хуки печатают эти
   же элементы и на других экранах, и снятие их ради сетки утащило бы за собой
   страницу товара и результаты поиска. Сетка меняет только показ.

   Цена и кнопка в одной строке — главная экономия: раньше они занимали две
   строки на каждой из 24 карточек экрана. */
.woocommerce ul.products li.product {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: start;
    gap: 8px 10px;
}
.woocommerce ul.products li.product > figure,
.woocommerce ul.products li.product > .ct-woo-card-rating,
.woocommerce ul.products li.product > .woocommerce-loop-product__title {
    grid-column: 1 / -1;
    margin: 0;
}
.woocommerce ul.products li.product > figure { order: 1; }
.woocommerce ul.products li.product > .ct-woo-card-rating { order: 2; }
.woocommerce ul.products li.product > .woocommerce-loop-product__title { order: 3; }
.woocommerce ul.products li.product > .price { order: 4; grid-column: 1; align-self: center; margin: 0; }
.woocommerce ul.products li.product > .ct-woo-card-actions { order: 5; grid-column: 2; margin: 0; }

/* Категория убрана: она повторяет то, что человек уже выбрал в фильтре, и
   съедает строку на каждой карточке. */
.woocommerce ul.products li.product > .entry-meta { display: none; }

/* Компактная строка рейтинга: звёзды, число, отзывы в скобках — в один ряд. */
.woocommerce ul.products li.product .ct-woo-card-rating {
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
    font-size: 13px;
}
.woocommerce ul.products li.product .pwr-rating-num {
    margin-left: 2px; font-weight: 700; color: var(--pwr-heading);
}
/* Счётчик отзывов «(300)» шёл цветом --pwr-muted и при 11,7 px давал контраст
   4.39 — ниже нормы 4.5 для мелкого текста. Поднят на ступень: число отзывов
   для БАДа читают внимательнее цены. */
.woocommerce ul.products li.product .pwr-rating-count { color: var(--pwr-text); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important; line-height: 1.35;
}
.woocommerce ul.products li.product .price { font-size: 19px; white-space: nowrap; }

/* Кнопка в сетке — квадрат со значком корзины, как в макете: подпись
   «В корзину» повторялась 24 раза на экране и отнимала у цены половину
   строки. Текст остаётся в разметке для читалок, визуально прячется. */
.woocommerce ul.products li.product .ct-woo-card-actions .button {
    position: relative;
    width: 42px; height: 42px;
    min-height: 0;
    padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--pwr-radius-sm);
    font-size: 0 !important;
    line-height: 0;
    overflow: hidden;
}
/* Значок вставляет в разметку pwr-catalog-tabs.php, а не рисует псевдоэлемент:
   `::before` у `.button` Blocksy не раскладывает вовсе — бокс с `display:block`,
   маской и цветом имел `width: auto` и не отрисовывался ни в каком виде.
   Видно только замером в браузере, по коду темы этого не найти. */
.woocommerce ul.products li.product .ct-woo-card-actions .button .pwr-cart-ico {
    width: 20px; height: 20px;
    display: block;
    flex: 0 0 20px;
}
/* Подпись «В корзину» остаётся в разметке для читалки экрана: кнопка с одним
   значком называлась бы просто «ссылка», и купить с неё было бы нельзя. */
.woocommerce ul.products li.product .ct-woo-card-actions .button .pwr-cart-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Название товара — обычный текст по цвету, а не ссылка.
   Общее правило `a { color: accent }` красило его оранжевым: в сетке из 24
   карточек это 24 оранжевые строки, и акцент перестаёт быть акцентом —
   кнопка «В корзину» теряется среди них. */
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    color: var(--pwr-heading);
    transition: color .2s ease;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title a {
    color: var(--pwr-accent);
}

/* Название товара — две строки с закреплённой высотой (макет владельца).
   До 31.08 здесь стояла одна строка: длинные имена вроде «Креатин моногидрат
   порошок, 300 г» переносили на вторую строку одну букву «г», и ряд выглядел
   рваным. Но лечили симптом: рвал ряд не перенос, а ПЛАВАЮЩАЯ высота подписи.
   Две строки с `min-height` дают и ровные ряды, и целое имя товара —
   многоточие остаётся только там, где имя действительно длиннее двух строк. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
[data-products] .woocommerce-loop-product__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35 !important;
    min-height: calc(2 * 1.35 * 15px) !important;
}

/* ================================================================== *
 *  «ПОКАЗАТЬ ЕЩЁ»
 * ================================================================== */

.pwr-more { display: flex; justify-content: center; margin: 26px 0 6px; }
.pwr-more__btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 26px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-surface);
    color: var(--pwr-text-strong);
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}
.pwr-more__btn svg { width: 16px; height: 16px; }
.pwr-more__btn:hover { border-color: var(--pwr-accent); color: var(--pwr-accent); }
.pwr-more__btn:focus-visible { outline: 2px solid var(--pwr-accent); outline-offset: 2px; }
.pwr-more__btn.is-busy { opacity: .6; pointer-events: none; }
.pwr-more__btn.is-failed { border-color: var(--pwr-accent); color: var(--pwr-accent); }

/* Нумерация страниц прячется ТОЛЬКО когда скрипт подгрузки жив: класс
   вешает он сам. Ссылки остаются в разметке всегда — по ним ходит краулер,
   и «показать ещё» его не заменяет. */
.pwr-pager-quiet {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================== *
 *  РЯД ПРЕИМУЩЕСТВ ПОД КАТАЛОГОМ
 * ================================================================== */

.pwr-cadvs {
    list-style: none;
    margin: 34px 0 0;
    padding: 20px 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius);
    background: var(--pwr-surface);
}
.pwr-cadv {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 20px;
    /* Разделители между колонками, а не рамки у каждой: в макете это одна
       полоса, разбитая тонкими линиями, а не четыре отдельные карточки. */
    border-left: 1px solid var(--pwr-line-soft);
}
.pwr-cadv:first-child { border-left: 0; }
.pwr-cadv__ico { flex: 0 0 34px; color: var(--pwr-accent); }
.pwr-cadv__ico svg { width: 34px; height: 34px; display: block; }
.pwr-cadv__body { display: flex; flex-direction: column; gap: 4px; }
.pwr-cadv__title {
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--pwr-heading);
}
.pwr-cadv__text { font-size: 13px; line-height: 1.4; color: var(--pwr-text); }

@media (max-width: 999.98px) {
    .pwr-cadvs { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
    .pwr-cadv:nth-child(odd) { border-left: 0; }
}
@media (max-width: 575.98px) {
    .pwr-cadvs { grid-template-columns: 1fr; gap: 16px; padding: 18px 6px; }
    .pwr-cadv { border-left: 0; }
    .pwr-cadv__ico, .pwr-cadv__ico svg { flex-basis: 28px; width: 28px; height: 28px; }
}

/* ================================================================== *
 *  КОЛОНКА ФИЛЬТРОВ
 *  Базовая раскладка и мобильная панель — в pwr-catalog-nav.php.
 *  Здесь только оформление по макету.
 * ================================================================== */

/* Рамка колонки — акцентом (правка владельца 31.08: «оранжевым бортиком
   выглядит неплохо», так же в макете). Не сплошной оранжевый: полная линия
   в 100% насыщенности спорила бы с кнопкой «Фильтрация» внутри той же
   колонки. Берём тот же акцент приглушённым — блок выделен, кнопка остаётся
   единственным ярким пятном. */
.ct-sidebar {
    border: 1px solid var(--pwr-accent-soft);
    border-radius: var(--pwr-radius);
    background: var(--pwr-surface);
    padding: 20px 18px;
}
.ct-sidebar .widget-title,
.ct-sidebar .widgettitle {
    color: var(--pwr-heading);
    font-weight: 700;
}

/* Активная категория — акцентом со стрелкой, как в макете. Стрелка рисуется
   псевдоэлементом: свой узел в разметку виджета WooCommerce не вставить, а
   отдельный плагин ради одного значка — это файл, который потом никто не
   свяжет с этой строкой. */
.ct-sidebar .product-categories .current-cat > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ct-sidebar .product-categories .current-cat > a::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    flex: 0 0 auto;
}
.ct-sidebar .product-categories a:hover { color: var(--pwr-accent); }

/* Стрелка разворота раздела. Была серо-синей (Blocksy красит неперехваченное
   своей палитрой — rgb 58,79,102) и вдобавок под opacity .5: владелец не
   понял, что раздел вообще разворачивается. Акцент и полная непрозрачность —
   это единственный элемент колонки, который надо НАЙТИ, а не прочитать. */
.ct-sidebar .product-categories .pwr-cat-toggle {
    color: var(--pwr-accent) !important;
    opacity: 1;
}
.ct-sidebar .product-categories .pwr-cat-toggle:hover {
    color: var(--pwr-accent-hover) !important;
}
.ct-sidebar .product-categories .pwr-cat-toggle svg { stroke-width: 2.4; }
.ct-sidebar .product-categories .count,
.ct-sidebar .product-categories a > span { color: var(--pwr-muted); }

/* Ползунок цены: подпись и поля «от / до» из макета. Поля подставляет скрипт
   в pwr-catalog-tabs.php — сам виджет печатает только текстовую строку
   «Цена: 250 ₽ — 2 730 ₽», по которой нельзя ввести своё значение. */
.ct-sidebar .price_slider_amount .price_label { text-align: left; opacity: 1; color: var(--pwr-muted); }
.pwr-price-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0 2px;
}
.pwr-price-field {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-bg);
    padding: 9px 11px;
}
.pwr-price-field__label { font-size: 12px; color: var(--pwr-muted); flex: 0 0 auto; }
.pwr-price-field input {
    width: 100%;
    min-width: 0;
    border: 0; background: none; padding: 0; margin: 0;
    color: var(--pwr-heading);
    font-size: 14px; font-weight: 600;
    /* Стрелки числового поля в 60 px ширины съедают половину значения. */
    -moz-appearance: textfield;
    appearance: textfield;
}
.pwr-price-field input::-webkit-outer-spin-button,
.pwr-price-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pwr-price-field input:focus { outline: none; }
.pwr-price-field:focus-within { border-color: var(--pwr-accent); }

/* Галочки формы выпуска. Виджет WooCommerce печатает обычные ссылки, а не
   поля ввода: галочка рисуется псевдоэлементом, состояние берётся из класса
   `chosen`, который виджет ставит сам. Подменять ссылки чекбоксами нельзя —
   тогда фильтр перестанет работать без JS. */
.ct-sidebar .woocommerce-widget-layered-nav-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.ct-sidebar .woocommerce-widget-layered-nav-list__item a {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 0;
    font-size: 14px;
    color: var(--pwr-text-strong);
    text-decoration: none;
}
.ct-sidebar .woocommerce-widget-layered-nav-list__item a::before {
    content: "";
    flex: 0 0 18px;
    width: 18px; height: 18px;
    border: 1px solid var(--pwr-line);
    border-radius: 4px;
    background: var(--pwr-bg);
    transition: border-color .15s ease, background-color .15s ease;
}
.ct-sidebar .woocommerce-widget-layered-nav-list__item a:hover { color: var(--pwr-heading); }
.ct-sidebar .woocommerce-widget-layered-nav-list__item a:hover::before { border-color: var(--pwr-accent); }
.ct-sidebar .woocommerce-widget-layered-nav-list__item--chosen a { color: var(--pwr-heading); }
.ct-sidebar .woocommerce-widget-layered-nav-list__item--chosen a::before {
    border-color: var(--pwr-accent);
    background: var(--pwr-accent) var(--pwr-icon-check) center / 12px 12px no-repeat;
}
.ct-sidebar .woocommerce-widget-layered-nav-list__item .count { color: var(--pwr-muted); font-size: 12px; }

/* Кнопка «Фильтрация» — во всю ширину колонки, как «ПРИМЕНИТЬ» в макете. */
.ct-sidebar .price_slider_amount .button {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    padding: 12px 15px;
}
/* Сброс фильтров: строка со значком под кнопкой. Печатает её скрипт —
   у виджетов WooCommerce своей такой ссылки нет. */
/* Сброс фильтров стоит в колонке ВСЕГДА (правка владельца 31.08), а не
   появляется при активном фильтре. Кнопка, которой нет, пока она не нужна, —
   это кнопка, о существовании которой не знают: человек не проверяет, что
   появится, если он что-то нажмёт. Отделяется от кнопки «Фильтрация»
   линией — это действие другого рода, отменяющее. */
.pwr-filters-reset {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--pwr-line-soft);
    font-size: 13px;
    color: var(--pwr-accent);
    text-decoration: none;
}
.pwr-filters-reset svg { width: 14px; height: 14px; }
.pwr-filters-reset:hover { text-decoration: underline; }

/* ================================================================== *
 *  ЗАГОЛОВОК КАТАЛОГА И КРОШКИ
 * ================================================================== */

.pwr-cat-breadcrumbs { color: var(--pwr-muted); }
.pwr-cat-breadcrumbs a { color: var(--pwr-muted); text-decoration: none; }
.pwr-cat-breadcrumbs a:hover { color: var(--pwr-accent); }

/* ================================================================== *
 *  ПУСТАЯ ВЫДАЧА: ПОИСК И 404
 * ================================================================== */

.pwr-empty {
    max-width: 620px;
    margin: 26px auto 40px;
    padding: 30px 26px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius);
    background: var(--pwr-surface);
    text-align: center;
}
.pwr-empty__ico { color: var(--pwr-accent); }
.pwr-empty__ico svg { width: 42px; height: 42px; }
.pwr-empty__title { margin: 12px 0 8px; font-size: 20px; color: var(--pwr-heading); }
.pwr-empty__text { margin: 0 0 18px; color: var(--pwr-text); line-height: 1.5; }
.pwr-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pwr-empty__search {
    display: flex; gap: 8px; justify-content: center;
    margin: 18px auto 0; max-width: 420px;
}
.pwr-empty__search input[type="search"] {
    flex: 1 1 auto; min-width: 0;
    background: var(--pwr-bg);
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    color: var(--pwr-heading);
    padding: 10px 14px; font-size: 14px;
}
.pwr-empty__search input[type="search"]:focus-visible {
    outline: none; border-color: var(--pwr-accent);
}

/* Второе сообщение темы гасим.
   Поиск без результатов печатал их два подряд: описание «героя» от Blocksy
   («По вашему запросу ничего не найдено. Попробуйте другие ключевые слова.»)
   и уведомление WooCommerce. Второе мы заменили блоком выше, первое убрать
   нечем — тема печатает его из своего шаблона «героя», хука там нет.
   Заголовок «Результаты поиска по запросу …» ОСТАЁТСЯ: он говорит, что
   искали, и его не повторяет никто. */
body.search-no-results .hero-section .page-description { display: none; }

/* === БЕЙДЖ СКИДКИ === */
/* Включён 31.08 после решения владельца: на Wildberries у карточек уже стоит
   зачёркнутая цена, и эти продукты реально продавались дороже. Обычной ценой
   стала прежняя, ценой со скидкой — текущая; покупатель платит столько же.
   Процент печатает сама WooCommerce, мы задаём только вид. */
.woocommerce ul.products li.product .onsale {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    min-width: 0; min-height: 0; margin: 0; padding: 5px 10px;
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-accent) !important;
    color: var(--pwr-on-accent) !important;
    font-size: 12px; font-weight: 700; line-height: 1;
}
/* Зачёркнутая цена — рядом с текущей, приглушённая: она справка, а не цена,
   по которой человек принимает решение. */
.woocommerce ul.products li.product .price del {
    margin-left: 6px; font-size: .8em; font-weight: 500;
    color: var(--pwr-muted); text-decoration-thickness: 1px;
}
.woocommerce ul.products li.product .price del .amount { color: inherit; }
.woocommerce ul.products li.product .price ins {
    text-decoration: none; background: transparent; color: var(--pwr-heading);
}