/*
 * Назначение файла: Вспомогательные классы-утилиты
 */

.button-reset {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.invisible {
  visibility: hidden !important;
}

/* Выделение текста — фирменным акцентом вместо системного синего.
   ::selection не наследуется, поэтому нужны оба правила: для документа
   и для всех элементов. */
::selection {
  background-color: var(--color-accent-soft);
  color: var(--color-dark);
}

::-moz-selection {
  background-color: var(--color-accent-soft);
  color: var(--color-dark);
}

/* ================== ВЫДЕЛЕНИЕ И ПОДСВЕТКА ТАПА ==================
   Синий прямоугольник выделения и серая вспышка при тапе — поведение
   браузера для текста, а не для органов управления. На кнопке, табе или
   чекбоксе выглядит как артефакт: пользователь нажимает, а интерфейс
   отвечает выделением слова.

   Снимаем только с интерактивных элементов. Заголовки, описания,
   характеристики и код товара остаются выделяемыми — иначе ломается
   копирование, ради которого текст и существует. */
button,
a,
label,
summary,
[role="button"],
[role="option"],
[role="tab"],
.checkbox,
.toggle,
.custom-dropdown__trigger,
.custom-dropdown__option,
.tabs__trigger,
.product-card__action-btn,
.mobile-nav__item {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ================== GLOBAL SCROLLBARS ================== */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background-color: #cecece;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 999px;
}

.d-none {
  display: none !important;
}

/* ==========================================================================
   Доступность: кольцо фокуса
   ========================================================================== */

/* :focus-visible браузер зажигает только тогда, когда кольцо действительно
   нужно: при табе с клавиатуры — да, при клике мышью по кнопке — нет.
   Раньше это делал JS-полифил с классом .focus-visible; он удалён,
   поддержка нативная во всех актуальных браузерах. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Браузерный контур при клике мышью гасим — но только там, где сработал
   :focus-visible-разбор. Отдельного правила для :focus не нужно: без
   :focus-visible у элемента остаётся штатное поведение браузера. */
:focus:not(:focus-visible) {
  outline: none;
}