/* Start:/local/templates/main_v3/components/bitrix/news.list/brands/style.css?17883560834056*/
/*
   Список брендов /brands/ — сетка плиток.

   Цвета и радиусы — переменные шаблона (main_v3/main.css), значения после
   запятой запасные, как в assets/css/about.css.
*/

.brands { color: var(--ink, #12181F); }

/* ── Сетка плиток ─────────────────────────────────────────────────────── */
/* auto-fill, а не фиксированные колонки: ширина карточки раздела зависит от
   того, показано ли боковое меню, и «правильное» число колонок по ширине окна
   не считается — пусть считает сама сетка. */
.brands__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brands__cell { display: flex; }

.brand-tile {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 96px;
  padding: 16px 14px;
  border: 1px solid var(--line, #E6EAF0);
  border-radius: 16px;
  background: #fff;
  color: var(--ink, #12181F);
  text-align: center;
  text-decoration: none;
}
/* Наведение подсвечивает только название. Рамку и тень плитка не меняет:
   в сетке из сотен одинаковых карточек любое движение и любая тень под
   курсором читаются как рябь, а подсветить нужно ровно то, по чему кликают. */
.brand-tile:hover .brand-tile__name,
.brand-tile:focus-visible .brand-tile__name {
  color: var(--brand-700, #178235);
}
/* Клавиатурный фокус текстом не обозначить — цвет заметит не каждый, и это
   не признак фокуса. Оставляем штатную обводку. */
.brand-tile:focus-visible {
  outline: 2px solid var(--brand, #22B24B);
  outline-offset: 2px;
}

.brand-tile__logo {
  max-width: 100%;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Рядом с логотипом название — подпись, а не заголовок: логотип уже назвал
   бренд, дублировать его тем же кеглем незачем. */
.brand-tile--logo .brand-tile__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #7A8694);
}

.brand-tile__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  transition: color .15s ease;
  /* Названия вида «AQUAFLAX-NANO» переносить негде, без этого плитка шире сетки. */
  overflow-wrap: anywhere;
}

.brands__empty { margin: 0; color: var(--muted, #7A8694); }

/* ── Постраничная навигация ───────────────────────────────────────────── */
/* Шаблон пагинации у компонента — стандартный «.default», он печатает <font>
   и текстовые ссылки. Переопределять его тут незачем, достаточно причесать. */
.brands__pager { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line, #E6EAF0); }
.brands__pager font { font-size: 14px; color: var(--muted, #7A8694); }
.brands__pager a { color: var(--brand-700, #178235); text-decoration: none; }
.brands__pager a:hover { color: var(--brand, #22B24B); text-decoration: underline; }
.brands__pager b { color: var(--ink, #12181F); }

@media (max-width: 480px) {
  .brands__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .brand-tile { min-height: 84px; padding: 14px 10px; }
}

/* End */
/* /local/templates/main_v3/components/bitrix/news.list/brands/style.css?17883560834056 */