/*
 * wc-overrides.css — перебивка стилей плагинов магазина под тему legreys.
 *
 * Подключается ПОСЛЕ assets/style.css (зависимость legreys-style), поэтому
 * перебивает каскадом без !important (кроме точечных inline-стилей плагинов).
 * Правила — через обёртки темы (.wc_page, .catalog_section, .cart_section,
 * .checkout_section, .product_section), классы — snake_case, без gap во flex,
 * единицы только px/%/vw/vh/dvh.
 *
 * Токены берём из :root основного стиля (--bg, --surface, --paper, --gold,
 * --line, --radius и т.д.).
 *
 * СТРУКТУРА (заполняется по фазам InternetShop.md):
 *   [базовый слой]  — обёртка страниц магазина, типографика
 *   WooCommerce notices
 *   Buttons (WC)
 *   Forms (checkout, cart, login)
 *   Quantity input
 *   Select2 / dropdowns
 *   Breadcrumbs
 *   Pagination
 *   Product filter (WCAPF)
 *   Gallery / lightbox
 *   Payment methods
 */

/* === Базовый слой: обёртка страниц магазина ============================== */
/* .wc_page_inner уже попадает под глобальный [class$="_inner"] (max-width,
   центрирование, боковые падинги) — здесь только вертикальные отступы секции. */
.wc_page {
    padding: 64px 0 96px;
}

.wc_page .section_head {
    margin-bottom: 40px;
}

/* === Хром темы на страницах магазина (перебивка .woocommerce img) ======== */
/* WooCommerce (woocommerce-layout.css) ставит `.woocommerce img,
   .woocommerce-page img { height: auto }` (специфичность 0,1,1) — это перебивает
   `.site_logo_img` (0,1,0), и логотип шапки растягивается в натуральную величину.
   Возвращаем высоту с большей специфичностью через scope .site_header. */
.site_header .site_logo_img {
    height: 76px;
    width: auto;
}

@media (max-width: 850px) {
    .site_header .site_logo_img {
        height: 42px;
    }
}

/* === Мини-корзина в шапке (Фаза 4) ======================================= */
.cart_wrap {
    position: relative;
    display: flex;
}

.mini_cart {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    width: 340px;
    max-width: 92vw;
    margin-top: 10px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.cart_wrap:hover .mini_cart,
.cart_wrap:focus-within .mini_cart {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mini_cart .woocommerce-mini-cart {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
}

.mini_cart li.woocommerce-mini-cart-item {
    position: relative;
    padding: 12px 0 12px 26px;
    border-top: 1px solid var(--line_soft);
}

.mini_cart li.woocommerce-mini-cart-item:first-child {
    border-top: 0;
}

.mini_cart .woocommerce-mini-cart-item a:not(.remove) {
    color: var(--paper);
    font-size: 14px;
    text-decoration: none;
}

.mini_cart .woocommerce-mini-cart-item a:not(.remove):hover {
    color: var(--gold);
}

.mini_cart .woocommerce-mini-cart-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius_sm);
    margin-left: 10px;
}

.mini_cart .woocommerce-mini-cart-item .remove_from_cart_button {
    position: absolute;
    top: 12px;
    left: 0;
    color: var(--muted);
    font-size: 16px;
    text-decoration: none;
}

.mini_cart .woocommerce-mini-cart-item .remove_from_cart_button:hover {
    color: var(--gold);
}

.mini_cart .quantity {
    color: var(--paper_dim);
    font-family: var(--ff_mono);
    font-size: 12px;
}

.mini_cart .woocommerce-mini-cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--paper);
    font-family: var(--ff_mono);
    font-size: 13px;
}

.mini_cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
    color: var(--gold);
    font-size: 16px;
}

