/* Корзина и оформление заказа.
 *
 * Зона Фазы 6. Файл заведён пустым 31.08.2026 специально: над этой зоной
 * работает отдельная сессия, и собственный файл — то, что позволяет ей
 * выкладываться, не затирая чужие правки.
 *
 * ⚠️ ГЛАВНОЕ ПРО ЭТУ ЗОНУ. Корзина и чекаут собраны блоками WooCommerce
 * (React), а не шаблонами PHP. Классические хуки там не срабатывают вовсе —
 * это выяснилось 28.08 на блоке «где купить». Дочерняя тема на их DOM не
 * влияет: доступна только стилизация готовой разметки wc-block-components-*
 * и slot-fill из JS.
 *
 * ПРАВИЛО: цвета только через var(--pwr-*), см. assets/tokens.css.
 *
 * ---------------------------------------------------------------------------
 * ЧТО ЗДЕСЬ ПОЯВИЛОСЬ 31.08 (Фаза 6)
 *
 * 1. Тёмная палитра для готовой разметки блоков Woo.
 * 2. Скрытие тупиков, НЕ зависящее от JS (`body.pwr-payment-off`,
 *    `body.pwr-no-coupons`). Классы ставит mu-плагин pwr-shop-ui.php.
 *    Сделано именно на CSS + класс тела, а не в мастере: если мастер сломается
 *    на очередном обновлении WooCommerce, посетитель должен получить обычный
 *    чекаут БЕЗ шага оплаты, а не обычный чекаут С тупиком.
 * 3. Оформление трёхшагового мастера. Разметку мастера ставит
 *    assets/checkout-wizard.js, и ставит её СНАРУЖИ React-корня. Всё
 *    переключение шагов — это атрибут `data-pwr-step` на корне и правила ниже.
 *    Ни один узел, которым владеет React, не переносится: перенос ломается
 *    на первом же ререндере, а CSS переживает любой.
 *
 * `!important` в этом файле не используется: functions.php объявляет нашу
 * таблицу зависимой от `wc-blocks-style`, поэтому мы и так грузимся позже.
 * Если `!important` когда-нибудь понадобится — рядом обязан стоять
 * комментарий, ЧТО именно перебиваем.
 */

/* ===========================================================================
   1. Общее для корзины и чекаута
   ======================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    color: var(--pwr-text);
}

/* Заголовки внутри блоков Woo берут свой цвет из темы, а не наследуют. */
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-checkout-order-summary__title-text {
    color: var(--pwr-heading);
}

.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__description-button,
.wc-block-components-address-card__edit,
.wc-block-components-product-metadata {
    color: var(--pwr-muted);
}

/* Разделители блочной вёрстки Woo рисуются border-ами разных элементов —
 * перечисляем те, что реально встречаются на витрине (снято с DOM 31.08). */
.wc-block-cart-items__header,
.wc-block-cart-items__row,
.wc-block-components-totals-wrapper,
.wc-block-components-checkout-step,
.wc-block-checkout__terms--with-separator,
.wc-block-components-order-summary__button-text + *,
.wc-block-components-panel {
    border-color: var(--pwr-line);
}

.wc-block-cart-items__header {
    color: var(--pwr-muted);
}

/* Боковая колонка «Сумма корзины» — карточка на поверхности, а не на полотне:
 * на тёмном фоне без подложки итог визуально сливается со списком товаров. */
.wc-block-components-sidebar {
    background: var(--pwr-surface);
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius);
    padding: 18px 20px;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    color: var(--pwr-text-strong);
}

.wc-block-components-totals-footer-item,
.wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--pwr-heading);
}

.wc-block-components-totals-item__description,
.wc-block-components-totals-footer-item-tax {
    color: var(--pwr-muted);
}

/* Картинка товара в корзине и в сводке заказа. Подложка та же, что в каталоге:
 * пакшот прозрачный, и без контейнера он висит в пустоте. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
    background: var(--pwr-media-bg);
    border-radius: var(--pwr-radius-sm);
}

.wc-block-components-product-name {
    color: var(--pwr-heading);
    text-decoration: none;
}

.wc-block-components-product-name:hover {
    color: var(--pwr-accent);
}

.wc-block-components-product-price,
.wc-block-formatted-money-amount {
    color: var(--pwr-heading);
}

.wc-block-components-product-badge,
.wc-block-components-order-summary-item__quantity {
    background: var(--pwr-surface-3);
    border-color: var(--pwr-line);
    color: var(--pwr-text-strong);
}

/* ===========================================================================
   2. Кнопки
   ======================================================================== */

.wc-block-components-button:not(.is-link) {
    background: var(--pwr-accent);
    color: var(--pwr-on-accent);
    border-radius: var(--pwr-radius-pill);
    border: 1px solid transparent;
}

.wc-block-components-button:not(.is-link):hover {
    background: var(--pwr-accent-hover);
    color: var(--pwr-on-accent);
}

/* Отключённая кнопка на тёмном: без явного правила Woo даёт бледно-серый
 * текст на бледно-сером фоне — на светлой теме читалось, на тёмной нет. */
.wc-block-components-button:not(.is-link):disabled,
.wc-block-components-button:not(.is-link)[aria-disabled="true"] {
    background: var(--pwr-surface-3);
    color: var(--pwr-muted);
    border-color: var(--pwr-line);
}

.wc-block-components-button.is-link,
.wc-block-cart-item__remove-link,
.wc-block-components-totals-coupon-link {
    color: var(--pwr-accent);
}

/* ===========================================================================
   3. Поля ввода
   ======================================================================== */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__select,
.wc-block-components-combobox-control input,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"] {
    background: var(--pwr-surface-2);
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    color: var(--pwr-heading);
}

.wc-block-components-text-input label,
.wc-block-components-textarea + label,
.wc-block-components-select label,
.wc-block-components-combobox-control label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
    color: var(--pwr-muted);
}

.wc-block-components-text-input.is-active label,
.wc-block-components-combobox-control.is-active label {
    color: var(--pwr-text);
}

/* Видимый фокус — обязательное требование Фазы 7. Без него на тёмном фоне
 * клавиатурная навигация по чекауту становится слепой. */
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__select:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-button:focus-visible,
.pwr-step-btn:focus-visible,
.pwr-steps__item:focus-visible {
    outline: 2px solid var(--pwr-accent);
    outline-offset: 2px;
    border-color: var(--pwr-accent);
}

/* Автозаполнение Chrome закрашивает поле собственным светлым фоном и делает
 * поле нечитаемым на тёмном. Единственный работающий приём — увести фон
 * в тень: цвет фона у -webkit-autofill не переопределяется. */
.wc-block-components-form input:-webkit-autofill,
.wc-block-components-form input:-webkit-autofill:hover,
.wc-block-components-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pwr-heading);
    -webkit-box-shadow: 0 0 0 1000px var(--pwr-surface-2) inset;
    caret-color: var(--pwr-heading);
    transition: background-color 100000s ease-in-out 0s;
}

/* Список из 83 регионов рисует операционная система. color-scheme: dark
 * стоит в tokens.css на :root — здесь только явная страховка для самого
 * элемента: у Blocksy встречается color-scheme: light на предках форм. */
.wc-block-components-select__select,
.wc-block-components-form select {
    color-scheme: dark;
}

.wc-block-components-validation-error {
    color: #ff8a6b;   /* не токен: аварийный цвет читается только собственным
                         значением, к палитре бренда он не относится */
}

