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

/* === БЛОК ДОВЕРИЯ НА КАРТОЧКЕ === */
.pwr-trust {
    margin-top: 26px; border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius); background: var(--pwr-surface); padding: 6px 18px;
}
.pwr-trust__row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid var(--pwr-line-soft);
}
.pwr-trust__row:last-child { border-bottom: none; }
.pwr-trust__ico { width: 26px; height: 26px; flex: 0 0 26px; color: var(--pwr-accent); margin-top: 1px; }
.pwr-trust__txt { font-size: 15px; line-height: 1.45; color: var(--pwr-text); }
.pwr-trust__txt b { color: var(--pwr-heading); font-weight: 600; }
@media (max-width: 689.98px) {
    .pwr-trust { padding: 4px 14px; }
    .pwr-trust__txt { font-size: 14px; }
}
/* блок доверия в корзине и на чекауте — блочные компоненты Woo, ширина по контенту */
.pwr-trust--cart { max-width: 560px; margin-left: auto; margin-right: auto; }


/* === ЮРИДИЧЕСКИЕ СВЕДЕНИЯ О БАД === */
.pwr-legal {
    margin-top: 18px; border: 1px solid var(--pwr-line); border-radius: 12px;
    background: var(--pwr-surface); padding: 14px 18px; font-size: 14px;
}
.pwr-legal summary { cursor: pointer; font-weight: 600; color: var(--pwr-heading); }
.pwr-legal dl { margin: 14px 0 0; }
.pwr-legal dt { font-weight: 600; color: var(--pwr-heading); margin-top: 10px; font-size: 13px; }
.pwr-legal dd { margin: 2px 0 0; color: var(--pwr-text); line-height: 1.45; }
.pwr-legal__note {
    margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--pwr-line-soft);
    color: var(--pwr-text-strong); font-weight: 600; font-size: 13px;
}


/* === СОСТАВ И ПРИМЕНЕНИЕ НА КАРТОЧКЕ === */
.pwr-spec { margin-top: 18px; font-size: 14px; }
.pwr-spec__row {
    display: grid; grid-template-columns: 130px 1fr; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--pwr-line-soft);
}
.pwr-spec__row:last-child { border-bottom: none; }
.pwr-spec__k { font-weight: 600; color: var(--pwr-heading); }
.pwr-spec__v { color: var(--pwr-text); line-height: 1.5; }
@media (max-width: 689.98px) { .pwr-spec__row { grid-template-columns: 1fr; gap: 4px; } }


/* ================================================================== *
 *  КАРТОЧКА ТОВАРА ПО МАКЕТУ ВЛАДЕЛЬЦА (31.08.2026)
 *  Разметку добавляет mu-плагин pwr-product-tabs.php
 * ================================================================== */

/* --- ГАЛЕРЕЯ: ПРЕВЬЮ КОЛОНКОЙ СЛЕВА --- */
/* Blocksy печатает ленту превью (`.flexy-pills`) ПОД снимком. В макете она
   стоит колонкой слева. Меняем порядком и направлением, а не переносом узлов:
   галерею оживляет скрипт темы, и вырванный из неё список перестал бы
   переключать кадры. */