.mini_cart .woocommerce-mini-cart__empty-message {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.mini_cart .woocommerce-mini-cart__buttons {
    display: flex;
    flex-wrap: wrap;
    margin: -8px 0 0 -8px;
}

.mini_cart .woocommerce-mini-cart__buttons .button {
    flex: 1 1 auto;
    margin: 8px 0 0 8px;
    padding: 0 16px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    background: transparent;
    color: var(--paper);
    font-family: var(--ff_mono);
    font-size: 12px;
    line-height: 42px;
    text-align: center;
    text-transform: uppercase;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mini_cart .woocommerce-mini-cart__buttons .button:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.mini_cart .woocommerce-mini-cart__buttons .button.checkout {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg);
}

.mini_cart .woocommerce-mini-cart__buttons .button.checkout:hover {
    background: var(--gold_deep);
    border-color: var(--gold_deep);
}

/* На мобильном наведения нет: мини-корзина раскрывается по клику (JS ставит
   body.is_cart_open) и выводится панелью под фикс-шапкой во всю ширину с
   боковыми отступами 16px — иначе при right:0 она уезжала вправо и обрезалась. */
@media (max-width: 850px) {
    .mini_cart {
        position: fixed;
        top: calc(var(--header_h) + 8px);
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        margin-top: 0;
    }
    .cart_wrap:hover .mini_cart,
    .cart_wrap:focus-within .mini_cart {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
    }
    /* Селектор длиннее нейтрализующего выше (специфичность 0,3,1 > 0,3,0):
       при тапе ссылка корзины получает фокус и :focus-within иначе перебивал бы показ. */
    body.is_cart_open .cart_wrap .mini_cart {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* === Каталог: раскладка (Фаза 3) ========================================= */
/* Карточка (.product_card и дети), .vol_item, .product_foot уже стилизованы
   в основном style.css — переиспользуем, здесь только то, что добавляет каталог. */
.catalog_main {
    padding: 48px 0 96px;
}

/* На странице каталога .catalog_section лежит внутри .catalog_main — верхний
   зазор над крошками задаёт сам .catalog_main (как .product_main на странице
   товара), поэтому снимаем секционный padding-top: 96px (style.css). На главной
   .catalog_section вне .catalog_main и сохраняет свой отступ. */
.catalog_main .catalog_section {
    padding-top: 0;
}

.catalog_section_inner .section_head {
    margin-bottom: 28px;
}

/* Навигация по категориям */
.catalog_nav {
    margin-bottom: 32px;
}

.catalog_nav_list {
    display: flex;
    flex-wrap: wrap;
    margin: -8px 0 0 -8px;
    padding: 0;
    list-style: none;
}

.catalog_nav_list > li {
    margin: 8px 0 0 8px;
}

.catalog_nav_item {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    color: var(--paper_dim);
    font-family: var(--ff_mono);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

a.catalog_nav_item:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.catalog_nav_item.is_active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on_accent);
}

/* Раскладка. По умолчанию — одна колонка (фильтр ещё не собран);
   .catalog_split включается, когда в сайдбаре есть форма WCAPF. */
.catalog_layout {
    display: block;
}

.catalog_split {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

.catalog_sidebar {
    position: relative;
}

/* Подсказка администратору (фильтр не создан) */
.catalog_admin_note {
    margin: 0 0 24px;
    padding: 14px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--radius_sm);
    background: var(--surface);
    color: var(--paper_dim);
    font-family: var(--ff_mono);
    font-size: 13px;
    line-height: 1.6;
}

/* Сетка товаров — перебиваем float/width дефолтного вывода WC */
.catalog_main_col ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both;
}

.catalog_main_col ul.products::before,
.catalog_main_col ul.products::after {
    content: none;
}

/* Ширину/флоат карточки задаёт наша grid-сетка, а не WC. На ≤768px плагинный
   woocommerce-smallscreen.css ставит li.product{width:48%;float:left} с высокой
   специфичностью (.woocommerce ul.products[class*=columns-] li.product = 0,4,2)
   и сжимает карточку внутри grid-ячейки. Перебиваем селектором 0,5,2. */
.woocommerce .catalog_main_col ul.products[class*="columns-"] li.product {
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    clear: none;
}

/* Квадратный кроп картинки карточки (WC навязывает height:auto на изображения
   товара — задаём соотношение + кроп, чтобы медиа заполняло квадрат). */
.catalog_main_col .product_media img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Подвал карточки прижат к низу — вынесено в базовые .product_body/.product_foot
   в style.css (действует во всех контекстах карточки, не только в каталоге). */

/* Тулбар каталога — только сортировка (счётчик result-count снят в
   inc/woocommerce.php). Сидит внутри .wcapf-before-products как сиблинг —
   своей обёртки НЕ добавляем (AJAX-таргет WCAPF). */
.catalog_main_col .woocommerce-ordering {
    margin: 0 0 18px;
}

.catalog_main_col .woocommerce-ordering select {
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    color: var(--paper);
    font-family: var(--ff_mono);
    font-size: 13px;
}

/* Фильтр на уровне сетки товаров (десктоп). Тулбар (сортировка) и панель
   активных фильтров выносим в зарезервированную полосу сверху .catalog_main_col
   (position:absolute) — тогда сетка всегда стартует на фикс. высоте, а сайдбар
   с тем же отступом выравнивается по первому ряду карточек и без фильтра, и с
   применённым (панель активных фильтров сетку не сдвигает). На мобиле (≤850px)
   колонки стакаются — выравнивание не нужно, оставляем обычный поток. */
@media (min-width: 851px) {
    .catalog_split .catalog_main_col {
        position: relative;
        padding-top: 52px;
    }

    .catalog_split .catalog_sidebar {
        margin-top: 52px;
        /* Липкий фильтр — остаётся на виду при прокрутке сетки товаров.
           top с учётом фикс-шапки (--header_h) + воздух. */
        position: sticky;
        top: calc(var(--header_h) + 20px);
        align-self: start;
    }

    .catalog_split .catalog_main_col .woocommerce-ordering {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    .catalog_split .catalog_main_col .wcapf-active-filters-before-shop-loop {
        position: absolute;
        top: 0;
        left: 0;
        right: 220px;
        margin: 0;
    }
}

/* Пустое состояние */
.catalog_empty {
    padding: 20px 0;
}

@media (max-width: 850px) {
    .catalog_main {
        padding-top: 24px;
    }

    /* .catalog_section идёт сразу под шапкой — убираем её верхний отступ на
       мобильном, зазор задаёт только .catalog_main (выше). */
    .catalog_section {
        padding-top: 0;
    }

    .catalog_split {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .catalog_main_col ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Сортировка — на всю ширину (на мобиле обычный поток, без float вправо). */
    .catalog_main_col .woocommerce-ordering,
    .catalog_main_col .woocommerce-ordering select {
        float: none;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .catalog_main_col ul.products {
        grid-template-columns: 1fr;
    }
}

/* === WooCommerce notices ================================================= */
/* Уведомления (сообщение/ошибка/инфо) появляются на корзине, чекауте и при
   добавлении в корзину. Оформляем полоской-уведомлением в стиле темы. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
    margin: 0 0 24px;
    padding: 14px 18px;
    border: 0;
    border-left: 3px solid var(--line);
    border-radius: 0 var(--radius_sm) var(--radius_sm) 0;
    background: var(--surface);
    color: var(--paper);
    font-family: var(--ff_base);
    font-size: 14px;
    line-height: 1.5;
    list-style: none;
}

.woocommerce-notices-wrapper .woocommerce-message {
    border-left-color: #1f8a4c;
}

/* Иконка WC (::before) накладывается на текст — у нас уведомление
   оформлено полоской слева, иконка не нужна (успех/ошибка/инфо). */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-info::before {
    display: none;
}

.woocommerce-notices-wrapper .woocommerce-error {
    border-left-color: var(--gold_deep);
}

.woocommerce-notices-wrapper .woocommerce-info {
    border-left-color: var(--gold);
}

/* === Buttons (WC) ======================================================== */
/* Тег кнопок WooCommerce не трогаем (правило 5 протокола) — только внешний
   вид под золотую кнопку темы. */
.wc_page .woocommerce .button,
.wc_page .woocommerce button.button,
.wc_page .woocommerce a.button,
.wc_page .woocommerce input.button {
    display: inline-block;
    padding: 0 28px;
    min-height: 52px;
    border: 1px solid var(--gold);
    border-radius: var(--radius_sm);
    background: var(--gold);
    color: var(--bg);
    font-family: var(--ff_mono);
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 50px;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
}

.wc_page .woocommerce .button:hover,
.wc_page .woocommerce button.button:hover,
.wc_page .woocommerce a.button:hover,
.wc_page .woocommerce input.button:hover {
    background: var(--gold_deep);
    border-color: var(--gold_deep);
}

/* Неактивная кнопка (например «Обновить корзину» до изменения количества): WC
   навязывает свой padding 0.618em/1em правилом с :disabled[disabled] (выше по
   специфичности) → кнопка становится выше остальных. Перебиваем тем же
   селектором с префиксом .wc_page, чтобы высота оставалась 52px. */
.wc_page .woocommerce button.button:disabled[disabled],
.wc_page .woocommerce input.button:disabled[disabled] {
    padding: 0 28px;
}

/* === Чекаут (Фаза 5) ===================================================== */
/* Классический шорткод [woocommerce_checkout]. Шаблон form-checkout.php
   переопределён (обёртка .checkout_grid: поля сверху, обзор заказа под ними,
   одной колонкой). */

.checkout_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

.checkout_section h3,
.checkout_section #order_review_heading {
    margin: 0 0 20px;
    font-family: var(--ff_head);
    font-size: 22px;
    color: var(--paper);
}

/* Платёжные реквизиты и доставку/детали — в одну колонку (WC по умолчанию
   флоатит .col-1 влево, .col-2 вправо). Блок «Детали» (примечание к заказу)
   лежит в .col-2 → при стопке уходит под все поля. */
.checkout_section .col2-set,
.checkout_section .col2-set .col-1,
.checkout_section .col2-set .col-2 {
    float: none;
    width: 100%;
}

.checkout_section .col2-set .col-2 {
    margin-top: 10px;
}

/* Поля ввода — всегда в одну колонку (перебиваем WC form-row-first/last) */
.checkout_section .woocommerce form .form-row {
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    float: none;
}

.checkout_section label {
    display: block;
    margin-bottom: 8px;
    color: var(--paper_dim);
    font-family: var(--ff_mono);
    font-size: 12px;
}

.checkout_section .required {
    color: var(--gold);
    border: 0;
}

/* Специфичность .woocommerce form .form-row ... (0,3,1) — перебиваем прямее. */
.checkout_section .woocommerce form .form-row .input-text,
.checkout_section .woocommerce form .form-row textarea,
.checkout_section .woocommerce form .form-row select {
    width: 100%;
    padding: 13px 15px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    color: var(--paper);
    font-family: var(--ff_base);
    font-size: 15px;
}

.checkout_section .woocommerce form .form-row .input-text::placeholder,
.checkout_section .woocommerce form .form-row textarea::placeholder {
    color: var(--muted);
}

.checkout_section .woocommerce form .form-row .input-text:focus,
.checkout_section .woocommerce form .form-row textarea:focus,
.checkout_section .woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--gold);
}

.checkout_section input[type="radio"],
.checkout_section input[type="checkbox"] {
    accent-color: var(--gold);
}

/* Обзор заказа */
.checkout_section .woocommerce-checkout-review-order-table {
    width: 100%;
    margin: 0 0 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    border-collapse: collapse;
    overflow: hidden;
    background: var(--surface);
}

.checkout_section .woocommerce-checkout-review-order-table th,
.checkout_section .woocommerce-checkout-review-order-table td {
    padding: 14px 16px;
    border-top: 1px solid var(--line_soft);
    color: var(--paper);
    text-align: left;
}

.checkout_section .woocommerce-checkout-review-order-table thead th {
    background: var(--surface_2);
    border-top: 0;
    font-family: var(--ff_mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.checkout_section .woocommerce-checkout-review-order-table .order-total .amount {
    color: var(--gold);
    font-size: 18px;
}

/* Оплата */
.checkout_section .woocommerce #payment {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.checkout_section #payment ul.payment_methods {
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--line_soft);
    list-style: none;
}

.checkout_section #payment ul.payment_methods li {
    margin: 0 0 8px;
    color: var(--paper);
}

