/* Хлебные крошки (Figma 611:4026 на странице каталога, 611:4045 на странице товара):
   «Главная» @0.5, разделитель Line 8 — вертикальная линия 1×4, #305684 @0.25,
   затем текущая страница. Общий блок внутренних страниц: страница стоит сразу под
   шапкой, поэтому top от начала секции одинаковый (pc 24, mb 11).
   Под MODX — отдельный чанк.

   Ряд лежит в потоке: в макете пункты стояли на left 0 / 52 / 58, но 52 и 58 — это
   позиции при конкретной длине слова «Главная» (45.6px). Текст крошки меняется на
   каждой странице и приходит из MODX, поэтому зазоры задаются gap, а не координатами.
   Замер исходной вёрстки: зазор до линии 6.4, после линии 5. */
.crumbs {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Отступ от шапки: в макете крошки стояли вплотную к ней, потому что каждая страница
     была отдельным фреймом и зазор жил в координате секции. В потоке его нужно задать
     явно, иначе крошки приклеены к шапке.
     Значение макетное (документ шириной 1920): html { zoom } из css/adaptive.css сожмёт
     его вместе со всей страницей — на вьюпорте 1440 это даст видимые 64. */
  margin: 85px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: normal;
  color: var(--brand);
}

.crumbs__item {
  white-space: nowrap;
}

/* Пройденные уровни приглушены, текущий — в полную силу. В макете путь был
   двухуровневым, поэтому приглушённой была только «Главная»; у товара уровней три
   и правило распространяется на любой уровень со ссылкой. */
.crumbs__item:has(a) {
  opacity: 0.5;
}

.crumbs__item--home {
  /* до разделителя 6.4 против общего gap 5 → добираем 1.4 */
  margin-right: 1.4px;
}

.crumbs__sep {
  /* Линия 1×4 в макете стоит верхом на 119 при верхе строки 113 → сдвиг 6.
     align-items: center дал бы 118.5 (полупиксель), поэтому смещение явное. */
  align-self: flex-start;
  width: 1px;
  height: 4px;
  margin-top: 6px;
  background: var(--brand);
  opacity: 0.25;
}

/* Пройденный уровень — ссылка, поэтому у неё есть состояние наведения:
   приглушение снимается, подчёркивания в макете нет. */
.crumbs__item a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.crumbs__item:has(a):hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .crumbs__item a {
    transition: none;
  }
}

@media (max-width: 1199px) {
  /* mb: экран уже, шапка ниже — отступ меньше пропорционально (64 × 58/89 ≈ 42) */
  .crumbs {
    margin-top: 42px;
  }
}