@media (min-width: 1000px) {
    /* ⚠️ ВЫСОТА ГАЛЕРЕИ ИДЁТ ЗА ПРАВОЙ КОЛОНКОЙ, а не наоборот.

       Замечание владельца 31.08: «картинка выходит ниже, чем поле с ценой, и
       из-за этого большое чёрное пространство между блоком и нижним блоком».
       Замер подтвердил: снимок 512×683, а содержимое правой колонки кончалось
       на 852 при низе снимка 925 — 73 px пустоты под карточкой цены плюс
       отступ до вкладок.

       Подгонять высоту снимка числом бессмысленно: правая колонка у каждого
       товара своя (длина названия, наличие второго значка, цена со скидкой
       или без). Поэтому снимок РАСТЯГИВАЕТСЯ по высоте ячейки сетки, а
       высоту ячейки задаёт колонка. Обе колонки кончаются вровень у любого
       товара, и чёрной полосы нет ни под одной.

       `min-height` — страховка на товар с коротким названием и без значков:
       снимок не должен схлопнуться до марки. */
    /* Родитель галереи — `.product-entry-wrapper`, а не сам `div.product`:
       между ними ещё одна обёртка темы. Правило с `div.product >` не
       применялось, и Blocksy оставляла галерее свой `align-self: flex-start` —
       снимок не тянулся, а схлопывался до `min-height`. Тот же промах по
       структуре, что с блоком «Возьми вместе»: селектор писался по догадке
       о разметке вместо проверки. */
    .product-entry-wrapper > .woocommerce-product-gallery { align-self: stretch; }
    /* ⚠️ У самой галереи высота НЕ задаётся. `height: 100%` на ней перебивал
       собственный `align-self: stretch`: процент считался от родителя, чья
       высота определяется содержимым, ссылка получалась круговой, и браузер
       откатывался к высоте содержимого — то есть к `min-height` в 420 px.
       Растягивает её флекс, а проценты внутри уже опираются на растянутую
       высоту как на определённую. */
    .woocommerce-product-gallery .ct-product-gallery-container { height: 100%; }

    /* Колонка превью выведена ИЗ ПОТОКА, и это не украшательство.

       Первая попытка просто сняла с неё ограничение высоты (`max-height:100%`
       вместо 520 px) — и лента из двенадцати миниатюр растянула галерею до
       1588 px, то есть ровно наоборот тому, что требовалось. `max-height` в
       процентах считается от родителя, высота которого сама определяется
       содержимым, и потолка не получается вовсе.

       Абсолютное позиционирование убирает ленту из расчёта высоты строки
       окончательно: она не может растянуть ячейку, потому что не участвует
       в её измерении. Высоту задаёт правая колонка, снимок тянется за ней,
       лента прокручивается внутри той же высоты. */
    .woocommerce-product-gallery .flexy-container {
        position: relative;
        height: 100%;
        min-height: 420px;
    }
    .woocommerce-product-gallery .flexy-container > .flexy-pills {
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: 84px;
        margin: 0;
    }
    /* Снимок тоже выведен из потока — по той же причине, что и лента превью,
       и это выяснилось только замером. Пока он оставался в потоке, СВОЮ
       высоту он брал из пропорций картинки (683 px) и задавал высоту строки
       сетки: правая колонка кончалась на 786, а вкладки начинались на 959 —
       173 px чёрного под карточкой цены. Ни один процент высоты этого не
       чинит, пока у ячейки есть содержимое с собственной высотой.

       Абсолютным позиционированием у галереи не остаётся содержимого в
       потоке вовсе. Высота строки считается по правой колонке (или по
       `min-height`, если товар совсем короткий), и снимок заполняет её. */
    .woocommerce-product-gallery .flexy-container > .flexy {
        position: absolute;
        top: 0; right: 0; bottom: 0;
        /* 84 колонка превью + 14 зазор */
        left: 98px;
        display: flex;
    }
    .woocommerce-product-gallery .flexy-view,
    .woocommerce-product-gallery .flexy-items,
    .woocommerce-product-gallery .flexy-item,
    .woocommerce-product-gallery .flexy-item > .ct-media-container { height: 100%; width: 100%; }
    /* `contain`, а не `cover`: банку нельзя обрезать ради заполнения рамки —
       на пакшоте важен весь контур, включая крышку и этикетку. */
    .woocommerce-product-gallery .flexy-item img {
        height: 100%; width: 100%;
        object-fit: contain;
    }
    .woocommerce-product-gallery .flexy-pills > ol {
        display: flex;
        flex-direction: column;
        /* `nowrap` обязателен. Blocksy раскладывает превью в РЯД и оставляет
           `flex-wrap: wrap`; при развороте в колонку лента переносилась во
           второй столбец, и вместо колонки получались две узкие полоски. */
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0; padding: 0;
        list-style: none;
        height: 100%;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .woocommerce-product-gallery .flexy-pills > ol > li {
        /* Ширину тема задаёт долей от ряда (получалось 17 px). В колонке
           каждое превью занимает её целиком. */
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 1 / 1;
        margin: 0;
        border-radius: var(--pwr-radius-sm);
        overflow: hidden;
        border: 1px solid var(--pwr-line);
        background: var(--pwr-media-bg);
        cursor: pointer;
    }
    .woocommerce-product-gallery .flexy-pills > ol > li img,
    .woocommerce-product-gallery .flexy-pills > ol > li .ct-media-container {
        width: 100%; height: 100%;
        display: block;
        object-fit: contain;
    }
    .woocommerce-product-gallery .flexy-pills > ol > li.active,
    .woocommerce-product-gallery .flexy-pills > ol > li[aria-current="true"] {
        border-color: var(--pwr-accent);
    }
}

/* Бейдж скидки на карточке товара тема красит своим цветом — на первом
   экране это был синий прямоугольник посреди оранжевой витрины (та же
   ловушка, что с кнопками «Весь каталог» 28.08). */
/* Бейдж скидки отсчитывается от контейнера галереи, а колонка превью с
   31.08 стоит слева — без сдвига плашка легла бы поверх первой миниатюры.
   Сдвиг равен ширине колонки и зазору (84 + 14) и живёт в той же медиа-рамке,
   что и сама колонка. */
@media (min-width: 1000px) {
    .woocommerce div.product .ct-product-gallery-container > .onsale { left: 98px; }
}
.woocommerce div.product .ct-product-gallery-container > .onsale,
.woocommerce div.product span.onsale {
    background: var(--pwr-accent) !important;
    color: var(--pwr-on-accent) !important;
    border-radius: var(--pwr-radius-sm);
    padding: 6px 12px;
    font-size: 13px; font-weight: 700; line-height: 1;
    min-width: 0; min-height: 0;
}

/* --- ПЕРВЫЙ ЭКРАН --- */

/* Бейдж «Хит продаж» — над заголовком, приглушённым янтарём, как в макете:
   рядом с оранжевой кнопкой «В корзину» второй чистый акцент спорил бы с ней
   за внимание, а решение принимают по кнопке. */
.pwr-hit {
    display: inline-block;
    margin: 0 0 10px;
    padding: 5px 10px;
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-accent-wash);
    border: 1px solid var(--pwr-accent);
    color: var(--pwr-accent);
    font-size: 11px; font-weight: 700; line-height: 1;
    letter-spacing: .06em; text-transform: uppercase;
}

