/* ============================================================
   OpticTrend — СТАНДАРТ хлебных крошек (один в один как в карточке товара / PDP).
   Грузится на страницах каталога (категории/фильтры/бренды). Эталон стиля — pdp.css.
   Крошки: серый фон #f3f3f3 на всю ширину, контейнер 1400 + поля 32px, системный шрифт 12.5px,
   цвет #6b6b6b, разделитель «·». Селектор по [aria-label="Хлебные крошки"] → только нав крошек.
   ============================================================ */
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] {
  max-width: none; margin: 0; padding: 14px 0 0;
  background: #f3f3f3;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs {
  max-width: 1400px; margin: 0 auto; padding: 0 32px;
  font-size: 12.5px;
}
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item,
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__link { color: #6b6b6b; font-weight: 400; }
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__link:hover { color: #1a1a1a; }
nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__link:after {
  content: "·"; top: 0; padding: 0 7px; color: #b0b0b0; font-weight: 400;
}

/* Мобайл/планшет (<1280px): крошки скрыты классом .visible-lg — показываем тонкой строкой (как в PDP) */
@media (max-width: 1279px) {
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] {
    display: block !important; min-width: 0; padding-left: 0; padding-right: 0;
  }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs {
    margin: 8px auto; padding: 0 16px; font-size: 12px; line-height: 1.3;
    white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs::-webkit-scrollbar { display: none; }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs { scrollbar-width: none; }
}