/* Theme Name: Hello Elementor Child Theme URI: https://github.com/elementor/hello-theme-child/ Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team Author: Elementor Team Author URI: https://elementor.com/ Template: hello-elementor Version: 2.0.0 Text Domain: hello-elementor-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* Add your custom styles here */ /* ------------------------------------------------------------------ Форма входа Tutor в модалке (появляется гостю при «В корзину»). Elementor Kit растягивает любой input на 100% и красит a.tutor-btn как кнопку — из-за этого чекбокс становится огромным, подпись уезжает под него, а «Забыли пароль?» рисуется рамкой в две строки. Значения — по 08_Дизайн/Токены.md. Специфичность (0,3,0) выше Kit (0,1,1). ------------------------------------------------------------------ */ .elementor-kit-8 #tutor-login-form input.tutor-form-control { width: 100%; background: #FFFFFF; border: 1px solid #E2DCCE; border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.4; color: #1A1C1A; } .elementor-kit-8 #tutor-login-form input.tutor-form-control::placeholder { color: #6B7168; } .elementor-kit-8 #tutor-login-form input.tutor-form-control:focus { border-color: #0E5A46; outline: none; box-shadow: 0 0 0 3px rgba(14, 90, 70, .12); } .elementor-kit-8 #tutor-login-form .tutor-form-check { display: flex; align-items: center; gap: 8px; } .elementor-kit-8 #tutor-login-form input.tutor-form-check-input { width: 18px; min-width: 18px; height: 18px; margin: 0; padding: 0; accent-color: #0E5A46; } .elementor-kit-8 #tutor-login-form .tutor-form-check label { margin: 0; line-height: 1.3; color: #6B7168; } .elementor-kit-8 #tutor-login-form a.tutor-btn-ghost { flex: 0 0 auto; background: transparent; border: 0; padding: 0; white-space: nowrap; font-weight: 500; color: #0E5A46; text-decoration: underline; } .elementor-kit-8 #tutor-login-form a.tutor-btn-ghost:hover { color: #0A3D30; } .elementor-kit-8 #tutor-login-form button.tutor-btn-primary { border-radius: 999px; padding: 13px 28px; font-weight: 600; } /* ------------------------------------------------------------------ Короткие страницы короче экрана — футер повисал посреди страницы. Замечено на /tutor-login/ (main#content.site-main темы) и на /panel-upravleniya/ для гостя (div.tutor-wrap — у дашборда Tutor свой контентный блок, без id="content" и класса site-main). Тег и класс среднего блока у разных шаблонов разный, поэтому не подстраи- ваемся под него: body — flex-колонка на всю высоту вьюпорта, футер прижимается снизу через margin-top:auto (классический sticky footer, не зависит от page-id и разметки контента). ------------------------------------------------------------------ */ body { display: flex; flex-direction: column; min-height: 100vh; } body > footer.elementor-location-footer { margin-top: auto; } /* ------------------------------------------------------------------ Отступ под шапкой снят (решение Дена 2026-08-14). Зазор был прозрачным margin-bottom на обёртке шапки — сквозь него виден белый фон body, и на кремовых страницах он читался белой полосой под шапкой (поймано на /karta/). Фон сайта остаётся белым, cream — по страницам индивидуально. Верхний спейсинг задаёт сама страница: у верхнего контейнера Elementor внешний отступ 0, внутренний 21px сверху и снизу. Тогда воздух окрашен фоном самой страницы и полосы не возникает. Margin сюда не возвращать. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ Девятый случай протечки Kit (Структуры_страниц §12 / tutor-lms skill): .elementor-kit-8 a:hover{color:#0A3D30} (специфичность 0,2,1) перебивает hover-цвет пунктов меню/попапов Tutor (.tutor-popover-menu-item:hover, .tutor-nav-dropdown-item:hover и т.п. — у них только 0,2,0). На светлом фоне #0A3D30 читается нормально, а в тёмной теме кабинета/плеера (html[data-tutor-theme=dark]) текст ссылки при наведении становится почти того же оттенка, что и тёмный фон. Тот же приём, что и для заголовков (2026-08-10): не свой цвет, а переменная самой Tutor — наследует high-contrast/дальтоник-варианты бесплатно. В style.css, не в custom_css кита — фикс глобальный, а кит уже дважды схлопывался. ------------------------------------------------------------------ */ html[data-tutor-theme="dark"] .elementor-kit-8 a:hover { color: var(--tutor-text-primary); } /* ================================================================== WooCommerce — классический шаблон (2026-08-12) Страницы /cart/ и /checkout/ переведены заказчиком с виджетов Elementor на чистые шорткоды [woocommerce_cart] / [woocommerce_checkout]. Разметка серверная, классы .woocommerce / .checkout / .cart — сверены с живым DOM и офиц. документацией WooCommerce (woocommerce.com/document, раздел Customizing the Cart and Checkout Pages). По умолчанию Woo даёт двухколоночную раскладку на float — здесь заменена на CSS Grid. Оформление — по 08_Дизайн/Токены.md: pine #0E5A46, cream #F5F1E8, sage #E7F0EA, ink #1A1C1A, ink-soft #454B45, muted #6B7168, border #E2DCCE, border-sage #CDE0D3, карточка 20px + shadow-md, поле 12px, кнопка-пилюля 999px, суммы — JetBrains Mono. Специфичность рассчитана перебивать Elementor Kit (.elementor-kit-8 = 0,1,1) и reset Hello (кнопки в розовую рамку) за счёт scope body.woocommerce-* + класс, без сплошных !important. ================================================================== */ /* --- Общая обёртка обеих страниц --- */ body.woocommerce-checkout .woocommerce, body.woocommerce-cart .woocommerce { max-width: 1140px; margin: 0 auto; padding: 8px 24px 72px; } /* Суммы денег — моноширинным (08_Дизайн/Токены.md §2, «цена»). */ body.woocommerce-checkout .woocommerce .amount, body.woocommerce-cart .woocommerce .amount { font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace; } /* Уведомления Woo (инфо/успех/ошибка) — на бренд, без синей полосы слева. */ .woocommerce-message, .woocommerce-info, .woocommerce-noreviews { border: 1px solid #CDE0D3; background: #E7F0EA; color: #1A1C1A; border-radius: 12px; padding: 14px 16px 14px 44px; box-shadow: none; } .woocommerce-error { border: 1px solid rgba(228, 131, 46, .35); background: #FBEEDD; color: #1A1C1A; border-radius: 12px; padding: 14px 16px 14px 44px; box-shadow: none; list-style: none; } .woocommerce-message::before, .woocommerce-info::before { color: #0E5A46; } /* Кнопки в уведомлениях Woo («Продолжить покупки», «Просмотр корзины» и т.п.) — вторичное действие, ghost-pine. Woo рендерит одну и ту же a.button.wc-forward в трёх типах уведомлений: .woocommerce-message (успех, зелёная плашка), .woocommerce-info (нейтральная), .woocommerce-error (ошибка/дубль в корзине). Ядро WooCommerce задаёт .woocommerce a.button (0,2,1) серым фоном — свой селектор с .woocommerce впереди даёт (0,3,1), выигрывает по специфичности. */ .woocommerce .woocommerce-message a.button, .woocommerce .woocommerce-info a.button, .woocommerce .woocommerce-error a.button { background: #FFFFFF; background-image: none; color: #0E5A46; border: 1.5px solid #0E5A46; border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: none; transition: background .15s ease, color .15s ease; } .woocommerce .woocommerce-message a.button:hover, .woocommerce .woocommerce-info a.button:hover, .woocommerce .woocommerce-error a.button:hover { background: #E7F0EA; color: #0A3D30; } /* На мобиле уведомление — flex-строка (icon + текст + кнопка), это ядро WooCommerce 10.x, не наша вёрстка. Иконка — отдельный flex-item с flex-wrap:wrap: длинный текст не помещается рядом с ней и переносится на новую строку целиком, а иконка остаётся одна на первой строке — «галочка отдельно, текст отдельно». Проще и надёжнее убрать иконку на мобиле, чем чинить построчный перенос внутри флекс-контейнера. */ @media (max-width: 768px) { .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; } } /* ================================================================== CHECKOUT — /checkout/ ================================================================== */ /* Двухколоночная раскладка: слева платёжные данные, справа — липкий блок «Детали заказа». По умолчанию Woo кладёт #customer_details и #order_review на float; заменяем гридом с явными областями. */ body.woocommerce-checkout form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "details review-head" "details review"; align-items: start; gap: 0 32px; } body.woocommerce-checkout #customer_details { grid-area: details; } body.woocommerce-checkout #order_review_heading { grid-area: review-head; margin: 0 0 16px; } body.woocommerce-checkout #order_review { grid-area: review; position: sticky; top: 24px; } /* Карточки колонок: --white, --radius-lg, --shadow-md, border-sage. */ body.woocommerce-checkout #customer_details, body.woocommerce-checkout #order_review { background: #FFFFFF; border: 1px solid #CDE0D3; border-radius: 20px; padding: 28px; box-shadow: 0 8px 24px rgba(14, 60, 48, .08); } /* Заголовки секций. */ body.woocommerce-checkout #customer_details h3, body.woocommerce-checkout #order_review_heading { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 600; color: #1A1C1A; margin: 0 0 20px; padding: 0; border: 0; } /* «Ваш заказ» скрыт — заказчик 2026-08-13: чей ещё заказ может быть. display:none убирает элемент из грида, строка "review-head" в grid-template-areas сжимается до 0 автоматически, разметка не ломается. */ body.woocommerce-checkout #order_review_heading { display: none; } /* .col2-set делит биллинг (.col-1) и примечание к заказу (.col-2) на две узкие колонки-float; распрямляем в один столбец — примечание уходит под форму во всю ширину карточки. */ body.woocommerce-checkout #customer_details.col2-set .col-1, body.woocommerce-checkout #customer_details.col2-set .col-2 { width: 100%; max-width: none; float: none; } body.woocommerce-checkout #customer_details.col2-set .col-2 { margin-top: 4px; } /* Заголовок «Детали» (примечание к заказу) — воздух над ним, чтобы отделить от полей биллинга выше. Спецификация (1,2,2) выше базового #customer_details h3 (1,1,2), поэтому margin-top перебивает shorthand. */ body.woocommerce-checkout #customer_details .woocommerce-additional-fields h3 { margin-top: 28px; } /* Поля биллинга: имя + фамилия в ряд (form-row-first/-last), остальное на всю ширину (form-row-wide) — грид вместо float'ов Woo. */ body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row { width: auto; margin: 0; padding: 0; float: none; display: flex; flex-direction: column; } body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; } /* Метки над полем (08_Дизайн/Токены.md §4.6 — label ABOVE input). */ body.woocommerce-checkout .form-row label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 500; color: #454B45; line-height: 1.3; } body.woocommerce-checkout .form-row .required { color: #0E5A46; border: 0; text-decoration: none; } body.woocommerce-checkout .form-row .optional { color: #6B7168; } /* Поля ввода: белый фон, border, radius-md, фокус pine 2px. Ядро WooCommerce (woocommerce.css) стилизует поля селектором `.woocommerce form .form-row .input-text` со специфичностью (0,3,1) и радиусом var(--wc-form-border-radius) =4px — чтобы перебить его без !important, наш селектор через form.checkout даёт (0,3,2). Так выигрывают радиус, рамка, padding и фокус разом. */ body.woocommerce-checkout form.checkout .input-text, body.woocommerce-checkout form.checkout select, body.woocommerce-checkout form.checkout textarea { width: 100%; background: #FFFFFF; border: 1px solid #E2DCCE; border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.4; color: #1A1C1A; box-shadow: none; } body.woocommerce-checkout form.checkout .input-text::placeholder { color: #6B7168; } body.woocommerce-checkout form.checkout .input-text:focus, body.woocommerce-checkout form.checkout select:focus, body.woocommerce-checkout form.checkout textarea:focus { border-color: #0E5A46; outline: none; box-shadow: 0 0 0 3px rgba(14, 90, 70, .12); } /* Выбор страны на select2 (рендерится JS-ом на живом сайте). */ body.woocommerce-checkout .select2-container--default .select2-selection--single { height: auto; background: #FFFFFF; border: 1px solid #E2DCCE; border-radius: 12px; padding: 9px 16px; } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; color: #1A1C1A; padding: 0; } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; right: 12px; } /* Выпадающая панель select2 (уходит в конец , вне .woocommerce). */ .select2-dropdown { border-color: #E2DCCE; border-radius: 12px; overflow: hidden; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #0E5A46; } /* Таблица «Детали заказа» справа: без тяжёлых рамок, суммы моно. */ body.woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; } body.woocommerce-checkout .woocommerce-checkout-review-order-table th, body.woocommerce-checkout .woocommerce-checkout-review-order-table td { padding: 14px 12px; text-align: left; border: 0; border-bottom: 1px solid #F0EBE0; color: #454B45; } body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6B7168; border-bottom: 1px solid #E2DCCE; } body.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child, body.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child { text-align: right; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { color: #1A1C1A; font-weight: 500; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th { font-size: 16px; color: #1A1C1A; border-bottom: 0; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { border-bottom: 0; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount { font-size: 18px; font-weight: 600; color: #0E5A46; } /* Купон-переключатель «Есть купон?». */ body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { padding: 12px 16px; background: #F5F1E8; border: 1px solid #E2DCCE; color: #454B45; } body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; } body.woocommerce-checkout .checkout_coupon { border: 1px solid #E2DCCE; border-radius: 12px; padding: 16px; margin-bottom: 20px; } /* Способы оплаты — карточки-переключатели, выбранная в pine + sage. */ body.woocommerce-checkout #payment { background: transparent; border-radius: 0; padding: 0; } body.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 20px 0; list-style: none; } body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method { border: 1px solid #E2DCCE; border-radius: 12px; padding: 14px 16px; margin: 0 0 10px; list-style: none; } body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) { border-color: #0E5A46; background: #E7F0EA; } body.woocommerce-checkout #payment ul.payment_methods li label { display: flex; width: 100%; align-items: center; gap: 8px; font-weight: 500; color: #1A1C1A; margin: 0; } /* Логотип способа оплаты (ЮKassa kassa.svg) отдавался без width/height — только viewBox, поэтому браузер давал ему дефолтный размер 210x150. Ограничиваем по высоте, ширину считает пропорция. NB (2026-09-03): в ЮKassa 2.17.1 файл починили — теперь . Но URL картинки не изменился, а отдаётся она с max-age=2592000. Значит у всех, кто открывал кассу раньше, в браузере лежит СТАРЫЙ файл ещё до 02.10.2026, и без этого правила логотип у них снова станет 117x83. Правило оставлено намеренно и после обновления: оно делает размер независимым от того, что кладёт плагин. Не убирать «за ненадобностью». */ body.woocommerce-checkout #payment ul.payment_methods li label img { width: auto; max-height: 20px; flex: none; } body.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: #0E5A46; } body.woocommerce-checkout #payment .payment_box { background: #F5F1E8; border-radius: 10px; padding: 12px 16px; margin: 10px 0 0; font-size: 14px; color: #454B45; } body.woocommerce-checkout #payment .payment_box::before { display: none; } /* Блок политики/оферты и чекбокс согласия. */ body.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 13px; color: #6B7168; margin: 16px 0; } body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 8px 0 16px; } body.woocommerce-checkout .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #454B45; } /* Оба чекбокса согласия — оферта (#terms) и обработка ПД (#irga_pd_consent) — одного размера и цвета. Селектор широкий, ловит любой чекбокс внутри этого лейбла. */ body.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] { width: 18px; min-width: 18px; height: 18px; margin-top: 1px; accent-color: #0E5A46; } /* Отступ второго чекбокса от первого — визуально ровный ритм. */ body.woocommerce-checkout .irga-pd-consent { margin: 8px 0 16px; } body.woocommerce-checkout .woocommerce-privacy-policy-text a, body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a, body.woocommerce-checkout .woocommerce-form-coupon-toggle a { color: #0E5A46; text-decoration: underline; } /* Кнопка «Оформить заказ» — pine-пилюля во всю ширину. Специфичность (1,1,0) перебивает Elementor Kit button (0,1,1). */ body.woocommerce-checkout #place_order { display: block; width: 100%; float: none; margin-top: 8px; padding: 15px 28px; background-color: #0E5A46; background-image: linear-gradient(135deg, #0E5A46, #0A3D30); border: 0; border-radius: 999px; color: #FFFFFF; font-weight: 600; font-size: 16px; box-shadow: 0 8px 24px rgba(14, 60, 48, .18); transition: background-image .2s ease, transform .15s ease, box-shadow .2s ease; } body.woocommerce-checkout #place_order:hover { background-image: linear-gradient(135deg, #0A3D30, #083428); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(14, 60, 48, .24); } body.woocommerce-checkout #place_order:active { transform: translateY(0); } /* Мобильный: одна колонка, сводка не липнет и уезжает под форму. */ @media (max-width: 782px) { body.woocommerce-checkout form.checkout.woocommerce-checkout { grid-template-columns: 1fr; grid-template-areas: "details" "review-head" "review"; } body.woocommerce-checkout #order_review { position: static; } body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } body.woocommerce-checkout #customer_details, body.woocommerce-checkout #order_review { padding: 20px; border-radius: 16px; } } /* ================================================================== CART — /cart/ ================================================================== */ /* Одна колонка (решение заказчика 2026-08-12): таблица во всю ширину, блок итогов под ней справа. Без грида — как было до двухколоночного варианта. */ /* Таблица корзины — карточка. border-collapse:separate ради радиуса. */ body.woocommerce-cart table.cart.shop_table { width: 100%; border: 1px solid #CDE0D3; border-radius: 20px; border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: 0 8px 24px rgba(14, 60, 48, .08); margin-bottom: 32px; background: #FFFFFF; } body.woocommerce-cart table.cart th { padding: 16px 20px; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6B7168; background: transparent; border: 0; border-bottom: 1px solid #E2DCCE; } body.woocommerce-cart table.cart td { padding: 16px 20px; vertical-align: middle; border: 0; border-bottom: 1px solid #F0EBE0; } /* Курсы всегда в единственном экземпляре — колонка «Количество» пустая, удаляем её (шапку и ячейки) и бесполезную кнопку «Обновить корзину». display:none — санкционированный WooCommerce способ (см. документацию Customizing the Cart and Checkout Pages). */ body.woocommerce-cart table.cart th.product-quantity, body.woocommerce-cart table.cart td.product-quantity { display: none; } body.woocommerce-cart td.actions button[name="update_cart"] { display: none; } body.woocommerce-cart table.cart td.product-remove { padding-right: 4px; } body.woocommerce-cart table.cart td.product-thumbnail { padding-left: 4px; } body.woocommerce-cart table.cart .product-thumbnail img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; display: block; } body.woocommerce-cart table.cart .product-name a { color: #1A1C1A; font-weight: 600; text-decoration: none; } body.woocommerce-cart table.cart .product-name a:hover { color: #0E5A46; } body.woocommerce-cart table.cart .product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: #F5F1E8; color: #6B7168 !important; font-size: 18px; line-height: 1; text-decoration: none; } body.woocommerce-cart table.cart .product-remove a.remove:hover { background: #FBEEDD; color: #C0492B !important; } /* Строка действий (купон). Кнопки — вторичный стиль (контур pine), специфичность (1,2,0) перебивает Kit-заливку без !important. */ body.woocommerce-cart td.actions { padding: 20px; } /* Промокод и кнопка — полноширинным стеком, одна ширина и один кегль (заказчик 2026-08-12): поле ввода выровнено с кнопкой под ним. */ body.woocommerce-cart td.actions .coupon { display: flex; flex-direction: column; gap: 10px; width: 100%; } /* !important — ядро WooCommerce (woocommerce-layout.css) жёстко ставит этому полю width:80px тем же весом (0,4,2), а на мобиле 48%; перебить без important по специфичности не выходит (ничья + порядок загрузки). */ body.woocommerce-cart td.actions .coupon .input-text { width: 100% !important; background: #FFFFFF; border: 1px solid #E2DCCE; border-radius: 12px; padding: 12px 16px; font-size: 15px; color: #1A1C1A; } body.woocommerce-cart td.actions .button { width: 100% !important; background: #FFFFFF; background-image: none; color: #0E5A46; border: 1.5px solid #0E5A46; border-radius: 999px; font-weight: 600; font-size: 15px; padding: 12px 22px; } body.woocommerce-cart td.actions .button:hover { background: #E7F0EA; color: #0A3D30; } /* Итоги корзины — карточка под таблицей, прижата вправо (одна колонка). */ body.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 460px; margin-left: auto; background: #FFFFFF; border: 1px solid #CDE0D3; border-radius: 20px; padding: 24px; box-shadow: 0 8px 24px rgba(14, 60, 48, .08); } body.woocommerce-cart .cart_totals h2 { font-family: "Inter", sans-serif; font-size: 18px; font-weight: 600; color: #1A1C1A; margin: 0 0 16px; } body.woocommerce-cart .cart_totals table { width: 100%; border-collapse: collapse; margin: 0; } body.woocommerce-cart .cart_totals th, body.woocommerce-cart .cart_totals td { padding: 14px 12px; text-align: left; border: 0; border-bottom: 1px solid #F0EBE0; background: transparent; color: #454B45; } body.woocommerce-cart .cart_totals td { text-align: right; } body.woocommerce-cart .cart_totals .order-total th { font-size: 16px; color: #1A1C1A; border-bottom: 0; } body.woocommerce-cart .cart_totals .order-total td { border-bottom: 0; } body.woocommerce-cart .cart_totals .order-total .amount { font-size: 18px; font-weight: 600; color: #0E5A46; } /* «Оформить заказ» — pine-пилюля во всю ширину карточки итогов. */ body.woocommerce-cart .wc-proceed-to-checkout { padding: 16px 0 0; } body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; padding: 15px 28px; background-color: #0E5A46; background-image: linear-gradient(135deg, #0E5A46, #0A3D30); border: 0; border-radius: 999px; color: #FFFFFF; font-weight: 600; font-size: 16px; text-decoration: none; box-shadow: 0 8px 24px rgba(14, 60, 48, .18); transition: background-image .2s ease, transform .15s ease, box-shadow .2s ease; } body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background-image: linear-gradient(135deg, #0A3D30, #083428); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(14, 60, 48, .24); } /* Пустая корзина. */ body.woocommerce-cart .cart-empty.woocommerce-info { text-align: center; } body.woocommerce-cart .return-to-shop .button { display: inline-block; padding: 13px 28px; background: #0E5A46; background-image: linear-gradient(135deg, #0E5A46, #0A3D30); border: 0; border-radius: 999px; color: #FFFFFF; font-weight: 600; text-decoration: none; } /* Мобильный: узкая таблица, итоги во всю ширину. */ @media (max-width: 782px) { body.woocommerce-cart table.cart th { display: none; } body.woocommerce-cart table.cart td { display: block; text-align: right; border: 0; border-bottom: 1px solid #F0EBE0; padding: 12px 16px; } body.woocommerce-cart table.cart tr { display: block; border-bottom: 1px solid #E2DCCE; } body.woocommerce-cart td.actions .coupon { flex-wrap: wrap; } body.woocommerce-cart .cart-collaterals .cart_totals { max-width: none; margin-top: 8px; } } /* ================================================================== CHECKOUT: форма входа и купон-переключатель (2026-08-13) Форма входа появляется гостю по клику «Уже покупали? Нажмите для входа», купон — по клику «Есть промокод?». Обе живут внутри чекаута, не в правом сайдбаре, — свои стили ниже, отдельно от таблицы заказа. ================================================================== */ /* Кнопка «Вход» в форме входа — pine-пилюля, primary. WooCommerce ядро рисует .woocommerce-button.button серым; свой селектор через form.login даёт (0,3,2), выигрывает специфичностью без important. */ body.woocommerce-checkout form.login button.woocommerce-form-login__submit, body.woocommerce-checkout form.woocommerce-form-login button.woocommerce-form-login__submit { background: #0E5A46; background-image: linear-gradient(135deg, #0E5A46, #0A3D30); border: 0; border-radius: 999px; color: #FFFFFF; font-weight: 600; font-size: 15px; padding: 12px 28px; box-shadow: 0 8px 24px rgba(14, 60, 48, .18); transition: background-image .2s ease, transform .15s ease, box-shadow .2s ease; } body.woocommerce-checkout form.login button.woocommerce-form-login__submit:hover { background-image: linear-gradient(135deg, #0A3D30, #083428); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(14, 60, 48, .24); } /* «Запомнить меня» рядом с кнопкой — небольшой чекбокс, pine-акцент. */ body.woocommerce-checkout form.login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; font-size: 14px; color: #454B45; } body.woocommerce-checkout form.login .woocommerce-form-login__rememberme input { accent-color: #0E5A46; width: 16px; height: 16px; } /* «Забыли свой пароль?» — ссылка pine. */ body.woocommerce-checkout form.login .lost_password a { color: #0E5A46; text-decoration: underline; font-size: 14px; } /* Форма купона на кассе — тем же приёмом, что и на корзине: поле и кнопка полноширинным стеком одного кегля. Кнопка «Применить промокод» — ghost-pine, как вторичное действие. */ body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon .form-row { width: 100%; margin: 0 0 10px; } body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon .input-text { width: 100%; background: #FFFFFF; border: 1px solid #E2DCCE; border-radius: 12px; padding: 12px 16px; font-size: 15px; color: #1A1C1A; } body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon button.button { width: 100%; background: #FFFFFF; background-image: none; color: #0E5A46; border: 1.5px solid #0E5A46; border-radius: 999px; font-weight: 600; font-size: 15px; padding: 12px 22px; box-shadow: none; } body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon button.button:hover { background: #E7F0EA; color: #0A3D30; } /* ================================================================== ORDER RECEIVED — /checkout/order-received/ (2026-08-14) Страница «спасибо» живёт на том же посте 1353, что и касса, поэтому у неё есть класс body.woocommerce-checkout — общая обёртка (max-width 1140, padding) и моноширинные суммы из блока выше уже применяются. Своё — ниже, по классу body.woocommerce-order-received. Разметку даёт ядро без единого хука на оформление, править шаблоны в дочерней теме не нужно — хватает CSS. Источник классов — templates/ checkout/thankyou.php, order/order-details.php, order/order-details- customer.php и gateway BACS (class-wc-gateway-bacs.php:338–382). Приводим к тому же языку, что корзина и касса: карточка 20px + border-sage #CDE0D3 + shadow-md, заголовки секций 20px (иначе их раздувает .elementor-kit-8 h2 до 36px), шапки таблиц — мелкий капс muted, итоговые строки на sage. ================================================================== */ /* Подтверждение заказа — крупная плашка вместо строчки текста. Woo вешает .woocommerce-notice без .woocommerce-message, поэтому стилей уведомления ядро ей не даёт вообще. */ body.woocommerce-order-received .woocommerce-notice--success { margin: 0 0 28px; padding: 22px 24px; background: #E7F0EA; border: 1px solid #CDE0D3; border-radius: 20px; font-size: 20px; font-weight: 600; line-height: 1.35; color: #0E5A46; text-align: center; } /* Сводка заказа (номер · дата · email · итого · способ оплаты). Ядро раскладывает её float'ами с пунктирными разделителями (.woocommerce ul.order_details li, специфичность 0,2,2) — здесь грид, свой селектор даёт (0,2,3) и выигрывает без !important. */ body.woocommerce-order-received ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 32px; padding: 20px 8px; list-style: none; background: #FFFFFF; border: 1px solid #CDE0D3; border-radius: 20px; box-shadow: 0 8px 24px rgba(14, 60, 48, .08); } /* Клирфикс ядра (.order_details::before/::after) в гриде становится двумя пустыми ячейками и разрывает ряд — гасим. */ body.woocommerce-order-received ul.woocommerce-order-overview::before, body.woocommerce-order-received ul.woocommerce-order-overview::after { display: none; } body.woocommerce-order-received ul.woocommerce-order-overview li { float: none; margin: 0; padding: 2px 16px; border: 0; border-left: 1px solid #F0EBE0; list-style: none; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: #6B7168; } body.woocommerce-order-received ul.woocommerce-order-overview li:first-child { border-left: 0; } body.woocommerce-order-received ul.woocommerce-order-overview li strong { display: block; margin-top: 6px; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #1A1C1A; overflow-wrap: anywhere; } /* Заголовки секций: «Информация о заказе», «Платёжный адрес», «Наши банковские реквизиты». Специфичность (0,2,1) перебивает .elementor-kit-8 h2 (0,1,1), который иначе рисует их маркетинговыми 36px. */ body.woocommerce-order-received .woocommerce-order-details__title, body.woocommerce-order-received .woocommerce-column__title, body.woocommerce-order-received .wc-bacs-bank-details-heading { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #1A1C1A; margin: 0 0 16px; padding: 0; border: 0; } body.woocommerce-order-received section.woocommerce-customer-details, body.woocommerce-order-received section.woocommerce-bacs-bank-details { margin-top: 32px; } /* Таблица состава заказа — карточка, как таблица корзины. border-collapse:separate нужен, чтобы радиус не срезался. */ body.woocommerce-order-received table.woocommerce-table--order-details { width: 100%; margin: 0; background: #FFFFFF; border: 1px solid #CDE0D3; border-radius: 20px; border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: 0 8px 24px rgba(14, 60, 48, .08); } body.woocommerce-order-received table.woocommerce-table--order-details th, body.woocommerce-order-received table.woocommerce-table--order-details td { padding: 14px 20px; text-align: left; vertical-align: middle; background: transparent; border: 0; border-bottom: 1px solid #F0EBE0; color: #454B45; font-weight: 400; } body.woocommerce-order-received table.woocommerce-table--order-details thead th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #6B7168; border-bottom: 1px solid #E2DCCE; } body.woocommerce-order-received table.woocommerce-table--order-details th:last-child, body.woocommerce-order-received table.woocommerce-table--order-details td:last-child { text-align: right; } body.woocommerce-order-received table.woocommerce-table--order-details td.product-name a { color: #1A1C1A; font-weight: 600; text-decoration: none; } body.woocommerce-order-received table.woocommerce-table--order-details td.product-name a:hover { color: #0E5A46; } /* Строку с количеством ×N Woo печатает внутри .product-name — приглушаем, чтобы не спорила с названием курса. */ body.woocommerce-order-received table.woocommerce-table--order-details td.product-name .product-quantity { color: #6B7168; font-weight: 500; } /* Подвал таблицы (подытог · итого · способ оплаты) — отделён заливкой. Отдельного класса у строки «Итого» в этом шаблоне нет (в отличие от корзины с .order-total), поэтому выделяем подвал целиком, а не вылавливаем строку хрупким :nth-child. */ body.woocommerce-order-received table.woocommerce-table--order-details tfoot th, body.woocommerce-order-received table.woocommerce-table--order-details tfoot td { background: #F7F4EC; color: #1A1C1A; } body.woocommerce-order-received table.woocommerce-table--order-details tfoot th { font-weight: 600; } body.woocommerce-order-received table.woocommerce-table--order-details tfoot .amount { font-weight: 600; color: #0E5A46; } body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th, body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; } /* Платёжный адрес и банковские реквизиты — те же карточки. Ядро даёт address рамку 1px с утолщёнными нижней и правой гранями и радиусом 5px; свой селектор (0,2,3) перебивает. */ body.woocommerce-order-received section.woocommerce-customer-details address, body.woocommerce-order-received ul.wc-bacs-bank-details { display: block; margin: 0; padding: 20px 24px; background: #FFFFFF; border: 1px solid #CDE0D3; border-width: 1px; border-radius: 20px; box-shadow: 0 8px 24px rgba(14, 60, 48, .08); font-style: normal; font-size: 15px; line-height: 1.7; color: #454B45; list-style: none; } body.woocommerce-order-received section.woocommerce-customer-details address p, body.woocommerce-order-received ul.wc-bacs-bank-details li { float: none; margin: 0; padding: 0; border: 0; list-style: none; } body.woocommerce-order-received ul.wc-bacs-bank-details strong { color: #1A1C1A; } /* Мобильный: сводка в один столбец — на узком экране левые разделители превращаются в лесенку, переносим их наверх. */ @media (max-width: 782px) { body.woocommerce-order-received ul.woocommerce-order-overview { grid-template-columns: 1fr; padding: 8px 8px 12px; border-radius: 16px; } body.woocommerce-order-received ul.woocommerce-order-overview li { padding: 12px 12px; border-left: 0; border-top: 1px solid #F0EBE0; } body.woocommerce-order-received ul.woocommerce-order-overview li:first-child { border-top: 0; } body.woocommerce-order-received table.woocommerce-table--order-details th, body.woocommerce-order-received table.woocommerce-table--order-details td { padding: 12px 14px; } body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-order-received section.woocommerce-customer-details address, body.woocommerce-order-received ul.wc-bacs-bank-details { border-radius: 16px; } body.woocommerce-order-received .woocommerce-notice--success { font-size: 18px; padding: 18px 20px; border-radius: 16px; } } /* ================================================================== MY ACCOUNT — /my-account/ (2026-08-14) Страница WooCommerce (post 1354, шорткод [woocommerce_my_account]), не Elementor. До этого шла совсем голой: меню кабинета выводилось маркированным списком, карточек не было, обёртка без полей. Гостю здесь показывается форма входа, вошедшему — меню слева и содержимое справа. Ядро раскладывает их float'ами (.woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}, специфичность 0,2,0) — заменяем гридом, свой селектор через body даёт (0,2,1) и выигрывает без !important. Грид вешаем через :has() — только когда меню на странице есть. Иначе на гостевой странице входа осталась бы пустая колонка в 240px. Оформление — по 08_Дизайн/Токены.md, теми же значениями, что корзина и касса выше: карточка 20px + border-sage #CDE0D3 + shadow-md. ================================================================== */ body.woocommerce-account .woocommerce { max-width: 1140px; margin: 0 auto; padding: 8px 24px 72px; } /* Раскладка кабинета — флекс с явным order, НЕ грид. Грид здесь уже подвёл (2026-08-14): он расставляет по порядку детей, а WooCommerce печатает внутри .woocommerce не только меню и содержимое — там же обёртка уведомлений, сами уведомления (например «в учётной записи используется временный пароль») и вывод хуков before/after_account_navigation. Каждый лишний прямой потомок сдвигал сетку на ячейку: меню уезжало в широкую колонку, а содержимое — в узкую под ним. С order раскладка не зависит ни от числа детей, ни от их порядка: всё, что не меню и не содержимое, уходит строкой наверх во всю ширину. */ body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; } /* Специфичность считана намеренно: у общего правила (0,2,1), у двух точных — (0,3,1) за счёт дочернего комбинатора с классом. Ничьей нет, порядок объявления роли не играет. */ body.woocommerce-account .woocommerce > * { order: 1; flex: 0 0 100%; } body.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation { order: 2; flex: 0 0 240px; } body.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { order: 3; flex: 1 1 320px; min-width: 0; } /* Пустая обёртка уведомлений иначе съедает лишние 24px зазора. */ body.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; } /* Ссылка «Перейти к обучению» — первым пунктом меню, основным действием. Пункт добавлен фильтром woocommerce_account_menu_items в дочерней теме; endpoint у него не настоящий, адрес подставляет woocommerce_get_endpoint_url. */ body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--irga-learning { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #F0EBE0; } body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--irga-learning a { background: #0E5A46; background-image: linear-gradient(135deg, #0E5A46, #0A3D30); color: #FFFFFF; font-weight: 600; text-align: center; border-radius: 999px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(14, 60, 48, .18); } body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--irga-learning a:hover { background: #0A3D30; background-image: linear-gradient(135deg, #0A3D30, #083428); color: #FFFFFF; } /* --- Меню кабинета --- */ body.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; background: #FFFFFF; border: 1px solid #CDE0D3; border-radius: 20px; padding: 12px; box-shadow: 0 8px 24px rgba(14, 60, 48, .08); } body.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; } body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; list-style: none; } body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; color: #454B45; text-decoration: none; transition: background .15s ease, color .15s ease; } body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #F5F1E8; color: #0E5A46; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #E7F0EA; color: #0E5A46; font-weight: 600; } /* «Выйти» отделяем от остальных пунктов и приглушаем — это не раздел. */ body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid #F0EBE0; } body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #6B7168; } /* --- Содержимое справа --- */ body.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; background: #FFFFFF; border: 1px solid #CDE0D3; border-radius: 20px; padding: 28px; box-shadow: 0 8px 24px rgba(14, 60, 48, .08); } body.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; } body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3, body.woocommerce-account .woocommerce-Address-title h3 { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; color: #1A1C1A; margin: 0 0 16px; } body.woocommerce-account .woocommerce-MyAccount-content a { color: #0E5A46; } /* Таблицы заказов и загрузок. */ body.woocommerce-account .woocommerce-MyAccount-content table.shop_table { width: 100%; border: 0; border-collapse: collapse; margin: 0; } body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th, body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td { padding: 14px 12px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #F0EBE0; color: #454B45; } body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #6B7168; border-bottom: 1px solid #E2DCCE; } body.woocommerce-account .woocommerce-MyAccount-content table.shop_table .amount { font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace; } /* Адреса — две карточки на sage. */ body.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } body.woocommerce-account .woocommerce-Address { width: auto; float: none; background: #F5F1E8; border: 1px solid #E2DCCE; border-radius: 16px; padding: 20px; } body.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: 1.7; color: #454B45; } /* Поля форм кабинета — те же, что на кассе. */ body.woocommerce-account .woocommerce .input-text, body.woocommerce-account .woocommerce select, body.woocommerce-account .woocommerce textarea { width: 100%; background: #FFFFFF; border: 1px solid #E2DCCE; border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.4; color: #1A1C1A; box-shadow: none; } body.woocommerce-account .woocommerce .input-text:focus, body.woocommerce-account .woocommerce select:focus, body.woocommerce-account .woocommerce textarea:focus { border-color: #0E5A46; outline: none; box-shadow: 0 0 0 3px rgba(14, 90, 70, .12); } body.woocommerce-account .woocommerce .form-row label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 500; color: #454B45; } body.woocommerce-account .woocommerce .form-row .required { color: #0E5A46; border: 0; text-decoration: none; } /* Кнопки кабинета — pine-пилюля. Ядро (.woocommerce a.button, 0,2,1) красит их серым; свой селектор через body даёт (0,3,1). */ body.woocommerce-account .woocommerce button.button, body.woocommerce-account .woocommerce a.button, body.woocommerce-account .woocommerce input.button { display: inline-block; background: #0E5A46; background-image: linear-gradient(135deg, #0E5A46, #0A3D30); border: 0; border-radius: 999px; padding: 12px 26px; color: #FFFFFF; font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 8px 24px rgba(14, 60, 48, .18); transition: background-image .2s ease, transform .15s ease; } body.woocommerce-account .woocommerce button.button:hover, body.woocommerce-account .woocommerce a.button:hover, body.woocommerce-account .woocommerce input.button:hover { background-image: linear-gradient(135deg, #0A3D30, #083428); transform: translateY(-1px); } /* Кнопка «Просмотр» в списке заказов — вторичное действие, не заливаем. */ body.woocommerce-account .woocommerce-orders-table a.button.view { background: #FFFFFF; background-image: none; color: #0E5A46; border: 1.5px solid #0E5A46; padding: 7px 18px; font-size: 14px; box-shadow: none; } body.woocommerce-account .woocommerce-orders-table a.button.view:hover { background: #E7F0EA; color: #0A3D30; transform: none; } /* Действия на странице просмотра заказа (view-order.php: «Оплатить» + «Отмена», WooCommerce печатает их без пробела между и без обёртки). Обе кнопки ловят общий pine-пилюльный стиль кабинета с тенью выше; без зазора между ними тени соседних пилюль сливались в одно пятно — особенно заметно на мобиле, где кнопки переносятся друг под друга. */ body.woocommerce-account .woocommerce-order-details td:has(.order-actions-button) { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* «Отмена» — второстепенное действие, тот же приём ghost, что «Просмотр». */ body.woocommerce-account .woocommerce-order-details a.button.cancel.order-actions-button { background: #FFFFFF; background-image: none; color: #6B7168; border: 1.5px solid #E2DCCE; padding: 11px 24px; box-shadow: none; } body.woocommerce-account .woocommerce-order-details a.button.cancel.order-actions-button:hover { background: #FBEEDD; color: #C0492B; border-color: #C0492B; transform: none; } /* --- Гостевая страница входа (меню ещё нет) --- */ body.woocommerce-account .woocommerce > h2 { font-family: "Inter", sans-serif; font-size: 24px; font-weight: 600; color: #1A1C1A; margin: 0 0 20px; text-align: center; } body.woocommerce-account form.woocommerce-form-login { max-width: 420px; margin: 0 auto; background: #FFFFFF; border: 1px solid #CDE0D3; border-radius: 20px; padding: 28px; box-shadow: 0 8px 24px rgba(14, 60, 48, .08); } body.woocommerce-account form.woocommerce-form-login .form-row { margin: 0 0 16px; padding: 0; } body.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; color: #454B45; } body.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__rememberme input { width: 16px; min-width: 16px; height: 16px; margin: 0; accent-color: #0E5A46; } body.woocommerce-account form.woocommerce-form-login button.woocommerce-form-login__submit { display: block; width: 100%; } body.woocommerce-account .woocommerce-LostPassword { margin: 16px 0 0; text-align: center; font-size: 14px; } body.woocommerce-account .woocommerce-LostPassword a { color: #0E5A46; text-decoration: underline; } /* Мобильный: меню над содержимым, карточки уже. */ @media (max-width: 782px) { /* Обе колонки во всю ширину. Селекторы с дочерним комбинатором — чтобы перебить flex-basis 240px/320px из десктопных правил (0,3,1). */ body.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { flex: 0 0 100%; } body.woocommerce-account .woocommerce { padding: 8px 16px 56px; } body.woocommerce-account .woocommerce-MyAccount-content, body.woocommerce-account .woocommerce-MyAccount-navigation { padding: 16px; border-radius: 16px; } body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th, body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td { padding: 10px 8px; font-size: 14px; } /* Уведомление «Подтвердите адрес эл. почты» в списке заказов. WooCommerce печатает КНОПКУ ПЕРВОЙ, а текст после неё (`VerificationController.php:279`: '… %s'), и на узком экране кнопка наезжает на текст. Разворачиваем в колонку с обратным порядком: сначала текст, потом кнопка во всю ширину. `.woocommerce-error` сюда НЕ включён сознательно — это