.pwr-code { margin: 6px 0 0; font-size: 13px; color: var(--pwr-muted); }
.pwr-code span { color: var(--pwr-text-strong); }

/* Значки «100% оригинал» и «Произведено в России» */
.pwr-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.pwr-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-surface);
    font-size: 13px; color: var(--pwr-text-strong);
}
.pwr-pill svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--pwr-accent); }

/* Карточка цены: цена, счётчик, кнопка, избранное, плашка доставки.
   Рамку рисует контейнер формы заказа, а не отдельный узел: форму печатает
   WooCommerce, и обернуть её своим div можно было бы только буфером вывода —
   лишний слой ради рамки. */
.woocommerce div.product .ct-product-add-to-cart {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius);
    background: var(--pwr-surface);
}
/* Цена и форма заказа — один прямоугольник. Цена печатается отдельным узлом
   перед формой (хук переставлен в pwr-product-tabs.php), поэтому рамка
   собирается из двух половин: у цены нет низа, у формы нет верха. Обернуть
   их одним div можно было бы только буфером вывода — лишний слой ради рамки. */
.woocommerce div.product p.price {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--pwr-heading);
    margin: 18px 0 0;
    padding: 20px 20px 0;
    border: 1px solid var(--pwr-line);
    border-bottom: 0;
    border-radius: var(--pwr-radius) var(--pwr-radius) 0 0;
    background: var(--pwr-surface);
}
.woocommerce div.product p.price + .ct-product-add-to-cart {
    margin-top: 0;
    padding-top: 16px;
    border-top: 0;
    border-radius: 0 0 var(--pwr-radius) var(--pwr-radius);
}
.woocommerce div.product p.price del { font-size: .5em; font-weight: 500; color: var(--pwr-muted); margin-left: 10px; }
.woocommerce div.product p.price ins { text-decoration: none; background: none; color: inherit; }