.checkout_section #payment label {
    display: inline;
    margin: 0;
    color: var(--paper);
    font-family: var(--ff_base);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
}

.checkout_section .woocommerce #payment div.payment_box {
    margin: 10px 0 0;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: var(--radius_sm);
    color: var(--paper_dim);
    font-size: 13px;
    line-height: 1.5;
}

.checkout_section .woocommerce #payment div.payment_box::before {
    display: none;
}

/* Согласие с условиями */
.checkout_section .woocommerce-terms-and-conditions-wrapper {
    margin: 16px 0;
    color: var(--paper_dim);
    font-size: 13px;
}

/* Промокод (тоггл над формой) */
.checkout_section .woocommerce-form-coupon-toggle {
    margin-bottom: 20px;
}

/* Инфо-уведомление WC (напр. «Есть купон?») — синяя полоса → тема */
.checkout_section .woocommerce-info {
    margin: 0 0 20px;
    padding: 14px 18px 14px 46px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius_sm);
    background: var(--surface);
    color: var(--paper_dim);
    font-size: 14px;
}

.checkout_section .woocommerce-info::before {
    color: var(--gold);
}

.checkout_section .woocommerce-info a {
    color: var(--gold);
}

/* Кнопка «Оформить заказ» — на всю ширину колонки заказа */
.checkout_section #place_order {
    display: block;
    width: 100%;
    margin-top: 16px;
}

@media (max-width: 850px) {
    .checkout_grid {
        gap: 32px;
    }
}

/* Страница «Заказ принят» (order-received) — рендерится в том же .checkout_section */
.checkout_section .woocommerce-notice--success,
.checkout_section .woocommerce-thankyou-order-received {
    margin: 0 0 28px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-left: 3px solid #1f8a4c;
    border-radius: 0 var(--radius_sm) var(--radius_sm) 0;
    background: var(--surface);
    color: var(--paper);
    font-family: var(--ff_base);
    font-size: 16px;
}

.checkout_section ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    margin: -10px 0 28px -10px;
    padding: 0;
    border: 0;
    list-style: none;
}

.checkout_section ul.woocommerce-order-overview li {
    margin: 10px 0 0 10px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    background: var(--surface);
    color: var(--muted);
    font-family: var(--ff_mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.checkout_section ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 6px;
    color: var(--paper);
    font-size: 15px;
    text-transform: none;
}

.checkout_section .woocommerce-order-details__title,
.checkout_section .woocommerce-column__title {
    margin: 28px 0 16px;
    font-family: var(--ff_head);
    font-size: 20px;
    color: var(--paper);
}

.checkout_section .woocommerce-table--order-details {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    border-collapse: collapse;
    overflow: hidden;
    background: var(--surface);
}

.checkout_section .woocommerce-table--order-details th,
.checkout_section .woocommerce-table--order-details td {
    padding: 14px 16px;
    border-top: 1px solid var(--line_soft);
    color: var(--paper);
    text-align: left;
}

.checkout_section .woocommerce-table--order-details .order-total .amount {
    color: var(--gold);
}

/* === Корзина (Фаза 4) ==================================================== */
/* Классический шорткод [woocommerce_cart]: form.woocommerce-cart-form >
   table.shop_table.cart, .cart-collaterals > .cart_totals. Кнопки WC (Обновить,
   Применить купон, Оформить) — тег не трогаем, вид золотой задан выше. */

.cart_section .shop_table {
    width: 100%;
    margin: 0 0 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    border-collapse: collapse;
    overflow: hidden;
    background: var(--surface);
}

.cart_section .shop_table th {
    padding: 16px 18px;
    background: var(--surface_2);
    border: 0;
    color: var(--paper);
    font-family: var(--ff_mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
}

.cart_section .shop_table td {
    padding: 16px 18px;
    border-top: 1px solid var(--line_soft);
    color: var(--paper);
    vertical-align: middle;
}

.cart_section .shop_table a {
    color: var(--paper);
    text-decoration: none;
    transition: color 0.2s ease;
}

.cart_section .shop_table a:hover {
    color: var(--gold);
}

.cart_section .product-remove a.remove {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    /* WC задаёт color: var(--wc-red) !important — перебиваем !important'ом (разрешено) */
    color: var(--gold) !important;
    font-size: 16px;
}

.cart_section .product-remove a.remove:hover {
    color: var(--bg) !important;
    background: var(--gold);
}

.cart_section .product-thumbnail img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius_sm);
}

/* Количество — степпер «− [число] +» (см. блок .product_section/.cart_section .quantity ниже). */

/* Купон */
.cart_section .coupon .input-text {
    height: 52px; /* вровень с кнопкой «Применить купон» (min-height: 52px) */
    padding: 0 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    color: var(--paper);
    font-family: var(--ff_mono);
    font-size: 14px;
}

.cart_section .coupon .input-text::placeholder {
    color: var(--muted);
}

