/*
  Хлебные крошки (159:3819). Сквозной компонент — на продуктовой странице
  сидит поверх фото hero (см. product-hero.css: position:absolute внутри
  .product-hero__content), на других страницах может понадобиться в
  обычном document-flow — сам компонент об этом не знает, только даёт
  текстовые стили и раскладку в строку.
*/
.breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  font-size: 13px;
  line-height: 23px;
}

.breadcrumbs__link {
  color: var(--color-ink-breadcrumb);
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.breadcrumbs__link:hover {
  opacity: 0.7;
}

.breadcrumbs__current {
  color: var(--color-ink-breadcrumb);
}

.breadcrumbs__sep {
  display: flex;
  align-items: center;
  color: var(--color-ink-breadcrumb);
  opacity: 0.4;
}

.breadcrumbs__sep .icon--breadcrumb-chevron {
  width: 4px;
  height: 6px;
}

/* Мобильная адаптация (используется и продуктовой, и сервисной страницей,
   600px,
   база 390px). Размер текста меньше пропорции базы (11/16 против
   десктопных 13/23) — реальное исключение, не формула п.2. */
@media (max-width: 599.98px) {
  .breadcrumbs__item {
    font-size: min(11px, calc(11 / 390 * 100vw));
    line-height: min(16px, calc(16 / 390 * 100vw));
  }
}