/* ==========================================================================
   Breadcrumbs
   BEM: .s4w-breadcrumbs__*
   Usa solo var() da tokens.css — NO valori hardcoded
   ========================================================================== */

.s4w-breadcrumbs {
	width: 100%;
	border-top: 1px solid var(--stroke-soft-200);
	border-bottom: 1px solid var(--stroke-soft-200);
	background-color: var(--bg-white-0);
}

.s4w-breadcrumbs__container {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	height: 36px;
	gap: 0 !important;
}

.s4w-breadcrumbs__item {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.s4w-breadcrumbs__link,
.s4w-breadcrumbs__current {
	display: flex;
	align-items: center;
	padding: 10px;
	font-family: var(--font-secondary);
	font-size: var(--paragraph-xsmall);
	font-weight: var(--weight-regular);
	line-height: 16px;
	color: var(--text-soft-400);
	border-right: 1px solid var(--stroke-soft-200);
	transition: color var(--transition-fast);
}

.s4w-breadcrumbs__item:first-child .s4w-breadcrumbs__link,
.s4w-breadcrumbs__item:first-child .s4w-breadcrumbs__current {
	border-left: 1px solid var(--stroke-soft-200);
}

.s4w-breadcrumbs__link:hover {
	color: var(--text-main-900);
}

.s4w-breadcrumbs__current {
	color: var(--text-main-900);
	font-weight: var(--weight-regular);
}

.s4w-breadcrumbs__separator {
	display: none;
}

@media (max-width: 768px) {
	.s4w-breadcrumbs {
		border-top: none;
	}

	.s4w-breadcrumbs__container {
		padding-left: 20px;
		padding-right: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		flex-wrap: nowrap;
	}

	.s4w-breadcrumbs__container::-webkit-scrollbar {
		display: none;
	}

	.s4w-breadcrumbs__link,
	.s4w-breadcrumbs__current {
		white-space: nowrap;
	}
}