/* Сообщения WooCommerce на тёмном. */
.wc-block-components-notice-banner {
    background: var(--pwr-surface-2);
    color: var(--pwr-text-strong);
    border-color: var(--pwr-line);
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
    color: var(--pwr-text-strong);
}

/* ===========================================================================
   4. Тупики, которые прячутся БЕЗ участия JS
   ======================================================================== */

/* Способов оплаты на витрине сегодня ноль (проверено 31.08: доступных
 * шлюзов 0). Блочный чекаут в этом случае печатает «Нет доступных способов
 * оплаты», а кнопка «Оформить заказ» ведёт в ошибку. Показывать это после
 * того, как блок pwr-where-to-buy уже честно предупредил, — значит
 * предупредить дважды и второй раз грубо.
 *
 * Класс body ставит pwr-shop-ui.php по факту наличия шлюзов: в день, когда
 * появится первый способ оплаты, класс исчезнет сам и все три блока вернутся
 * без единой правки файлов. */
body.pwr-payment-off #payment-method,
body.pwr-payment-off .wp-block-woocommerce-checkout-payment-block,
body.pwr-payment-off .wp-block-woocommerce-checkout-express-payment-block,
body.pwr-payment-off .wp-block-woocommerce-cart-express-payment-block,
body.pwr-payment-off .wc-block-cart__payment-options,
body.pwr-payment-off .wp-block-woocommerce-cart-accepted-payment-methods-block,
body.pwr-payment-off .wc-block-checkout__terms,
body.pwr-payment-off .wc-block-checkout__actions,
/* Примечание к заказу: заказа сегодня не будет, значит и примечанию
 * ехать некуда. Просить его — просить работу впустую. */
body.pwr-payment-off .wp-block-woocommerce-checkout-order-note-block {
    display: none;
}

/* Купонов в базе ноль (проверено 31.08). Поле «Добавить купоны» в этом
 * состоянии умеет только одно — сказать «неверный купон» на любой ввод.
 * Класс снимается сам, как только появится первый опубликованный купон. */
body.pwr-no-coupons .wp-block-woocommerce-cart-order-summary-coupon-form-block,
body.pwr-no-coupons .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
    display: none;
}

/* ===========================================================================
   5. Трёхшаговый мастер
   ======================================================================== */

/* Полоса шагов и кнопки навигации живут СНАРУЖИ React-корня — это соседние
 * узлы в .entry-content. Именно поэтому их не сносит ререндером. */
.pwr-steps {
    display: flex;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    counter-reset: pwrstep;
}

.pwr-steps__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-surface);
    color: var(--pwr-muted);
    font-size: 15px;
    text-align: left;
    cursor: default;
}

/* Пройденный шаг кликабелен — вернуться и поправить телефон должно быть
 * дешевле, чем пройти мастер заново. Непройденный не кликается вовсе. */
.pwr-steps__item[data-state="done"] {
    cursor: pointer;
    color: var(--pwr-text-strong);
    border-color: var(--pwr-line);
}

.pwr-steps__item[data-state="current"] {
    color: var(--pwr-heading);
    border-color: var(--pwr-accent);
    background: var(--pwr-accent-wash);
}

.pwr-steps__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pwr-surface-3);
    color: var(--pwr-text-strong);
    font-size: 14px;
    font-weight: 700;
}

.pwr-steps__item[data-state="current"] .pwr-steps__num {
    background: var(--pwr-accent);
    color: var(--pwr-on-accent);
}

.pwr-steps__item[data-state="done"] .pwr-steps__num {
    background: var(--pwr-accent-soft);
    color: var(--pwr-heading);
}

.pwr-steps__nav {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: 18px 0 0;
}

.pwr-step-btn {
    padding: 13px 26px;
    border-radius: var(--pwr-radius-pill);
    border: 1px solid var(--pwr-line);
    background: var(--pwr-surface);
    color: var(--pwr-text-strong);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.pwr-step-btn--next {
    background: var(--pwr-accent);
    border-color: transparent;
    color: var(--pwr-on-accent);
    margin-left: auto;
}

.pwr-step-btn--next:hover {
    background: var(--pwr-accent-hover);
}

.pwr-step-btn[hidden] {
    display: none;
}

/* ПОЧЕМУ ШАГИ ПЕРЕКЛЮЧАЮТСЯ СЕЛЕКТОРАМИ, А НЕ АТРИБУТОМ НА СЕКЦИЯХ
 *
 * Напрашивалось разметить секции формы своим атрибутом `data-pwr-panel`.
 * Так делать нельзя: секции внутри формы принадлежат React, и он вправе
 * пересоздать их в любой момент — например, `#shipping-fields` исчезает и
 * появляется заново при переключении «доставка / самовывоз». Вместе с узлом
 * пропал бы и наш атрибут, а с ним и всё скрытие: посетитель увидел бы разом
 * все три шага. Поэтому атрибут ставится ровно один — `data-pwr-step` на
 * контейнере, В который React рендерит и который сам он не заменяет.
 * Ниже — карта секций по шагам; она повторена в checkout-wizard.js, где
 * нужна для проверки полей, и обе копии обязаны меняться вместе.
 *
 * Пока JS не выставил `data-pwr-step`, не скрыто ничего, и страница остаётся
 * обычным блочным чекаутом. Это и есть запасной вариант на день, когда мастер
 * отвалится на очередном обновлении WooCommerce. */

/* Шаг 1 — контакты. */
[data-pwr-step="1"] .wp-block-woocommerce-checkout-shipping-method-block,
[data-pwr-step="1"] .wp-block-woocommerce-checkout-pickup-options-block,
[data-pwr-step="1"] .wp-block-woocommerce-checkout-shipping-address-block,
[data-pwr-step="1"] .wp-block-woocommerce-checkout-billing-address-block,
[data-pwr-step="1"] .wp-block-woocommerce-checkout-shipping-methods-block,
[data-pwr-step="1"] .wp-block-woocommerce-checkout-payment-block,
[data-pwr-step="1"] .wp-block-woocommerce-checkout-order-note-block,
[data-pwr-step="1"] .wc-block-checkout__terms,
[data-pwr-step="1"] .wc-block-checkout__actions,

/* Шаг 2 — доставка. */
[data-pwr-step="2"] .wp-block-woocommerce-checkout-contact-information-block,
[data-pwr-step="2"] .wp-block-woocommerce-checkout-payment-block,
[data-pwr-step="2"] .wp-block-woocommerce-checkout-order-note-block,
[data-pwr-step="2"] .wc-block-checkout__terms,
[data-pwr-step="2"] .wc-block-checkout__actions,

/* Шаг 3 — оплата (или «где заказать», пока оплаты нет). */
[data-pwr-step="3"] .wp-block-woocommerce-checkout-contact-information-block,
[data-pwr-step="3"] .wp-block-woocommerce-checkout-shipping-method-block,
[data-pwr-step="3"] .wp-block-woocommerce-checkout-pickup-options-block,
[data-pwr-step="3"] .wp-block-woocommerce-checkout-shipping-address-block,
[data-pwr-step="3"] .wp-block-woocommerce-checkout-billing-address-block,
[data-pwr-step="3"] .wp-block-woocommerce-checkout-shipping-methods-block {
    display: none;
}

/* Блок «где купить» на шаге 3: узел наш, не React-овский, поэтому его
 * действительно можно переставить — мастер переносит его под корень
 * чекаута и показывает только на последнем шаге. */
.pwr-where-to-buy[data-pwr-panel] {
    display: none;
}

[data-pwr-step="3"] ~ .pwr-where-to-buy[data-pwr-panel="3"] {
    display: block;
}

/* Пока покупатель на первых шагах, предупреждение об оплате остаётся на
 * виду одной строкой — иначе он узнаёт о том, что оплатить нельзя, только
 * заполнив адрес. */
.pwr-pay-strip {
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px solid var(--pwr-line);
    border-left: 3px solid var(--pwr-accent);
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-surface-2);
    color: var(--pwr-text-strong);
    font-size: 14px;
    line-height: 1.5;
}

