/*
Theme Name: ДиаВитра
Theme URI: https://diavitra.ru/
Description: Тема интернет-магазина ДиаВитра. Вёрстка перенесена с прежнего сайта на OpenCart 3: стили, шрифты и структура блоков сохранены, шаблоны переписаны под WordPress и WooCommerce.
Author: Диавитра
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diavitra
Tags: e-commerce, custom-colors, custom-menu, two-columns
*/

/*
 * Оформление лежит в assets/css/main-new.css — это перенесённый без изменений
 * скомпилированный стиль прежнего сайта. Здесь только то, что относится
 * к самому WordPress и к вставкам WooCommerce, которых в старой вёрстке не было.
 */

/* Служебные классы WordPress, которых не было в исходной вёрстке */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    white-space: normal;
}

.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 0 auto 1em; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: #6d6d6d; }

img.wp-post-image,
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/*
 * Пропорции картинок товара.
 *
 * Шаблоны OpenCart выводили <img src alt> без размеров, поэтому в перенесённом
 * main-new.css у картинок задан только max-width: 100%. WordPress же добавляет
 * атрибуты width и height — и высота остаётся жёсткой, пока ширина ужимается
 * под колонку: картинка вытягивается по вертикали. Возвращаем высоту к auto.
 */
.cat-items .item .cols .image img,
.section-catalog-item .cols .image img,
.cart-mini .item .image img {
    height: auto;
}

/* Сообщения WooCommerce: в старой теме их аналогов не было */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    list-style: none;
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid #e2e2e2;
    background: #fbfbfb;
    font-size: 15px;
    line-height: 1.4;
}

