/* ============================================================
   п.13 ЦВЕТА И ЧИТАЕМОСТЬ
   Подключается ПОСЛЕДНИМ среди стилей шапки, поэтому перебивает
   style.css / header.css / mobile.css без !important там, где
   исходное правило шло без него.

   Ни одного захардкоженного цвета: всё через токены, которые
   header.php считает из config_site_color и config_site_color_secondary
   библиотекой catalog/view/theme/coloring/v48_palette.php.

     --brand-yellow / --brand-teal    сами фирменные цвета
     --brand-*-text                   >= 5.0:1 к белому  (текст на белом)
     --brand-*-strong                 >= 7.0:1 к белому  (АКТИВНЫЕ состояния)
     --brand-*-deep                   >= 4.8:1 к белому  (поверхность под белый текст)
     --on-yellow / --on-teal          текст ПОВЕРХ плашки фирменного цвета
     --brand-muted                    приглушённый текст на белом, >= 5.5:1
     --on-dark-muted                  приглушённый текст на тёмных блоках, >= 4.5:1
   ============================================================ */

/* ---------- 1. ПОДВАЛ: текст тонул в тёмном фоне #151F26 ---------- */
.footer__disclaimer,
.footer__bottom-row,
.footer__legal-info,
.footer__pay-badge,
.footer__phone-sub,
.footer__desc,
.footer__contact-row { color: var(--on-dark-muted); }

/* ---------- 2. ПОДПИСКА: подпись и плейсхолдер ---------- */
.subscribe__note { color: var(--on-dark-muted); }
.subscribe__input::placeholder { color: var(--on-dark-muted); opacity: 1; }
.subscribe__input::-webkit-input-placeholder { color: var(--on-dark-muted); opacity: 1; }
.subscribe__input::-moz-placeholder { color: var(--on-dark-muted); opacity: 1; }
/* кнопка: жёлтая плашка + читаемый на ней текст */
.subscribe__btn { color: var(--on-yellow); }

/* ---------- 3. ЦИФРЫ И АКЦЕНТНЫЙ ТЕКСТ НА БЕЛОМ ----------
   Фирменный цвет как текст на белом даёт 1.3-2.3. Берём его же,
   затемнённый до нормы. */
.why-us__number,
.counter__number { color: var(--brand-teal-text); }
.why-us__desc { color: var(--brand-muted); }

/* ---------- 4. SEO-ТЕКСТ на #f5f6f7 ---------- */
.seo-text p,
.seo-text ul,
.seo-text ol,
.seo-text h2,
.seo-text h3,
.seo-text h4,
.seo-text strong,
.seo-text b { color: var(--brand-muted); }
.seo-text li::marker { color: var(--brand-muted); }
.seo-text a { color: var(--brand-teal-text); }
.seo-text a:hover { color: var(--brand-teal-strong); }

/* ---------- 5. FAQ: раскрытый вопрос и ссылки в ответах ----------
   Подложка раскрытого пункта тонирована (--brand-teal-light), поэтому
   здесь нужен -strong, а не -text. */
.faq__question:hover { color: var(--brand-teal-text); }
.faq__item.active .faq__question { color: var(--brand-teal-strong); }
.faq__item.active .faq__toggle { color: var(--brand-teal-strong); }
.faq__answer p { color: var(--brand-muted); }
.faq__answer a { color: var(--brand-teal-strong); border-bottom-color: currentColor; }
.faq__answer a:hover { border-bottom-color: currentColor; }

/* ---------- 6. ЛЕНТА КАТЕГОРИЙ ----------
   Была светлая бирюзовая полоса с белым текстом (2.20), а ВЫБРАННЫЙ пункт
   ещё бледнее (1.96) — выделение читалось как «отключено».
   Стало: полоса углублена до --brand-teal-deep (белый текст >= 4.8),
   активный пункт — плашка второго фирменного цвета с тёмным текстом
   (>= 5.5), то есть заметно КОНТРАСТНЕЕ соседей. */