.woocommerce div.product form.cart .ct-cart-actions {
    display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
}
.woocommerce div.product form.cart .quantity {
    display: flex; align-items: center;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-bg);
    flex: 0 0 auto;
}
.woocommerce div.product form.cart .quantity input.qty {
    background: none; border: 0;
    color: var(--pwr-heading);
    font-weight: 700; font-size: 16px;
    width: 46px; text-align: center;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 200px;
    min-height: 52px;
    border-radius: var(--pwr-radius-sm);
    font-size: 15px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}

/* Сердечко избранного встаёт в ту же строку, что счётчик и кнопка, — как в
   макете. Кнопку вставляет клиентский скрипт соседней сессии
   (`shop-ui.js`, класс `pwr-fav-btn--single`); мы её только раскладываем,
   не трогая ни разметку, ни поведение. Подпись «В избранное» на десктопе
   прячется: в ряду из трёх элементов она забирала половину ширины у кнопки
   «В корзину», ради которой строка и существует. */
/* Раскладка карточки: строка «счётчик + кнопка + сердечко», под ней плашка
   доставки во всю ширину.

   Сделано flex-обёрткой с `order`, а не сеткой. Сетка здесь уже была и
   разъехалась: у формы стояла колонка без строки, у сердечка — строка 1,
   и автоматическое размещение вытолкнуло форму заказа ПОД все остальные
   блоки. Кнопка «В корзину» оказалась последней в карточке цены. С flex
   порядок задаётся числом, а не выводится из свободных ячеек. */
.woocommerce div.product .ct-product-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.woocommerce div.product .ct-product-add-to-cart > form.cart {
    order: 1;
    flex: 1 1 240px;
    margin: 0;
}
.woocommerce div.product .ct-product-add-to-cart > .pwr-fav-btn--single {
    order: 2;
    flex: 0 0 auto;
    width: 52px; height: 52px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-bg);
    color: var(--pwr-text-strong);
}
.woocommerce div.product .ct-product-add-to-cart > .pwr-fav-btn--single:hover {
    border-color: var(--pwr-accent);
    color: var(--pwr-accent);
}
/* Подпись «В избранное» прячется, а не удаляется: в ряду из трёх элементов
   она забирала половину ширины у кнопки, ради которой строка и существует,
   но читалке экрана кнопка без имени называется просто «кнопка». */
.woocommerce div.product .ct-product-add-to-cart > .pwr-fav-btn--single .pwr-fav-btn__txt {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.woocommerce div.product .ct-product-add-to-cart > .pwr-ship {
    order: 3;
    flex: 1 1 100%;
    margin: 0;
}

/* Плашка условий внутри карточки цены: доставка и гарантия возврата.
   Две строки вместо прежнего блока доверия на четыре — тот занимал 368 px
   правой колонки и уводил вкладки с описанием на 838 px ниже конца галереи
   (замечание владельца 31.08). Сведения те же, высота вчетверо меньше. */
.pwr-ship {
    margin: 14px 0 0;
    padding: 4px 14px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-bg);
}
.pwr-ship__row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--pwr-line-soft);
}
.pwr-ship__row:last-child { border-bottom: 0; }
.pwr-ship__ico { flex: 0 0 24px; color: var(--pwr-accent); }
.pwr-ship__ico svg { width: 24px; height: 24px; display: block; }
.pwr-ship__body { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pwr-ship__body b { color: var(--pwr-heading); font-weight: 600; }
.pwr-ship__body span { color: var(--pwr-text); }

/* Товар не в наличии: объяснение вместо потерянной кнопки */
.pwr-outofstock {
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--pwr-line);
    border-left: 3px solid var(--pwr-accent);
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-surface);
    color: var(--pwr-text);
    font-size: 14px; line-height: 1.5;
}