.woocommerce-message { border-color: #6cb644; background: #f3faef; }
.woocommerce-error   { border-color: #e5291f; background: #fdf1f0; }
.woocommerce-error li { margin: 0; }

.woocommerce-message .button,
.woocommerce-info .button {
    float: right;
    margin-left: 15px;
}

/* Значок WooCommerce в начале сообщения рассчитан на его отступ слева —
   в рамке темы он налезает на текст */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

/* На телефоне кнопка — под текстом, иначе текст сжимается в узкий столбик.
   Вес — как у правила woocommerce-layout.css, которое её прижимает вправо */
@media (max-width: 768px) {
    .woocommerce .woocommerce-message .button,
    .woocommerce .woocommerce-info .button,
    .woocommerce-page .woocommerce-message .button,
    .woocommerce-page .woocommerce-info .button {
        float: none;
        margin: 12px 0 0;
    }

    /* В разметке кнопка стоит перед текстом — опускаем её под текст */
    .woocommerce-message:has(> .button),
    .woocommerce-info:has(> .button) {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}

/* Постраничная навигация */
.dv-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 25px;
}

.dv-pagination .page-numbers {
    display: block;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    font-size: 15px;
    color: #232323;
    transition: all 0.2s ease-out;
}

.dv-pagination .page-numbers:hover { border-color: #6cb644; color: #6cb644; }

.dv-pagination .page-numbers.current {
    background: #6cb644;
    border-color: #6cb644;
    color: #fff;
}

/* Пустой результат */
.dv-empty {
    padding: 30px 0;
    font-size: 16px;
    color: #53586b;
}

/* -------------------------------------------------------------------------
 * Списки WooCommerce внутри текстовых блоков
 *
 * В перенесённой вёрстке у списков есть декоративный маркер:
 *   .text ul li        { padding-left: 40px; margin-left: 30px; }
 *   .text ul li:before { content:""; position:absolute; left:0; ... }
 *
 * Он рассчитан на editorial-контент. Служебные списки WooCommerce (сводка
 * заказа, корзина, кабинет) выводятся внутри того же .text, но своими
 * стилями обнуляют padding-left — и маркер, привязанный к left: 0,
 * оказывается поверх текста. Снимаем оформление для них.
 * ------------------------------------------------------------------------- */

.text ul[class*="woocommerce"] li,
.text ul[class*="wc-block"] li,
.text ol[class*="woocommerce"] li,
.text ol[class*="wc-block"] li {
    padding-left: 0;
    margin-left: 0;
}

.text ul[class*="woocommerce"] li::before,
.text ul[class*="wc-block"] li::before,
.text ol[class*="woocommerce"] li::before,
.text ol[class*="wc-block"] li::before {
    content: none;
}

/* Сводка заказа на странице «Заказ принят»: разделители между колонками */
.text ul.order_details li {
    padding-right: 2em;
    margin-right: 2em;
}

.text ul.order_details li:last-of-type {
    padding-right: 0;
    margin-right: 0;
}

/* -------------------------------------------------------------------------
 * Модальные формы
 *
 * Окно — разметка layer_up() прежнего сайта (template-parts/forms.php),
 * его вид задаёт main-new.css: затемнение .layer, круглая бирюзовая кнопка
 * .close справа от окна, на телефоне — над ним. Прежний скрипт создавал окно
 * в момент открытия и включал его стилями на лету; здесь окно в разметке
 * заранее, поэтому добавлено только это.
 * ------------------------------------------------------------------------- */

.layer[hidden] { display: none; }

.layer .layer-block { visibility: visible; }

/* Карточка формы в main-new.css скрыта: скрипт показывал её копию в окне */
.layer .layer-block > .form { display: block; }

/* Окно проявляется, как после fadeIn() в layer_up() */
.layer:not([hidden]) .layer-block { animation: dv-fade-in 0.4s; }

@keyframes dv-fade-in {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .layer:not([hidden]) .layer-block { animation: none; }
}

/* Крестик — кнопка, а не ссылка, как было: снимаем собственный вид кнопки */
.layer .layer-block > .close {
    padding: 0;
    font: inherit;
    appearance: none;
}

/* Общее правило .close гасит outline — возвращаем рамку фокуса для клавиатуры */
.layer .layer-block > .close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

body.body-blur { overflow: hidden; }

/*
 * Поле телефона.
 *
 * В main-new.css поля оформлены выборочно по типу — input[type="text"]
 * и input[type="email"]. Телефон у нас type="tel": так на мобильных
 * открывается цифровая клавиатура. Повторяем для него то же оформление,
 * чтобы не трогать перенесённый файл стилей.
 */
.form-order input[type="tel"],
.form-message input[type="tel"] {
    display: block;
    width: 100%;
    background: #fbfbfb;
    border: 1px solid #e2e2e2;
    height: 50px;
    padding: 0 29px;
    font-family: inherit;
    font-weight: 300;
    font-size: 16px;
}

/* Ловушка для ботов: поле не должно видеть ни человек, ни скринридер */
.dv-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.dv-form-result {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

/* Пустой блок ответа не должен раздувать окно: оно выше, чем было, на отступ */
.dv-form-result:empty { margin-top: 0; }

.dv-form-result.is-ok    { color: #2fa244; }
.dv-form-result.is-error { color: #e5291f; }

/* -------------------------------------------------------------------------
 * Слайдер на главной
 *
 * Оформление — исходное .section-slider из main-new.css. Прежде слайды
 * листал slick, который и прятал неактивные. Его нет, поэтому показываем
 * только слайд с .is-active — иначе все три встали бы друг под другом.
 * ------------------------------------------------------------------------- */

.section-slider .item { display: none; }
.section-slider .item.is-active { display: block; }

/* Ссылкой слайд делаем, только если у него есть адрес — наследуем цвет */
.section-slider a.item { color: inherit; }

/*
 * Стрелки — кнопки. В исходной вёрстке это были ссылки, оформление
 * рассчитано на <a>: снимаем собственный вид кнопки.
 */
.section-slider .prev,
.section-slider .next {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    appearance: none;
    z-index: 2;
}

/* -------------------------------------------------------------------------
 * Слайдер «Бренды» на главной
 *
 * Разметка и оформление — product/manufacturers_slider.twig и main-new.css.
 * Листал ленту slick из прежней сборки: по 4 бренда, уже 992px — по 3,
 * уже 768px — по 2 и без стрелок, уже 500px — по одному. Здесь лента —
 * прокручиваемый ряд с привязкой к плитке: стрелки листают его на ширину
 * видимой части (initBrandsSlider() в assets/js/theme.js), пальцем — свайпом.
 * ------------------------------------------------------------------------- */

.section-home-brands .items {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.section-home-brands .items::-webkit-scrollbar { display: none; }

.section-home-brands .items .item {
    flex: 0 0 25%;
    scroll-snap-align: start;
}

@media (max-width: 991px) {
    .section-home-brands .items .item { flex-basis: 33.3333%; }
}

@media (max-width: 767px) {
    .section-home-brands .items .item { flex-basis: 50%; }

    .section-home-brands .brands .prev,
    .section-home-brands .brands .next { display: none; }
}

@media (max-width: 499px) {
    .section-home-brands .items .item { flex-basis: 100%; }
}

/* Логотипы разной формы вписываются в ячейку с сохранением пропорций —
   на прежнем сайте картинки выводились без атрибутов размера */
.section-home-brands .items .item .image img {
    width: auto;
    height: auto;
}

/* Стрелки — кнопки, а не ссылки: снимаем собственный вид кнопки */
.section-home-brands .brands .prev,
.section-home-brands .brands .next {
    padding: 0;
    border: 0;
    background: none;
    appearance: none;
}

/* -------------------------------------------------------------------------
 * «Рекомендуемые товары» на странице товара
 *
 * Разметка и оформление — product.twig и main-new.css. Slick показывал по две
 * карточки, уже 992px — по одной, уже 600px — без стрелок; высоту ряда брал
 * по видимым карточкам, не вытягивая их. Лента — как у «Брендов»:
 * прокрутка с привязкой к карточке, листает carousel() в theme.js.
 * Ширина карточки — как у slick: ряд шире на отступы (margin: 0 -15px),
 * у карточки по 15px с каждой стороны.
 * ------------------------------------------------------------------------- */

.section-cat-items-rec .cat-items {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
    scrollbar-width: none;
}

.section-cat-items-rec .cat-items::-webkit-scrollbar { display: none; }

.section-cat-items-rec .cat-items .item {
    flex: 0 0 calc(50% - 30px);
    scroll-snap-align: start;
}

@media (max-width: 991px) {
    .section-cat-items-rec .cat-items .item { flex-basis: calc(100% - 30px); }
}

@media (max-width: 599px) {
    .section-cat-items-rec .cat-items-rec .prev,
    .section-cat-items-rec .cat-items-rec .next { display: none; }
}

.section-cat-items-rec .cat-items-rec .prev,
.section-cat-items-rec .cat-items-rec .next {
    padding: 0;
    border: 0;
    background: none;
    appearance: none;
}

/* -------------------------------------------------------------------------
 * Страницы корзины, оформления и кабинета
 *
 * Их рисует WooCommerce своими шаблонами — задаём минимум, чтобы они
 * не выбивались из вёрстки.
 * ------------------------------------------------------------------------- */

.dv-shop-page table { width: 100%; border-collapse: collapse; }
.dv-shop-page table th,
.dv-shop-page table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e2e2e2;
    text-align: left;
    vertical-align: middle;
}

.dv-shop-page .button,
.dv-shop-page button[type="submit"] {
    display: inline-block;
    padding: 12px 26px;
    border: 0;
    border-radius: 8px;
    background: #6cb644;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease-out;
}

.dv-shop-page .button:hover,
.dv-shop-page button[type="submit"]:hover { background: #2fa244; }

.dv-shop-page input[type="text"],
.dv-shop-page input[type="email"],
.dv-shop-page input[type="tel"],
.dv-shop-page input[type="password"],
.dv-shop-page textarea,
.dv-shop-page select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
}

.dv-shop-page .form-row { margin-bottom: 14px; }

/*
 * Отступ над полем «Страна/регион» в адресе доставки.
 *
 * Форма адреса — это flex с gap: 0 12px, то есть вертикального зазора у сетки
 * нет вовсе: расстояние между строками держится на margin-top каждого поля
 * (12px). У поля страны этот отступ обнуляется собственным правилом
 * WooCommerce для шага оформления, и оно прилипает к строке с именем.
 *
 * Возвращаем общий ритм. Через :not(:first-child) — если в другой локали
 * страна окажется первым полем, лишний отступ сверху не появится.
 */
.wc-block-components-address-form .wc-block-components-country-input:not(:first-child),
.wc-block-components-form .wc-block-components-checkout-step .wc-block-components-address-form .wc-block-components-country-input:not(:first-child) {
    margin-top: 12px;
}

/* -------------------------------------------------------------------------
 * Мобильное меню
 *
 * В main-new.css .menu-layer оформлена, но показа у неё нет: прежний скрипт
 * создавал панель в момент открытия и удалял при закрытии. Отдаём её
 * разметкой сразу и управляем видимостью здесь.
 * ------------------------------------------------------------------------- */

.menu-layer[hidden],
.menu-layer .nav[hidden] { display: none; }

/* Телефоны и «Заказать звонок» — только на первом уровне, как в make_nav() */
.menu-layer.mobile-menu-has-back .phones { display: none; }

/*
 * «Назад» и «Закрыть» — кнопки. В перенесённой вёрстке они были ссылками,
 * поэтому оформление рассчитано на <a>: снимаем собственный вид кнопки.
 * Только цвет фона, а не весь фон: крестик на телефоне — картинка
 * close_menu.svg фоном (main-new.css), её трогать нельзя. Стрелку «назад»
 * рисует глиф .icon-prev из шрифта иконок, как на прежнем сайте.
 */
.menu-layer .top .prev,
.menu-layer .top .close {
    padding: 0;
    border: 0;
    background-color: transparent;
    font-family: inherit;
    appearance: none;
}

/* -------------------------------------------------------------------------
 * Юридические страницы (шаблон page-legal.php)
 *
 * Фон и отступ под классом legal-page уже есть в main-new.css. Выделенный
 * текст вне ссылок custom.js прежнего сайта красил инлайном в тёмный —
 * иначе заголовки разделов, набранные <strong>, выходили зелёными
 * по общему правилу .text strong.
 * ------------------------------------------------------------------------- */

body.legal-page strong:not(a strong),
body.legal-page b:not(a b) {
    color: #232323;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Личный кабинет: иконка в шапке
 *
 * Стоит перед корзиной (header.php) на том же расстоянии, на каком корзина
 * от телефонов: 20px отступа плюс 30px внутреннего поля .cart-info — зоны,
 * где открывается мини-корзина. Цвет в покое — как у корзины, при
 * наведении — зелёный кнопки cookie, в самом кабинете — красный
 * «Заказать звонок».
 * ------------------------------------------------------------------------- */

.section-header .header .rcol .account-link {
    display: block;
    margin-right: 20px;
    transition: color 0.3s ease-out;
}

.section-header .header .rcol .account-link svg { display: block; }

.section-header .header .rcol .account-link:hover { color: #7eb454; }

.section-header .header .rcol .account-link.active,
.section-header .header .rcol .account-link.active:hover { color: #e5291f; }

/* Та же иконка в верхней строке мобильного меню (template-parts/mobile-menu.php) */
.menu-layer .top .mobile-menu-account {
    display: block;
    flex-shrink: 0;
    color: #232323;
    transition: color 0.3s ease-out;
}

.menu-layer .top .mobile-menu-account svg { display: block; }

.menu-layer .top .mobile-menu-account:hover { color: #7eb454; }

.menu-layer .top .mobile-menu-account.active,
.menu-layer .top .mobile-menu-account.active:hover { color: #e5291f; }

/*
 * Телефон: логотип, кабинет, корзина и меню стоят на равных промежутках
 * (просьба пользователя). В открытом меню — так же, с крестиком на месте
 * «бургера», чтобы при открытии ничего не сдвигалось.
 *
 * Ряд шапки .header и так раскладывается space-between; .rcol растворяется
 * (display: contents), и значки делят свободное место поровну с логотипом.
 * Промежутки считаются по рисунку, а не по рамкам: отрицательные поля
 * снимают пустые края — у логотипа справа 3px, у кабинета по 1,5px, у
 * корзины и крестика по 2px. Меньше 10px промежуток не становится:
 * на узком экране ужимается логотип. Крестик и «бургер» — в 30px от края.
 */
@media (max-width: 768px) {
    .section-header .header { gap: 10px; }

    .section-header .header .logo { margin-right: -3px; }

    .section-header .header .rcol { display: contents; }

    .section-header .header .rcol .account-link {
        flex-shrink: 0;
        margin: 0 -1.5px;
    }

    /* Поле .cart-info — зона наведения мини-корзины, на телефоне её нет */
    .section-header .header .rcol .cart-info {
        flex-shrink: 0;
        width: 24px;
        margin: 0 -2px;
        padding: 0;
    }

    .section-header .header .rcol .open-nav {
        flex-shrink: 0;
        margin-right: 15px;
    }

    .menu-layer .top.mobile-menu-header {
        justify-content: space-between;
        gap: 10px;
        padding-right: 32px;
    }

    /* Логотип той же высоты, что в шапке: строка меню на 1px ниже из-за рамки */
    .menu-layer .top.mobile-menu-header .mobile-menu-logo { margin-right: -3px; }

    .menu-layer .top.mobile-menu-header .mobile-menu-logo img { height: 54px; }

    .menu-layer .top.mobile-menu-header .mobile-menu-account { margin: 0 -1.5px; }

    /* В main-new.css корзина и крестик стояли поверх строки на right: 94px / 30px */
    html body .menu-layer .top.mobile-menu-header .mobile-menu-cart {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        flex-shrink: 0;
        margin: 0 -2px !important;
        transform: none !important;
    }

    .menu-layer .top.mobile-menu-header .close {
        position: static;
        flex-shrink: 0;
        margin: 0 -2px;
        transform: none;
    }
}

/*
 * Шире телефона значки стоят группой справа, по 30px между рисунками:
 * равные промежутки с логотипом растянули бы их по всей ширине планшета.
 */
@media (min-width: 481px) and (max-width: 768px) {
    .section-header .header .rcol .account-link,
    .menu-layer .top.mobile-menu-header .mobile-menu-account { margin-left: auto; }

    .section-header .header .rcol .cart-info { margin-left: 19px; }

    html body .menu-layer .top.mobile-menu-header .mobile-menu-cart { margin-left: 19px !important; }

    .section-header .header .rcol .open-nav { margin-left: 21px; }

    .menu-layer .top.mobile-menu-header .close { margin-left: 19px; }
}

/* -------------------------------------------------------------------------
 * Личный кабинет: вход, регистрация, сброс пароля
 *
 * Карточки — как окно «Заказать звонок» (.form-order в main-new.css):
 * те же подписи, поля, флажки и кнопка. Окно там белое на затемнении,
 * на белой странице карточку выделяет тень закреплённой шапки.
 * Селекторы через #customer_login: у правил WooCommerce для форм входа
 * (.woocommerce form.login, .woocommerce button.button:disabled[disabled])
 * вес больше, чем у классов темы.
 * ------------------------------------------------------------------------- */

.dv-account-forms {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    padding: 10px 0 20px;
}

#customer_login .form-account,
.woocommerce-account .dv-shop-page form.lost_reset_password {
    width: 460px;
    max-width: 100%;
    padding: 40px 50px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    text-align: left;
}

#customer_login .form-account form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

/*
 * Карточки одной высоты, кнопки «Войти» и «Зарегистрироваться» — на одной
 * линии: форма растянута на всю карточку, кнопка прижата к низу. Под
 * кнопкой входа — «Забыли пароль?» (20px отступа + строка 20px), под
 * кнопкой регистрации оставлено столько же места.
 */
#customer_login .form-account {
    display: flex;
    flex-direction: column;
}

#customer_login .form-account form {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

#customer_login .form-account .buttons { margin-top: auto; }

#customer_login .form-account form.register .buttons { margin-bottom: 40px; }

#customer_login .form-account .title {
    padding-bottom: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 22px;
    text-transform: uppercase;
}

#customer_login .form-account .label,
.woocommerce-account .dv-shop-page form.lost_reset_password label {
    display: block;
    padding: 15px 30px;
    font-size: 15px;
    line-height: 1;
}

#customer_login .form-account .input-text,
.woocommerce-account .dv-shop-page form.lost_reset_password .input-text {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 29px;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    background: #fbfbfb;
    font-family: inherit;
    font-weight: 300;
    font-size: 16px;
    line-height: normal;
    color: #232323;
    box-shadow: none;
}

#customer_login .form-account .input-text:focus,
.woocommerce-account .dv-shop-page form.lost_reset_password .input-text:focus {
    border-color: #6cb644;
    outline: 0;
}

#customer_login .form-account .note {
    margin: 0;
    padding: 15px 30px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #53586b;
}

/* Флажки — квадрат с зелёной точкой, как в окне; поле скрыто, но остаётся
   доступным с клавиатуры: рамку фокуса получает нарисованный квадрат */
#customer_login .form-account .checkbox {
    margin-top: 20px;
    font-size: 14px;
}

#customer_login .form-account .agree {
    margin-top: 30px;
    font-size: 12px;
}

#customer_login .form-account .agree a { color: #6cb644; }

#customer_login .form-account .checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    line-height: 17px;
    cursor: pointer;
}

#customer_login .form-account .checkbox label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 17px;
    height: 17px;
    border: 1px solid #e2e2e2;
    background: #fbfbfb;
}

#customer_login .form-account .checkbox label:after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 11px;
    height: 11px;
    background: #6cb644;
    display: none;
}

#customer_login .form-account .checkbox label.active:after { display: block; }

#customer_login .form-account .checkbox input {
    position: absolute;
    left: 0;
    top: 0;
    width: 17px;
    height: 17px;
    margin: 0;
    opacity: 0;
}

#customer_login .form-account .checkbox label:has(input:focus-visible):before {
    outline: 2px solid #6cb644;
    outline-offset: 2px;
}

/* Кнопка — круглая зелёная .button темы, как «Заказать звонок» */
#customer_login .form-account .buttons {
    padding-top: 30px;
    text-align: center;
}

