/* ═══════════════════════════════════════════════════════════════════════════
   ТЕМА 'argument': ФОКУС И НИЖНЯЯ МОБИЛЬНАЯ ПАНЕЛЬ (владелец 05.10.2026).
   Подключение — templates/themes/argument/partials/head.njk, после
   theme-argument.css. Все правила под .theme-argument (класс на <body>):
   на теме по умолчанию файл ничего не задевает.
   Цвет нигде не записан числом — только var(--brand-primary*), который считает
   lib/brand-color.ts из content.settings.primary_color.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── А. ОБВОДКА ФОКУСА — ФИРМЕННЫМ ЦВЕТОМ, А НЕ ГОЛУБЫМ ─────────────────────
   Откуда был голубой:
   • рамка фокуса браузера по умолчанию (:focus-visible → -webkit-focus-ring-color);
   • main.css (собранный Tailwind 3): «кольцо» по умолчанию
     *{--tw-ring-color: rgb(59 130 246 / .5)}, .btn-primary/.btn-outline:focus,
     утилиты focus:ring-blue-500 / focus:ring-primary-500 / focus:ring-blue-500/20
     и focus:border-blue-500 / focus:border-primary-500 — все записаны числом
     #3b82f6 и переменную фирменного цвета не видят;
   • tw-supplement.css: .promo-modal__close:focus-visible — #2563eb.
   Видимый фокус клавиатуры сохраняется: меняется только цвет.
   :where() обнуляет специфичность — правила, где обводку убрали намеренно
   (outline:none у полей со своей рамкой фокуса), остаются как были. */
/* Отступ 2px: у залитых фирменным цветом кнопок («Каталог») обводка того же
   цвета без зазора сливалась бы с кнопкой. */
:where(.theme-argument) :focus-visible { outline-color: var(--brand-primary); outline-offset: 2px; }
:where(.theme-argument) *,
:where(.theme-argument) ::before,
:where(.theme-argument) ::after { --tw-ring-color: rgba(var(--brand-primary-rgb), .5); }
.theme-argument .btn-primary:focus,
.theme-argument .btn-outline:focus { --tw-ring-color: rgba(var(--brand-primary-rgb), .5); }
.theme-argument .focus\:ring-blue-500:focus,
.theme-argument .focus\:ring-primary-500:focus,
.theme-argument .focus-within\:ring-blue-500:focus-within { --tw-ring-color: var(--brand-primary); }
.theme-argument .focus\:ring-blue-500\/20:focus { --tw-ring-color: rgba(var(--brand-primary-rgb), .2); }
.theme-argument .focus\:border-blue-500:focus,
.theme-argument .focus\:border-primary-500:focus { border-color: var(--brand-primary); }
.theme-argument .promo-modal__close:focus-visible { outline-color: var(--brand-primary); }
/* Галочки/переключатели браузера тоже красит системный синий. */
:where(.theme-argument) { accent-color: var(--brand-primary); }
/* Подсветка касания на мобильных: без системной синей вспышки — отклик даёт
   сам элемент (у нижней панели — реверс, ниже). */
.theme-argument { -webkit-tap-highlight-color: transparent; }

/* ── Б. НИЖНЯЯ ПАНЕЛЬ: РЕВЕРС ПРИ НАЖАТИИ И В ТЕКУЩЕМ РАЗДЕЛЕ ──────────────
   Обычное состояние — белый фон, тёмный значок и подпись; нажатие (:active)
   и текущий раздел (.is-active) — фирменный фон, белые значок и подпись.
   Значки нарисованы currentColor, поэтому перекрашиваются вместе с текстом. */