/* ===========================================================================
   6. Мобильный
   ======================================================================== */

@media (max-width: 999px) {
    .pwr-steps {
        gap: 6px;
    }

    .pwr-steps__item {
        flex-direction: column;
        gap: 6px;
        padding: 10px 6px;
        font-size: 12px;
        text-align: center;
        align-items: center;
    }

    .wc-block-components-sidebar {
        padding: 16px;
    }

    .pwr-step-btn {
        flex: 1 1 auto;
        padding: 14px 18px;
    }
}

/* ===========================================================================
   7. Перебиваем сплошную заливку кнопок из brand.css
   ======================================================================== */

/* ЧТО ИМЕННО ПЕРЕБИВАЕМ И ПОЧЕМУ ЗДЕСЬ `!important`.
 *
 * В brand.css (чужая зона, общая для витрины) стоит правило на голый
 * селектор `button`:
 *
 *     .wp-block-search__button, .button, button, input[type="submit"],
 *     .wc-block-components-button, .single_add_to_cart_button {
 *         background-color: var(--pwr-accent) !important;
 *         border-color:     var(--pwr-accent) !important;
 *         color:            var(--pwr-on-accent) !important;
 *         border-radius:    8px !important;
 *         font-weight:      600 !important;
 *     }
 *
 * То есть ЛЮБАЯ кнопка на витрине — сплошная оранжевая плашка со скруглением
 * 8px, и перебить это специфичностью нельзя: `!important` выигрывает у любого
 * селектора без него. Поймано глазами 31.08: все три шага мастера горели
 * оранжевым одновременно, и полоса переставала показывать, где посетитель
 * находится, — то есть переставала быть полосой шагов вовсе.
 *
 * Нейтральные и вторичные кнопки нужны не только здесь: «Назад», сердечко
 * избранного, «Убрать из списка». Правильное лечение — сузить селектор в
 * brand.css до тех кнопок, которые действительно должны быть акцентными.
 * Это чужая зона: правку туда вносит сессия, которая им владеет. До тех пор
 * перебиваем точечно и только свои элементы. */

.pwr-steps__item {
    background-color: var(--pwr-surface) !important;
    border-color: var(--pwr-line) !important;
    color: var(--pwr-muted) !important;
    border-radius: var(--pwr-radius-sm) !important;
}

.pwr-steps__item[data-state="done"] {
    color: var(--pwr-text-strong) !important;
}

.pwr-steps__item[data-state="current"] {
    background-color: var(--pwr-accent-wash) !important;
    border-color: var(--pwr-accent) !important;
    color: var(--pwr-heading) !important;
}

.pwr-step-btn {
    border-radius: var(--pwr-radius-pill) !important;
}

.pwr-step-btn--back {
    background-color: var(--pwr-surface) !important;
    border-color: var(--pwr-line) !important;
    color: var(--pwr-text-strong) !important;
}

.pwr-step-btn--next {
    background-color: var(--pwr-accent) !important;
    border-color: var(--pwr-accent) !important;
    color: var(--pwr-on-accent) !important;
}

.pwr-step-btn--next:hover {
    background-color: var(--pwr-accent-hover) !important;
}

/* ===========================================================================
   8. Липкая кнопка корзины и нижняя панель делят одно место
   ======================================================================== */

/* Замер 31.08 на ширине 375: WooCommerce прилепляет «Перейти к оформлению
 * заказа» ко дну экрана — position: fixed, bottom: 0, z-index: 9999. Таб-панель
 * стоит там же и ниже по слою (9990), то есть кнопка её просто накрывает:
 * с корзины пропадали все четыре пункта навигации разом.
 *
 * Прячем не панель, а поднимаем кнопку: покупатель на корзине как раз тот,
 * кому навигация нужнее всего — «вернуться в каталог» отсюда самый частый
 * следующий шаг. */
@media (max-width: 999px) {

    body.pwr-has-tabbar .wc-block-cart__submit-container--sticky {
        bottom: calc(var(--pwr-tabbar-h) + env(safe-area-inset-bottom, 0px));
    }

    /* Липкая кнопка не входит в поток и накрывает последнюю строку списка.
     * Своей высоты она не сообщает, поэтому запас задан числом: 84px —
     * замеренная высота кнопки с отступами (77) плюс небольшой зазор. */
    body.pwr-has-tabbar.woocommerce-cart {
        padding-bottom: calc(var(--pwr-tabbar-h) + env(safe-area-inset-bottom, 0px) + 84px);
    }

    /* При фокусе в поле панель уходит — кнопка должна опуститься за ней,
     * иначе на её месте останется пустая полоса. */
    body.pwr-kbd .wc-block-cart__submit-container--sticky {
        bottom: 0;
    }
}

/* ===========================================================================
   9. Блок «где купить» на корзине и оформлении
   ======================================================================== */

/* Свои цвета блок печатает инлайном из pwr-where-to-buy.php и заголовок не
 * красит вовсе — на тёмном он наследовал --pwr-text и читался как
 * второстепенная подпись, хотя это главная строка блока.
 *
 * Правила нарочно сужены до `.pwr-wtb-cart` — варианта для корзины и
 * оформления. Тот же блок стоит на карточке товара, а карточку параллельно
 * переверстывает другая сессия: там ту же правку вносит она. */
.pwr-wtb-cart .pwr-wtb-title {
    color: var(--pwr-heading);
    font-size: 18px;
}

.pwr-wtb-cart .pwr-wtb-text {
    color: var(--pwr-text);
    opacity: 1;   /* инлайн-стиль плагина глушит текст до .85 — на тёмном
                     это уже не «мягче», а «нечитаемо» */
}

.pwr-wtb-cart {
    background: var(--pwr-accent-wash);
    border-color: var(--pwr-accent-soft);
    border-radius: var(--pwr-radius);
}

/* Атрибута `hidden` тут недостаточно. Плагин задаёт ссылке
 * `display: inline-block`, а явный display перебивает `display: none`,
 * который браузер даёт элементам с `hidden`. Поймано 31.08: ссылка
 * помечалась скрытой в DOM и продолжала висеть на экране. */
.pwr-wtb-link[hidden],
.pwr-wtb-text[hidden] {
    display: none;
}

/* ===========================================================================
   10. Пустая корзина
   ======================================================================== */

/* Значок пустой корзины WooCommerce рисует не картинкой, а маской 80×80,
 * залитой `currentColor`. На светлой теме это был бледно-серый контур; на
 * тёмной цвет текста стал почти белым, и вместо значка получилось белое
 * пятно, которое бьёт по глазам сильнее самого сообщения. Красим заливку
 * отдельно от текста: сообщение остаётся ярким, значок уходит на второй план. */