#customer_login .form-account .buttons .button,
.woocommerce-account .dv-shop-page form.lost_reset_password .button {
    display: inline-block;
    height: 45px;
    padding: 0 40px;
    border: 0;
    border-radius: 45px;
    background: #6cb644;
    color: #fff;
    font-family: inherit;
    font-weight: 400;
    font-size: 13px;
    line-height: 45px;
    text-transform: uppercase;
    opacity: 1;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

#customer_login .form-account .buttons .button:hover,
.woocommerce-account .dv-shop-page form.lost_reset_password .button:hover {
    background: #2fa244;
    color: #fff;
}

#customer_login .form-account .buttons .button:disabled,
#customer_login .form-account .buttons .button:disabled:hover {
    padding: 0 40px;
    background: #6cb644;
    color: #fff;
    opacity: 0.3;
    cursor: default;
}

#customer_login .form-account .lost {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

/* Сброс пароля: та же карточка, одно поле на всю ширину */
.woocommerce-account .dv-shop-page form.lost_reset_password {
    margin: 10px auto 20px;
}

.woocommerce-account .dv-shop-page form.lost_reset_password > p:first-child {
    margin: 0 0 5px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: #53586b;
}

.woocommerce-account .dv-shop-page form.lost_reset_password .form-row {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.woocommerce-account .dv-shop-page form.lost_reset_password .form-row:last-of-type {
    padding-top: 30px;
    text-align: center;
}

.woocommerce-account .dv-shop-page form.lost_reset_password label .required { display: none; }

@media (max-width: 768px) {
    .dv-account-forms {
        flex-direction: column;
        align-items: stretch;
    }

    /* Карточки друг под другом — выравнивать нечего */
    #customer_login .form-account form.register .buttons { margin-bottom: 0; }

    #customer_login .form-account,
    .woocommerce-account .dv-shop-page form.lost_reset_password {
        width: 100%;
        padding: 40px 15px;
    }
}

/* -------------------------------------------------------------------------
 * Личный кабинет после входа
 *
 * Меню разделов слева — разметка и вид списка категорий каталога
 * (woocommerce/myaccount/navigation.php), раздел — справа. Шаблоны разделов
 * WooCommerce оставлены как есть: поля, кнопки и таблицы приведены к виду
 * окна «Заказать звонок» и кнопок темы.
 * ------------------------------------------------------------------------- */

.woocommerce-account .dv-shop-page .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 40px;
}