.theme-argument .mbn-tab {
  color: var(--arg-ink);
  background-color: #fff;
  transition: background-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.theme-argument .mbn-tab svg { transition: color .18s ease; }
.theme-argument .mbn-tab:hover { color: var(--arg-ink); }
.theme-argument .mbn-tab:active,
.theme-argument .mbn-tab.is-active {
  background-color: var(--brand-primary);
  /* !important: старые скрипты панели ставят цвет кнопке атрибутом style. */
  color: var(--brand-primary-contrast, #fff) !important;
}
/* Счётчик корзины на красном фоне — инверсия, иначе сливается. */
.theme-argument .mbn-tab:active .js-cart-count,
.theme-argument .mbn-tab.is-active .js-cart-count {
  background-color: var(--brand-primary-contrast, #fff);
  color: var(--brand-primary);
}
.theme-argument .mbn-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.theme-argument .mbn-tab.is-active:focus-visible { outline-color: var(--brand-primary-contrast, #fff); outline-offset: -4px; }

/* ── В. СЛОТ «КАТАЛОГ ⇄ ГЛАВНАЯ» ───────────────────────────────────────────
   Обе кнопки в разметке, видна одна (partials/header.njk решает на сервере,
   скрипт там же — при открытии меню каталога). */
.theme-argument .mbn-tab.mbn-off { display: none !important; }
/* Открыто меню каталога или «Ещё» (z-index 9999) — панель над ними. */
.theme-argument.mbn-raised nav.mbn { z-index: 10000; }

/* ── Г. «ЕЩЁ»: ССЫЛКИ ШАПКИ ─────────────────────────────────────────────── */
.theme-argument .mbn-more-links { display: flex; flex-direction: column; }
.theme-argument .mbn-more-link {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px;
  font-size: 16px; color: var(--arg-ink); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.theme-argument .mbn-more-link:hover { background: var(--arg-bg-2); }
.theme-argument .mbn-more-link:active { background: var(--brand-primary); color: var(--brand-primary-contrast, #fff); }
.theme-argument .mbn-more-link.is-current { color: var(--brand-primary); font-weight: 500; }
.theme-argument .mbn-more-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

/* Почта в меню шапки вместо выбора города (06.10.2026): на <1280px прячем, чтобы меню не уходило в скрытую строку */
.theme-argument .arg-navbar-email{display:none}
@media (min-width:1280px){.theme-argument .arg-navbar-email{display:block}}

/* ═══════════════════════════════════════════════════════════════════════════
   Д. ШАПКА: БЛОК ДЕЙСТВИЙ (Избранное, Сравнение, Корзина, Войти) — 06.10.2026.
   Четыре одинаковых квадрата 48×48 (по высоте поиска и «Каталога»); подписи
   под значками нет — она всплывает плашкой под квадратом при наведении и при
   фокусе с клавиатуры, абсолютным позиционированием (вёрстка не сдвигается).
   Наведение: квадрат — фирменный, значок и подпись — белые, счётчик —
   инверсия (белый кружок, фирменная цифра).
   Корзина — островок Cart (createRoot заменяет содержимое контейнера
   .arg-action__ico): его ссылку растягиваем на весь квадрат, так что
   кликабелен весь квадрат и до, и после гидрации.
   Разметка — themes/argument/partials/header-desktop.njk.
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-argument .arg-actions { gap: 6px; }
.theme-argument .arg-actions .arg-action {
  position: relative; flex: 0 0 48px; width: 48px; height: 48px; padding: 0; gap: 0;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  background-color: transparent; color: var(--arg-ink);
  transition: background-color .18s ease, color .18s ease;
}
/* Счётчик привязываем к квадрату, а не к значку. */
.theme-argument .arg-actions .arg-action__ico { position: static; height: auto; color: inherit; }
.theme-argument .arg-actions .arg-action--cart .arg-action__ico { position: absolute; inset: 0; display: flex; }
.theme-argument .arg-actions .arg-action--cart .arg-action__ico > a {
  position: static; flex: 1 1 auto; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: inherit; transition: color .18s ease;
}
.theme-argument .arg-actions .arg-action__ico svg { width: 22px; height: 22px; }
.theme-argument .arg-actions .arg-badge,
.theme-argument .arg-actions .arg-action__ico span.absolute {
  top: 3px !important; right: 1px !important;
  transition: background-color .18s ease, color .18s ease;
}
/* Подпись-плашка: прямо под квадратом, по центру. */
.theme-argument .arg-actions .arg-action__label {
  display: block; position: absolute; top: 100%; left: 50%; z-index: 5;
  padding: 6px 9px; background: var(--brand-primary); color: var(--brand-primary-contrast, #fff) !important;
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
@media (hover: hover) {
  .theme-argument .arg-actions .arg-action:hover { background-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff); }
  .theme-argument .arg-actions .arg-action:hover a,
  .theme-argument .arg-actions .arg-action--cart:hover .arg-action__ico > a { color: var(--brand-primary-contrast, #fff); }
  .theme-argument .arg-actions .arg-action:hover .arg-badge,
  .theme-argument .arg-actions .arg-action:hover .arg-action__ico span.absolute {
    background: var(--brand-primary-contrast, #fff) !important; color: var(--brand-primary) !important;
  }
  .theme-argument .arg-actions .arg-action:hover .arg-action__label {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
  }
}
/* Клавиатура: та же подпись при фокусе. Обводка — сплошная (у «auto» Chrome
   обводит и всплывшую подпись, получается рамка неровной формы). */
.theme-argument .arg-actions .arg-action:focus-visible,
.theme-argument .arg-actions .arg-action--cart .arg-action__ico > a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.theme-argument .arg-actions .arg-action:focus-visible .arg-action__label,
.theme-argument .arg-actions .arg-action--cart:focus-within .arg-action__label {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}

/* Поиск в шапке: кнопка-лупа — квадрат во всю высоту поля у правого края. */
.theme-argument .arg-search .ds-search-btn {
  top: 1px; right: 1px; bottom: 1px; width: 46px; transform: none;
  align-items: center; justify-content: center;
  background-color: transparent; color: var(--arg-ink);
  transition: background-color .18s ease, color .18s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Е. НАВЕДЕНИЕ ПО ВСЕМУ САЙТУ (владелец 06.10.2026).
   Правило: элемент-кнопка «тёмное на белом» (контурные и белые кнопки,
   кнопки-значки, пагинация, вкладки, фильтры, переключатели) при наведении —
   фирменный фон + белые текст и значок. Уже залитые фирменным цветом
   («Каталог», «В корзину», «Найти» в фильтре, .btn-primary) — на тон темнее
   (--brand-primary-hover), не белые. Текстовые ссылки и пункты меню текстом
   плашкой не становятся — у них фирменный цвет текста (как и было).
   Карточки-плитки (товар, статья, бренд, раздел) — тоже не плашкой: внутри
   фото и цены, у них остаётся линия-рамка при наведении.
   Всё — только при @media (hover: hover): на сенсорных экранах «залипшего»
   наведения нет. Нижняя мобильная панель (.mbn-*, .site-tabbar) здесь не
   затрагивается — у неё свой реверс по нажатию (разделы Б и тема).
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-argument :is(
  .btn, .btn-primary, .btn-outline, .btn-outline-neutral, .btn-secondary, .btn-white,
  nav[aria-label="Pagination"] a, .ds-filter, .ds-fbox__link, .ds-fbox__row, .cat-filterbtn,
  .ds-fapply, .product-card__btn, .product-slider-arrow, .brands-sort-btn, .brands-view-btn,
  .pdp-tab, .pdp-qty button, .pdp-units button, .cat-sort
) { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
/* Строка фильтра с галочкой: поля по бокам, чтобы плашка наведения не
   прилипала к тексту; отрицательные поля сохраняют прежнее выравнивание. */
.theme-argument .ds-fbox__row { padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; }
.theme-argument :is([data-island="Cart"], [data-island="Checkout"]) button.border:is(.w-7, .w-8) { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
/* Пагинация: синее наведение из main.css (hover:bg-primary-50/text-primary-500
   собраны числом #3b82f6) снимаем везде — и на сенсорных экранах, где
   «наведение» залипало бы после касания. */
.theme-argument nav[aria-label="Pagination"] a:hover { background-color: transparent; color: var(--arg-ink); }

@media (hover: hover) {
  /* 1. Залитые фирменным — темнее. */
  .theme-argument .btn-primary:not(:disabled):hover,
  .theme-argument .ds-fapply:hover,
  .theme-argument .product-card__btn:hover,
  .theme-argument .pdp-actions > .btn-outline:first-child:hover,
  .theme-argument .pdp-actions > .btn-primary:first-child:hover {
    background-color: var(--brand-primary-hover); color: var(--brand-primary-contrast, #fff);
  }

  /* 2. Нейтральные кнопки (контур серым, белые, вторичные) — фирменная заливка. */
  .theme-argument .btn-outline-neutral:not(:disabled):hover,
  .theme-argument .btn-secondary:not(:disabled):hover,
  .theme-argument .btn-white:not(:disabled):hover,
  .theme-argument .pdp-actions .btn-icon:hover,
  .theme-argument .pdp-actions > .btn:not(:first-child):hover {
    background-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff);
    border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary);
  }
  .theme-argument .pdp-actions .btn-icon:hover svg { color: inherit; }

  /* 3. Пагинация (текущая страница — <span>, не трогается). */
  .theme-argument nav[aria-label="Pagination"] a:hover {
    background-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff);
  }

  /* 4. Фильтры каталога: подразделы, строки с галочками, кнопка «Фильтры»
        (узкий экран), ярлыки-фильтры блога. */
  .theme-argument .ds-fbox__link:hover,
  .theme-argument .ds-fbox__row:hover {
    background-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff);
  }
  /* !important: подписи «Сегодня»/«Под заказ» окрашены атрибутом style. */
  .theme-argument .ds-fbox__row:hover > *,
  .theme-argument .ds-fbox__link:hover * { color: inherit !important; }
  /* Галочка на фирменном фоне — белая, иначе отмеченная сливается с фоном. */
  .theme-argument .ds-fbox__row:hover input[type="checkbox"] { accent-color: var(--brand-primary-contrast, #fff); }
  .theme-argument .cat-filterbtn:hover,
  .theme-argument .ds-filter:hover {
    background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff);
  }
  .theme-argument .cat-filterbtn:hover *,
  .theme-argument .ds-filter:hover .ds-filter__n { color: inherit; }

  /* 5. Стрелки слайдера товаров (было синим из main.css). */
  .theme-argument .product-slider-arrow:not(:disabled):hover {
    background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff);
  }

  /* 6. Переключатели на странице брендов (сортировка, вид). */
  .theme-argument .brands-sort-btn:hover,
  .theme-argument .brands-view-btn:hover {
    background-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff); box-shadow: none;
  }

  /* 7. Карточка товара: количество (− / +), единицы, вкладки описания.
        Вкладке плашку расширяем тенью по бокам — без сдвига ряда. */
  .theme-argument .pdp-qty button:hover {
    background-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff);
  }
  .theme-argument .pdp-units button:not([aria-pressed="true"]):hover {
    background-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff);
  }
  .theme-argument .pdp-tabs .pdp-tab:hover {
    background-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff) !important;
    box-shadow: -12px 0 0 var(--brand-primary), 12px 0 0 var(--brand-primary);
  }

  /* 8. Корзина (островок оформления на /cart): кнопки − / + у позиции. */
  .theme-argument :is([data-island="Cart"], [data-island="Checkout"]) button.border:is(.w-7, .w-8):not(:disabled):hover {
    background-color: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff);
  }

  /* 9. Шапка: лупа поиска; круглые «закрыть» у выезжающих панелей. */
  .theme-argument .arg-search .ds-search-btn:hover,
  .theme-argument button.p-2.rounded-full:hover {
    background-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff);
  }

  /* 10. Текстовые элементы — фирменный цвет текста, без плашки:
         сортировка (системный список — плашкой красился бы и он), копирование
         артикула в плитке товара. */
  .theme-argument .cat-sort:hover { color: var(--brand-primary); }
  .theme-argument .product-card button[data-sku]:hover { color: var(--brand-primary) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   analog-calculator: аналоги по брендам (06.10.2026).
   Блок внизу /analog-calculator со ссылками на раздел /analogi
   (templates/pages/analog-calculator.njk, классы .acb-*). Базовые стили — в
   шаблоне; здесь — тема: прямые углы, линии --arg-line, текст --arg-ink.
   Плитка — только текст (без фото и цен), поэтому при наведении она ведёт
   себя как кнопка: фирменный фон, белый текст.
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-argument .acb { border-top: 1px solid var(--arg-line); }
.theme-argument .acb-title { color: var(--arg-ink); text-transform: none; }
.theme-argument .acb-all { color: var(--arg-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--arg-line); }
.theme-argument .acb-list { gap: 0; border-top: 1px solid var(--arg-line); border-left: 1px solid var(--arg-line); }
.theme-argument .acb-item {
  border: 0; border-right: 1px solid var(--arg-line); border-bottom: 1px solid var(--arg-line);
  border-radius: 0; color: var(--arg-ink); background-color: #fff;
  transition: background-color .18s ease, color .18s ease;
}
.theme-argument .acb-cap, .theme-argument .acb-meta { color: var(--arg-muted); }
.theme-argument .acb-item:hover { border-color: var(--arg-line); }
@media (hover: hover) {
  .theme-argument .acb-all:hover { color: var(--brand-primary); text-decoration-color: currentColor; }
  .theme-argument .acb-item:hover { background-color: var(--brand-primary); color: var(--brand-primary-contrast, #fff); }
  .theme-argument .acb-item:hover :is(.acb-cap, .acb-meta) { color: inherit; opacity: .85; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ж. КЛИКАБЕЛЬНЫЕ КАРТОЧКИ — ИНВЕРСИЯ ПРИ НАВЕДЕНИИ (владелец 06.10.2026).
   Карточка целиком становится фирменной, весь текст, значки и стрелки в ней —
   белыми. Картинки остаются на белом: фото товара/обложка статьи не меняются,
   а логотипам (бренды, клиенты) под наведением подкладывается белая подложка
   кольцом box-shadow — размеры и вёрстка не двигаются.

   ДЛЯ НОВЫХ БЛОКОВ: класс .arg-hcard на ссылке-карточке (<a class="arg-hcard">)
   — и она получает ту же инверсию; картинку/логотип внутри пометить
   .arg-hcard__media — останется на белом; логотип бренда — .arg-hcard__logo
   (прозрачный файл через фильтр brandLogoT) — станет белым силуэтом.
   Отдельные правила в странице не нужны.

   Уже подключены: статьи (.lart-card — главная, .ds-post — /blog/), плитки
   разделов (.arg-tile — главная, .dns-li — /catalog, .cm__rail-item — меню
   каталога), бренды (.brand-item — /brands/, .arg-brands__item — главная,
   .cm__brand — меню каталога), клиенты с логотипом на главной, разделы аналогов
   (.bah-item — /analogi/), товары (.product-card — листинги и слайдеры,
   .pdp-sim — «Похожие товары»), строки-ссылки тёмного блока главной
   (.arg-hero__link).
   Товар: фото остаётся на белом (у .product-card__img/.pdp-sim-img белый фон),
   красной становится остальная карточка; кнопка «В корзину» на красной
   карточке — белая с фирменным текстом, под самим курсором — контурная белая.
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-argument :is(.arg-hcard, .lart-card, .ds-post, .arg-tile, .dns-li, .cm__rail-item, .bah-item, .pdp-sim, .product-card, .arg-brands__item, .cm__brand, .arg-hero__link),
.theme-argument .brand-item .brand-card,
.theme-argument .arg-clients li.arg-clients__logo > a {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
/* Своих transition у текста внутри карточки нет намеренно: с color: inherit он
   плавно идёт за цветом карточки; собственные переходы у вложенных элементов
   складывались бы (вложенный текст «догонял» бы родителя до ~1 с). */
.theme-argument :is(.arg-tile__img, .arg-hcard__media, .arg-clients__logo img) { transition: box-shadow .18s ease, background-color .18s ease; }
.theme-argument :is(.arg-hcard__logo, .brand-logo, .arg-brands__item img, .cm__brand img) { transition: filter .18s ease; }
/* Картинки — на белом (видно только под наведением). */
.theme-argument .arg-hcard__media,
.theme-argument .arg-tile__img,
.theme-argument .lart-shot { background-color: #fff; }

@media (hover: hover) {
  .theme-argument :is(.arg-hcard, .lart-card, .ds-post, .arg-tile, .dns-li, .cm__rail-item, .bah-item, .pdp-sim, .product-card, .arg-brands__item, .cm__brand):hover,
  .theme-argument .brand-item:hover .brand-card,
  .theme-argument .arg-clients li.arg-clients__logo > a:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary-contrast, #fff) !important;
    box-shadow: none !important; transform: none !important;
  }
  /* Весь текст и значки внутри — белые (в т.ч. окрашенные атрибутом style). */
  .theme-argument :is(.arg-hcard, .lart-card, .ds-post, .arg-tile, .dns-li, .cm__rail-item, .bah-item, .pdp-sim, .product-card):hover *:not(img):not(.product-card__btn),
  .theme-argument .brand-item:hover .brand-card *,
  .theme-argument .arg-clients li.arg-clients__logo > a:hover * {
    color: inherit !important;
  }
  .theme-argument .product-card:hover .stock-dot { background-color: var(--brand-primary-contrast, #fff) !important; }
  /* Логотипы и миниатюры — на белой подложке. */
  .theme-argument .arg-tile:hover .arg-tile__img { box-shadow: 0 0 0 6px #fff; }
  .theme-argument :is(.arg-hcard:hover .arg-hcard__media, .arg-clients li.arg-clients__logo > a:hover img) {
    background-color: #fff; box-shadow: 0 0 0 8px #fff;
  }
  /* Логотипы брендов — прозрачные версии (фильтр brandLogoT, lib/brand-logos.ts):
     под наведением белый силуэт. drop-shadow без смещения и размытия
     накладывает силуэт второй раз — светлые полупрозрачные части (серый
     BAKS, жёлтое у IEK) читаются плотнее. Для новых плиток — .arg-hcard__logo. */
  .theme-argument :is(.arg-hcard:hover .arg-hcard__logo, .brand-item:hover .brand-logo, .arg-brands__item:hover img, .cm__brand:hover img) {
    filter: brightness(0) invert(1) drop-shadow(0 0 0 #fff);
  }
  /* «В корзину» на красной карточке: белая; под курсором — белый контур. */
  .theme-argument .product-card:hover .product-card__btn {
    background-color: var(--brand-primary-contrast, #fff) !important; color: var(--brand-primary) !important;
  }
  .theme-argument .product-card:hover .product-card__btn:hover {
    background-color: transparent !important; color: var(--brand-primary-contrast, #fff) !important;
    box-shadow: inset 0 0 0 2px var(--brand-primary-contrast, #fff);
  }
  /* Тёмный первый экран главной: строка-ссылка — фирменная плашка (тенью
     расширена на 20px по бокам, без сдвига текста), стрелка — белая. */
  .theme-argument .arg-hero__link:hover {
    background-color: var(--brand-primary); color: #fff; border-bottom-color: var(--brand-primary);
    box-shadow: -20px 0 0 var(--brand-primary), 20px 0 0 var(--brand-primary);
  }
  .theme-argument .arg-hero__link:hover .arg-arrow { color: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   З. «ЧЕМ ЗАМЕНИТЬ БРЕНД» — /analogi/ и /analogi/<slug>/ (06.10.2026).
   Шаблоны templates/pages/brand-analogs(-hub).njk несут свои стили с префиксами ba- и bah-
   с синими ссылками (#2563eb) — они для темы по умолчанию и остаются там.
   Здесь — тема: текстовые ссылки цвета --arg-ink, красные при наведении;
   линии --arg-line; шапка таблицы и строки групп — нейтральные тона темы.
   Хлебные крошки (partials/breadcrumbs.njk: hover:text-primary-500 собран
   числом — синий) — красные при наведении на всех страницах темы.
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-argument nav[aria-label="Breadcrumb"] a:hover { color: var(--brand-primary); }

.theme-argument :is(.bah-extra, .ba-links, .ba-answer, .ba-sec) a,
.theme-argument [data-island="AnalogCalculator"] a.text-blue-600 {
  color: var(--arg-ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--arg-line); transition: color .18s ease, text-decoration-color .18s ease;
}
.theme-argument .ba-table a { color: var(--arg-ink); text-decoration: none; transition: color .18s ease; }
.theme-argument :is(.bah-extra, .ba-links, .ba-answer, .ba-sec, .ba-table) a:hover,
.theme-argument [data-island="AnalogCalculator"] a.text-blue-600:hover {
  color: var(--brand-primary); text-decoration-color: currentColor;
}
.theme-argument .ba-table a:hover { text-decoration: underline; text-underline-offset: 3px; }

.theme-argument :is(.bah-extra span, .bah-item span, .ba-stats, .ba-params, .ba-checked) { color: var(--arg-muted); }
.theme-argument :is(.ba-answer, .ba-sec, .ba-series, .ba-h2) { color: var(--arg-ink); }
.theme-argument .ba-note { color: var(--brand-primary); }
.theme-argument :is(.bah-item, .ba-calc, .ba-tablewrap) { border-color: var(--arg-line); }
.theme-argument .ba-table :is(th, td) { border-bottom-color: var(--arg-line); }
.theme-argument .ba-table thead th { background: var(--arg-line-soft); color: var(--arg-ink); }
.theme-argument .ba-table .ba-group td { background: #f8f9fa; color: var(--arg-ink); border-top: 1px solid var(--arg-line); }
.theme-argument .ba-links { border-top-color: var(--arg-line); }