/* `!important` здесь по причине, которую стоит знать целиком.
 *
 * Селектор у WooCommerce ровно тот же, значит спор решает не специфичность,
 * а порядок. Замер 31.08: после нашей таблицы грузятся ещё четыре чужие —
 * blocks/all-products.css, blocks/cart.css, blocks/packages-style.css и
 * bundle/cart-header-element-lazy.min.css. functions.php объявляет
 * зависимость от `wc-blocks-style` и `wc-all-blocks-style`, но эти
 * поблочные таблицы в список не входят и встают последними.
 *
 * Правильное лечение — дописать их дескрипторы в зависимости в
 * functions.php. Это общий файл темы, его правит владеющая им сессия;
 * до тех пор перебиваем точечно. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    background-color: var(--pwr-muted) !important;
}

/* Пунктирный разделитель под сообщением рисуется точками того же
 * currentColor и на тёмном превращался в яркую строчку. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
    color: var(--pwr-line);
}

/* ===========================================================================
   11. Поля чекаута: чиним переменные Blocksy, а не спорим с !important
   ======================================================================== */

/* ЧТО БЫЛО. Текст в полях и подписи над ними получали цвет #3a4f66 —
 * тёмно-синий на тёмном фоне, читать нельзя. Рамка полей — #e1e8ed
 * (светло-серая), фокус — синий #2872fa из чужой палитры.
 *
 * ПОЧЕМУ МОИ ПРАВИЛА ПРОИГРЫВАЛИ. WooCommerce красит подпись так:
 *
 *     .wc-block-components-text-input label {
 *         color: var(--theme-form-text-initial-color,
 *                    var(--theme-text-color)) !important;
 *     }
 *
 * То есть спор шёл не о цвете, а о переменной, и выиграть его цветом
 * нельзя вовсе: у них `!important`. Значение при этом берётся из
 * переменной Blocksy, которая на витрине не задана и падает в
 * `--theme-text-color` светлой темы.
 *
 * РЕШЕНИЕ. Не перебивать их правило, а подставить в него свои значения:
 * переопределяем сами переменные на корне корзины и чекаута — и их же
 * `!important` начинает работать на нас. Никакой войны специфичностей,
 * и при обновлении WooCommerce правило продолжит работать, пока имена
 * переменных живы.
 *
 * ⚠️ Область сужена до корзины и оформления намеренно. Те же переменные
 * светлые на всей витрине: поиск в шапке, форма отзыва, комментарии.
 * Их правит сессия, владеющая brand.css, — общее место, не моё. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    --theme-form-text-initial-color: var(--pwr-heading);
    --theme-form-text-focus-color: var(--pwr-heading);

    --theme-form-field-background-initial-color: var(--pwr-surface-2);
    --theme-form-field-background-focus-color: var(--pwr-surface-2);
    --theme-form-field-border-initial-color: var(--pwr-line);
    --theme-form-field-border-focus-color: var(--pwr-accent);

    /* Рамки чекбоксов и радиокнопок: согласие с офертой и выбор способа
     * доставки. Синий фокус из чужой палитры здесь особенно заметен. */
    --theme-form-selection-field-initial-color: var(--pwr-line);
    --theme-form-selection-field-active-color: var(--pwr-accent);

    --theme-form-select-background-initial-color: var(--pwr-surface-2);
    --theme-form-select-background-active-color: var(--pwr-surface-3);
}

/* ===========================================================================
   12. Корзина по референсу владельца (01.09)
   ===========================================================================
 *
 * Претензия владельца к первой версии была конкретной: «очень маленькие
 * банки, очень непонятная корзина, сложно воспринимается информация».
 * Замер подтвердил: картинка выводилась 64×64 при исходнике 420 px, а
 * название, цена, описание и счётчик стояли одной кучей в правой ячейке.
 *
 * КАК СДЕЛАНО. Строка корзины — это `<tr>` c тремя `<td>`, и внутри второй
 * ячейки свалено всё. Референс требует четыре колонки:
 * Товар | Цена | Количество | Сумма.
 *
 * Переставлять узлы нельзя — они принадлежат React. Поэтому строка
 * превращается в CSS-сетку, а ячейки и обёртки внутри объявляются
 * `display: contents`: они перестают создавать собственный бокс, и их
 * содержимое становится элементами той же сетки. DOM не меняется ни на один
 * узел, и любой ререндер React переживается без последствий.
 *
 * ⚠️ ПОЧЕМУ У ПРАВИЛ ТАКОЙ ДЛИННЫЙ ПРЕФИКС. WooCommerce пишет строковые
 * правила селектором
 *
 *     table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap
 *
 * — это тег и три класса. Порядок загрузки тут ни при чём: короткий селектор
 * проигрывает по специфичности при любом порядке. Наш префикс даёт ЧЕТЫРЕ
 * класса, а четыре класса сильнее трёх с тегом — и выигрывает без единого
 * `!important`.
 *
 * История ошибки, чтобы её не повторить: во второй попытке я заменил
 * `.wc-block-cart-items` на `.wc-block-cart-items__row` вместо того, чтобы
 * ДОБАВИТЬ уровень. Классов осталось три, правило снова проиграло, и на
 * экране ничего не изменилось. Считать специфичность надо по числу
 * селекторов в цепочке, а не по её длине на глаз.
 */

/* Порог 1200, а не 1000. Замер 01.09 на ширине окна 1000: колонка формы
 * получает около 620 px, фиксированные колонки съедают 530 плюс зазоры, и
 * на название остаётся так мало, что оно рассыпается по одной букве в
 * строку. Ниже порога работает штатная раскладка WooCommerce — она
 * рассчитана на узкие экраны и там уместнее. */
@media (min-width: 1200px) {

    /* Таблица перестаёт быть таблицей: без этого `display: grid` на строке
     * не сработает — внутренняя модель таблицы перебивает раскладку. */
    .wp-block-woocommerce-cart .wc-block-cart-items,
    .wp-block-woocommerce-cart .wc-block-cart-items thead,
    .wp-block-woocommerce-cart .wc-block-cart-items tbody {
        display: block;
        width: 100%;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items__header,
    .wp-block-woocommerce-cart .wc-block-cart-items__row {
        display: grid;
        /* банка | название и описание | цена | количество | сумма | × */
        grid-template-columns: 150px minmax(0, 1fr) 92px 124px 104px 28px;
        gap: 4px 16px;
        align-items: center;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items__row {
        padding: 22px 0;
        border-bottom: 1px solid var(--pwr-line);
    }

    /* --- шапка таблицы --- */

    .wp-block-woocommerce-cart .wc-block-cart-items__header {
        padding: 0 0 12px;
        border-bottom: 1px solid var(--pwr-line);
        font-size: 12px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--pwr-muted);
    }

    .wp-block-woocommerce-cart .wc-block-cart-items__header-image {
        grid-column: 1 / span 2;
    }

    /* Заголовков колонок у WooCommerce всего два — «Товар» и «Итого».
     * Недостающие два берём псевдоэлементами: разметку шапки рисует React,
     * и дописать в неё ячейки нельзя. Колонки заданы явными номерами,
     * чтобы порядок не зависел от того, что ещё лежит внутри. */
    .wp-block-woocommerce-cart .wc-block-cart-items__header-product {
        grid-column: 3 / span 2;
        display: grid;
        grid-template-columns: 92px 124px;
        gap: 0 16px;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items__header-product::before {
        grid-column: 1;
        content: 'Цена';
    }

    .wp-block-woocommerce-cart .wc-block-cart-items__header-product::after {
        grid-column: 2;
        content: 'Количество';
    }

    .wp-block-woocommerce-cart .wc-block-cart-items__header-total {
        grid-column: 5 / span 2;
        text-align: left;
    }

    /* --- ячейки строки раскрываются в сетку --- */

    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap,
    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity,
    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
        display: contents;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
        grid-column: 1;
        grid-row: 1 / span 2;
        padding: 0;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin: 0;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
        grid-column: 3;
        grid-row: 1 / span 2;
        margin: 0;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector {
        grid-column: 4;
        grid-row: 1 / span 2;
        margin: 0;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper {
        grid-column: 5;
        grid-row: 1 / span 2;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
        grid-column: 6;
        grid-row: 1 / span 2;
        justify-self: end;
        position: static;
    }
}

/* --- банка --- */

/* Рамка ПОРТРЕТНАЯ, а не квадратная, и это принципиально. Банка — вытянутый
 * предмет: в квадрате её высота упирается в сторону квадрата, а по бокам
 * остаётся пустота. В рамке 132×176 та же банка выше почти на треть.
 *
 * Положение и размер самой картинки внутри рамки задаёт assets/shop-ui.js:
 * он измеряет реальную границу непрозрачных пикселей пакшота и растягивает
 * банку по ней. Здесь только рамка — размеры, фон, скругление и обрезка. */
.wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
    align-self: start;
}

.wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image a {
    position: relative;
    display: block;
    width: 132px;
    height: 176px;
    overflow: hidden;
    border-radius: var(--pwr-radius);
    background: var(--pwr-media-bg);
}

.wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
    display: block;
    max-width: none;
}

/* --- текст строки --- */

.wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pwr-heading);
}