/* На мобильном у кнопки купона ужимаем горизонтальные отступы, чтобы поле +
   кнопка влезали в строку. button.button — специфичность вровень с базовым
   правилом кнопки, правило ниже по источнику → выигрывает. */
@media (max-width: 850px) {
    .cart_section .coupon button.button {
        padding: 0 16px;
    }
}

/* Итоги */
.cart_section .cart_totals h2 {
    margin: 0 0 16px;
    font-family: var(--ff_head);
    font-size: 24px;
    color: var(--paper);
}

.cart_section .cart_totals table {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    border-collapse: collapse;
    overflow: hidden;
    background: var(--surface);
}

.cart_section .cart_totals th,
.cart_section .cart_totals td {
    padding: 14px 18px;
    border-top: 1px solid var(--line_soft);
    color: var(--paper);
    text-align: left;
    vertical-align: top;
}

.cart_section .cart_totals tr:first-child th,
.cart_section .cart_totals tr:first-child td {
    border-top: 0;
}

.cart_section .cart_totals th {
    width: 40%;
    color: var(--paper_dim);
    font-family: var(--ff_mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cart_section .cart_totals .order-total .amount {
    color: var(--gold);
    font-size: 18px;
}

/* Способы доставки в корзине */
.cart_section #shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart_section #shipping_method li {
    margin: 0 0 8px;
}

.cart_section .shipping-calculator-button {
    color: var(--gold);
}

/* Кнопка «Оформить заказ» — на всю ширину блока итогов */
.cart_section .wc-proceed-to-checkout {
    margin-top: 20px;
}

.cart_section .wc-proceed-to-checkout a.checkout-button {
    display: block;
    text-align: center;
}

/* Корзина на мобильном: WooCommerce (shop_table_responsive) на ≤768px
   складывает строки таблицы в карточки — каждая ячейка становится block со
   своей подписью (data-title). Делаем карточки компактнее и выносим крестик
   удаления в правый верхний угол. Брейкпоинт 768px — именно там WC переключает
   таблицу в стопку, выше неё раскладка табличная (абсолют сломал бы её). */
@media (max-width: 768px) {
    /* Карточка товара — свой флекс-контейнер: WC в стопке делает tr/td блоками,
       перебиваем сильным селектором (.cart.shop_table_responsive) и раскладываем
       поля строками, где цена и количество идут в одну строку. Линия — только
       между карточками, внутри карточки линий нет. */
    .cart_section table.cart.shop_table_responsive tr.cart_item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        padding: 12px 0;
    }

    .cart_section .cart_item + .cart_item {
        border-top: 1px solid var(--line);
    }

    /* Ячейки: без собственных бордеров (перебивает .woocommerce table.shop_table td),
       влево (WC-smallscreen держит text-align: right !important), компактно, без
       подписей-заголовков (их рисует WC через td::before { content: attr(data-title) }). */
    .cart_section table.cart.shop_table_responsive tr td {
        border: 0;
        padding: 4px 14px;
        text-align: left !important;
    }

    .cart_section table.cart.shop_table_responsive tr td::before {
        display: none;
    }

    /* Название — на всю ширину карточки, справа место под крестик. */
    .cart_section table.cart.shop_table_responsive tr td.product-name {
        flex: 0 0 100%;
        padding-right: 46px;
    }

    /* Цена и количество — в одну строку: цена тянется слева, степпер справа.
       Цена за единицу — тонким начертанием и приглушённым цветом (второстепенна
       рядом с итогом по строке). */
    .cart_section table.cart.shop_table_responsive tr td.product-price {
        flex: 1 1 auto;
        font-weight: 300;
        color: var(--paper_dim);
    }

    .cart_section table.cart.shop_table_responsive tr td.product-quantity {
        flex: 0 0 auto;
    }

    /* Подытог — на всю ширину, справа и жирным (итог по строке — главное число). */
    .cart_section table.cart.shop_table_responsive tr td.product-subtotal {
        flex: 0 0 100%;
        text-align: right !important;
        font-weight: 700;
    }

    /* Степпер количества — ниже, чем на десктопе и на странице товара.
       Базовые стили степпера в корзине объявлены ниже по файлу с той же
       специфичностью → добавляем .cart_item, чтобы перебить их здесь. */
    .cart_section .cart_item .quantity {
        margin-right: 0;
    }

    .cart_section .cart_item .quantity .qty {
        width: 44px;
        height: 40px;
    }

    .cart_section .cart_item .qty_btn {
        width: 36px;
        height: 40px;
        font-size: 18px;
    }

    /* Крестик удаления — абсолютно в правый верхний угол карточки, красный. */
    .cart_section table.cart.shop_table_responsive tr td.product-remove {
        position: absolute;
        top: 12px;
        right: 8px;
        width: auto;
        padding: 0;
        z-index: 2;
    }

    .cart_section .product-remove a.remove {
        color: #e4463a !important;
    }

    .cart_section .product-remove a.remove:hover {
        color: #fff !important;
        background: #e4463a;
    }
}

/* === Select2 / dropdowns ================================================= */
/* Select2 (страна/область) рендерится в портале на уровне <body> — вне обёрток
   темы, поэтому стилизуем без scope. У нас страна зафиксирована РФ, так что
   селект обычно не появляется; оформление — на случай будущих select-полей. */
.select2-container--default .select2-selection--single {
    height: auto;
    padding: 11px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    color: var(--paper);
    line-height: 1.3;
}

.select2-dropdown {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--paper);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--gold);
    color: var(--bg);
}

/* === Breadcrumbs ========================================================= */
/* Хлебные крошки на страницах магазина не выводим отдельным блоком пока —
   навигацию заменяет .catalog_nav. При необходимости добавить здесь. */

/* === Pagination ========================================================== */
.catalog_main_col .woocommerce-pagination {
    margin-top: 44px;
    clear: both;
    text-align: center;
}

.woocommerce .catalog_main_col .woocommerce-pagination ul {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.woocommerce .catalog_main_col .woocommerce-pagination ul li {
    margin: 0;
    border: 0;
}

/* Без рамок и фоновых боксов: только цифры, вплотную, по центру по вертикали. */
.woocommerce .catalog_main_col .woocommerce-pagination ul li a,
.woocommerce .catalog_main_col .woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 34px;
    height: 40px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--paper_dim);
    font-family: var(--ff_mono);
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce .catalog_main_col .woocommerce-pagination ul li a:hover {
    background: transparent;
    color: var(--gold);
}

.woocommerce .catalog_main_col .woocommerce-pagination ul li span.current {
    background: transparent;
    color: var(--gold);
}

/* Стрелки «назад/вперёд» */
.woocommerce .catalog_main_col .woocommerce-pagination ul li a.prev,
.woocommerce .catalog_main_col .woocommerce-pagination ul li a.next {
    font-size: 18px;
    color: var(--paper);
}

.woocommerce .catalog_main_col .woocommerce-pagination ul li a.prev:hover,
.woocommerce .catalog_main_col .woocommerce-pagination ul li a.next:hover {
    background: transparent;
    color: var(--gold);
}

