/**
 * Хлебные крошки.
 */

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.breadcrumbs a:hover {
  color: var(--color-primary);
}

.breadcrumbs__sep {
  font-size: var(--fs-xs);
}

.breadcrumbs__current {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

/* Строка над товаром: крошки слева, «в избранное / к сравнению» справа */
.page-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.page-topline .breadcrumbs {
  margin-bottom: 0;
  min-width: 0;
}

@media (max-width: 47.9375rem) {
  .page-topline {
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
}

/* Длинная цепочка не переносится на вторую строку, а скроллится вбок.
   Зазор между звеньями ужат до 4px: на телефоне «Главная › Каталог»
   с восьмипиксельными промежутками расползалось на треть ширины. */
@media (max-width: 47.9375rem) {
  .breadcrumbs {
    flex-wrap: nowrap;
    gap: var(--space-1);
    margin-bottom: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  .breadcrumbs > a {
    white-space: nowrap;
  }
}

/*
 * Модификатор для страниц, где последний элемент крошек слово в слово
 * повторяет заголовок под ним (товар, разбор зоны, сравнение). У длинных
 * названий это две строки подряд одним и тем же текстом.
 *
 * На телефоне убираем название и разделитель перед ним — остаётся путь
 * «Главная › Каталог», ровно то, ради чего крошки и нужны: уйти на уровень
 * выше. Поисковику это не мешает, он берёт путь из разметки BreadcrumbList,
 * а не из видимого текста.
 *
 * В каталоге модификатора нет намеренно: там крошка «Каталог», а заголовок
 * «Аппараты ДЭНАС» — это разные слова, скрывать нечего.
 *
 * nth-last-of-type(2) считает по span: последний span — само название,
 * предпоследний — разделитель перед ним.
 */
@media (max-width: 47.9375rem) {
  .breadcrumbs--repeats-title .breadcrumbs__current,
  .breadcrumbs--repeats-title .breadcrumbs__sep:nth-last-of-type(2) {
    display: none;
  }
}