/* --- ВКЛАДКИ --- */

.woocommerce div.product .woocommerce-tabs {
    margin-top: 34px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius);
    background: var(--pwr-surface);
    padding: 6px 24px 24px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin: 0 0 22px; padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--pwr-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 16px 18px;
    border-bottom: 3px solid transparent;
    color: var(--pwr-text);
    font-size: 13px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--pwr-heading); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--pwr-heading);
    border-bottom-color: var(--pwr-accent);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
    outline: 2px solid var(--pwr-accent);
    outline-offset: -4px;
}

/* Панель: описание слева, характеристики справа */
.pwr-ptab { color: var(--pwr-text); line-height: 1.6; }
.pwr-ptab__h {
    margin: 0 0 14px;
    font-size: 14px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--pwr-heading);
}
.pwr-ptab__text { margin: 0 0 14px; }
.pwr-ptab--split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px; }
.pwr-ptab__side { min-width: 0; }
@media (max-width: 899.98px) {
    .pwr-ptab--split { grid-template-columns: 1fr; gap: 26px; }
    .woocommerce div.product .woocommerce-tabs { padding: 4px 16px 18px; }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 13px 12px; font-size: 12px; }
}

.pwr-specs { margin: 0; }
.pwr-specs__row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--pwr-line-soft);
    font-size: 14px;
}
.pwr-specs__row:last-child { border-bottom: 0; }
.pwr-specs__k { margin: 0; color: var(--pwr-text); }
.pwr-specs__v { margin: 0; color: var(--pwr-heading); font-weight: 600; }

/* Юрблок внутри вкладки «Состав» — уже не отдельная карточка на странице,
   рамка вокруг рамки читалась бы как вложенный блок. */
.woocommerce-Tabs-panel .pwr-legal {
    border: 0; padding: 16px 0 0; margin-top: 16px;
    border-top: 1px solid var(--pwr-line);
    background: none;
}

/* Вопросы во вкладке. Свой инлайновый CSS плагина снят 31.08 — он объявлял
   rgba(0,0,0,.12), то есть невидимую на тёмном линию. */
.pwr-faq { margin: 0; max-width: 62rem; }
.pwr-faq__item { border-bottom: 1px solid var(--pwr-line); padding: 14px 0; }
.pwr-faq__item:last-child { border-bottom: 0; }
.pwr-faq__q {
    cursor: pointer; font-weight: 600; color: var(--pwr-heading);
    list-style: none; padding-right: 28px; position: relative;
}
.pwr-faq__q::-webkit-details-marker { display: none; }
.pwr-faq__q::after {
    content: "+"; position: absolute; right: 0; top: 0;
    font-weight: 400; color: var(--pwr-accent); font-size: 20px; line-height: 1;
}
.pwr-faq__item[open] .pwr-faq__q::after { content: "\2212"; }
.pwr-faq__a { padding-top: 10px; color: var(--pwr-text); }
.pwr-faq__a p { margin: 0 0 8px; }

/* Метка источника отзыва: свой инлайновый CSS плагина объявлял
   rgba(0,0,0,.15) — на тёмном фоне рамка исчезала. */
.pwr-review-source {
    border-color: var(--pwr-line) !important;
    color: var(--pwr-muted);
    opacity: 1 !important;
}

