/* =====================================================================
   ХЛЕБНЫЕ КРОШКИ — РЕДИЗАЙН 2026 (шрифт 16, тёмная тема).
   Стили компонента автоматически подключаются Битриксом на каждой
   странице, где выводятся крошки → корректная замена старого вида.
   Стрелка-разделитель ">" рендерится инлайн в template.php (SVG, белая).
   ===================================================================== */
.bx-breadcrumb.max {
	width: 100%;
	max-width: calc(var(--rd-container, 1600px) + var(--rd-gutter, 160px) * 2);
	margin: 0 auto;
	padding: 40px var(--rd-gutter, 160px) 0;
    margin-bottom: 30px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;                /* отступы у слеша задаём симметрично ниже */
	font-family: 'Roboto Flex', Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, .55);
}

.bx-breadcrumb.max > .bx-breadcrumb-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;              /* отступ между слешем и следующим словом */
	margin: 0;
	position: static;
	font-size: 16px;
	line-height: 1.2;
}

/* Разделитель-слеш «/»: прилегает к предыдущему слову (без отступа слева),
   небольшой отступ справа задаёт gap у .bx-breadcrumb-item (6px) — как «Главная/ Каталог». */
.bx-breadcrumb.max > .bx-breadcrumb-item .bx-breadcrumb-sep {
	margin-left: 0;
	color: rgba(255, 255, 255, .35);
	font-weight: 400;
	user-select: none;
}
/* На случай старого кэша с SVG-стрелкой — оставляем инлайн и нейтрально */
.bx-breadcrumb.max > .bx-breadcrumb-item svg {
	position: static;
	left: auto;
	width: 16px;
	height: 16px;
	display: block;
	flex: 0 0 auto;
}
.bx-breadcrumb.max > .bx-breadcrumb-item svg path { fill: rgba(255, 255, 255, .35); }

.bx-breadcrumb.max > .bx-breadcrumb-item a,
.bx-breadcrumb.max > .bx-breadcrumb-item a > span,
.bx-breadcrumb.max > .bx-breadcrumb-item span {
	color: rgba(255, 255, 255, .55);
	font-weight: 400;
	text-decoration: none;
	border-bottom: none;
	transition: color .2s;
}

.bx-breadcrumb.max > .bx-breadcrumb-item a:hover,
.bx-breadcrumb.max > .bx-breadcrumb-item a:hover > span { color: #fff; }

/* Текущий раздел (последний пункт) — белый */
.bx-breadcrumb.max > .bx-breadcrumb-item:last-child span { color: #fff; }