/* Многоточие — просто разделитель */
.woocommerce .catalog_main_col .woocommerce-pagination ul li span.dots {
    color: var(--muted);
}

/* === Product filter (WCAPF) ============================================== */
/* AJAX-таргет — .wcapf-before-products (между woocommerce_before_shop_loop
   prio 0 и woocommerce_after_shop_loop prio 200) — обёртку НЕ трогаем.
   Форма «Фильтр каталога» (цена, объём, группа ароматов, сброс) собрана в
   плагине; выводится шорткодом [wcapf_form] в .catalog_sidebar.

   Плагин красит всё через свои CSS-переменные (объявлены на :root). Его
   таблица стилей грузится ПОСЛЕ нашей, поэтому вместо борьбы за специфичность
   переопределяем сами переменные на .catalog_section — общем предке сайдбара и
   панели активных фильтров над товарами; по наследованию это перебивает :root
   без !important. primary_color (золото) и RU-подписи заданы в настройках WCAPF. */
.catalog_section {
    --wcapf-input-text-bg-color: var(--surface);
    --wcapf-input-text-border-color: var(--line);
    --wcapf-input-text-border-radius: var(--radius_sm);
    --wcapf-labeled-nav-bg-color: var(--surface);
    --wcapf-labeled-nav-border-color: var(--line);
    /* Чип активного фильтра над товарами. На :root его bg/border заданы как
       var(--wcapf-labeled-nav-*), а var() подставляется на :root (его
       значениями) — поэтому override labeled-nav выше сюда НЕ долетает;
       переопределяем «листовые» переменные чипа напрямую. */
    --wcapf-active-filter-item-bg-color: var(--surface);
    --wcapf-active-filter-item-border-color: var(--line);
    --wcapf-dropdown-border-color: var(--line);
    --wcapf-btn-secondary-bg-color: transparent;
    --wcapf-btn-border-radius: var(--radius_sm);

    /* Акцент плагина (по умолчанию золото) → коричневый акцент темы */
    --wcapf-primary-color: var(--accent);
    --wcapf-primary-color-rgb: 59, 37, 24;
    --wcapf-primary-text-color: #fff;
    --wcapf-chosen-active-color: var(--accent);
    --wcapf-chosen-active-text-color: #fff;
    --wcapf-chosen-hover-color: var(--accent);
    --wcapf-btn-primary-bg-color: var(--accent);
    --wcapf-btn-border-color: var(--accent);
    --wcapf-btn-secondary-text-color: var(--accent);
    --wcapf-nouislider-connect-bg-color: var(--accent);
    --wcapf-nouislider-handle-bg-color: var(--accent);
}

.catalog_sidebar {
    color: var(--paper);
    font-family: var(--ff_base);
}

.catalog_sidebar a {
    color: var(--paper_dim);
    text-decoration: none;
    transition: color 0.2s ease;
}

.catalog_sidebar a:hover {
    color: var(--gold);
}

/* Переменные чекбоксов объявлены на самом .stylish-checkbox-radio, поэтому
   :root-трюк их не ловит — переопределяем с чуть большей специфичностью.
   Чек (галочка) остаётся на primary_color (золото). */
.catalog_section .stylish-checkbox-radio {
    --wcapf-stylish-checkbox-radio-bg-color: transparent;
    --wcapf-stylish-checkbox-radio-border-color: var(--line);
}

/* Цвет текста в полях (у плагина нет переменной под него — фон мы увели в
   тёмный, значит текст и плейсхолдер задаём явно). */
.catalog_section .wcapf-range-wrapper input[type="text"],
.catalog_section .wcapf-range-wrapper input[type="number"],
.catalog_section .wcapf-search-box input[type="text"] {
    color: var(--paper);
}

.catalog_section .wcapf-search-box input[type="text"]::placeholder {
    color: var(--muted);
}

/* Вторичная кнопка (сброс в сайдбаре): прозрачная с золотым текстом/рамкой,
   на наведении — золотая заливка с тёмным текстом (как кнопки темы). */
.catalog_section .wcapf-btn.wcapf-btn-secondary:hover {
    background-color: var(--gold);
    color: var(--on_accent);
}

/* Неприменимый таксономический фильтр (нет опций → плагин выводит «Н/Д»):
   прячем весь блок. Напр. «Объём» в категориях без атрибута объёма
   (Автопарфюм, Спреи для дома). Пустой блок не содержит .wcapf-list-wrapper —
   по нему и ловим через :has(). Цена (range-wrapper) и непустые фильтры не
   затрагиваются; после AJAX-перестроения правило пересчитывается само. */
.catalog_sidebar .wcapf-filter-taxonomy-pa_volume:not(:has(.wcapf-list-wrapper)),
.catalog_sidebar .wcapf-filter-taxonomy-product_tag:not(:has(.wcapf-list-wrapper)) {
    display: none;
}

/* Общий случай «Н/Д» для любого фильтра (включая цену): плагин выводит
   заглушку как голый <div>Н/Д</div> — единственного ребёнка .wcapf-filter-inner
   без класса. Реальные обёртки контента (.wcapf-list-wrapper, .wcapf-range-wrapper)
   всегда с классом → :not([class]) их исключает. Прячем весь блок фильтра. */
.catalog_sidebar .wcapf-filter:has(> .wcapf-filter-inner > div:only-child:not([class])) {
    display: none;
}

/* Поиск по опциям нужен только в длинных списках. Если в фильтре меньше 10
   опций (нет 10-го .wcapf-filter-option) — прячем строку поиска. После AJAX
   пересчитывается само. */
.catalog_sidebar .wcapf-list-wrapper:not(:has(.wcapf-filter-options > .wcapf-filter-option:nth-child(10))) .wcapf-search-box {
    display: none;
}

/* Кнопка «Очистить всё» в панели активных фильтров над товарами → иконка
   мусорной корзины (сброс всех фильтров). Текст прячем визуально (font-size:0),
   но оставляем в DOM для скринридеров; иконку рисуем через mask (цвет = currentColor
   → золото темы). Scope .catalog_main_col — чтобы НЕ задеть «Сбросить» в сайдбаре. */
.catalog_main_col .wcapf-active-filters-before-shop-loop .wcapf-reset-filters-btn {
    font-size: 0;
    line-height: 0;
    color: var(--gold);
    transition: color 0.2s ease;
}

.catalog_main_col .wcapf-active-filters-before-shop-loop .wcapf-reset-filters-btn::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%207h16'/%3E%3Cpath%20d='M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2'/%3E%3Cpath%20d='M6%207l1%2012.2a2%202%200%200%200%202%201.8h6a2%202%200%200%200%202-1.8L18%207'/%3E%3Cpath%20d='M10%2011v6'/%3E%3Cpath%20d='M14%2011v6'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%207h16'/%3E%3Cpath%20d='M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2'/%3E%3Cpath%20d='M6%207l1%2012.2a2%202%200%200%200%202%201.8h6a2%202%200%200%200%202-1.8L18%207'/%3E%3Cpath%20d='M10%2011v6'/%3E%3Cpath%20d='M14%2011v6'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

