/**
 * Breadcrumb: template-parts/ui/breadcrumb.php (Category 2156:636, Product
 * 2162:685). Body/S, muted items with "/" between them, current page in ink.
 * Each template sets the space around it.
 */

.breadcrumb {
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb__item {
	display: flex;
	gap: var(--space-xs);
	color: var(--color-muted);
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
}

.breadcrumb__item[aria-current="page"] {
	color: var(--color-black);
}

.breadcrumb__link {
	color: inherit;
	text-decoration: none;
}

.breadcrumb__link:hover {
	color: var(--color-ink);
	text-decoration: underline;
}