/* Категория и польза под названием — как в референсе.
 *
 * Рисуются псевдоэлементами по атрибутам, которые ставит assets/shop-ui.js.
 * Почему не своими узлами: строку рисует React, вставленный узел он вправе
 * снести на первом же ререндере. Псевдоэлемент снести нельзя — его нет в
 * DOM; стереть можно только атрибут, и его возвращает наблюдатель.
 *
 * Собственный текст WooCommerce внутри прячем: он обрезан до семнадцати
 * символов посреди слова («2800 мг цитрата м…») — это его вёрстка, не наши
 * данные. Store API отдаёт описание целиком, из него и берётся польза. */
.wp-block-woocommerce-cart .wc-block-components-product-metadata {
    display: block;
    margin: 0;
}

.wp-block-woocommerce-cart .wc-block-components-product-metadata > * {
    display: none;
}

/* Чип рисуется, только если категория известна: пустой атрибут дал бы
 * пустую оранжевую плашку. */
.wp-block-woocommerce-cart .wc-block-components-product-metadata[data-pwr-cat]::before {
    content: attr(data-pwr-cat);
    display: inline-block;
    margin: 0 0 7px;
    padding: 3px 9px;
    border-radius: 5px;
    background: var(--pwr-accent-wash);
    color: var(--pwr-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
}

.wp-block-woocommerce-cart .wc-block-components-product-metadata[data-pwr-benefit]::after {
    content: attr(data-pwr-benefit);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
    color: var(--pwr-muted);
}

.wp-block-woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--pwr-text-strong);
}

.wp-block-woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price__value {
    font-size: 19px;
    font-weight: 700;
    color: var(--pwr-heading);
}

/* --- счётчик количества --- */

.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
    display: inline-flex;
    align-items: center;
    width: 124px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius-pill);
    background: var(--pwr-surface);
    overflow: hidden;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
    order: 2;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--pwr-heading);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
    order: 1;
    flex: 0 0 auto;
    width: 38px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--pwr-text-strong);
    font-size: 18px;
    line-height: 1;
    opacity: 1;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button--plus {
    order: 3;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:hover {
    background: var(--pwr-surface-3);
    color: var(--pwr-heading);
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
    color: var(--pwr-muted);
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
    color: var(--pwr-accent);
}

/* ===========================================================================
   13. Правая колонка «Ваш заказ» и наш блок под ней
   ======================================================================== */

/* Заголовок сводки WooCommerce печатает по-своему («Сумма корзины»), и
 * строка эта приходит из JS-словаря блоков, а не из PHP — обычным
 * переводом её не заменить. Подменяем показ: текст гасим размером,
 * нужный ставим псевдоэлементом. Разметка и порядок чтения экраном
 * при этом не меняются. */
.wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title {
    font-size: 0;
    margin-bottom: 4px;
}

.wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title::before {
    content: 'Ваш заказ';
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pwr-heading);
}

.wc-block-components-totals-item {
    padding: 9px 0;
    font-size: 15px;
}

/* Итог — самое крупное число на странице: это то, ради чего покупатель
 * сюда смотрит. */
.wc-block-components-totals-footer-item {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--pwr-line);
}

.wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pwr-heading);
}

.wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 26px;
    font-weight: 800;
    color: var(--pwr-accent);
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    width: 100%;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- наш блок под кнопкой: согласие и преимущества --- */

/* Узлы наши, но живут они внутри контейнера, которым владеет React.
 * Как это удерживается — смотри mountAside() в assets/shop-ui.js. */
.pwr-aside {
    margin-top: 16px;
}

.pwr-aside__consent {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pwr-muted);
}

.pwr-aside__consent a {
    color: var(--pwr-muted);
    text-decoration: underline;
}

.pwr-aside__consent a:hover {
    color: var(--pwr-accent);
}

/* Блок доверия переезжает в правую колонку — по референсу он стоит под
 * кнопкой, а не полосой во всю ширину под корзиной. */
.pwr-trust--aside {
    display: block;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pwr-line);
}

.pwr-trust--aside .pwr-trust__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pwr-line-soft);
}

.pwr-trust--aside .pwr-trust__row:last-child {
    border-bottom: none;
}

.pwr-trust--aside .pwr-trust__ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--pwr-accent);
}

.pwr-trust--aside .pwr-trust__txt {
    font-size: 13px;
    line-height: 1.45;
    color: var(--pwr-muted);
}

.pwr-trust--aside .pwr-trust__txt b {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pwr-heading);
}

/* ===========================================================================
   14. «Добавьте к вашему комплексу»
   ======================================================================== */

.pwr-addons[hidden] {
    display: none;
}

.pwr-addons {
    margin: 34px 0 0;
}

.pwr-addons__back {
    display: inline-block;
    margin: 0 0 30px;
    color: var(--pwr-muted);
    font-size: 15px;
    text-decoration: none;
}

.pwr-addons__back::before {
    content: '\2190';   /* стрелка влево: «продолжить покупки» — это шаг назад */
    margin-right: 8px;
}

.pwr-addons__back:hover {
    color: var(--pwr-accent);
}

.pwr-addons__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 18px;
}

.pwr-addons__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pwr-heading);
}

.pwr-addons__all {
    flex: 0 0 auto;
    color: var(--pwr-accent);
    font-size: 14px;
    text-decoration: none;
}

.pwr-addons__all::after {
    content: '\2192';
    margin-left: 6px;
}

.pwr-addons__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pwr-addon[hidden] {
    display: none;
}

.pwr-addon {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius);
    background: var(--pwr-surface);
}

.pwr-addon__media {
    flex: 0 0 auto;
    display: block;
    width: 92px;
}

.pwr-addon__media img {
    display: block;
    width: 92px;
    height: 92px;
    object-fit: contain;
    padding: 6px;
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-media-bg);
}