.catalog_main_col .wcapf-active-filters-before-shop-loop .wcapf-reset-filters-btn:hover {
    color: var(--gold_deep);
}

/* === Карточка товара: single product (Фаза 6) ============================ */
/* Шаблон woocommerce/single-product.php — свои обёртки темы (.product_section,
   .product_*), функциональные части (галерея, форма в корзину, похожие) —
   штатные функции WC, здесь приводим их вывод к стилю темы. У обёртки нет
   предка .woocommerce, поэтому дефолтные стили WC (float 48% и т.п.) не ловят
   этот блок — раскладку держим своим grid. */
.product_main {
    padding: 48px 0 96px;
}

/* Хлебные крошки (единый вид на странице товара и в каталоге) */
.product_section .woocommerce-breadcrumb,
.catalog_section .woocommerce-breadcrumb {
    margin-bottom: 28px;
    color: var(--muted);
    font-family: var(--ff_mono);
    font-size: 12px;
    line-height: 1.5;
}

.product_section .woocommerce-breadcrumb a,
.catalog_section .woocommerce-breadcrumb a {
    color: var(--paper_dim);
    text-decoration: none;
    transition: color 0.2s ease;
}

.product_section .woocommerce-breadcrumb a:hover,
.catalog_section .woocommerce-breadcrumb a:hover {
    color: var(--gold);
}

/* Раскладка: галерея + сводка */
.product_layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* --- Галерея --- */
.product_gallery_col {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line_soft);
    border-radius: var(--radius);
    background: var(--surface);
}

.product_gallery_col .woocommerce-product-gallery {
    width: 100%;
    margin: 0;
}

.product_gallery_col .woocommerce-product-gallery__wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product_gallery_col .woocommerce-product-gallery__image,
.product_gallery_col .woocommerce-product-gallery__image--placeholder {
    margin: 0;
}

.product_gallery_col .woocommerce-product-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product_gallery_col .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
}
/* Плашка бренда поверх галереи — .product_brand уже absolute (bottom-left). */

/* --- Сводка --- */
.product_summary_col > * + * {
    margin-top: 18px;
}

.product_summary_col .product_motif {
    font-size: 13px;
}

.product_title {
    margin: 0;
    font-family: var(--ff_head);
    font-size: 40px;
    line-height: 1.1;
    color: var(--paper);
}

.product_summary_col .product_motif + .product_title {
    margin-top: 10px;
}

/* Группы ароматов — чипы-ссылки. Верхний margin 10px + 8px у чипов = 18px
   эффективного отступа (техника отрицательных margin перекрывает общий
   `.product_summary_col > * + *`, поэтому задаём отступ здесь явно). */
.product_groups {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 0 -8px;
}

.product_group_tag {
    margin: 8px 0 0 8px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    color: var(--paper_dim);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.product_group_tag:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on_accent);
}

/* Цена */
.product_price_row {
    margin-top: 22px;
}

.product_section .price,
.product_section .price ins {
    font-family: var(--ff_head);
    font-size: 30px;
    color: var(--gold);
    text-decoration: none;
}

.product_section .price del {
    margin-right: 10px;
    color: var(--muted);
    font-size: 20px;
    opacity: 0.7;
}

.product_section p.price {
    margin: 0;
}

/* --- Форма добавления в корзину (штатная разметка WC) --- */
.product_section form.cart {
    margin-top: 24px;
}

.product_section form.cart::after {
    content: "";
    display: table;
    clear: both;
}

/* Вариации (выбор объёма) */
.product_section table.variations {
    width: 100%;
    margin: 0 0 22px;
    border-collapse: collapse;
}

.product_section table.variations th,
.product_section table.variations td {
    display: block;
    padding: 0;
    text-align: left;
}

.product_section table.variations th.label {
    margin-bottom: 10px;
    color: var(--muted);
    font-family: var(--ff_mono);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product_section table.variations select {
    width: 100%;
    padding: 13px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    color: var(--paper);
    font-family: var(--ff_mono);
    font-size: 14px;
}

.product_section table.variations select:focus {
    outline: none;
    border-color: var(--gold);
}

.product_section .reset_variations {
    display: inline-block;
    margin-top: 10px;
    color: var(--muted);
    font-family: var(--ff_mono);
    font-size: 12px;
    text-decoration: none;
}

.product_section .reset_variations:hover {
    color: var(--gold);
}

/* Вариации кнопками (JS заменяет <select> на .vol_list/.vol_item как в карточке).
   Пока кнопки не навешаны — показывается штатный select (фолбэк без JS). */
.product_section .has_vol_buttons select,
.product_section .has_vol_buttons .reset_variations {
    display: none;
}

.product_section .vol_list {
    display: flex;
    flex-wrap: wrap;
    margin: -8px 0 0 -8px;
}

.product_section .vol_item {
    margin: 8px 0 0 8px;
    min-width: 54px;
    padding: 11px 16px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    color: var(--paper_dim);
    font-family: var(--ff_mono);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product_section .vol_item:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.product_section .vol_item.is_active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on_accent);
}

/* Цена и наличие выбранной вариации */
.product_section .woocommerce-variation-price {
    margin-bottom: 18px;
}

.product_section .woocommerce-variation-availability {
    margin-bottom: 14px;
    color: var(--paper_dim);
    font-family: var(--ff_mono);
    font-size: 13px;
}

/* Количество — степпер «− [число] +» единым блоком (кнопки добавляет JS).
   Один вид на странице товара и в корзине. */
.product_section .quantity,
.cart_section .quantity {
    display: inline-flex;
    align-items: center;
    margin-right: 14px;
    vertical-align: middle;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    background: var(--surface);
}

.product_section .quantity .qty,
.cart_section .quantity .qty {
    width: 54px;
    height: 52px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--paper);
    font-family: var(--ff_mono);
    font-size: 15px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.product_section .quantity .qty:focus,
.cart_section .quantity .qty:focus {
    outline: none;
}

/* прячем нативные стрелки-спиннеры */
.product_section .quantity .qty::-webkit-outer-spin-button,
.product_section .quantity .qty::-webkit-inner-spin-button,
.cart_section .quantity .qty::-webkit-outer-spin-button,
.cart_section .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product_section .qty_btn,
.cart_section .qty_btn {
    width: 44px;
    height: 52px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gold);
    font-family: var(--ff_mono);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.product_section .qty_btn:hover,
.cart_section .qty_btn:hover {
    background: var(--gold);
    color: var(--on_accent);
}

.product_section .qty_minus,
.cart_section .qty_minus {
    border-right: 1px solid var(--line);
}

.product_section .qty_plus,
.cart_section .qty_plus {
    border-left: 1px solid var(--line);
}

/* Кнопка «в корзину» (тег кнопки не трогаем — только вид под золотую кнопку темы).
   Селекторы с .alt и типом — чтобы перебить дефолт WC `.woocommerce button.button.alt`
   (фиолетовый), который ловится через класс woocommerce на <body>. */
