/* Хлебные крошки. Без скрипта — обычная лента; со скриптом и мышью включается «Bellows» (мех):
   дальние уровни сжаты в полоски (текст затухает), при наведении или фокусе полоска разворачивается,
   соседние сжимаются — суммарная ширина постоянна. Текущая страница всегда раскрыта. */

.crumbs { position: relative; margin: 0 0 var(--space-12); font-size: 14px; line-height: 1.4; }
/* Для мыши ширина «меха» ограничена, как в дизайн-системе (520 px). Путь до товара (.crumbs--wide) не ограничен:
   полоски включаются, только если он не помещается в строку целиком */
@media (hover: hover) and (pointer: fine) { .crumbs[data-bellows] { max-width: 520px; } .crumbs--wide[data-bellows] { max-width: none; } }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.crumbs__item a,
.crumbs__item > span {
  display: block;
  padding: 4px 8px;
  border-radius: var(--radius-badge);
  color: var(--ink-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.crumbs__item a:hover { color: var(--ink); }
.crumbs__item.is-current > span { color: var(--ink); font-weight: 700; }
.crumbs__item a:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.crumbs__sep { display: flex; align-items: center; justify-content: center; width: 20px; color: var(--ink-subtle); }
.crumbs__sep .icon { width: 10px; height: 10px; }

/* Меньше трёх уровней: «‹ Родитель» */
.crumbs__back { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px 6px 0; color: var(--ink-muted); }
.crumbs__back:hover { color: var(--ink); }
.crumbs__back .icon { width: 12px; height: 12px; }

/* Сенсорные экраны: лента в одну строку с горизонтальной прокруткой (полоски по 20 px пальцем не нажать) */
@media (hover: none), (pointer: coarse) {
  .crumbs__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .crumbs__list::-webkit-scrollbar { display: none; }
  .crumbs__item, .crumbs__sep { flex: none; }
}

/* Bellows: включается скриптом (nav.is-bellows) */
.crumbs.is-bellows .crumbs__list { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.crumbs.is-bellows .crumbs__item { position: relative; flex: 0 0 auto; min-width: 0; overflow: hidden; }
.crumbs.is-bellows .crumbs__item a,
.crumbs.is-bellows .crumbs__item > span { width: 100%; overflow: hidden; }
.crumbs.is-bellows .crumbs__item.is-pleated a {
  -webkit-mask-image: linear-gradient(to right, #000 60%, transparent 100%);
  mask-image: linear-gradient(to right, #000 60%, transparent 100%);
}
.crumbs.is-bellows .crumbs__sep { flex: 0 0 26px; width: 26px; }
.crumbs__ghost { position: absolute; left: -10000px; top: 0; display: flex; margin: 0; padding: 0; list-style: none; visibility: hidden; pointer-events: none; white-space: nowrap; }
.crumbs__ghost li { padding: 4px 8px; font-weight: 700; white-space: nowrap; }