/* Breadcrumbs — single-line trail. Chevron lives inside the item (not as a
   margin between items), so it always travels with its label and never gets
   orphaned at a line edge. The current-page crumb shrinks first when space
   is tight, ellipsising rather than pushing the row to a second line. */

.breadcrumbs {
	/* Outer vertical spacing comes from .main-content-wrapper (gap + padding);
	   breadcrumbs are a flex sibling of the content block, not a separate band. */
	font-family: "Avenir Next Cyr", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	color: var(--c-text);
}

.breadcrumbs > .container {
	/* Clip overflow so a pathological case (e.g. very long category name in
	   the middle) cannot break the page layout. The mobile breakpoint below
	   swaps this for a horizontal scroll strip. */
	overflow: hidden;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Keep natural width for ancestors of the current page. */
	flex-shrink: 0;
	min-width: 0;
}

/* The current page (last crumb) absorbs the squeeze first, so the rest of
   the trail stays legible. */
.breadcrumbs__item:last-child {
	flex-shrink: 1;
	overflow: hidden;
}

.breadcrumbs__item:not(:first-child)::before {
	content: "\203A";
	flex-shrink: 0;
	color: var(--c-text-muted);
}

.breadcrumbs__link,
.breadcrumbs__current {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	/* display: block lets text-overflow engage inside the flex item. */
	display: block;
}

.breadcrumbs__link {
	color: inherit;
	text-decoration: none;
	transition: color .2s;
}

.breadcrumbs__link:hover {
	color: var(--c-brand);
}

.breadcrumbs__current {
	color: var(--c-text-muted);
}

/* Narrow viewports: switch the trail to a horizontally scrollable strip
   (Amazon/GitHub/Apple pattern) so the full title is always reachable by
   swiping. No truncation, no ellipsis. */
@media (max-width: 575px) {
	.breadcrumbs > .container {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.breadcrumbs > .container::-webkit-scrollbar {
		display: none;
	}
	.breadcrumbs__item:last-child {
		flex-shrink: 0;
		overflow: visible;
	}
	.breadcrumbs__link,
	.breadcrumbs__current {
		overflow: visible;
		text-overflow: clip;
	}
}