/* ============================================================
   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; }
}

/* На ТЕЛЕФОНЕ (≤767px) крошки = только родительский раздел как «‹ …»-ссылка назад (решение заказчика).
   Полный путь остаётся в разметке (SEO). Перебивает scroll-режим выше и стиль pdp.css (выше специфичность). */
@media (max-width: 767px) {
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs { overflow: visible; white-space: normal; margin: 8px auto; }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item { display: none !important; }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item:nth-last-child(2) { display: inline-flex !important; align-items: center; max-width: 100%; }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link {
    font-size: 13px !important; color: #1a1a1a !important; font-weight: 500;
    max-width: 78vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link:after { content: none !important; padding: 0 !important; }
  nav.visible-lg.extra-padding[aria-label="Хлебные крошки"] .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link:before { content: "‹"; margin-right: 7px; color: #6b6b6b; font-size: 16px; font-weight: 400; }
}