.woocommerce-account .dv-shop-page .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
    flex: 0 0 100%;
}

/* Clearfix WooCommerce (::before/::after с display: table) во flex стал бы
   лишними элементами ряда и сдвинул меню на отступ между колонками */
.woocommerce-account .dv-shop-page .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.woocommerce-account .dv-shop-page .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
    content: none;
}

.woocommerce-account .dv-shop-page .woocommerce-MyAccount-navigation {
    float: none;
    flex: 0 0 280px;
    width: 280px;
}

.woocommerce-account .dv-shop-page .woocommerce-MyAccount-content {
    float: none;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* Меню стоит внутри .text — снимаем маркеры и отступы текстовых списков,
   ссылкам возвращаем цвет списка категорий */
.text .woocommerce-MyAccount-navigation .nav { margin: 0; }

.text .woocommerce-MyAccount-navigation .nav li {
    padding: 0;
    margin: 0;
}

.text .woocommerce-MyAccount-navigation .nav li::before { content: none; }

.text .woocommerce-MyAccount-navigation .nav li a { color: #232323; }

.text .woocommerce-MyAccount-navigation .nav li a.active,
.text .woocommerce-MyAccount-navigation .nav li a:hover { color: #fff; }

@media (max-width: 768px) {
    .woocommerce-account .dv-shop-page .woocommerce:has(> .woocommerce-MyAccount-navigation) {
        flex-direction: column;
        align-items: stretch;
    }

    .woocommerce-account .dv-shop-page .woocommerce-MyAccount-navigation {
        flex-basis: auto;
        width: 100%;
        margin-bottom: 30px;
    }
}

/* Подзаголовки разделов («Информация о заказе», «Платёжный адрес») */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    margin: 30px 0 15px;
    font-weight: 600;
    font-size: 18px;
    text-transform: uppercase;
    color: #53586b;
}

.woocommerce-account .woocommerce-MyAccount-content > :first-child,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2 { margin-top: 0; }

/* Таблицы заказов: без рамки, строки разделены линией, как списки темы */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    margin: 0 0 30px;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    padding: 14px 10px;
    border: 0;
    border-bottom: 1px solid #ececec;
    font-size: 15px;
    line-height: 1.4;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
    border-bottom-color: #e2e2e2;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    color: #53586b;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot td {
    border-top: 0;
    font-weight: 600;
}

/* Суммы в составе заказа не переносятся посреди числа */
.woocommerce-account .woocommerce-table--order-details td.product-total,
.woocommerce-account .woocommerce-table--order-details tfoot td { white-space: nowrap; }

/*
 * На телефоне WooCommerce раскладывает таблицу заказов в карточки и прячет
 * ячейки-заголовки строк (tbody th) — а номер заказа как раз такая ячейка.
 * Показываем её с подписью, как остальные ячейки.
 */
@media (max-width: 768px) {
    .woocommerce-account table.shop_table_responsive tbody th {
        display: block;
        text-align: right;
    }

    .woocommerce-account table.shop_table_responsive tbody th::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
    }
}

