/* =============================================================================
   СВЕТЛАЯ ТЕМА manguarvutid.ee — вариант B: мягкий серый фон, белые карточки
   Собрано 10.09.2026. Разбор рынка и выбор варианта — cveta/index.html.

   КАК УСТРОЕНО. Это СЛОЙ поверх style.css и responsive.css, а не замена.
   Грузится ВСЕГДА и включается классом ma-svetlaya на <html>, который ставит
   переключатель в шапке (справа от языков). Выбор хранится в localStorage,
   класс вешает ранний скрипт в <head> — до отрисовки, поэтому нет мигания.
   🔴 Именно поэтому тема переключается в браузере, а не на сервере: страница
   для всех одна и спокойно лежит в кэше nginx. Кука бы кэш сломала.
   Откат = убрать подключение в functions.php, файлы темы не трогаются.

   ЦВЕТА взяты из разбора рынка и проверены по WCAG 2.2:
     фон #f2f3f5 · карточка #ffffff · рамка #e2e5e9
     текст #15171a (17.96:1 на белом) · второй #5b6169 (6.25:1) · третий #6f767e (4.6:1)
     бренд #ed1c24 — ТОЛЬКО крупное и плашки (на белом 4.38:1, порог для крупного 3:1)
     действие #c8161d — кнопки, ссылки, мелкий текст (5.85:1, порог 4.5:1)

   🔴 ФИРМЕННЫЙ #ed1c24 НЕЛЬЗЯ давать мелкому тексту на светлом фоне: 4.38:1 ниже
   порога 4.5:1. На чёрном он давал 4.79:1 и проходил — тёмная тема это прощала.
   ============================================================================= */

html.ma-svetlaya body {
    --l-bg:      #f2f3f5;
    --l-card:    #ffffff;
    --l-line:    #e2e5e9;
    --l-line2:   #eef0f3;
    --l-ink:     #15171a;
    --l-ink2:    #5b6169;
    --l-ink3:    #6f767e;
    --l-brand:   #ed1c24;
    --l-action:  #c8161d;
    --l-action2: #a8121a;
    --l-pole:    #8f97a1;   /* рамка полей ввода: 2.95:1 к белому, порог WCAG для них 3:1 */
    --l-ten:     0 1px 3px rgba(16,20,28,.10), 0 6px 16px rgba(16,20,28,.06);
}