.product_section .button,
.product_section button.button,
.product_section a.button,
.product_section input.button,
.product_section button.button.alt,
.product_section a.button.alt,
.product_section input.button.alt,
.product_section .single_add_to_cart_button {
    display: inline-block;
    vertical-align: middle;
    min-height: 54px;
    padding: 0 34px;
    border: 1px solid var(--gold);
    border-radius: var(--radius_sm);
    background: var(--gold);
    color: var(--bg);
    font-family: var(--ff_mono);
    font-size: 14px;
    line-height: 52px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.product_section .button:hover,
.product_section button.button:hover,
.product_section a.button:hover,
.product_section input.button:hover,
.product_section button.button.alt:hover,
.product_section a.button.alt:hover,
.product_section input.button.alt:hover,
.product_section .single_add_to_cart_button:hover {
    background: var(--gold_deep);
    border-color: var(--gold_deep);
}

/* Кнопка single-товара: класс самой кнопки добавляет специфичности (0,4,1),
   чтобы наверняка перебить дефолт WC .woocommerce button.button.alt (0,3,1)
   независимо от порядка подключения стилей. */
.product_section button.single_add_to_cart_button.button.alt,
.product_section a.single_add_to_cart_button.button.alt,
.product_section input.single_add_to_cart_button.button.alt {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg);
}

.product_section button.single_add_to_cart_button.button.alt:hover,
.product_section a.single_add_to_cart_button.button.alt:hover,
.product_section input.single_add_to_cart_button.button.alt:hover {
    background: var(--gold_deep);
    border-color: var(--gold_deep);
}

.product_section .single_add_to_cart_button.disabled,
.product_section .single_add_to_cart_button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Мета (категория) */
.product_meta_row {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line_soft);
    color: var(--paper_dim);
    font-size: 13px;
}

.product_meta_label {
    margin-right: 8px;
    color: var(--muted);
    font-family: var(--ff_mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product_meta_row a {
    color: var(--gold);
    text-decoration: none;
}

.product_meta_row a:hover {
    color: var(--paper);
}

/* --- Описание / пирамида нот --- */
.product_details {
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid var(--line_soft);
}

.product_details .section_head {
    margin-bottom: 24px;
}

.product_desc {
    max-width: 760px;
    color: var(--paper_dim);
    line-height: 1.75;
}

.product_desc p {
    margin: 0 0 14px;
}

.product_desc p:last-child {
    margin-bottom: 0;
}

.product_desc strong {
    color: var(--paper);
    font-weight: 600;
}

.product_desc a {
    color: var(--gold);
}

/* --- Похожие товары (карточки каталога) --- */
.product_section .related.products {
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid var(--line_soft);
}

.product_section .related.products > h2 {
    margin: 0 0 32px;
    font-family: var(--ff_head);
    font-size: 28px;
    color: var(--paper);
}

.product_section .related.products ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product_section .related.products ul.products::before,
.product_section .related.products ul.products::after {
    content: none;
}

.product_section .related.products ul.products li.product {
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
}

.product_section .related.products .product_media img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product_section .related.products .product_card .product_body {
    flex: 1 1 auto;
}

.product_section .related.products .product_card .product_foot {
    margin-top: auto;
}

/* Адаптив */
@media (max-width: 850px) {
    .product_main {
        padding: 32px 0 72px;
    }

    .product_layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .product_title {
        font-size: 32px;
    }

    .product_details,
    .product_section .related.products {
        margin-top: 56px;
        padding-top: 36px;
    }

    .product_section .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 520px) {
    .product_section .related.products ul.products {
        grid-template-columns: 1fr;
    }

    .product_section .quantity {
        margin: 0 0 14px;
    }

    .product_section .single_add_to_cart_button {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* === Gallery / lightbox ================================================== */
/* Галерея single-product оформлена в блоке «Карточка товара» выше. */

/* === Payment methods ===================================================== */
/* #payment .payment_methods оформлены в секции «Чекаут (Фаза 5)» выше. */

/* === Личный кабинет ([woocommerce_my_account]) ========================== */
/* Страница my-account → page-my-account.php (обёртка .wc_page.account_section).
   Разметка WC: nav.woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content
   для залогиненного; форма .woocommerce-form-login для гостя. Кнопки/инпуты
   частично унаследованы от общих блоков .wc_page (кнопки) — здесь добиваем
   раскладку, меню, формы, таблицы заказов и адреса. */

/* Раскладка: меню слева, контент справа (grid → gap разрешён). */
.account_section .woocommerce {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

/* WC вешает на .woocommerce клирфикс ::before/::after (display:table) — в
   grid-контейнере они становятся grid-элементами и занимают первую ячейку,
   ломая порядок (nav уезжает во 2-ю колонку). Убираем — клирфикс в grid не нужен. */
.account_section .woocommerce::before,
.account_section .woocommerce::after {
    display: none;
}

/* :has — когда есть навигация (залогинен), двухколоночная сетка. */
.account_section .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 240px 1fr;
    align-items: start;
}

/* --- Навигация-меню --- */
.account_section .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.account_section .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.account_section .woocommerce-MyAccount-navigation-link {
    margin: 0;
    border: 0;
}

.account_section .woocommerce-MyAccount-navigation-link + .woocommerce-MyAccount-navigation-link {
    margin-top: 2px;
}

.account_section .woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 11px 16px;
    border-radius: var(--radius_sm);
    color: var(--paper_dim);
    font-family: var(--ff_mono);
    font-size: 13px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.account_section .woocommerce-MyAccount-navigation-link a:hover {
    background: var(--surface_2);
    color: var(--paper);
}

.account_section .woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--gold);
    color: var(--bg);
}

.account_section .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--muted);
}

/* --- Контент --- */
.account_section .woocommerce-MyAccount-content {
    float: none;
    width: auto;
}

.account_section .woocommerce-MyAccount-content p {
    margin: 0 0 16px;
    color: var(--paper_dim);
    line-height: 1.6;
}

.account_section .woocommerce-MyAccount-content a {
    color: var(--gold);
}

.account_section .woocommerce-MyAccount-content a:hover {
    color: var(--gold_deep);
}

.account_section .woocommerce-MyAccount-content h2,
.account_section .woocommerce-MyAccount-content h3 {
    margin: 0 0 18px;
    font-family: var(--ff_head);
    font-weight: 400;
    color: var(--paper);
}

/* Информационные плашки WC внутри кабинета (пустые заказы, подтверждение e-mail) */
.account_section .woocommerce-info,
.account_section .woocommerce-message {
    margin: 0 0 18px;
    padding: 14px 18px;
    background: var(--surface);
    border: 0;
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius_sm) var(--radius_sm) 0;
    color: var(--paper_dim);
    list-style: none;
}

.account_section .woocommerce-info::before,
.account_section .woocommerce-message::before {
    display: none;
}