.cat-nav { background: var(--brand-teal-deep); }
html.vp-mobile .cat-nav { background: var(--brand-teal-deep) !important; }
.cat-nav::after { background: linear-gradient(to left, var(--brand-teal-deep), rgba(0, 0, 0, 0)); }
.cat-nav a { color: #fff; }
.cat-nav a:hover { background: rgba(0, 0, 0, 0.18); }
.cat-nav a.active,
.cat-nav a.active:hover {
  background: var(--brand-yellow);
  color: var(--on-yellow);
  box-shadow: inset 0 -3px 0 var(--brand-yellow-deep);
}
.cat-nav a.cat-nav--highlight { background: rgba(0, 0, 0, 0.18); border-bottom-color: var(--brand-yellow); }
.cat-nav a.cat-nav--highlight:hover { background: rgba(0, 0, 0, 0.26); }

/* ---------- 7. КНОПКИ НА ФИРМЕННОЙ ПЛАШКЕ ---------- */
.compare__btn { background: var(--brand-teal-deep); color: #fff; }
.compare__btn:hover { background: var(--brand-teal-strong); }
.compare__card--featured .compare__btn { background: var(--brand-yellow); color: var(--on-yellow); }
.compare__card--featured .compare__btn:hover { background: var(--brand-yellow); color: var(--on-yellow); }
.scroll-top { background: var(--brand-teal-deep); }
.scroll-top:hover { background: var(--brand-teal-strong); }

/* ---------- 8. НАВИГАЦИЯ В ШАПКЕ И БУРГЕР ----------
   Активный пункт был бледнее обычных (2.20 против почти чёрных).
   Даём -strong, жирность и подложку — выделение читается как выделение. */
.header__nav a.active {
  color: var(--brand-teal-strong);
  border-bottom-color: var(--brand-teal-strong);
  font-weight: 800;
}
.mobile-drawer__nav a.active {
  color: var(--brand-teal-strong);
  background: var(--brand-teal-light);
  box-shadow: inset 3px 0 0 var(--brand-teal-strong);
  font-weight: 800;
}
.mobile-drawer__nav a:active { color: var(--brand-teal-strong); }
.mobile-drawer__section { color: var(--brand-teal-strong); border-bottom-color: var(--brand-teal-deep); }

/* ---------- 9. ХЛЕБНЫЕ КРОШКИ: текущий раздел ---------- */
.breadcrumb .active { color: var(--brand-muted); }

/* ---------- 10. СОРТИРОВКА В КАТЕГОРИЯХ ----------
   style.css:93 красил выбранный пункт в фирменный жёлтый — 1.43 против
   4.29 у невыбранных. Активный делаем самым тёмным и подчёркнутым. */
.container.category-page .sort-block a.active,
.container.category-page .sort-block a.active:hover,
.sort-block a.btn-link.active {
  color: var(--brand-teal-strong);
  font-weight: 700;
  border-bottom: 2px solid var(--brand-teal-strong);
}
.container.category-page .sort-block a,
.container.category-page .sort-block label { color: var(--brand-muted); }
.container.category-page .sort-block a:hover { color: var(--brand-teal-text); }
.container.category-page .sort-block a:hover span { border-color: var(--brand-teal-text); }

/* ---------- 11. ТЕКСТ НА АКЦЕНТНЫХ ПЛАШКАХ ----------
   Здесь стояло `:root { --on-yellow: #ffffff !important }` — белый прибивался
   гвоздями, потому что на синем акценте SCHWINN он и правда верен (4.9:1).
   Но токен общий: на оранжевом HALTEN (#f69310) белый даёт 2.31, и надписи на
   кнопках пропадали. Цвет считает палитра v48_palette (v48_on_color): для синего
   она сама вернёт белый, для оранжевого — тёмный. Перебивать её нельзя. */
.hero__cta,
.hero__cta:hover,
.hero__cta:focus,
.hero__product-badge,
.hero__badge-hit,
[class*="badge-hit"],
[class*="hit"] { color: var(--on-yellow, #ffffff) !important; }