/* --- ФОРМА ОТЗЫВА В ТЁМНОЙ ПАЛИТРЕ --- */
.woocommerce #review_form_wrapper { margin-top: 26px; }
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond textarea {
    width: 100%;
    background: var(--pwr-bg);
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    color: var(--pwr-heading);
    padding: 11px 14px;
    font-size: 14px;
}
.woocommerce #review_form #respond input:focus-visible,
.woocommerce #review_form #respond textarea:focus-visible {
    outline: none; border-color: var(--pwr-accent);
    box-shadow: 0 0 0 3px var(--pwr-accent-soft);
}
.woocommerce #review_form #respond label { color: var(--pwr-text-strong); font-size: 13px; }
.woocommerce #review_form #respond .required { color: var(--pwr-accent); }
/* Звёзды оценки: тема оставляет их цветом текста, и на тёмном непонятно,
   какая часть выбрана. */
.woocommerce #review_form #respond p.stars a { color: var(--pwr-muted); }
.woocommerce #review_form #respond p.stars a:hover,
.woocommerce #review_form #respond p.stars.selected a.active,
.woocommerce #review_form #respond p.stars.selected a:not(.active) { color: var(--pwr-accent); }
.woocommerce .star-rating, .woocommerce .comment-form-rating .stars a { color: var(--pwr-accent); }

/* Пустая вкладка отзывов: приглашение, а не сообщение об отсутствии.
   Вкладку решено оставлять всегда (см. pwr-product-trust.php). */
.woocommerce #reviews .woocommerce-noreviews {
    background: var(--pwr-surface-2);
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    color: var(--pwr-text);
    padding: 14px 16px;
}

/* --- «ВОЗЬМИ ВМЕСТЕ» --- */
/* ⚠️ Селектор БЕЗ `div.product`, и это не небрежность.
   Блок «Возьми вместе» — СОСЕД карточки товара, а не её потомок: в разметке
   он лежит прямо в `<article>`, рядом с `div.product`. Правила, написанные
   как `.woocommerce div.product .related`, не применялись вовсе — молча, без
   единой ошибки в консоли. Поймано проверкой `matches()` в браузере, когда
   заголовок упорно оставался не прописным. */
body.single-product .related > h2,
body.single-product .up-sells > h2 {
    font-size: 20px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    margin: 40px 0 18px;
}

/* 🔴 Блок скрыт темой на телефоне и планшете: Blocksy печатает у него
   `ct-hidden-sm ct-hidden-md`. То есть допродажа не работала ровно там, где
   у магазина основной трафик. Возвращаем показ — блок ради этого и делался. */
body.single-product .related.ct-hidden-sm,
body.single-product .related.ct-hidden-md { display: block !important; }
/* `!important` перебивает `display:none!important` темы в её медиазапросе —
   без него правило проигрывало, и блок оставался скрытым на телефоне. */

/* Две карточки в ряд на телефоне, как в каталоге: тема отдаёт одну, и
   четыре хита превращались в четыре экрана прокрутки — до второго из них
   не доходит никто. */
@media (max-width: 767.98px) {
    body.single-product .related ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }
    body.single-product .related > h2 { font-size: 17px; margin: 30px 0 14px; }
}

/* Блок «оплата на сайте скоро» переехал из правой колонки под вкладки
   (замечание владельца 31.08: в колонке он прерывал чтение сообщением
   «купить пока нельзя»). Ширину держит своя обёртка-контейнер; здесь только
   вертикальные отступы и ограничение строки по длине — на 1260 px абзац в
   одну строку читался бы как бегущая строка. */
.pwr-wtb-band { margin: 30px auto 0; }
/* Панель вкладок оборачивает контейнером `pwr-product-tabs.php` — иначе её
   рамка растягивалась на всю ширину экрана при 1260 px у соседних блоков. */
.pwr-tabs-band { margin: 0 auto; }
.pwr-tabs-band .woocommerce-tabs { margin-top: 34px; }
.pwr-wtb-band .pwr-where-to-buy { max-width: 720px; }