.pwr-addon__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pwr-addon__name {
    color: var(--pwr-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.pwr-addon__name:hover {
    color: var(--pwr-accent);
}

.pwr-addon__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pwr-addon__price,
.pwr-addon__price .amount {
    color: var(--pwr-heading);
    font-size: 18px;
    font-weight: 800;
}

.pwr-addon__add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--pwr-radius-sm);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.pwr-addon__add:disabled {
    opacity: .5;
    cursor: default;
}

@media (max-width: 999px) {

    .pwr-addons__grid {
        grid-template-columns: 1fr;
    }

    .pwr-addons__title {
        font-size: 17px;
    }
}

/* ===========================================================================
   15. Кнопки внутри корзины: снова перебиваем brand.css
   ======================================================================== */

/* Тот же голый селектор `button` с `!important` из brand.css (полное
 * объяснение — раздел 7). Здесь под него попали счётчик количества и
 * удаление строки: «−», «+» и корзинка стали оранжевыми плашками и
 * перетянули на себя внимание с товара и цены, ради которых страница и
 * существует. Ни то ни другое акцентными быть не должно — акцент на
 * странице один, кнопка «Перейти к оформлению». */
.wc-block-components-quantity-selector__button {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--pwr-text-strong) !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
}

.wc-block-components-quantity-selector__button:hover {
    background-color: var(--pwr-surface-3) !important;
    color: var(--pwr-heading) !important;
}

.wc-block-cart-item__remove-link {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--pwr-muted) !important;
    border-radius: 0 !important;
}

.wc-block-cart-item__remove-link:hover {
    color: var(--pwr-accent) !important;
}

/* ===========================================================================
   16. Блок «где купить» на корзине — компактно
   ======================================================================== */

/* На корзине с тремя товарами блок давал три оранжевые кнопки во всю ширину
 * и занимал первый экран целиком: страница начиналась не с корзины, а с
 * предложения уйти на маркетплейс. Предупреждение обязано остаться — уходить
 * покупателю сегодня действительно некуда, — но весом оно должно уступать
 * самой корзине. */
.pwr-wtb-cart .pwr-wtb-link {
    padding: 9px 16px;
    border-radius: var(--pwr-radius-pill) !important;   /* brand.css, см. раздел 7 */
    background-color: transparent !important;
    border: 1px solid var(--pwr-accent) !important;
    color: var(--pwr-accent) !important;
    font-size: 13px;
    font-weight: 600 !important;
}

.pwr-wtb-cart .pwr-wtb-link:hover {
    background-color: var(--pwr-accent) !important;
    color: var(--pwr-on-accent) !important;
}

.pwr-wtb-cart {
    padding: 14px 18px;
}

.pwr-wtb-cart .pwr-wtb-title {
    font-size: 16px;
}

.pwr-wtb-cart .pwr-wtb-text {
    font-size: 13px;
}

/* ===========================================================================
   17. Оформление заказа по референсу владельца (01.09)
   ======================================================================== */

/* Полоса шагов. В референсе это не кнопки, а прогресс: кружок с номером,
 * подпись и тонкая линия между ними. Кликабельность мы оставляем — у нас
 * это управление мастером, а не индикатор, — но вес убираем: рамка вокруг
 * каждого шага спорила с карточками формы под ней. */
.pwr-steps {
    align-items: center;
    margin-bottom: 26px;
}

.pwr-steps__item {
    position: relative;
    flex: 0 1 auto;
    padding: 8px 20px 8px 0;
    background-color: transparent !important;   /* brand.css, см. раздел 7 */
    border-color: transparent !important;
}

/* Линия между шагами. Рисуется у самого шага, а не отдельным узлом:
 * узлов в полосе ровно столько, сколько шагов, и добавлять служебные
 * значило бы усложнять разметку ради черты. */
.pwr-steps__item:not(:last-child)::after {
    content: '';
    flex: 1 1 40px;
    min-width: 24px;
    height: 1px;
    margin-left: 4px;
    background: var(--pwr-line);
}

.pwr-steps__item[data-state="current"] {
    background-color: transparent !important;
    border-color: transparent !important;
}

.pwr-steps__item[data-state="current"] .pwr-steps__label {
    color: var(--pwr-heading);
    font-weight: 700;
}

.pwr-steps__label {
    white-space: nowrap;
}

/* «Защищённое соединение» — узел наш, ставит его checkout-wizard.js.
 * Соединение действительно по HTTPS, это проверяемое утверждение;
 * ничего про хранение карт мы не обещаем, потому что карт не принимаем. */
.pwr-steps__secure {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pwr-muted);
    font-size: 13px;
    white-space: nowrap;
}

.pwr-steps__secure svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
}

/* --- секции формы становятся карточками --- */

.wp-block-woocommerce-checkout .wc-block-checkout__form > .wc-block-components-checkout-step {
    margin: 0 0 18px;
    padding: 24px 26px;
    border: 1px solid var(--pwr-line);
    border-radius: var(--pwr-radius);
    background: var(--pwr-surface);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
    margin: 0 0 18px;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pwr-heading);
}

/* Кнопки мастера — под левой колонкой, а не во всю ширину страницы.
 * Замер 01.09: колонка формы 842 px, боковая 454 px при корне 1296 —
 * то есть форма занимает 65%. Без ограничения «Далее» уезжала вправо под
 * сводку заказа и оказывалась ниже всего экрана. */
@media (min-width: 1000px) {

    .pwr-steps__nav {
        max-width: 65%;
    }
}

/* Сводка заказа на оформлении — той же карточкой, что и на корзине. */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
    padding: 12px 0;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    padding: 4px;
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-media-bg);
}

/* ⚠️ Плиток «Курьером / Пункт выдачи» из референса здесь нет и быть не
 * может: замер 01.09 показал, что блок способа получения на витрине пуст —
 * настроен единственный способ, самовывоз из пункта выдачи. Нарисовать
 * выбор, которого нет, значит соврать покупателю на шаге доставки.
 * Плитки появятся сами в тот день, когда в зонах доставки заведут курьера. */

/* Выбранный способ доставки обводился синим. Замер 01.09: обводка — это
 * `box-shadow: inset 0 0 0 1.5px #2872fa`, а #2872fa это
 * `--theme-palette-color-1`, первый цвет палитры Blocksy. На витрине он
 * остался стоковым синим, хотя бренд оранжевый.
 *
 * Саму переменную здесь не трогаем: палитра — общая настройка всей витрины,
 * и её синий вылезет ещё и в ссылках, и в кольцах фокуса. Это находка для
 * сессии, владеющей оформлением бренда; у себя перебиваем только обводку. */
/* ⚠️ НЕ РАБОТАЕТ, И ЭТО ЗАПИСАНО НАРОЧНО.
 *
 * Выбранный способ доставки обводится синим `#2872fa` — это
 * `--theme-palette-color-1`, первый цвет палитры Blocksy, оставшийся
 * стоковым на оранжевом бренде.
 *
 * Что измерено 01.09, чтобы следующая сессия не начинала с нуля:
 *   • правил `box-shadow`, попадающих в этот элемент, ровно три: наше и
 *     два от WooCommerce, и оба чужих объявляют `currentcolor`;
 *   • `currentcolor` у элемента — #a6a6ae, то есть синевы в нём нет;
 *   • наш селектор ЛОВИТ элемент (`matches` = true) и сильнее чужих
 *     (четыре класса против двух с тегом);
 *   • инлайновых стилей у элемента нет, нечитаемых таблиц на странице нет,
 *     литеральный синий встречается только в объявлениях переменных;
 *   • правило с `!important`, вставленное в конец `<head>` прямо в
 *     браузере, тоже НЕ меняет вычисленное значение.
 *
 * То есть источник синевы не найден и обычными средствами каскада не
 * перебивается. Правило оставлено: оно верное и заработает, как только
 * источник будет найден или палитра Blocksy перекрашена в фирменную —
 * последнее и есть настоящее лечение, но палитра общая для всей витрины
 * и правится сессией, владеющей брендом. Открытый косметический вопрос,
 * вынесен в обратную передачу. */