/* ---------- 1. Основа ---------- */
html.ma-svetlaya body {
    background: var(--l-bg) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .background-bg,
html.ma-svetlaya body .page-top-contenct-section,
html.ma-svetlaya body .logo-menu-area,
html.ma-svetlaya body .shop-age-product-showcasing,
html.ma-svetlaya body .product-showcase-section {
    background: transparent !important;
}
/* Тёмные подложки-картинки страниц (гарантия, поддержка, о нас) на светлой теме
   не нужны — они рассчитаны на чёрный фон. */
html.ma-svetlaya body .background-bg {
    background-image: none !important;
}

html.ma-svetlaya body h1, html.ma-svetlaya body h2, html.ma-svetlaya body h3,
html.ma-svetlaya body h4, html.ma-svetlaya body h5, html.ma-svetlaya body h6,
html.ma-svetlaya body .title-style-one, html.ma-svetlaya body .title-style-two,
html.ma-svetlaya body .fontStylesOne, html.ma-svetlaya body .fontStylesThree,
html.ma-svetlaya body .fontStylesFour, html.ma-svetlaya body .fontStylesSix,
html.ma-svetlaya body .fontFamilyFour {
    color: var(--l-ink) !important;
}
html.ma-svetlaya body p, html.ma-svetlaya body li, html.ma-svetlaya body span, html.ma-svetlaya body td {
    color: inherit;
}
html.ma-svetlaya body ::placeholder { color: var(--l-ink3) !important; }

/* ---------- 2. Шапка ---------- */
/* Верхняя красная полоса остаётся как есть — белый текст на #ed1c24 не трогаем. */
html.ma-svetlaya body .logo-menu-area {
    background: var(--l-card) !important;
    border-bottom: 1px solid var(--l-line) !important;
}
html.ma-svetlaya body .destop-menu li,
html.ma-svetlaya body .destop-menu li a {
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .destop-menu li a:hover,
html.ma-svetlaya body .destop-menu li.current-menu-item a {
    color: var(--l-action) !important;
}
html.ma-svetlaya body .destop-menu .sub-menu {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    box-shadow: var(--l-ten) !important;
}
html.ma-svetlaya body .destop-menu .sub-menu li a { color: var(--l-ink) !important; }
html.ma-svetlaya body .destop-menu .sub-menu li a:hover { color: var(--l-action) !important; }

/* Логотип и значок «15 лет»: на светлом фоне нужны свои файлы.
   Белый текст логотипа и золото венка на #f2f3f5 дают 1.7–1.9:1 — нечитаемо. */
html.ma-svetlaya body .logo-area > a > img {
    content: url("../images/pc-gamer-logo-svetlaya.png");
}
html.ma-svetlaya body .logo-area .ma-trust-badge { color: #b3141a !important; }
html.ma-svetlaya body .logo-area .ma-trust-badge__wreath {
    content: url("../images/15aasta-venok-svetlaya.png");
}

/* Мобильное меню */
html.ma-svetlaya body .mobile-menu {
    background: var(--l-card) !important;
    border-right: 1px solid var(--l-line) !important;
}
html.ma-svetlaya body .mobile-menu ul li a { color: var(--l-ink) !important; }
html.ma-svetlaya body .mobile-menu-icon-area-open,
html.ma-svetlaya body .mobile-menu-icon-area-close { color: #fff !important; }
html.ma-svetlaya body .mgv-mobile-search-form {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
}

/* ---------- 3. Крошки ---------- */
html.ma-svetlaya body .ma-breadcrumbs,
html.ma-svetlaya body .ma-breadcrumbs * { color: var(--l-ink2) !important; }
html.ma-svetlaya body .ma-breadcrumbs a { color: var(--l-action) !important; }

/* ---------- 4. Карточки товара в каталоге и каруселях ---------- */
html.ma-svetlaya body .product-box {
    background: var(--l-card) !important;
    border-radius: 11px;
    box-shadow: var(--l-ten);
    border: 1px solid var(--l-line2) !important;
}
html.ma-svetlaya body .product-box .product-title,
html.ma-svetlaya body .product-box .woocommerce-loop-product__title {
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .product-box .price,
html.ma-svetlaya body .product-box .price * { color: var(--l-ink) !important; }
html.ma-svetlaya body .product-box del,
html.ma-svetlaya body .product-box del * { color: var(--l-ink3) !important; }
html.ma-svetlaya body .product-box ins { text-decoration: none; }
html.ma-svetlaya body .custom-att,
html.ma-svetlaya body .custom-att li,
html.ma-svetlaya body .custom-att li * { color: var(--l-ink2) !important; }
html.ma-svetlaya body .product-showcase-section { color: var(--l-ink) !important; }

/* 🔴 Плашка скидки: надпись мелкая (12 px), значит порог 4.5:1, а белый на фирменном
   #ed1c24 даёт 4.38 — не проходит. Берём рабочий красный, на нём 5.85:1. */
html.ma-svetlaya body .onsale,
html.ma-svetlaya body span.onsale,
html.ma-svetlaya body .pr-onsale,
html.ma-svetlaya body span.pr-onsale {
    background: var(--l-action) !important;
    color: #fff !important;
}

/* ---------- 5. Кнопки ---------- */
html.ma-svetlaya body .woocommerce #respond input#submit,
html.ma-svetlaya body .woocommerce a.button,
html.ma-svetlaya body .woocommerce button.button,
html.ma-svetlaya body .woocommerce input.button,
html.ma-svetlaya body .cart-btn,
html.ma-svetlaya body .single_add_to_cart_button,
html.ma-svetlaya body button.single_add_to_cart_button {
    background: var(--l-action) !important;
    color: #fff !important;
    border-color: var(--l-action) !important;
}
html.ma-svetlaya body .woocommerce a.button:hover,
html.ma-svetlaya body .woocommerce button.button:hover,
html.ma-svetlaya body .cart-btn:hover,
html.ma-svetlaya body button.single_add_to_cart_button:hover {
    background: var(--l-action2) !important;
    color: #fff !important;
}
/* Вторичные кнопки — контур вместо заливки. При наведении заливаются: без этого
   кнопка «TAOTLE JÄRELMAKSU» на светлой теме никак не отзывалась на курсор. */
html.ma-svetlaya body .product-detail-content-area .product-action ul li:nth-child(2) a,
html.ma-svetlaya body .blog-action a {
    background: transparent !important;
    color: var(--l-action) !important;
    border: 1.5px solid var(--l-action) !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
html.ma-svetlaya body .product-detail-content-area .product-action ul li:nth-child(2) a:hover,
html.ma-svetlaya body .blog-action a:hover {
    background: var(--l-action) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(200,22,29,.28);
}

/* ---------- 6. Страница товара ---------- */
html.ma-svetlaya body .product-detail-content-area,
html.ma-svetlaya body .product-detail-content-image,
html.ma-svetlaya body .woocommerce-product-gallery {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .product-detail-content-area .price,
html.ma-svetlaya body .product-detail-content-area .price * { color: var(--l-ink) !important; }
html.ma-svetlaya body .woocommerce-product-details__short-description,
html.ma-svetlaya body .woocommerce-product-details__short-description * { color: var(--l-ink2) !important; }
html.ma-svetlaya body .product-detail-content-area .product-action ul li:nth-child(1) a {
    background: var(--l-action) !important;
    color: #fff !important;
}
html.ma-svetlaya body table.woocommerce-product-attributes,
html.ma-svetlaya body .shop_attributes {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body table.woocommerce-product-attributes th,
html.ma-svetlaya body table.woocommerce-product-attributes td,
html.ma-svetlaya body .shop_attributes th, html.ma-svetlaya body .shop_attributes td {
    color: var(--l-ink) !important;
    border-color: var(--l-line) !important;
}
html.ma-svetlaya body .shop_attributes th { color: var(--l-ink2) !important; }

/* Блок «плюсы + форма» и рассрочка */
html.ma-svetlaya body .product-benefits,
html.ma-svetlaya body .product-benefits * { color: var(--l-ink2) !important; }
html.ma-svetlaya body .xtra-info { color: var(--l-action) !important; }

/* ---------- 7. Карусели допов ---------- */
html.ma-svetlaya body .suitable-products-section { background: transparent !important; }
html.ma-svetlaya body .suitable-products-title,
html.ma-svetlaya body .suitable-products-title-link { color: var(--l-ink) !important; }
html.ma-svetlaya body .suitable-products-title-link:hover { color: var(--l-action) !important; }
html.ma-svetlaya body .suitable-nav button,
html.ma-svetlaya body .suitable-products-section button {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}

/* ---------- 8. Фильтр каталога и сортировка ---------- */
/* 🔴 Рамку даём ТОЛЬКО внешней колонке фильтров. Раньше её получал каждый уровень —
   колонка, блок, обёртка плагина и все девять фильтров, — и выходила «рамка в рамке»
   в четыре слоя. Внутри вместо рамок тонкие разделители. */
html.ma-svetlaya body .wpfMainWrapper,
html.ma-svetlaya body .wpfFilterWrapper,
html.ma-svetlaya body .shop_left_bar_item_area {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .wpfFilterWrapper .wpfFilterTaxNameWrapper,
html.ma-svetlaya body .wpfMainWrapper .wpfCount,
html.ma-svetlaya body .shop_left_bar_item_area ul li a { color: var(--l-ink) !important; }
html.ma-svetlaya body .wpfMainWrapper .wpfCount { color: var(--l-ink3) !important; }
html.ma-svetlaya body .shop-age-product-showcasing .woocommerce-result-count { color: var(--l-ink2) !important; }
html.ma-svetlaya body select,
html.ma-svetlaya body .shop-age-product-showcasing select.orderby,
html.ma-svetlaya body input[type="text"],
html.ma-svetlaya body input[type="email"],
html.ma-svetlaya body input[type="tel"],
html.ma-svetlaya body input[type="number"],
html.ma-svetlaya body input[type="search"],
html.ma-svetlaya body textarea {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}
html.ma-svetlaya body option { background: var(--l-card) !important; color: var(--l-ink) !important; }

/* ---------- 9. Поиск AWS ---------- */
html.ma-svetlaya body .aws-container .aws-search-form,
html.ma-svetlaya body .aws-container .aws-search-field {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}
html.ma-svetlaya .aws-search-result,
html.ma-svetlaya body .aws-search-result {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    box-shadow: var(--l-ten) !important;
}
html.ma-svetlaya body .aws_result_item,
html.ma-svetlaya body .aws_result_item * { color: var(--l-ink) !important; }
html.ma-svetlaya body .aws_result_price,
html.ma-svetlaya body .aws_result_price * { color: var(--l-action) !important; }

/* ---------- 10. Корзина и оформление ---------- */
html.ma-svetlaya body .woocommerce table.shop_table,
html.ma-svetlaya body .cart_totals,
html.ma-svetlaya body .woocommerce-checkout #payment,
html.ma-svetlaya body .woocommerce-billing-fields,
html.ma-svetlaya body .woocommerce-checkout-review-order {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border-color: var(--l-line) !important;
}
html.ma-svetlaya body .woocommerce table.shop_table th,
html.ma-svetlaya body .woocommerce table.shop_table td {
    color: var(--l-ink) !important;
    border-color: var(--l-line) !important;
}
html.ma-svetlaya body #add_payment_method #payment div.payment_box,
html.ma-svetlaya body .woocommerce-cart #payment div.payment_box,
html.ma-svetlaya body .woocommerce-checkout #payment div.payment_box {
    background: #f7f8fa !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body #add_payment_method #payment div.payment_box *,
html.ma-svetlaya body .woocommerce-checkout #payment div.payment_box * { color: var(--l-ink) !important; }
html.ma-svetlaya body .wc_payment_methods label { color: var(--l-ink) !important; }
html.ma-svetlaya body .woocommerce-cart input#coupon_code {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}
/* Логотипы способов оплаты: в тёмной теме их красили в белый силуэт —
   на светлом фоне он исчезает, возвращаем как есть. */
html.ma-svetlaya body .wc_payment_methods label img { filter: none !important; }

/* Окно «Добавлено в корзину» — красим не только панель, но и всё внутри:
   карточки допов и нижняя полоса рисуются своими тёмными фонами.
   Окно появляется по нажатию, поэтому обходчик страниц его не видит — проверять
   отдельно, открыв окно (см. README, раздел про аудит). */
html.ma-svetlaya body .ma-atc-panel,
html.ma-svetlaya body .ma-atc-body,
html.ma-svetlaya body .ma-atc-hero,
html.ma-svetlaya body .ma-atc-sec,
html.ma-svetlaya body .ma-atc-foot {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border-color: var(--l-line) !important;
}
html.ma-svetlaya body .ma-atc-panel * { color: var(--l-ink) !important; }
/* 🔴 ...но НЕ на цветных кнопках внутри окна. Иконка корзины нарисована
   fill="currentColor", и общее правило выше делало её чёрной на красном круге —
   вид был грязный. Возвращаем белый и самой кнопке, и её значку. */
html.ma-svetlaya body .ma-atc-add,
html.ma-svetlaya body .ma-atc-add *,
html.ma-svetlaya body .ma-atc-checkout,
html.ma-svetlaya body .ma-atc-checkout * { color: #fff !important; }
html.ma-svetlaya body .ma-atc-add svg,
html.ma-svetlaya body .ma-atc-checkout svg { fill: none !important; }
html.ma-svetlaya body .ma-atc-add svg [fill="currentColor"],
html.ma-svetlaya body .ma-atc-checkout svg [fill="currentColor"] { fill: #fff !important; }
html.ma-svetlaya body .ma-atc-foot { border-top: 1px solid var(--l-line) !important; }

/* Карточка допа: тёмная плашка с тёмным текстом — названия читались еле-еле */
html.ma-svetlaya body .ma-atc-item {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
}
html.ma-svetlaya body .ma-atc-item:hover { border-color: var(--l-action) !important; }
html.ma-svetlaya body .ma-atc-item-name { color: var(--l-ink) !important; }
html.ma-svetlaya body .ma-atc-item-price,
html.ma-svetlaya body .ma-atc-hero-price,
html.ma-svetlaya body .ma-atc-hero-total { color: var(--l-ink) !important; }
html.ma-svetlaya body .ma-atc-hero-spec,
html.ma-svetlaya body .ma-atc-hero-opts,
html.ma-svetlaya body .ma-atc-hero-month { color: var(--l-ink2) !important; }
html.ma-svetlaya body .ma-atc-sec-title,
html.ma-svetlaya body .ma-atc-back { color: var(--l-ink) !important; }

/* Кнопки окна: «Оформить» красная, «Продолжить покупки» — контур */
html.ma-svetlaya body .ma-atc-checkout {
    background: var(--l-action) !important;
    color: #fff !important;
}
html.ma-svetlaya body .ma-atc-checkout * { color: #fff !important; }
html.ma-svetlaya body .ma-atc-continue {
    background: transparent !important;
    border: 1.5px solid var(--l-line) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .ma-atc-continue:hover {
    background: var(--l-bg) !important;
    border-color: var(--l-ink3) !important;
}
/* Затемнение позади окна — на светлой теме мягче */
html.ma-svetlaya body .ma-atc-fade { background: rgba(16,20,28,.42) !important; }

/* ---------- 11. Формы обратной связи ---------- */
html.ma-svetlaya body .mangurutiv-form-area,
html.ma-svetlaya body .mangurutiv-form-area label,
html.ma-svetlaya body .mangurutiv-form-area h4 { color: var(--l-ink) !important; }
html.ma-svetlaya body .mangurutiv-form-area input[type="text"],
html.ma-svetlaya body .mangurutiv-form-area input[type="email"],
html.ma-svetlaya body .mangurutiv-form-area textarea {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}
html.ma-svetlaya body .mangurutiv-form-area button,
html.ma-svetlaya body .mangurutiv-form-area .button {
    background: var(--l-action) !important;
    color: #fff !important;
}

/* ---------- 12. Главная ---------- */
html.ma-svetlaya body .home-how-single-process {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .home-how-single-process * { color: var(--l-ink) !important; }
html.ma-svetlaya body .mob-block {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
}
html.ma-svetlaya body .mob-block, html.ma-svetlaya body .mob-block * { color: var(--l-ink) !important; }
html.ma-svetlaya body .counter, html.ma-svetlaya body .counter * { color: var(--l-ink) !important; }
html.ma-svetlaya body .home-banner-section-text-area-one .sub-title,
html.ma-svetlaya body .home-banner-section-text-area-two .sub-title { color: var(--l-ink2) !important; }
html.ma-svetlaya body .home-email-subscription-form label { color: var(--l-ink) !important; }
html.ma-svetlaya body .home-email-subscription-form input[type="submit"] {
    background: var(--l-action) !important; color: #fff !important;
}
/* Карусель логотипов брендов: логотипы белые, на светлом фоне пропадут —
   оставляем им тёмную подложку. */
html.ma-svetlaya body .brand-logo-carosel-area {
    background: #1a1c1f !important;
    border-radius: 12px;
}
html.ma-svetlaya body .brand-logo-carosel-content span.title-style-one { color: #fff !important; }

/* ---------- 13. Подвал ---------- */
/* Подвал оставляем тёмным: это привычная «подошва» сайта, там белые логотипы
   брендов и платёжных систем. Светлый низ потребовал бы менять и их. */
html.ma-svetlaya body .footer-copyright-area,
html.ma-svetlaya body .copy-right-section { color: #d6d9dd !important; }
html.ma-svetlaya body .footer-links ul li,
html.ma-svetlaya body .footer-links ul li a { color: #d6d9dd !important; }
html.ma-svetlaya body .footer-links ul li a:hover { color: #fff !important; }

/* ---------- 14. Пагинация ---------- */
html.ma-svetlaya body nav.woocommerce-pagination ul li a,
html.ma-svetlaya body nav.woocommerce-pagination ul li span {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}
html.ma-svetlaya body .woocommerce nav.woocommerce-pagination ul li a:focus,
html.ma-svetlaya body .woocommerce nav.woocommerce-pagination ul li a:hover,
html.ma-svetlaya body .woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--l-action) !important;
    color: #fff !important;
    border-color: var(--l-action) !important;
}

/* ---------- 15. Ссылки ---------- */
html.ma-svetlaya body a { color: var(--l-action); }
html.ma-svetlaya body a:hover { color: var(--l-action2); }
/* Кроме тех, чей цвет задан отдельно выше и внутри цветных плашек */
html.ma-svetlaya body .header-top-area a,
html.ma-svetlaya body .footer-links a,
html.ma-svetlaya body .woocommerce a.button,
html.ma-svetlaya body .destop-menu a { color: inherit; }

/* =============================================================================
   16. Добор — то, что не покрылось первым заходом.
   Найдено примеркой на живом сайте: tools/check-svetlaya-tema.js ищет элементы,
   у которых при включённой теме фон остался тёмным. Список ниже — его улов.
   ============================================================================= */

/* Кнопка «View» на карточках: тёмная плашка поверх картинки */
html.ma-svetlaya body .extra-cart-btn {
    background: var(--l-action) !important;
    color: #fff !important;
}
/* Кнопка корзины на карточке — в теме два написания, div и span */
html.ma-svetlaya body div.cart-btn,
html.ma-svetlaya body span.cart-btn,
html.ma-svetlaya body .cart-btn.inlineBlockStyle {
    background: var(--l-action) !important;
    color: #fff !important;
}
html.ma-svetlaya body div.cart-btn:hover,
html.ma-svetlaya body span.cart-btn:hover {
    background: var(--l-action2) !important;
}
/* Плашка скидки на карточке — у темы свой класс, не woocommerce'вский.
   Цвет задан выше (блок 5): рабочий красный, а не фирменный — надпись мелкая. */
/* Блок с иконками под слайдером и блок рассрочки на главной */
html.ma-svetlaya body .home-features-section,
html.ma-svetlaya body .row.home-features-section,
html.ma-svetlaya body .home-installment-content,
html.ma-svetlaya body .features-product-box {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    border-radius: 12px;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .home-features-section *,
html.ma-svetlaya body .home-installment-content *,
html.ma-svetlaya body .features-product-box * { color: var(--l-ink) !important; }
html.ma-svetlaya body .counter,
html.ma-svetlaya body .counter.fontFamilyOne {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
}

/* Пустая корзина и её кнопка возврата */
html.ma-svetlaya body .cart-empty,
html.ma-svetlaya body .woocommerce-info,
html.ma-svetlaya body .woocommerce-message {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border-color: var(--l-line) !important;
}
html.ma-svetlaya body a.button.wc-backward {
    background: var(--l-action) !important;
    color: #fff !important;
}
/* Затемнение поверх опций YITH — на светлой теме мягче */
html.ma-svetlaya body .yith-wapo-overlay {
    background: rgba(255,255,255,.72) !important;
}

/* =============================================================================
   17. Страницы с собственным оформлением — итог аудита всего сайта.
   node tools/audit-svetlaya-tema.js обошёл 21 страницу и нашёл две беды:
   тёмные карточки на страницах условий, гарантии, FAQ, контактов и «для фирм»,
   и текст с контрастом 1.03:1 — то есть белый на белом (145 абзацев, 52 пункта).
   Причина второй: в теме 91 правило с color:#fff, и точечный список их не покрывал.
   Лечим наоборот — сперва красим весь текст контента, потом возвращаем белый там,
   где он нужен: в красной полосе, подвале, на кнопках и цветных плашках.
   ============================================================================= */

/* --- 17.1 Весь текст страниц — тёмный --- */
html.ma-svetlaya body p,
html.ma-svetlaya body li,
html.ma-svetlaya body h1, html.ma-svetlaya body h2, html.ma-svetlaya body h3,
html.ma-svetlaya body h4, html.ma-svetlaya body h5, html.ma-svetlaya body h6,
html.ma-svetlaya body strong, html.ma-svetlaya body b, html.ma-svetlaya body em,
html.ma-svetlaya body td, html.ma-svetlaya body th, html.ma-svetlaya body dd, html.ma-svetlaya body dt,
html.ma-svetlaya body label, html.ma-svetlaya body figcaption, html.ma-svetlaya body blockquote,
html.ma-svetlaya body caption, html.ma-svetlaya body legend, html.ma-svetlaya body summary,
html.ma-svetlaya body .small-header,
html.ma-svetlaya body .title-style-three,
html.ma-svetlaya body .fontStylesFive,
html.ma-svetlaya body .fontStylesTwo,
html.ma-svetlaya body .fontFamilyOne,
html.ma-svetlaya body .boldFontStyleOne {
    color: var(--l-ink) !important;
}

/* --- 17.2 Красные акценты в тексте: фирменный на белом даёт 4.38:1, берём рабочий --- */
html.ma-svetlaya body .boldRedStyle,
html.ma-svetlaya body span.boldRedStyle,
html.ma-svetlaya body .redStyle,
html.ma-svetlaya body p.kuumakse-alates,
html.ma-svetlaya body .kuumakse-alates {
    color: var(--l-action) !important;
}

/* --- 17.3 Где белый текст ОСТАЁТСЯ (перекрываем правило 17.1) --- */
html.ma-svetlaya body .header-top-area,
html.ma-svetlaya body .header-top-area *,
html.ma-svetlaya body .brand-logo-carosel-area,
html.ma-svetlaya body .brand-logo-carosel-area *,
html.ma-svetlaya body .mobile-menu-icon-area-open,
html.ma-svetlaya body .mobile-menu-icon-area-close,
html.ma-svetlaya body .onsale, html.ma-svetlaya body .onsale *,
html.ma-svetlaya body .pr-onsale, html.ma-svetlaya body .pr-onsale *,
html.ma-svetlaya body .cart-btn, html.ma-svetlaya body .cart-btn *,
html.ma-svetlaya body .extra-cart-btn, html.ma-svetlaya body .extra-cart-btn *,
html.ma-svetlaya body .woocommerce a.button, html.ma-svetlaya body .woocommerce a.button *,
html.ma-svetlaya body .woocommerce button.button, html.ma-svetlaya body .woocommerce button.button *,
html.ma-svetlaya body .woocommerce input.button,
html.ma-svetlaya body button.single_add_to_cart_button,
html.ma-svetlaya body .single_add_to_cart_button *,
html.ma-svetlaya body .product-detail-content-area .product-action ul li:nth-child(1) a,
html.ma-svetlaya body .mangurutiv-form-area button,
html.ma-svetlaya body .home-email-subscription-form input[type="submit"],
html.ma-svetlaya body a.button.wc-backward,
html.ma-svetlaya body .footer-copyright-area, html.ma-svetlaya body .footer-copyright-area *,
html.ma-svetlaya body .copy-right-section, html.ma-svetlaya body .copy-right-section *,
html.ma-svetlaya body .footer-links li, html.ma-svetlaya body .footer-links li a {
    color: #fff !important;
}
/* Подвал — не чисто белый, а мягкий светло-серый, как было */
html.ma-svetlaya body .footer-copyright-area,
html.ma-svetlaya body .footer-copyright-area p,
html.ma-svetlaya body .footer-links li,
html.ma-svetlaya body .footer-links li a { color: #d6d9dd !important; }

/* --- 17.4 Тёмные карточки страниц: условия, гарантия, FAQ, сборка --- */
html.ma-svetlaya body .shop-features-description,
html.ma-svetlaya body .shop-features-description.terms-of-use,
html.ma-svetlaya body .shop-features-description.faq-boxes,
html.ma-svetlaya body .shop-features-description.Assembling-details-box,
html.ma-svetlaya body .contact-details-content,
html.ma-svetlaya body .shop_leftbar_area {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    border-radius: 12px;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .shop-features-description *,
html.ma-svetlaya body .contact-details-content *,
html.ma-svetlaya body .shop_leftbar_area * { color: var(--l-ink) !important; }
/* ссылки и красные акценты внутри этих карточек не терять */
html.ma-svetlaya body .shop-features-description a,
html.ma-svetlaya body .contact-details-content a,
html.ma-svetlaya body .shop-features-description .boldRedStyle,
html.ma-svetlaya body .contact-details-content .boldRedStyle { color: var(--l-action) !important; }

/* --- 17.5 Страница «Для фирм»: свои чёрные карточки из кода страницы --- */
html.ma-svetlaya body .b2b-person,
html.ma-svetlaya body a.b2b-person,
html.ma-svetlaya body .b2b-form-card,
html.ma-svetlaya body aside.b2b-form-card,
html.ma-svetlaya body .b2b-card,
html.ma-svetlaya body .b2b-feature {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .b2b-person *,
html.ma-svetlaya body .b2b-form-card *,
html.ma-svetlaya body .b2b-card *,
html.ma-svetlaya body .b2b-feature * { color: var(--l-ink) !important; }
html.ma-svetlaya body .b2b-lead { color: var(--l-ink2) !important; }
html.ma-svetlaya body .b2b-form-card h3,
html.ma-svetlaya body .b2b-form-card label { color: var(--l-ink) !important; }

/* --- 17.6 Поля форм внутри цветных карточек --- */
html.ma-svetlaya body select.wpcf7-form-control,
html.ma-svetlaya body .wpcf7 input, html.ma-svetlaya body .wpcf7 textarea,
html.ma-svetlaya body .wpcf7 select {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}

/* --- 17.7 Заголовки фильтра каталога --- */
html.ma-svetlaya body .wfpTitle,
html.ma-svetlaya body .wfpTitle.wfpClickable,
html.ma-svetlaya body .shop_left_bar_title_content { color: var(--l-ink) !important; }

/* =============================================================================
   18. Добор второго круга аудита.
   ============================================================================= */

/* Страница «Для фирм»: тёмные не только сами карточки, но и потомки контейнеров —
   li внутри .b2b-grid и div внутри .b2b-price. Точечный список их не ловил. */
html.ma-svetlaya body .b2b-grid > li,
html.ma-svetlaya body .b2b-price > div,
html.ma-svetlaya body .b2b-people > *,
html.ma-svetlaya body .b2b-split > aside,
html.ma-svetlaya body .b2b-split > div {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    border-radius: 12px;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .b2b-grid > li *,
html.ma-svetlaya body .b2b-price > div * { color: var(--l-ink) !important; }
html.ma-svetlaya body .b2b-grid > li a,
html.ma-svetlaya body .b2b-price a { color: var(--l-action) !important; }

/* Галерея работ (Instagram-лента): плитки на тёмной подложке, а кнопка «Jälgi
   Instagramis» получила красный текст на красном фоне — 1.34:1. */
html.ma-svetlaya body .pcg-ig-item {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
}
html.ma-svetlaya body .pcg-ig-follow-btn,
html.ma-svetlaya body a.pcg-ig-follow-btn {
    background: var(--l-action) !important;   /* белый 14 px на фирменном давал 4.38:1 */
    color: #fff !important;
}
html.ma-svetlaya body .pcg-ig-follow-btn * { color: #fff !important; }

/* Счётчик «1–30 из 1982» — серый на светлом давал 3.95:1 */
html.ma-svetlaya body .woocommerce-result-count,
html.ma-svetlaya body .woocommerce-result-count * { color: var(--l-ink2) !important; }

/* --- 29. 🔴 Кнопки «Näita 24 / 48 / Kõik» под курсором (12.09.2026) ---
   Тема заливает такую кнопку фирменным красным и делает текст белым
   (`.show-products-link:hover { color:#fff !important; background:#ed1c24 }`,
   style.css:3329). Но покраска счётчика выше (`.woocommerce-result-count *`)
   специфичнее и с !important, поэтому в светлой теме текст ОСТАВАЛСЯ серым
   на красном: замер 12.09.2026 дал 1.43:1 при пороге 4.5 — цифра пропадала
   под курсором, а на телефоне (там :hover залипает после касания) оставалась
   невидимой и дальше. В тёмной теме тот же элемент даёт 4.38:1, то есть
   задумка была именно белый на красном.
   🔴 Заливка отдана только мыши, касанию — :active: правило раздела 28 про
   залипающий :hover на телефоне действует и здесь. */
html.ma-svetlaya body .woocommerce-result-count a.show-products-link:active,
html.ma-svetlaya body .woocommerce-result-count a.show-products-link:active * {
    background: var(--l-action) !important;
    border-color: var(--l-action) !important;
    color: #fff !important;
}
@media (hover: hover) and (pointer: fine) {
    html.ma-svetlaya body .woocommerce-result-count a.show-products-link:hover,
    html.ma-svetlaya body .woocommerce-result-count a.show-products-link:hover * {
        background: var(--l-action) !important;
        border-color: var(--l-action) !important;
        color: #fff !important;
    }
}

/* Чёрные подложки, вписанные прямо в код страницы через style="background-color: black"
   (страница «О нас» — блок под медиа). !important перебивает inline-стиль,
   если у самого inline нет !important. Правило общее: закроет и другие такие места. */
html.ma-svetlaya body [style*="background-color: black"],
html.ma-svetlaya body [style*="background-color:black"],
html.ma-svetlaya body [style*="background: black"],
html.ma-svetlaya body [style*="background:black"] {
    background-color: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    border-radius: 12px;
}

/* =============================================================================
   19. Карточка товара — блоки с собственным тёмным фоном.
   Первый аудит их пропустил: в списке страниц были категории, но не карточки.
   ============================================================================= */
html.ma-svetlaya body .product-details-configaration-content,
html.ma-svetlaya body .product-config-content-box,
html.ma-svetlaya body .product-config-price-box,
html.ma-svetlaya body .product-details-configaration-content > div,
html.ma-svetlaya body .product-config-content-box > div,
html.ma-svetlaya body .product-config-content-box table,
html.ma-svetlaya body .product-details-configaration-content table {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    color: var(--l-ink) !important;
}
/* вложенные строки внутри уже покрашенной карточки рамку не рисуют */
html.ma-svetlaya body .product-details-configaration-content > div,
html.ma-svetlaya body .product-config-content-box > div,
html.ma-svetlaya body .product-config-content-box table,
html.ma-svetlaya body .product-details-configaration-content table {
    border: 0 !important;
}
html.ma-svetlaya body .product-details-configaration-content *,
html.ma-svetlaya body .product-config-content-box *,
html.ma-svetlaya body .product-config-price-box * { color: var(--l-ink) !important; }
/* подписи характеристик — вторым цветом, значения основным */
html.ma-svetlaya body .product-details-configaration-content .att-title,
html.ma-svetlaya body .product-details-configaration-content strong ~ span { color: var(--l-ink2) !important; }
/* цены и надбавки опций — рабочим красным */
html.ma-svetlaya body .product-config-content-box .price,
html.ma-svetlaya body .product-config-price-box .price,
html.ma-svetlaya body .yith-wapo-addon .price { color: var(--l-action) !important; }

/* Опции YITH (доп. память, диск, гарантия) — каждая в своей тёмной плашке */
html.ma-svetlaya body .yith-wapo-addon,
html.ma-svetlaya body .yith-wapo-block,
html.ma-svetlaya body .yith-wapo-group,
html.ma-svetlaya body .yith-wapo-addon-options {
    background: var(--l-card) !important;
    border-color: var(--l-line) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .yith-wapo-addon *,
html.ma-svetlaya body .yith-wapo-block * { color: var(--l-ink) !important; }
html.ma-svetlaya body .yith-wapo-addon .price,
html.ma-svetlaya body .yith-wapo-addon .wapo-option-price { color: var(--l-action) !important; }

/* 🔴 Кнопка «SOOVIN LISAINFOT» — у неё СВОЙ оранжевый фон #ff6a00, а не тёмный.
   Красный текст на нём давал 2.04:1, белый дал бы 2.87 — оба мимо.
   Тёмный текст на оранжевом = 6.25:1, и фирменный акцент сохраняется. */
html.ma-svetlaya body .xtra-info-btn,
html.ma-svetlaya body span.xtra-info-btn { color: var(--l-ink) !important; }
html.ma-svetlaya body .xtra-info { color: var(--l-action) !important; }

/* Итог с опциями («Arvuti hind / Valikud kokku») — безымянный div внутри контейнера
   YITH, фон #111. Кнопка «SOOVIN LISAINFOT» лежит на нём, оттого её 2.04:1. */
html.ma-svetlaya body .yith-wapo-container > div,
html.ma-svetlaya body .yith-wapo-total-container,
html.ma-svetlaya body .yith-wapo-total,
html.ma-svetlaya body #wapo-total-price,
html.ma-svetlaya body #wapo-total-order-price {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .yith-wapo-container > div * { color: var(--l-ink) !important; }
html.ma-svetlaya body .yith-wapo-container > div .xtra-info-btn,
html.ma-svetlaya body .yith-wapo-container > div .price { color: var(--l-action) !important; }

/* =============================================================================
   20. Итог полного обхода (117 адресов: все страницы, все категории, выборка
   товаров и записей блога) — node tools/audit-svetlaya-tema.js --vse
   ============================================================================= */

/* Блог: карточки записей и их текст */
html.ma-svetlaya body .single-blog-item,
html.ma-svetlaya body .blog-item,
html.ma-svetlaya body .single-blog-item.fontFamilyOne {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    border-radius: 12px;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .single-blog-item *,
html.ma-svetlaya body .blog-title,
html.ma-svetlaya body .blog-title * { color: var(--l-ink) !important; }
html.ma-svetlaya body .single-blog-item a:hover,
html.ma-svetlaya body .blog-title a:hover { color: var(--l-action) !important; }

/* Ссылки внутри контента: были белым по белому (контраст 1:1) */
html.ma-svetlaya body .product-detail-content-area a,
html.ma-svetlaya body .shop-features-description a,
html.ma-svetlaya body .woocommerce-product-attributes a,
html.ma-svetlaya body .shop_attributes a { color: var(--l-action) !important; }

/* Таблицы характеристик и цен: заголовки строк и суммы */
html.ma-svetlaya body table th,
html.ma-svetlaya body .woocommerce table.shop_table th,
html.ma-svetlaya body .woocommerce-product-attributes-item__label {
    color: var(--l-ink2) !important;
}
html.ma-svetlaya body .woocommerce-Price-amount,
html.ma-svetlaya body .woocommerce-Price-amount *,
html.ma-svetlaya body table td .amount { color: var(--l-ink) !important; }

/* Название товара в карточке каталога: серый давал 4.24:1 при мелком кегле */
html.ma-svetlaya body .product-box .product-title,
html.ma-svetlaya body span.product-title { color: var(--l-ink) !important; }

/* Кнопки с белой подписью на фирменном красном: 4.38:1 мало для мелкого текста,
   переводим на рабочий красный (5.85:1). Касается «Смотреть», «Рассрочка»,
   «Вернуться в магазин» и добавления в корзину. */
html.ma-svetlaya body .extra-cart-btn,
html.ma-svetlaya body a.extra-cart-btn,
html.ma-svetlaya body a.button,
html.ma-svetlaya body a.button.wc-backward,
html.ma-svetlaya body button.single_add_to_cart_button,
html.ma-svetlaya body .single_add_to_cart_button.button.alt {
    background: var(--l-action) !important;
    color: #fff !important;
    border-color: var(--l-action) !important;
}

/* Мобильное меню на светлой теме: белая панель */
html.ma-svetlaya body div.mobile-menu,
html.ma-svetlaya body .mobile-menu.active {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .mobile-menu ul li a,
html.ma-svetlaya body .mobile-menu li { color: var(--l-ink) !important; }

/* =============================================================================
   21. Корзина: шапка таблицы и строки товаров.
   Замер с товаром в корзине: thead был #131313 (тёмная полоса поперёк светлой
   страницы), а у tbody tr цвет текста оставался белым — спасали только правила
   для td. Красим и строку, и ячейки.
   ============================================================================= */
html.ma-svetlaya body .woocommerce table.shop_table thead,
html.ma-svetlaya body .woocommerce table.shop_table thead tr,
html.ma-svetlaya body table.shop_table thead,
html.ma-svetlaya body table.shop_table thead tr {
    background: var(--l-bg) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .woocommerce table.shop_table thead th,
html.ma-svetlaya body table.shop_table thead th {
    background: transparent !important;
    color: var(--l-ink) !important;
    border-bottom: 1px solid var(--l-line) !important;
}
html.ma-svetlaya body .woocommerce table.shop_table tbody tr,
html.ma-svetlaya body table.shop_table tbody tr,
html.ma-svetlaya body .woocommerce table.shop_table tbody td,
html.ma-svetlaya body table.shop_table tbody td {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border-color: var(--l-line) !important;
}
html.ma-svetlaya body table.shop_table tbody tr:hover td { background: var(--l-bg) !important; }
/* название товара в строке — ссылка */
html.ma-svetlaya body table.shop_table .product-name a { color: var(--l-action) !important; }
/* крестик удаления */
html.ma-svetlaya body table.shop_table a.remove { color: var(--l-action) !important; }
html.ma-svetlaya body table.shop_table a.remove:hover {
    background: var(--l-action) !important;
    color: #fff !important;
}
/* поле количества */
html.ma-svetlaya body table.shop_table .quantity input {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}

/* =============================================================================
   22. Колонка фильтров — один аккуратный блок вместо матрёшки рамок.
   Замер (/e-pood/): рамки стояли на .shop_leftbar_area, .shop_left_bar_item_area,
   .wpfMainWrapper и на каждом из девяти .wpfFilterWrapper — четыре слоя.
   ============================================================================= */
html.ma-svetlaya body .shop_leftbar_area {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    border-radius: 14px;
    box-shadow: var(--l-ten);
    padding: 4px 16px 12px !important;
    overflow: hidden;
}
/* блоки внутри — разделяются линией, а не рамкой; у первого линии нет */
html.ma-svetlaya body .shop_leftbar_area .shop_left_bar_item_area {
    padding: 14px 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--l-line2) !important;
}
html.ma-svetlaya body .shop_leftbar_area .shop_left_bar_item_area:first-child { border-top: 0 !important; }
html.ma-svetlaya body .wpfFilterWrapper {
    padding: 12px 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--l-line2) !important;
}
html.ma-svetlaya body .wpfMainWrapper > .wpfFilterWrapper:first-child { border-top: 0 !important; }

/* заголовки блоков: спокойные, без лишнего веса */
html.ma-svetlaya body .shop_left_bar_title_content,
html.ma-svetlaya body .wpfFilterTaxNameWrapper,
html.ma-svetlaya body .wfpTitle {
    color: var(--l-ink) !important;
    letter-spacing: .04em;
}
/* поле поиска в фильтрах — одна рамка, скруглённая */
html.ma-svetlaya body .shop_leftbar_area .aws-search-form,
html.ma-svetlaya body .shop_leftbar_area .aws-search-field {
    border-radius: 9px !important;
    border: 1px solid var(--l-line) !important;
    background: var(--l-card) !important;
}
html.ma-svetlaya body .shop_leftbar_area .aws-container { border: 0 !important; }

/* кружки и галочки выбора — в фирменный красный вместо чёрного */
html.ma-svetlaya body .shop_leftbar_area input[type="checkbox"],
html.ma-svetlaya body .shop_leftbar_area input[type="radio"],
html.ma-svetlaya body .wpfFilterWrapper input[type="checkbox"],
html.ma-svetlaya body .wpfFilterWrapper input[type="radio"] {
    accent-color: var(--l-action);
}
html.ma-svetlaya body .wpfFilterWrapper li,
html.ma-svetlaya body .wpfFilterWrapper label { color: var(--l-ink) !important; }
html.ma-svetlaya body .wpfFilterWrapper .wpfCount { color: var(--l-ink3) !important; }

/* ползунок цены */
html.ma-svetlaya body .wpfPriceRangeWrapper input,
html.ma-svetlaya body .shop_leftbar_area input[type="text"] {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    color: var(--l-ink) !important;
    border-radius: 7px !important;
}

/* Кружки и галочки фильтра: плагин рисует их псевдоэлементом ::before у вложенного
   label — заливка #141414 с красной рамкой. На светлом фоне это тяжёлые чёрные точки.
   Невыбранный делаем белым с серым контуром, выбранный — красным. */
/* 🔴 Селектор длинный намеренно: у темы своё правило
   `.woocommerce .wpfFilterWrapper .wpfCheckbox label::before` с !important,
   и по специфичности оно било короткий вариант — кружки оставались чёрными. */
html.ma-svetlaya body .woocommerce .wpfFilterWrapper .wpfCheckbox label::before,
html.ma-svetlaya body .woocommerce .wpfFilterWrapper .wpfRadio label::before,
html.ma-svetlaya body .wpfFilterWrapper .wpfCheckbox label::before,
html.ma-svetlaya body .wpfCheckbox label::before,
html.ma-svetlaya body .wpfRadio label::before {
    background: var(--l-card) !important;
    background-color: var(--l-card) !important;
    border-color: var(--l-ink3) !important;
}
html.ma-svetlaya body .woocommerce .wpfFilterWrapper .wpfCheckbox input:checked + label::before,
html.ma-svetlaya body .wpfCheckbox input:checked + label::before,
html.ma-svetlaya body .wpfRadio input:checked + label::before {
    background: var(--l-action) !important;
    background-color: var(--l-action) !important;
    border-color: var(--l-action) !important;
}
html.ma-svetlaya body .wpfCheckbox label:hover::before,
html.ma-svetlaya body .wpfRadio label:hover::before { border-color: var(--l-action) !important; }

/* =============================================================================
   23. Выпадающее подменю в шапке.
   Красный фон стоит не на самом .sub-menu (он уже белый), а на КАЖДОМ пункте li —
   и вместе с тёмным текстом получалось едкое красное полотно.
   ============================================================================= */
html.ma-svetlaya body .destop-menu .sub-menu {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    border-radius: 12px;
    box-shadow: 0 6px 26px rgba(16,20,28,.14) !important;
    overflow: hidden;
    padding: 6px 0 !important;
}
html.ma-svetlaya body .destop-menu .sub-menu li,
html.ma-svetlaya body .destop-menu .sub-menu li.menu-item {
    background: transparent !important;
    border: 0 !important;
}
html.ma-svetlaya body .destop-menu .sub-menu li + li { border-top: 1px solid var(--l-line2) !important; }
html.ma-svetlaya body .destop-menu .sub-menu li a {
    color: var(--l-ink) !important;
    transition: background .15s ease, color .15s ease;
}
html.ma-svetlaya body .destop-menu .sub-menu li:hover,
html.ma-svetlaya body .destop-menu .sub-menu li a:hover {
    background: var(--l-bg) !important;
    color: var(--l-action) !important;
}

/* =============================================================================
   24. Цена со скидкой.
   На тёмной теме обе цены красные: старая перечёркнута красным, новая яркая.
   На светлой это читалось плохо — обе тёмные, перечёркивание чёрное и жирное.
   Делаем разницу очевидной: старая спокойная серая, новая красная и крупнее.
   ============================================================================= */
/* 🔴 Селекторы длинные намеренно: у темы своё
   `.product-detail-content-area .product-purchasing-info-... del { color:#ED1C2470 }`
   с двумя классами — короткий вариант оно перебивало, и старая цена оставалась
   полупрозрачным красным (на белом это 4.38:1 при мелком кегле). */
html.ma-svetlaya body .product-detail-content-area del,
html.ma-svetlaya body .product-detail-content-area del *,
html.ma-svetlaya body .product-detail-content-area .price del,
html.ma-svetlaya body .product-box .price del,
html.ma-svetlaya body del,
html.ma-svetlaya body del *,
html.ma-svetlaya body .price del,
html.ma-svetlaya body .price del * {
    color: var(--l-ink3) !important;          /* 4.6:1 — порог для мелкого пройден */
    text-decoration-color: var(--l-ink3) !important;
    text-decoration-thickness: 1px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}
html.ma-svetlaya body .product-detail-content-area ins,
html.ma-svetlaya body .product-detail-content-area ins *,
html.ma-svetlaya body .product-detail-content-area .price ins,
html.ma-svetlaya body .product-box .price ins,
html.ma-svetlaya body ins,
html.ma-svetlaya body ins *,
html.ma-svetlaya body .price ins,
html.ma-svetlaya body .price ins * {
    color: var(--l-action) !important;        /* 5.85:1 */
    text-decoration: none !important;
    font-weight: 700 !important;
}
/* в карточке каталога и в окне корзины — тот же порядок */
html.ma-svetlaya body .product-box del, html.ma-svetlaya body .product-box del * { color: var(--l-ink3) !important; }
html.ma-svetlaya body .product-box ins, html.ma-svetlaya body .product-box ins * { color: var(--l-action) !important; }
html.ma-svetlaya body .ma-atc-hero-price del { color: var(--l-ink3) !important; }
html.ma-svetlaya body .ma-atc-hero-price ins { color: var(--l-action) !important; }

/* =============================================================================
   25. Второй аудит, 10.09.2026 вечер: состояния, формы и телефон.
   Обход tools/audit-svetlaya-glubokij.js (26 экранов: телефон + ПК, открытое
   меню, окно «Добавлено в корзину», подсказки поиска, корзина с товаром,
   оформление заказа) плюс точечные замеры tools/zamer-cveta.js.
   Первый обход этого не видел: он смотрит спокойную страницу на ширине 1440,
   а оформление заказа при пустой корзине вообще уходило в редирект.
   ============================================================================= */

/* --- 25.1 🔴 Поля форм WooCommerce: покупатель печатал белым по белому ---
   Тема задаёт `.woocommerce form .form-row input.input-text { background:transparent
   !important; color:#fff !important }` — три класса против нашего правила по типу
   поля, и оно побеждало. Подсказка в поле была видна (у ::placeholder свой цвет),
   а НАБРАННЫЙ текст — нет: вход, регистрация и все поля оформления заказа. */
html.ma-svetlaya body .woocommerce form .form-row input.input-text,
html.ma-svetlaya body .woocommerce form .form-row textarea.input-text,
html.ma-svetlaya body .woocommerce form .form-row textarea,
html.ma-svetlaya body .woocommerce form .form-row select,
html.ma-svetlaya body .woocommerce-checkout .form-row input.input-text,
html.ma-svetlaya body .woocommerce-checkout .form-row textarea,
html.ma-svetlaya body .woocommerce-account .form-row input.input-text {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}
/* сама форма несёт color:#fff — от неё наследует всё, что не покрашено поимённо */
html.ma-svetlaya body .woocommerce form.login,
html.ma-svetlaya body .woocommerce form.register,
html.ma-svetlaya body .woocommerce form.checkout,
html.ma-svetlaya body .woocommerce form.woocommerce-form,
html.ma-svetlaya body .woocommerce-form-login,
html.ma-svetlaya body .woocommerce-form-register { color: var(--l-ink) !important; }

/* --- 25.2 🔴 Выбор страны (select2) на оформлении — «Eesti» белым по белому ---
   Выпадающий список плагин выносит прямым потомком body, поэтому селекторы
   идут от body, а не от формы. */
html.ma-svetlaya body .select2-container--default .select2-selection--single,
html.ma-svetlaya body .select2-container--default .select2-selection--multiple,
html.ma-svetlaya body .select2-container .select2-selection {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .select2-container--default .select2-selection--single .select2-selection__rendered,
html.ma-svetlaya body .select2-selection__rendered,
html.ma-svetlaya body .select2-selection__placeholder { color: var(--l-ink) !important; }
html.ma-svetlaya body .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--l-ink2) !important;
}
html.ma-svetlaya body .select2-dropdown,
html.ma-svetlaya body .select2-container--open .select2-dropdown {
    background: var(--l-card) !important;
    border: 1px solid var(--l-line) !important;
    color: var(--l-ink) !important;
}
html.ma-svetlaya body .select2-results__option,
html.ma-svetlaya body .select2-results__options { background: var(--l-card) !important; color: var(--l-ink) !important; }
html.ma-svetlaya body .select2-container--default .select2-results__option--highlighted,
html.ma-svetlaya body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--l-action) !important;
    color: #fff !important;
}
html.ma-svetlaya body .select2-search--dropdown .select2-search__field {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}

/* --- 25.3 🔴 Тег `small` в общую покраску не входил ---
   В корзине им набрана строка «(sisaldab € 131.42 KM)» — белым по белому, 1:1.
   Красим вторым цветом (это пояснение, не основной текст), но в подвале
   возвращаем светло-серый: там фон тёмный, задан картинкой Frame-footer.webp. */
html.ma-svetlaya body small,
html.ma-svetlaya body .includes_tax,
html.ma-svetlaya body small.includes_tax { color: var(--l-ink2) !important; }
html.ma-svetlaya body .footer-copyright-area small,
html.ma-svetlaya body .header-top-area small { color: #d6d9dd !important; }

/* --- 25.4 Кнопки на фирменном красном: мелкой подписи нужно 4.5:1 ---
   #ed1c24 под белым даёт 4.38 — «Vormistan tellimuse» и кнопка «Filter»
   на телефоне не проходили. Рабочий красный даёт 5.85. Селекторы длиннее
   темы: у неё правило висит на id (#place_order). */
html.ma-svetlaya body #place_order,
html.ma-svetlaya body .woocommerce #place_order,
html.ma-svetlaya body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
html.ma-svetlaya body div.mob-filter,
html.ma-svetlaya body .mob-filter {
    background: var(--l-action) !important;
    color: #fff !important;
    border-color: var(--l-action) !important;
}

/* --- 25.5 Подсказка в поле: серый третьего уровня даёт 4.14:1 на сером фоне ---
   4.6:1 он даёт только на белой карточке. Берём второй цвет: 6.25 на белом,
   5.63 на фоне страницы — проходит везде. */
html.ma-svetlaya body ::placeholder { color: var(--l-ink2) !important; opacity: 1; }

/* --- 25.6 🔴 Белые иконки конфигуратора на светлом фоне пропадают ---
   Конфигуратор ПК (/pc-assemble/): у подписей CPU, RAM, SSD, HDD, GPU, плата —
   иконки assets/images/attributes/*-white.png (яркость 1.0) на фоне #f2f3f5,
   видно только контур. brightness(0) даёт чёрный силуэт и держит прозрачность.

   🔴 ЦЕЛИТЬСЯ ТОЛЬКО В ПУТЬ ТЕМЫ, не в подстроку имени файла (12.09.2026).
   Прежний селектор img[src*="-white."] ловил КАРТИНКИ ТОВАРОВ: имя файла
   у поставщиков идёт от названия, и любая белая версия товара лежит как
   endorfy-liv-onyx-white.jpeg, ...-hero-7-0-white.jpg, ...-haste-2-mini-
   wireless-gaming-mouse-white.jpeg. Белая мышь получала brightness(0)
   и вместо фото выходил чёрный квадрат. Замер: только на пяти страницах
   поиска по слову white таких файлов 35 из 61 (столы, мониторы, наушники,
   мыши, клавиатуры). Исключения по зонам (подвал, шапка, карусель брендов)
   от этого не спасали — товары лежат в каталоге, а не в этих блоках.
   Блок исключений убран: mc-visa-white.png из подвала лежит в
   assets/images/, логотипы брендов в assets/images/brands/ — под путь
   attributes/ ни один не попадает. */
html.ma-svetlaya body img.form-img[src*="/attributes/"],
html.ma-svetlaya body img[src*="/themes/manguarvutid/assets/images/attributes/"][src*="-white."] {
    filter: brightness(0) !important;
    opacity: .78;
}

/* --- 25.7 🔴 Окно «Калькулятор рассрочки» ---
   Оно рисуется своим кодом в шаблоне товара: фон #1a1a1a, текст #f0f0f0.
   Общая покраска текста (17.1) делала заголовок и мелкую сноску тёмными —
   тёмное по тёмному, 1.03:1; кнопке «ESITA TAOTLUS» доставался красный текст
   на красном фоне (1.01:1) от правила ссылок внутри карточки товара.
   Делаем окно светлым целиком — так оно перестаёт спорить со страницей. */
html.ma-svetlaya body .inbank-modal { background: rgba(16,20,28,.45) !important; }
html.ma-svetlaya body .inbank-modal-content {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
    box-shadow: var(--l-ten) !important;
}
html.ma-svetlaya body .inbank-modal-content h3,
html.ma-svetlaya body .custom-calculator-header h3,
html.ma-svetlaya body .inbank-modal-content .field-header,
html.ma-svetlaya body .inbank-modal-content .result-section .label { color: var(--l-ink) !important; }
html.ma-svetlaya body .inbank-modal-content .calculator-disclaimer,
html.ma-svetlaya body .inbank-modal-content .field-subvalue { color: var(--l-ink2) !important; }
html.ma-svetlaya body .inbank-modal-content .field-value,
html.ma-svetlaya body .inbank-modal-content input.field-value {
    background: var(--l-bg) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
}
html.ma-svetlaya body .inbank-modal-content .result-section .amount { color: var(--l-action) !important; }
html.ma-svetlaya body .inbank-modal-close,
html.ma-svetlaya body span.inbank-modal-close { color: var(--l-ink2) !important; }
html.ma-svetlaya body .price-input-wrapper::after { color: var(--l-ink2) !important; }
html.ma-svetlaya body .inbank-modal-trigger,
html.ma-svetlaya body button.inbank-modal-trigger { color: var(--l-action) !important; }
/* 🔴 Кнопка заявки: селектор с классом карточки товара намеренно — иначе её цвет
   перебивает правило «ссылки внутри .product-detail-content-area». */
html.ma-svetlaya body .product-detail-content-area a.apply-now-btn,
html.ma-svetlaya body a.apply-now-btn,
html.ma-svetlaya body .apply-now-btn {
    background: var(--l-action) !important;
    color: #fff !important;
}
html.ma-svetlaya body .inbank-modal-content input[type=range]::-webkit-slider-runnable-track {
    background: var(--l-line) !important;
}
html.ma-svetlaya body .inbank-modal-content input[type=range]::-webkit-slider-thumb {
    background: var(--l-action) !important;
    border: 2px solid #fff !important;
}

/* --- 25.8 Затемнение позади мобильного меню — как у окна корзины --- */
html.ma-svetlaya body > div.overlay,
html.ma-svetlaya body div.overlay { background: rgba(16,20,28,.45) !important; }

/* --- 25.9 Рамка полей ввода: серый разделительный цвет давал 1.26:1 к белому ---
   На белой карточке поле различалось только этой рамкой, а WCAG 1.4.11 просит
   для границ элементов управления 3:1. Берём отдельный цвет: 2.95 к белому
   и 2.66 к фону страницы — поле видно, но рамка не давит.
   Правило стоит последним, поэтому перекрывает разделы 8, 11, 17.6, 22 и 25.1. */
html.ma-svetlaya body input[type="text"],
html.ma-svetlaya body input[type="email"],
html.ma-svetlaya body input[type="tel"],
html.ma-svetlaya body input[type="number"],
html.ma-svetlaya body input[type="search"],
html.ma-svetlaya body input[type="password"],
html.ma-svetlaya body textarea,
html.ma-svetlaya body select,
html.ma-svetlaya body .woocommerce form .form-row input.input-text,
html.ma-svetlaya body .woocommerce form .form-row textarea,
html.ma-svetlaya body .woocommerce form .form-row select,
html.ma-svetlaya body .wpcf7 input, html.ma-svetlaya body .wpcf7 textarea, html.ma-svetlaya body .wpcf7 select,
html.ma-svetlaya body .select2-container--default .select2-selection--single,
html.ma-svetlaya body .aws-container .aws-search-form,
html.ma-svetlaya body .aws-container .aws-search-field,
html.ma-svetlaya body .shop_leftbar_area .aws-search-form,
html.ma-svetlaya body .shop_leftbar_area .aws-search-field {
    border-color: var(--l-pole) !important;
}
/* поле цены в калькуляторе рассрочки: фон был серый, рамка на нём пропадала */
html.ma-svetlaya body .inbank-modal-content .field-value,
html.ma-svetlaya body .inbank-modal-content input.field-value {
    background: var(--l-card) !important;
    border-color: var(--l-pole) !important;
}

/* =============================================================================
   26. Тёмное на тёмном — то, что аудит не видел, потому что САМ ЭТИ ЗОНЫ ИСКЛЮЧАЛ.
   Найдено владельцем 10.09.2026 и подтверждено замером. Красная полоса шапки
   и подвал в обходчике стояли в списке «служебное, не проверять» — расчёт был,
   что они остаются тёмными и их не трогают общие правила. Расчёт неверный:
   правила по классу WooCommerce (цена, плашки уведомлений) достают и туда.
   🔴 Урок метода: исключённая из проверки зона — это не «заведомо целая» зона,
   а слепое пятно. Теперь обходчик их проверяет отдельным правилом: на тёмном
   и цветном фоне текст обязан быть светлым.
   ============================================================================= */

/* --- 26.1 🔴 Сумма корзины в красной полосе шапки была тёмной ---
   `.woocommerce-Price-amount { color: var(--l-ink) }` из раздела 20 и
   `.header-top-area * { color:#fff }` из 17.3 имеют одинаковую специфичность,
   и побеждало то, что ниже по файлу, — тёмное. Строка выходила «0 EUR (€ 0.00)»,
   где скобка с суммой почти сливалась с фирменным красным (4.1:1). */
html.ma-svetlaya body .header-top-area .woocommerce-Price-amount,
html.ma-svetlaya body .header-top-area .woocommerce-Price-amount *,
html.ma-svetlaya body .header-top-area .amount,
html.ma-svetlaya body .header-top-area bdi,
html.ma-svetlaya body .header-top-area .cart-checkout,
html.ma-svetlaya body .header-top-area .cart-checkout * { color: #fff !important; }

/* --- 26.2 🔴 Плашки уведомлений WooCommerce оставались тёмными ---
   Тема задаёт им `background: rgba(19,19,19,.9)` и белый текст. В слое были покрыты
   `.woocommerce-info` и `.woocommerce-message`, а `.woocommerce-error` — нет, и
   сообщение «нельзя добавить столько» выходило чёрной плитой поперёк светлой страницы.
   Красная линия сверху сохранена — по ней плашка узнаётся. */
html.ma-svetlaya body .woocommerce-error,
html.ma-svetlaya body ul.woocommerce-error,
html.ma-svetlaya body .woocommerce-info,
html.ma-svetlaya body .woocommerce-message,
html.ma-svetlaya body .woocommerce-noreviews,
html.ma-svetlaya body .woocommerce-notices-wrapper .woocommerce-error,
html.ma-svetlaya body .woocommerce-checkout #payment .woocommerce-error,
html.ma-svetlaya body .wc-block-components-notice-banner {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
    border-top: 3px solid var(--l-action) !important;
    box-shadow: var(--l-ten);
}
html.ma-svetlaya body .woocommerce-error li,
html.ma-svetlaya body .woocommerce-error *,
html.ma-svetlaya body .woocommerce-info *,
html.ma-svetlaya body .woocommerce-message *,
html.ma-svetlaya body .wc-block-components-notice-banner * { color: var(--l-ink) !important; }
/* кнопка внутри плашки («Смотреть корзину») остаётся красной с белой подписью */
html.ma-svetlaya body .woocommerce-error a.button,
html.ma-svetlaya body .woocommerce-error a.button *,
html.ma-svetlaya body .woocommerce-info a.button,
html.ma-svetlaya body .woocommerce-info a.button *,
html.ma-svetlaya body .woocommerce-message a.button,
html.ma-svetlaya body .woocommerce-message a.button * {
    background: var(--l-action) !important;
    color: #fff !important;
}

/* =============================================================================
   27. Двойная рамка у поля поиска (найдено владельцем 10.09.2026).
   Плагин AWS рисует ДВА вложенных элемента: обёртку `.aws-search-form` и само
   поле `.aws-search-field`. Слой давал рамку обоим, и пока она была цвета
   разделителя (1.26:1), это не бросалось в глаза. Как только рамкам полей
   задали заметный цвет (раздел 25.9), стало видно две линии с зазором,
   да ещё с разными скруглениями: 6 px у обёртки и 11 px у поля.
   Оставляем рамку ТОЛЬКО обёртке — она и есть видимое поле.
   ============================================================================= */
html.ma-svetlaya body .aws-container .aws-search-form,
html.ma-svetlaya body .shop_leftbar_area .aws-search-form,
html.ma-svetlaya body .mgv-mobile-search-form .aws-search-form {
    border: 1px solid var(--l-pole) !important;
    border-radius: 10px !important;
    background: var(--l-card) !important;
    overflow: hidden;                 /* скругление не режет подсказки: их плагин выносит в body */
}
html.ma-svetlaya body .aws-container .aws-search-field,
html.ma-svetlaya body .shop_leftbar_area .aws-search-field,
html.ma-svetlaya body .mgv-mobile-search-form .aws-search-field {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Текст в поле стоял выше середины рамки: сама рамка теперь на обёртке (70 px),
   а поле внутри осталось прежней высоты (60 px) и прижато к верху — снизу оставалось
   9 px пустоты. Растягиваем поле на всю высоту рамки и отдаём выравнивание браузеру:
   у однострочного input текст центрируется сам, если не задан жёсткий line-height. */
html.ma-svetlaya body .aws-container .aws-search-form,
html.ma-svetlaya body .shop_leftbar_area .aws-search-form,
html.ma-svetlaya body .mgv-mobile-search-form .aws-search-form {
    display: flex !important;
    align-items: stretch !important;
}
html.ma-svetlaya body .aws-container .aws-wrapper,
html.ma-svetlaya body .shop_leftbar_area .aws-wrapper,
html.ma-svetlaya body .mgv-mobile-search-form .aws-wrapper {
    flex: 1 1 auto;
    display: flex !important;
    height: auto !important;
}
html.ma-svetlaya body .aws-container .aws-search-field,
html.ma-svetlaya body .shop_leftbar_area .aws-search-field,
html.ma-svetlaya body .mgv-mobile-search-form .aws-search-field {
    height: auto !important;
    align-self: stretch;
    line-height: normal !important;
}

/* =============================================================================
   28. Находки владельца 11.09.2026 — стрелки каруселей и форма «SOOVIN LISAINFOT»
   ============================================================================= */

/* 🔴 Стрелка листания пропадала после касания. Раздел 7 красит фон ВСЕХ кнопок секции
   в белый с !important, а правило темы «.suitable-products-nav button:hover svg
   { stroke:#fff }» продолжало работать — на телефоне :hover залипает после касания,
   и белая стрелка оставалась на белом фоне (контраст 1:1). На ПК мышь уходит, поэтому
   там беды не видно. Теперь вид кнопки задан здесь целиком, а заливка отдана только
   мыши и живому нажатию. Селектор с .suitable-products-header — чтобы не зависеть
   от порядка правил в файле. */
html.ma-svetlaya body .suitable-products-header .suitable-products-nav button {
    background: var(--l-card) !important;
    border: 1px solid var(--l-action) !important;
}
html.ma-svetlaya body .suitable-products-header .suitable-products-nav button svg {
    stroke: var(--l-action) !important;
}
@media (hover: hover) and (pointer: fine) {
    html.ma-svetlaya body .suitable-products-header .suitable-products-nav button:hover {
        background: var(--l-action) !important;
    }
    html.ma-svetlaya body .suitable-products-header .suitable-products-nav button:hover svg {
        stroke: #fff !important;
    }
}
html.ma-svetlaya body .suitable-products-header .suitable-products-nav button:active {
    background: var(--l-action) !important;
}
html.ma-svetlaya body .suitable-products-header .suitable-products-nav button:active svg {
    stroke: #fff !important;
}
/* Дальше листать нечего: приглушение ставит скрипт классом sp-krai. */
html.ma-svetlaya body .suitable-products-header .suitable-products-nav button.sp-krai {
    opacity: .3;
}

/* Кнопка отправки формы «SOOVIN LISAINFOT» была белой на белом фоне с серой рамкой —
   в тёмной теме она фирменно-красная. Возвращаем ей вид главной кнопки. */
html.ma-svetlaya body .product-form .wpcf7 input[type="submit"] {
    background: var(--l-action) !important;
    border-color: var(--l-action) !important;
    color: #fff !important;
}
@media (hover: hover) and (pointer: fine) {
    html.ma-svetlaya body .product-form .wpcf7 input[type="submit"]:hover {
        background: var(--l-action2) !important;
        border-color: var(--l-action2) !important;
    }
}

/* =============================================================================
   30. Фокус с клавиатуры — цвет обводки под светлый фон (12.09.2026).
   В теме обводка фирменная #ed1c24: на чёрном фоне это 4.79:1, а на белой
   карточке — 4.38:1, то есть на пределе. Берём рабочий красный палитры:
   5.85:1 на белом, 5.27:1 на фоне страницы. В красной полосе шапки обводка
   остаётся белой — правило темы там переопределяет цвет и без слоя.
   ============================================================================= */
html.ma-svetlaya body a:focus-visible,
html.ma-svetlaya body button:focus-visible,
html.ma-svetlaya body input:focus-visible,
html.ma-svetlaya body select:focus-visible,
html.ma-svetlaya body textarea:focus-visible,
html.ma-svetlaya body summary:focus-visible,
html.ma-svetlaya body [tabindex]:focus-visible {
    outline-color: var(--l-action) !important;
}
html.ma-svetlaya body .header-top-area a:focus-visible,
html.ma-svetlaya body .header-top-area button:focus-visible,
html.ma-svetlaya body .header-top-area input:focus-visible,
html.ma-svetlaya body .ma-tema-knopka:focus-visible {
    outline-color: #fff !important;
}

/* =============================================================================
   31. Окно «SOOVIN LISAINFOT» на ПК (09.10.2026, .ma-info-okno в style.css) –
   светлое, как окно калькулятора рассрочки (раздел про .inbank-modal).
   Поля и кнопка формы внутри окна красятся теми же правилами .product-form.
   ============================================================================= */
html.ma-svetlaya body .ma-info-fon { background: rgba(16,20,28,.45) !important; }
html.ma-svetlaya body .ma-info-panel {
    background: var(--l-card) !important;
    color: var(--l-ink) !important;
    border: 1px solid var(--l-line) !important;
    box-shadow: var(--l-ten) !important;
}
html.ma-svetlaya body .ma-info-zag { color: var(--l-ink) !important; }
html.ma-svetlaya body .ma-info-x { color: var(--l-ink2) !important; }
@media (hover: hover) and (pointer: fine) {
    html.ma-svetlaya body .ma-info-x:hover { color: var(--l-ink) !important; }
}