/* Заголовок формы отзыва. Тема печатает его цветом заголовка комментариев,
   и на тёмном он оказался почти неотличим от фона — единственная строка,
   которая объясняет, зачем форма, была нечитаемой. */
.woocommerce #review_form #respond .comment-reply-title,
.woocommerce #reviews #reply-title {
    color: var(--pwr-heading);
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}
.woocommerce #review_form #respond .comment-notes { color: var(--pwr-muted); font-size: 13px; }
/* Нативный чекбокс «сохранить имя» остаётся белым квадратом: просим браузер
   рисовать его в тёмной схеме. Токен color-scheme объявлен на :root, но
   Blocksy сбрасывает его на форме комментариев. */
.woocommerce #review_form #respond input[type="checkbox"] { accent-color: var(--pwr-accent); }
.woocommerce #review_form #respond .comment-form-cookies-consent label { color: var(--pwr-muted); font-size: 13px; }

/* Список отзывов на тёмном */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-surface-2);
    padding: 16px 18px;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p { color: var(--pwr-text); }
.woocommerce #reviews #comments ol.commentlist li .meta { color: var(--pwr-muted); font-size: 13px; }
.woocommerce #reviews #comments ol.commentlist li .meta strong { color: var(--pwr-heading); }
/* Ссылки постраничной навигации отзывов: у магния их 29 страниц, и на тёмном
   неактивные номера сливались с фоном. */
.woocommerce #reviews .woocommerce-pagination a,
.woocommerce #reviews .woocommerce-pagination span { color: var(--pwr-text-strong); }
.woocommerce #reviews .woocommerce-pagination .current { color: var(--pwr-accent); }

/* --- ГАЛЕРЕЯ НА ТЕЛЕФОНЕ --- */
/* Blocksy раскладывает превью сеткой в несколько рядов. У омеги кадров 14,
   и эта сетка занимала пять рядов — почти два экрана между снимком и
   названием товара: до цены и кнопки нужно было доскроллить.
   Делаем одну прокручиваемую строку.

   ⚠️ В мобильном макете под снимком нарисованы четыре точки. Точками
   четырнадцать кадров не показать: по ним не видно, что внутри, и промотать
   их пальцем нельзя. Строка превью решает ту же задачу — «кадров больше,
   вот они» — и остаётся управляемой. */
@media (max-width: 999.98px) {
    .woocommerce-product-gallery .flexy-pills > ol {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 12px 0 0; padding: 0 0 6px;
        list-style: none;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .woocommerce-product-gallery .flexy-pills > ol > li {
        flex: 0 0 64px;
        width: 64px;
        aspect-ratio: 1 / 1;
        margin: 0;
        scroll-snap-align: start;
        border: 1px solid var(--pwr-line);
        border-radius: var(--pwr-radius-sm);
        overflow: hidden;
        background: var(--pwr-media-bg);
    }
    .woocommerce-product-gallery .flexy-pills > ol > li.active,
    .woocommerce-product-gallery .flexy-pills > ol > li[aria-current="true"] {
        border-color: var(--pwr-accent);
    }
    .woocommerce-product-gallery .flexy-pills > ol > li img,
    .woocommerce-product-gallery .flexy-pills > ol > li .ct-media-container {
        width: 100%; height: 100%; display: block; object-fit: contain;
    }
    /* Карточка цены на телефоне: кнопка во всю ширину под счётчиком —
       в строке из трёх элементов на 390 px ей оставалось 120 px. */
    .woocommerce div.product .ct-product-add-to-cart > form.cart { flex: 1 1 100%; }
    .woocommerce div.product form.cart .ct-cart-actions { gap: 10px; }
    .woocommerce div.product p.price { font-size: 28px; padding: 16px 16px 0; }
    .woocommerce div.product .ct-product-add-to-cart { padding: 16px; }
}