/* Доступность: размеры нажимаемых элементов и контраст текста.
   У темы :root{font-size:10px}, поэтому размеры только в px. */

/* --- Размер целей нажатия ---------------------------------------------
   Ссылки в списке категорий подвала занимали по высоте 9 px: попасть
   пальцем в такую строку трудно, соседние строки сливаются. Требование
   WCAG — не меньше 24 px. Увеличиваем только на сенсорных экранах,
   чтобы вёрстка на мониторе осталась прежней. */

@media (pointer: coarse) {
  .nav-categories__link,
  .footer__nav a,
  .footer__menu a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  .nav-categories__menu > li,
  .footer__nav li {
    margin-bottom: 2px;
  }
}

/* --- Контраст текста ---------------------------------------------------
   Название бренда на карточке товара было #b0b0b0 на белом — это 2,1 : 1
   при норме 4,5 : 1. Такой текст плохо читается на солнце и на дешёвых
   экранах. Берём самый светлый серый, который проходит норму. */

.products__item-category,
.products__line-category,
.products__micro-category {
  color: #767676;
}

/* Плашка «Популярный»: белый текст 9 px на #2196f3 давал 3,1 : 1.
   Оттенок синего делаем темнее — 5,6 : 1, цвет остаётся синим. */

.products__item-mark--popular,
.products__line-mark--popular,
.products__micro-mark--popular,
.sku__stickers .products__item-mark--popular {
  background-color: #1565c0;
}

/* Даты в блоках новостей и отзывов были #afafaf на белом — 2,2 : 1
   при мелком кегле. Тот же приём: самый светлый проходящий серый. */

.media__item-date,
.reviews__item-foot cite small,
.article__date,
.blog__item-date {
  color: #767676;
}


/* Главные кнопки: белый текст на фирменном жёлтом #f5be44 давал 1,9 : 1 —
   надпись «В корзину» плохо читалась на солнце и людям со слабым зрением.
   Жёлтый оставляем, текст делаем тёмным: 8,4 : 1. Это заметное изменение
   вида — если оно не устроит, достаточно убрать этот блок. */

.btn--cart,
.btn--blue,
.btn--yellow,
#button-cart,
.subsc__btn,
.checkout__btn {
  color: #292a30;
}

.btn--cart svg,
.btn--blue svg,
#button-cart svg {
  fill: #292a30;
}

/* Мелкие серые подписи: артикул товара, дата в блоге, подсказка под капчей */

.sku__id,
.blog__item-time,
.vt-captcha__hint {
  color: #767676;
}

/* Надпись «Есть в наличии» была салатовой (#b0cb34) — 1,9 : 1 на белом */

.sku__status-success,
.products__status-success {
  color: #4f7000;
}

/* --- Видимый фокус -----------------------------------------------------
   Тема убирает обводку у элементов в фокусе. Для тех, кто ходит по сайту
   с клавиатуры, это означает потерю позиции. Возвращаем обводку только
   для клавиатурного фокуса — мышью её видно не будет. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #292a30;
  outline-offset: 2px;
}

/* --- Класс для текста, который читает только диктор --- */

.vt-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}