.wp-block-woocommerce-cart .wc-block-cart
    .wc-block-components-radio-control--highlight-checked
    label.wc-block-components-radio-control__option--checked-option-highlighted,
.wp-block-woocommerce-checkout .wc-block-checkout
    .wc-block-components-radio-control--highlight-checked
    label.wc-block-components-radio-control__option--checked-option-highlighted {
    box-shadow: inset 0 0 0 1.5px var(--pwr-accent);
}

/* Последний шаг мастера — блок «где заказать». Он сосед корня чекаута,
 * то есть во всю ширину страницы, и без ограничения уезжал под сводку
 * заказа во всю строку. Держим его в колонке формы, как остальные шаги. */
@media (min-width: 1000px) {

    .pwr-where-to-buy[data-pwr-panel] {
        max-width: 65%;
    }
}

/* На 375 pt блок «где купить» занимал весь первый экран: три ссылки, и
 * каждая в две строки, потому что названия товаров длинные. Страница
 * начиналась не с корзины, а с предложения уйти на маркетплейс.
 * Держим каждую ссылку в одну строку с многоточием — предупреждение
 * остаётся на месте, но перестаёт быть содержанием экрана. */
@media (max-width: 999px) {

    .pwr-wtb-cart .pwr-wtb-link {
        display: block;
        margin: 0 0 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* Узкая корзина — всё, что уже 1200: и телефон, и планшет, и небольшое
 * окно на десктопе. Порог совпадает с порогом сетки выше, иначе между
 * ними осталась бы полоса ширин без единого правила. */
@media (max-width: 1199px) {

    .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image a,
    .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image img {
        max-width: 96px;
    }

    .wp-block-woocommerce-cart .wc-block-cart-items__row .wc-block-components-product-name {
        font-size: 15px;
    }

    .wp-block-woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price__value {
        font-size: 16px;
    }

    .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
        width: 112px;
    }
}

/* ===========================================================================
   18. Правая колонка: «Товары (N)» и «Итого» вместо длинных слов
   ======================================================================== */

/* Строки «Товары (3)» у WooCommerce нет. Подытог он рисует только когда тот
 * отличается от итога, а при бесплатной доставке они равны — и строка
 * пропадает совсем. Синтезируем её двумя псевдоэлементами блока итогов:
 * подпись слева, сумма справа. Значения ставит assets/shop-ui.js. */
.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block[data-pwr-items] {
    position: relative;
    padding-top: 42px;
}

.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block[data-pwr-items]::before {
    content: attr(data-pwr-items);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--pwr-line);
    color: var(--pwr-text-strong);
    font-size: 15px;
}

.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block[data-pwr-items-sum]::after {
    content: attr(data-pwr-items-sum);
    position: absolute;
    top: 9px;
    right: 0;
    color: var(--pwr-text-strong);
    font-size: 15px;
}

/* «Предполагаемый итог» — три слова там, где нужно одно. Строка приходит из
 * словаря блоков, обычным переводом её не заменить; подменяем показ. */
.wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 0;
}

.wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label::before {
    content: 'Итого';
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--pwr-heading);
}

/* ===========================================================================
   19. Преимущества в правой колонке
   ======================================================================== */

/* Было: мелкие значки, прижатые к верху текста, и строки не по центру.
 * Стало: значок 34 px в кружке, выровнен по центру строки. */
.pwr-trust--aside .pwr-trust__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
}

.pwr-trust--aside .pwr-trust__ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 50%;
    background: var(--pwr-accent-wash);
    color: var(--pwr-accent);
    stroke-width: 1.5;
}

.pwr-trust--aside .pwr-trust__txt {
    font-size: 13px;
    line-height: 1.4;
    color: var(--pwr-muted);
}

.pwr-trust--aside .pwr-trust__txt b {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pwr-heading);
}

/* ===========================================================================
   20. «Добавьте к вашему комплексу» — банка крупно
   ======================================================================== */

/* Претензия владельца: «банка маленькая и продолговатая, квадратик её ещё
 * уменьшает». Причина та же, что и в строке корзины: пустые поля пакшота.
 * Рамка стала портретной 104×140, а положение банки внутри считает
 * assets/shop-ui.js по границам непрозрачных пикселей. Карточки уже и выше,
 * справа от банки — название, польза и цена. */
.pwr-addon {
    align-items: stretch;
    gap: 16px;
    padding: 16px;
}

.pwr-addon__media {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 104px;
    height: 140px;
    overflow: hidden;
    border-radius: var(--pwr-radius-sm);
    background: var(--pwr-media-bg);
}

.pwr-addon__media img {
    display: block;
    max-width: none;
    padding: 0;
    background: none;
}

.pwr-addon__body {
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}