/* Кнопки разделов — круглые зелёные .button темы; в таблицах — поменьше */
.woocommerce-account .woocommerce-MyAccount-content .button {
    display: inline-block;
    height: 45px;
    padding: 0 30px;
    border: 0;
    border-radius: 45px;
    background: #6cb644;
    color: #fff;
    font-family: inherit;
    font-weight: 400;
    font-size: 13px;
    line-height: 45px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.3s ease-out;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover {
    background: #2fa244;
    color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button {
    height: 36px;
    padding: 0 20px;
    font-size: 11px;
    line-height: 36px;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button + .button { margin-left: 6px; }

/* Поля разделов «Адреса» и «Личные данные» — как в окне «Заказать звонок» */
.woocommerce-account .woocommerce-MyAccount-content form .form-row label {
    font-size: 15px;
    line-height: 2;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row .input-text,
.woocommerce-account .woocommerce-MyAccount-content form .form-row select {
    height: 50px;
    padding: 0 20px;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    background: #fbfbfb;
    font-family: inherit;
    font-weight: 300;
    font-size: 16px;
    color: #232323;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row textarea.input-text {
    height: 120px;
    padding: 15px 20px;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row .input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content form .form-row select:focus {
    border-color: #6cb644;
    outline: 0;
}

/* Страна и регион — выпадающие списки selectWoo */
.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection--single {
    height: 50px;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    background: #fbfbfb;
}

.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection--single .select2-selection__rendered {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    line-height: 48px;
    font-weight: 300;
    font-size: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection--single .select2-selection__arrow { height: 48px; }

.woocommerce-account .woocommerce-MyAccount-content fieldset {
    margin: 30px 0 0;
    padding: 0;
    border: 0;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
    padding: 0 0 10px;
    font-weight: 600;
    font-size: 18px;
    text-transform: uppercase;
    color: #53586b;
}

.woocommerce-account .woocommerce-MyAccount-content .button[name="save_address"],
.woocommerce-account .woocommerce-MyAccount-content .button[name="save_account_details"] { margin-top: 20px; }

/* Адреса в заказе — без рамки WooCommerce */
.woocommerce-account .woocommerce-MyAccount-content address {
    padding: 0;
    border: 0;
    font-style: normal;
    line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Корзина
 *
 * По макету дизайнера: серый блок .section-cart (#f7f6f4) прежнего сайта,
 * таблица товаров слева и «Сумма корзины» справа (384px, отступ 22px).
 * Шапка и ячейки таблицы, линии #ddd и счётчик «− число +» — из main-new.css
 * (.section-cart table): отступы 22px/20px совпадают с макетом. Заголовки,
 * название и суммы — Fira Sans 500 (Medium), как на макете; кнопки —
 * зелёные #7eb454, текст без капслока.
 * ------------------------------------------------------------------------- */

/*
 * Начертание 500 загружается ради корзины (functions.php). У заголовков
 * подвала 500 стояло и в оригинале, но там оно не загружалось, и браузер
 * показывал обычное — оставляем их такими.
 */
.footer-title,
.footer-mobile-title { font-weight: 400; }

.dv-cart__layout {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.dv-cart__items {
    flex: 1 1 auto;
    min-width: 0;
}

.dv-cart__totals {
    flex: 0 0 384px;
    min-width: 0;
}

/* Таблица товаров */
.dv-cart .items thead td { font-weight: 500; }

.dv-cart .items thead td.dv-col-total,
.dv-cart .items tbody td.dv-col-total {
    padding-right: 31px;
    text-align: right;
}

/* «Итого» — пятая часть таблицы: название переносится, как на макете */
.dv-cart .items thead td.dv-col-total { width: 20%; }

.dv-cart .items thead td.dv-col-remove,
.dv-cart .items tbody td.dv-col-remove {
    width: 1%;
    text-align: center;
}

.dv-cart .items tbody td {
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.dv-cart .items tbody td.dv-col-total {
    white-space: nowrap;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
}

.dv-cart-product {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.dv-cart-product__image { flex: 0 0 130px; }

.dv-cart-product__image img {
    display: block;
    max-width: 130px;
    height: auto;
}

.dv-cart-product__info {
    flex: 1 1 auto;
    min-width: 0;
}

.dv-cart-product__name {
    display: block;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    color: #232323;
    transition: color 0.3s ease-out;
}

.dv-cart-product__name[href]:hover { color: #6cb644; }

/* «Цена за ед.» и характеристики: название слева, значение справа */
.dv-cart-product__details {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    width: 180px;
    max-width: 100%;
    margin: 20px 0 0;
    font-size: 12px;
    line-height: 19px;
    color: #232323;
}

.dv-cart-product__details dt,
.dv-cart-product__details dd { margin: 0; }

.dv-cart-product__details dd { text-align: right; }

/* Строка краткого описания, когда характеристик нет, — во всю ширину */
.dv-cart-product__details .is-wide { grid-column: 1 / -1; }

/* Счётчик: «−» на одной линии с текстом — значок стоит в квадрате 40px.
   Блочный flex, а не строчный, как в main-new.css: строчный оставлял под
   собой место под буквы с хвостиками */
.dv-cart .items tbody td .count {
    display: flex;
    width: max-content;
    margin: 16px 0 0 -15px;
}

/* Удалить — значок корзины, при наведении красный, как крестик оригинала */
.dv-cart .items tbody td .delete {
    display: inline-flex;
    margin-top: 3px;
    font-size: 0;
    line-height: 0;
    color: #232323;
}

.dv-cart .items tbody td .delete:hover { color: #e5291f; }

.dv-cart .items tbody td .delete:focus-visible {
    outline: 2px solid #6cb644;
    outline-offset: 3px;
}

/* «Сумма корзины» */
.dv-cart-totals__title {
    padding: 22px 20px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
}

.dv-cart-coupon {
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.dv-cart-coupon__label {
    display: block;
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
}

.dv-cart-coupon__row {
    display: flex;
    gap: 15px;
}

/* Базовая ширина 0: своя ширина поля (атрибут size) иначе растягивала колонку */
.dv-cart-coupon__row input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: 52px;
    padding: 0 20px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 17px;
    color: #232323;
}

.dv-cart-coupon__row input::placeholder {
    color: #232323;
    opacity: 1;
}

.dv-cart-coupon__row input:focus {
    border-color: #7eb454;
    outline: 0;
}

.dv-cart-totals__row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 20px;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    line-height: 20px;
}

.dv-cart-totals__row > span:last-child {
    text-align: right;
    white-space: nowrap;
}

.dv-cart-totals__row.is-total {
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
}

.dv-cart-totals__remove {
    margin-left: 6px;
    border-bottom: 1px dotted #e5291f;
    color: #e5291f;
    font-size: 12px;
    transition: border-color 0.3s ease-out;
}

.dv-cart-totals__remove:hover { border-bottom-color: transparent; }

/* Кнопки «Применить» и «Оформить заказ» — зелёные, круглые, как на макете */
.dv-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 30px;
    border: 0;
    border-radius: 26px;
    background: #7eb454;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s ease-out;
}

.dv-cart-button:hover {
    background: #6cb644;
    color: #fff;
}

/*
 * «Применить» неактивна, пока код купона не введён (initCartPage в theme.js) —
 * как выключенные кнопки сайта (.btn:disabled в main-new.css). Пустое поле
 * гасит кнопку и до запуска скрипта.
 */
.dv-cart-button:disabled,
.dv-cart-button:disabled:hover,
.dv-cart-coupon__row input:placeholder-shown + .dv-cart-button {
    background: #7eb454;
    opacity: 0.3;
    cursor: default;
}

.dv-cart-button--checkout {
    display: flex;
    width: 100%;
    height: 53px;
    margin-top: 20px;
    border-radius: 27px;
}

/*
 * Уже 992px колонки встают друг под другом. Прежняя корзина здесь
 * раскладывала ячейки в столбик (main-new.css) — строку собираем заново:
 * товар во всю ширину, под ним стоимость и значок удаления.
 */
@media (max-width: 992px) {
    .dv-cart__layout {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
    }

    .dv-cart__totals { flex-basis: auto; }

    /* Ячейки товаров здесь без отступов по бокам (main-new.css) — и панель тоже */
    .dv-cart-totals__title,
    .dv-cart-coupon,
    .dv-cart-totals__row {
        padding-left: 0;
        padding-right: 0;
    }

    .dv-cart .items tbody tr.item {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        border-top: 1px solid #ddd;
    }

    .dv-cart .items tbody td {
        display: block;
        width: auto;
        border: 0;
    }

    /* border — сильнее td:first-child из main-new.css с полосой 3px */
    .dv-cart .items tbody td.product {
        grid-column: 1 / -1;
        padding: 20px 0 10px;
        border: 0;
    }

    .dv-cart .items tbody td.dv-col-total {
        padding: 0 0 20px;
        text-align: left;
    }

    .dv-cart .items tbody td.dv-col-remove { padding: 0 0 20px; }

    .dv-cart .items tbody td .delete {
        width: auto;
        height: auto;
        padding: 0;
        background: none;
        border-radius: 0;
        line-height: 0;
    }

    .dv-cart .items tbody td .delete:hover {
        background: none;
        color: #e5291f;
    }

    .dv-cart .items tbody tr.item:last-child { border-bottom: 1px solid #ddd; }
}

@media (max-width: 500px) {
    .dv-cart-product { gap: 15px; }

    .dv-cart-product__image { flex-basis: 90px; }

    .dv-cart-product__image img { max-width: 90px; }

    .dv-cart-coupon__row { flex-wrap: wrap; }

    .dv-cart-coupon__row .dv-cart-button { width: 100%; }
}

/* -------------------------------------------------------------------------
 * Оформление заказа
 *
 * Вид — checkout.twig прежнего сайта (.section-checkout и .checkout-form в
 * main-new.css), структура — блок WooCommerce: его шаги открыты все сразу,
 * а не по одному. Каждый шаг — тёмная полоса с иконкой из шрифта icons, как
 * открытый шаг оригинала; поля, флажки и переключатели — как в его форме;
 * кнопки — круглые кнопки темы. Справа — «Мой заказ»: строки «товар ×N цена»,
 * тёмная полоса «Итого» и ссылка «Изменить заказ в корзине»
 * (assets/js/checkout.js). Обёртку с картинкой и заголовком даёт page.php.
 * ------------------------------------------------------------------------- */

/* Текст над формой — .section-checkout .checkout .text */
.section-checkout .dv-checkout-intro {
    max-width: 732px;
    padding-bottom: 30px;
    font-size: 17px;
}

@media (max-width: 992px) {
    .section-checkout .dv-checkout-intro { max-width: 100%; }
}

/* Колонки: форма и «Мой заказ» шириной 400px с отступом 30px, как .aside */
.section-checkout .wc-block-components-sidebar-layout { margin: 0; }

.section-checkout .wc-block-components-sidebar-layout.is-large .wc-block-components-main {
    width: calc(100% - 400px);
    padding-right: 0;
}

.section-checkout .wc-block-components-sidebar-layout.is-large .wc-block-components-sidebar {
    width: 400px;
    padding-left: 30px;
}

/* Под закреплённой шапкой (90px) колонка заказа не прячется */
.section-checkout .wc-block-components-sidebar.is-sticky { top: 110px; }

/* Шаги — тёмная полоса с иконкой, как .checkout-form .block-name.active */
.section-checkout .wc-block-checkout__form .wc-block-components-checkout-step {
    margin: 0 0 40px;
    padding: 0;
    border: 0;
}

.section-checkout .wc-block-checkout__form .wc-block-components-checkout-step::after { content: none; }

.section-checkout .wc-block-components-checkout-step__heading-container { margin: 0 0 30px; }

.section-checkout .wc-block-components-checkout-step__heading {
    display: flex;
    align-items: center;
    min-height: 60px;
    margin: 0;
    padding: 0 20px;
    background: #53586b;
    color: #fff;
}

.section-checkout .wc-block-components-checkout-step__title.wc-block-components-title {
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
}

.section-checkout .wc-block-components-checkout-step__title::before {
    margin-right: 20px;
    font-family: icons;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.section-checkout .wc-block-checkout__contact-fields .wc-block-components-checkout-step__title::before { content: "\E002"; }
.section-checkout .wc-block-checkout__shipping-fields .wc-block-components-checkout-step__title::before,
.section-checkout .wc-block-checkout__billing-fields .wc-block-components-checkout-step__title::before { content: "\E003"; }
.section-checkout .wc-block-checkout__shipping-option .wc-block-components-checkout-step__title::before,
.section-checkout .wc-block-checkout__shipping-method .wc-block-components-checkout-step__title::before { content: "\E004"; }
.section-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__title::before { content: "\E005"; }

.section-checkout .wc-block-components-checkout-step__heading-content { color: #fff; }

.section-checkout .wc-block-components-checkout-step__description {
    margin: 0 0 16px;
    font-size: 15px;
    color: #585858;
}

/* Поля — как .checkout-form input: светлый фон, серая рамка, без скруглений */
.section-checkout .wc-block-components-form .wc-block-components-text-input input,
.section-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.section-checkout .wc-block-components-textarea {
    border: 1px solid #e2e2e2;
    border-radius: 0;
    background: #fbfbfb;
    box-shadow: none;
    font-weight: 300;
    font-size: 16px;
    color: #232323;
}

.section-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
    border-radius: 0;
    background: #fbfbfb;
}

.section-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
.section-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.section-checkout .wc-block-components-textarea:focus {
    border: 1px solid #6cb644;
    background: #fbfbfb;
    box-shadow: none;
    outline: 0;
}

.section-checkout .wc-block-components-text-input label,
.section-checkout .wc-blocks-components-select .wc-blocks-components-select__label { color: #9b9b9b; }

.section-checkout .wc-block-components-textarea {
    min-height: 150px;
    padding: 30px;
    resize: none;
}

/* Флажки — квадрат 17px с зелёным квадратом внутри, как .checkout-form .checkbox */
.section-checkout .wc-block-components-checkbox label {
    gap: 13px;
    font-size: 15px;
    line-height: 17px;
}

.section-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
    width: 17px;
    min-width: 17px;
    height: 17px;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    background: #fbfbfb;
}

.section-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked {
    background: #6cb644;
    box-shadow: inset 0 0 0 2px #fbfbfb;
}

.section-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark { display: none; }

/* Способы доставки и оплаты — квадрат 25px с зелёным квадратом 13px,
   название и под ним описание, без рамок вокруг вариантов (.checkout-form .radio) */
.section-checkout .wc-block-components-radio-control { padding-left: 30px; }

.section-checkout .wc-block-components-radio-control--highlight-checked::after,
.section-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after,
.section-checkout .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option::after { content: none; }

.section-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.section-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
    border-radius: 0;
    box-shadow: none;
}

.section-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option {
    min-height: 25px;
    margin: 0 0 16px;
    padding: 0 0 0 70px;
}

/* У способов доставки WooCommerce ставит отметку ниже (top: 16px) своим
   правилом с большим весом — возвращаем её к названию отдельно, без цветов,
   чтобы не перебить вид отмеченного варианта */
.section-checkout .wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control .wc-block-components-radio-control__input {
    top: 0;
    transform: none;
}

.section-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    background: #fbfbfb;
    transform: none;
}

.section-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
    border-color: #e2e2e2;
    background: #6cb644;
    box-shadow: inset 0 0 0 5px #fbfbfb;
}

.section-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { content: none; }

.section-checkout .wc-block-components-radio-control__label,
.section-checkout .wc-block-components-radio-control__secondary-label {
    font-size: 15px;
    line-height: 25px;
}

.section-checkout .wc-block-components-radio-control__description,
.section-checkout .wc-block-components-radio-control__secondary-description {
    padding-top: 15px;
    font-size: 15px;
    color: #585858;
}

.section-checkout .wc-block-components-radio-control-accordion-content {
    padding: 0 0 16px 70px;
    font-size: 15px;
    line-height: 1.5;
    color: #585858;
}

/* На телефоне отступы меньше — как у .checkout-form .radio и textarea до 600px */
@media (max-width: 600px) {
    .section-checkout .wc-block-components-radio-control { padding-left: 0; }

    .section-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option { padding-left: 40px; }

    .section-checkout .wc-block-components-radio-control-accordion-content { padding-left: 40px; }

    .section-checkout .wc-block-components-textarea { padding: 15px; }
}

/* Согласие на обработку данных — как .checkout-form .agree */
.section-checkout .wc-block-checkout__terms {
    margin: 20px 0 0;
    font-size: 15px;
}

.section-checkout .wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
    padding-top: 0;
    border-top: 0;
}

.section-checkout .wc-block-checkout__terms a { color: #6cb644; }

/* «Назад в корзину» и кнопка заказа по центру — как .checkout-form .buttons */
.section-checkout .wc-block-checkout__actions { padding-top: 45px; }

.section-checkout .wc-block-checkout__actions_row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
}

.section-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.section-checkout .wc-block-components-checkout-return-to-cart-button {
    width: auto;
    height: 45px;
    padding: 0 30px;
    border: 0;
    border-radius: 45px;
    background: #6cb644;
    box-shadow: none;
    color: #fff;
    font-family: inherit;
    font-weight: 400;
    font-size: 13px;
    line-height: 45px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease-out;
}

.section-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover { background: #2fa244; }

.section-checkout .wc-block-components-checkout-return-to-cart-button {
    display: inline-flex;
    align-items: center;
    background: #53586b;
}

.section-checkout .wc-block-components-checkout-return-to-cart-button:hover {
    background: #454a5f;
    color: #fff;
}

.section-checkout .wc-block-components-checkout-return-to-cart-button svg { display: none; }

/* «Мой заказ» — белый блок, строки «товар ×N цена», как cart_info.twig */
.section-checkout .wp-block-woocommerce-checkout-order-summary-block {
    border: 0;
    border-radius: 0;
    background: #fff;
    font-size: 13px;
}

.section-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
    justify-content: center;
    margin: 0;
    padding: 30px 30px 10px;
    border: 0;
}

.section-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
    margin: 0;
    text-align: center;
    font-weight: 400;
    font-size: 20px;
}

.section-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper {
    padding: 0;
    border-top: 0;
}

.section-checkout .wc-block-components-order-summary { padding: 0; }

.section-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item {
    gap: 20px;
    padding: 25px 30px;
    border-bottom: 1px solid #ececec;
    font-size: 13px;
    line-height: 1.3;
}

.section-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item::after { content: none; }

.section-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
    order: 1;
    flex: 1 1 auto;
    padding: 0;
}

.section-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
}

.section-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img { display: none; }

/* Число штук — не кружок на картинке, а «x1» между названием и ценой */
.section-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    position: static;
    display: block;
    min-width: 0;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    font-size: 13px;
    line-height: 1.3;
    color: #232323;
}

.section-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity::before { content: "x"; }

.section-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
    padding: 0;
    color: inherit;
}

.section-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
    order: 3;
    padding: 0;
    font-size: 13px;
    white-space: nowrap;
}

.section-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
    margin: 0;
    font-weight: 400;
    font-size: 13px;
    color: #232323;
}

.section-checkout .wc-block-components-order-summary-item .wc-block-cart-item__prices,
.section-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata { display: none; }

.section-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item {
    padding: 15px 30px;
    border-bottom: 1px solid #ececec;
    font-size: 13px;
}

/* «Итого» — тёмная полоса, как tr.total */
.section-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item {
    margin: 0;
    padding: 15px 30px;
    border: 0;
    background: #53586b;
    color: #fff;
}

.section-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-weight: 400;
    font-size: 13px;
}

.section-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-weight: 400;
    font-size: 17px;
}

/* «Изменить заказ в корзине» — красная ссылка с точечным подчёркиванием */
.section-checkout .dv-checkout-cart-link {
    padding: 25px 0;
    text-align: center;
}

.section-checkout .dv-checkout-cart-link a {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 1px dotted #e5291f;
    color: #e5291f;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease-out;
}

.section-checkout .dv-checkout-cart-link a:hover { border-bottom-color: transparent; }