/* --- Заголовок входа/формы для гостя --- */
.account_section .woocommerce > h2 {
    margin: 0 0 20px;
    font-family: var(--ff_head);
    font-weight: 400;
    font-size: 24px;
    color: var(--paper);
}

/* Форма входа гостя — компактной карточкой */
.account_section .woocommerce-form-login {
    max-width: 460px;
    margin: 0;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.account_section .woocommerce-form-login .lost_password {
    margin: 14px 0 0;
}

.account_section .woocommerce-form-login .lost_password a {
    color: var(--muted);
    font-family: var(--ff_mono);
    font-size: 13px;
}

/* --- Вход + Регистрация в виде табов (гость, #customer_login) --- */
/* JS (#account tabs в script.js) строит .account_tabs и переключает классы
   .show_login / .show_register на #customer_login. Карточка по центру страницы. */
.account_section #customer_login.account_login_tabs {
    max-width: 460px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

/* WC-клирфикс col2-set — #customer_login блочный, прячем псевдоэлементы. */
.account_section #customer_login.account_login_tabs::before,
.account_section #customer_login.account_login_tabs::after {
    display: none;
}

.account_section .account_tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
}

.account_section .account_tab {
    flex: 1;
    padding: 16px 10px;
    margin-bottom: -1px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-family: var(--ff_mono);
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.account_section .account_tab:hover {
    color: var(--paper);
}

.account_section .account_tab.is_active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* Колонки = панели: сброс флоатов WC, паддинг, показ только активной. */
.account_section #customer_login .u-column1,
.account_section #customer_login .u-column2 {
    width: auto;
    float: none;
    padding: 28px;
}

.account_section #customer_login.show_login .u-column2,
.account_section #customer_login.show_register .u-column1 {
    display: none;
}

/* Заголовки форм скрыты — их роль выполняют табы. */
.account_section #customer_login .u-column1 > h2,
.account_section #customer_login .u-column2 > h2 {
    display: none;
}

/* Внутренние карточки форм гасим (WC по умолчанию рисует border+padding на
   form.login и form.register) — карточка теперь одна, на #customer_login. */
.account_section #customer_login .woocommerce-form-login,
.account_section #customer_login .woocommerce-form-register {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Кнопка показа пароля WC — в правом крае поля, не раздвигает layout. */
.account_section .password-input {
    display: block;
    position: relative;
}

.account_section .password-input .input-text {
    padding-right: 44px;
}

.account_section .password-input .show-password-input {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* --- Поля форм (вход / анкета / адрес) — паттерн чекаута, scope .account_section --- */
.account_section .woocommerce form .form-row {
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    float: none;
}

.account_section label {
    display: block;
    margin-bottom: 8px;
    color: var(--paper_dim);
    font-family: var(--ff_mono);
    font-size: 12px;
}

.account_section .required {
    color: var(--gold);
    border: 0;
}

.account_section .woocommerce form .form-row .input-text,
.account_section .woocommerce form .form-row textarea,
.account_section .woocommerce form .form-row select,
.account_section .woocommerce-form-row .input-text {
    width: 100%;
    padding: 13px 15px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius_sm);
    color: var(--paper);
    font-family: var(--ff_base);
    font-size: 15px;
}

.account_section .woocommerce form .form-row .input-text::placeholder,
.account_section .woocommerce form .form-row textarea::placeholder {
    color: var(--muted);
}

.account_section .woocommerce form .form-row .input-text:focus,
.account_section .woocommerce form .form-row textarea:focus,
.account_section .woocommerce form .form-row select:focus,
.account_section .woocommerce-form-row .input-text:focus {
    outline: none;
    border-color: var(--gold);
}

.account_section input[type="radio"],
.account_section input[type="checkbox"] {
    accent-color: var(--gold);
}

/* Подсказка под полем (например, «отображаемое имя») */
.account_section .woocommerce-MyAccount-content em,
.account_section #account_display_name_description {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

/* Строка «Запомнить меня» + «Войти» — на одной линии, по центру по вертикали. */
.account_section .woocommerce-form-login .form-row:not(.form-row-wide) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Чекбокс «Запомнить меня» — лейбл в строку, чекбокс по центру с текстом. */
.account_section .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    margin: 0;
}

.account_section .woocommerce-form-login__rememberme input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
    flex-shrink: 0;
    accent-color: var(--gold);
    cursor: pointer;
}

.account_section .woocommerce-form-login__rememberme span {
    color: var(--paper_dim);
    font-family: var(--ff_base);
    font-size: 14px;
}

/* Регистрация: строка про пароль — отступ снизу, чтобы не слипалась с кнопкой. */
.account_section .woocommerce-form-register > p:not([class]) {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Кнопка «Регистрация» — на всю ширину карточки. */
.account_section .woocommerce-form-register__submit {
    width: 100%;
}

/* --- Анкета: блок смены пароля --- */
.account_section fieldset {
    margin: 28px 0 0;
    padding: 24px 0 0;
    border: 0;
    border-top: 1px solid var(--line_soft);
}

.account_section fieldset legend {
    padding: 0;
    margin: 0 0 18px;
    font-family: var(--ff_head);
    font-size: 18px;
    color: var(--paper);
}

/* --- Адреса (edit-address, col2-set) --- */
.account_section .woocommerce-Addresses.col2-set {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Тот же клирфикс ::before/::after ломает grid и здесь — убираем. */
.account_section .woocommerce-Addresses.col2-set::before,
.account_section .woocommerce-Addresses.col2-set::after {
    display: none;
}

.account_section .woocommerce-Address {
    width: auto;
    float: none;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* Заголовок адреса: название сверху, ссылка «Изменить…» мелкой строкой под ним. */
.account_section .woocommerce-Address-title {
    display: block;
    margin-bottom: 14px;
}

.account_section .woocommerce-Address-title h2,
.account_section .woocommerce-Address-title h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

.account_section .woocommerce-Address-title .edit {
    font-family: var(--ff_mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.account_section .woocommerce-Address address {
    color: var(--paper_dim);
    font-style: normal;
    line-height: 1.7;
}

/* --- Таблица заказов --- */
.account_section .woocommerce-orders-table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    border-collapse: collapse;
    overflow: hidden;
    background: var(--surface);
}

.account_section .woocommerce-orders-table th,
.account_section .woocommerce-orders-table td {
    padding: 14px 16px;
    border-top: 1px solid var(--line_soft);
    color: var(--paper);
    text-align: left;
}

.account_section .woocommerce-orders-table thead th {
    background: var(--surface_2);
    border-top: 0;
    font-family: var(--ff_mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--paper_dim);
}

/* === Мобильный личный кабинет ============================================ */
@media (max-width: 850px) {
    .account_section .woocommerce,
    .account_section .woocommerce:has(.woocommerce-MyAccount-navigation) {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .account_section .woocommerce-Addresses.col2-set {
        grid-template-columns: 1fr;
    }

    /* Меню — вертикальной карточкой на всю ширину над контентом (ничего не
       прячется за скроллом). Базовый вертикальный список уже подходит. */
    .account_section .woocommerce-Address-title .edit {
        word-break: break-word;
    }
}