.pwr-addon__name {
    font-size: 14px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pwr-addon__benefit {
    font-size: 12px;
    line-height: 1.4;
    color: var(--pwr-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pwr-addon__row {
    margin-top: auto;
}

.pwr-addon__price,
.pwr-addon__price .amount {
    font-size: 17px;
}

.pwr-addon__add {
    width: 36px;
    height: 36px;
}


/* Бейдж «Экономия N ₽» стоит в колонке суммы и по весу спорил с самой
 * суммой — двумя числами подряд строка перестаёт читаться с одного взгляда.
 * Цену со скидкой ставит не эта зона: решение о зачёркнутой цене помечено
 * в плане как незакрытое. Здесь только вес. */
.wp-block-woocommerce-cart .wc-block-components-sale-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border: none;
    border-radius: 5px;
    background: var(--pwr-accent-wash);
    color: var(--pwr-accent);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
}

/* Старая цена рядом с новой — приглушённо и мельче. */
.wp-block-woocommerce-cart .wc-block-components-product-price__regular {
    margin-right: 6px;
    color: var(--pwr-muted);
    font-size: 13px;
    font-weight: 400;
}

/* На оформлении строка подытога у WooCommerce есть — её не синтезируем,
 * а переименовываем: «Подытог» не говорит, что в него входит, «Товары (3)»
 * говорит. Число ставит атрибутом assets/shop-ui.js. */
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__label[data-pwr-label] {
    font-size: 0;
}

.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__label[data-pwr-label]::before {
    content: attr(data-pwr-label);
    font-size: 15px;
    color: var(--pwr-text-strong);
}

/* ===========================================================================
   21. Светлая полоса над банкой — граница таблицы из палитры Blocksy
   ======================================================================== */

/* ЧТО ЭТО БЫЛО. Владелец 01.09: «над фотографией баночки белая полоса по
 * всем продуктам». Замер: `border-top: 1px solid #e1e8ed` на ячейке
 * картинки. Рисует его Blocksy своим правилом для таблиц —
 *
 *     td { border-width: var(--theme-table-border-width, 1px);
 *          border-color: var(--theme-border-color); }
 *
 * — а `--theme-border-color` на витрине остался стоковым светло-серым:
 * палитра темы под тёмное оформление не перекрашивалась. Это та же семья
 * переменных, что уже всплывала на полях формы (раздел 11) и на синей
 * обводке способа доставки.
 *
 * ПОЧЕМУ ПОЛОСА БЫЛА ТОЛЬКО НАД КАРТИНКОЙ. Это следствие нашей сетки:
 * ячейки «товар» и «итого» объявлены `display: contents`, собственного
 * прямоугольника не создают, и границы у них не рисуются. Ячейка картинки
 * прямоугольник создаёт — её граница и осталась, ровно над банкой.
 *
 * ЛЕЧИМ ПЕРЕМЕННУЮ, А НЕ КАЖДУЮ ГРАНИЦУ. Тем же приёмом, что и с полями:
 * подставляем свой цвет в переменную темы. Одним правилом чинятся и
 * разделители строк на узких экранах, и волосяные линии в сводке заказа —
 * там ровно тот же #e1e8ed. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    --theme-border-color: var(--pwr-line);
    --theme-table-border-color: var(--pwr-line);
}

/* А в широкой раскладке верхняя граница ячейки не нужна вовсе: разделитель
 * между строками рисуем мы сами по нижнему краю строки. Оставить обе —
 * значит получить двойную линию и обрубок над одной только картинкой. */
@media (min-width: 1200px) {

    .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row td {
        border-top: 0;
    }
}

/* ===========================================================================
   22. Правки по замечаниям владельца 01.09
   ======================================================================== */

/* --- преимущества: значок крупнее, строки без пустой прослойки --- */

/* Пустая строка между заголовком и подписью бралась из разметки: заголовок
 * стоит блоком, а сразу за ним идёт `<br>`. Блок уже переносит строку, и
 * перенос получался двойным. Прячем перенос, а не переписываем разметку:
 * `<br>` там уместен и понадобится, если заголовок перестанет быть блоком. */
.pwr-trust--aside .pwr-trust__txt br {
    display: none;
}

.pwr-trust--aside .pwr-trust__row {
    gap: 16px;
    padding: 16px 0;
    align-items: center;
}

/* Значок ростом почти в две строки текста — по просьбе владельца. */
.pwr-trust--aside .pwr-trust__ico {
    width: 46px;
    height: 46px;
    padding: 12px;
}

.pwr-trust--aside .pwr-trust__txt {
    line-height: 1.35;
}

.pwr-trust--aside .pwr-trust__txt b {
    margin-bottom: 2px;
    font-size: 15px;
}

/* --- кнопки шага и панель последнего шага теперь внутри колонки формы --- */

/* Ограничение по ширине больше не нужно и вредно: узлы переехали ВНУТРЬ
 * колонки формы (см. mountIntoMain в checkout-wizard.js), и 65% от неё
 * оставили бы кнопки в трети экрана. */
@media (min-width: 1000px) {

    .pwr-steps__nav {
        max-width: none;
    }

    .pwr-where-to-buy[data-pwr-panel] {
        max-width: none;
    }
}

/* Панель последнего шага теперь потомок корня, а не его сосед: правило по
 * соседству оставлено на случай, если перенос не состоится, и рядом
 * добавлено правило по вложенности. */
[data-pwr-step="3"] .pwr-where-to-buy[data-pwr-panel="3"] {
    display: block;
}

/* --- общая экономия по заказу --- */

/* Строка встаёт между доставкой и итогом. Рисуется псевдоэлементами блока
 * доставки: у блока итогов оба псевдоэлемента уже заняты строкой
 * «Товары (N)», а заводить свой узел внутри сводки, которой владеет React,
 * ради одной строки — лишний риск. */
/* Три класса в цепочке не для красоты: `padding: 0` на обёртке итогов
 * приходит из blocks/checkout.css с двумя классами и грузится после нас,
 * а это сокращённое свойство обнуляет и наш нижний отступ. Поймано сразу:
 * строка экономии наехала на подпись доставки. */
.wc-block-components-sidebar .wc-block-components-totals-wrapper[data-pwr-save] {
    position: relative;
    padding-bottom: 46px;
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper[data-pwr-save]::before {
    content: attr(data-pwr-save);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 9px 0 0;
    border-top: 1px solid var(--pwr-line);
    color: var(--pwr-accent);
    font-size: 15px;
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper[data-pwr-save-sum]::after {
    content: attr(data-pwr-save-sum);
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 9px 0 0;
    color: var(--pwr-accent);
    font-size: 15px;
    font-weight: 700;
}

/* ===========================================================================
   23. Выравнивание правой колонки (замечания владельца 01.09)
   ======================================================================== */

/* ЗАМЕР, ПО КОТОРОМУ ЭТО НАПИСАНО. Правая колонка шириной 454 px:
 *
 *   боковая карточка   914 … 1368, отступы 29 слева и 20 справа
 *   карточка сводки    945 … 1347
 *   товар внутри неё   962 … 1330   ← отступ 16
 *   «Подытог»          946 … 1346   ← вплотную к рамке
 *   «Ваша экономия»    946 … 1346   ← вплотную к рамке
 *   блок преимуществ   945 … 1347, своя рамка, отступов внутри нет
 *   значок в нём       946           ← в одном пикселе от границы
 *
 * Отсюда всё, что видно глазом: строки сумм липнут к рамке, а товары нет;
 * значок преимущества упирается в собственную рамку блока; вся колонка
 * сдвинута вправо на девять пикселей.
 */

/* --- 1. Симметричные отступы самой колонки --- */

/* Откуда бралась разница 29 против 20, в стилях темы не важно: важно, что
 * содержимое карточки стояло не по центру. Задаём оба отступа явно и с
 * запасом по специфичности. */
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-sidebar {
    padding-left: 20px;
    padding-right: 20px;
}

/* --- 2. Строки сумм на одном уровне с товарами --- */

/* Внутри карточки сводки товары идут с отступом 16, а строки сумм —
 * вплотную к рамке. Выравниваем по товарам: строка «Товары (N)» должна
 * начинаться там же, где название товара над ней. */
.wp-block-woocommerce-checkout .wc-block-components-sidebar .wc-block-components-totals-wrapper {
    padding-left: 16px;
    padding-right: 16px;
}

/* Наши синтезированные строки позиционируются абсолютно, а значит от
 * ГРАНИЦЫ блока, а не от его внутреннего отступа: `left: 0` у такого
 * элемента отступ не видит. Поэтому величина отступа задаётся переменной
 * и подставляется и в отступ блока, и в координаты строки. */
.wc-block-components-sidebar {
    --pwr-summary-inset: 0px;
}

.wp-block-woocommerce-checkout .wc-block-components-sidebar {
    --pwr-summary-inset: 16px;
}

/* Отступы приходят из JS: он измеряет, где стоит подпись настоящей соседней
 * строки, и подставляет то же самое (см. alignPseudoRow в shop-ui.js).
 * Числа здесь были бы подбором под текущую вёрстку WooCommerce и сломались
 * бы на первом её обновлении. Запасные значения на случай, если JS не
 * успел: строка встанет по краю блока, а не уедет за него. */
.wc-block-components-sidebar .wc-block-components-totals-wrapper[data-pwr-save]::before {
    left: var(--pwr-row-left, 0px);
    right: var(--pwr-row-right, 0px);
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper[data-pwr-save-sum]::after {
    right: var(--pwr-row-right, 0px);
}

.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block[data-pwr-items]::before {
    left: var(--pwr-row-left, 0px);
    right: var(--pwr-row-right, 0px);
}

.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block[data-pwr-items-sum]::after {
    right: var(--pwr-row-right, 0px);
}

/* --- 3. Преимущества перестают быть карточкой в карточке --- */

/* Рамка со скруглением досталась блоку от его же оформления на других
 * страницах. В правой колонке она лишняя: карточка уже есть — сама колонка,
 * — а вложенная рамка без внутренних отступов прижимала значок к своей
 * границе. Оставляем волосяные разделители между строками, как у сумм. */
.pwr-trust--aside {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
}

.pwr-trust--aside .pwr-trust__row:first-child {
    border-top: 1px solid var(--pwr-line);
}