.shop-breadcrumbs {
	padding-inline: var(--pk-site-gutter);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-line);
}

.shop-breadcrumbs__inner {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: max(2.75rem, calc(3 * var(--su)));
}

.shop-breadcrumbs nav {
	display: block;
	grid-column: 1 / -1;
	min-width: 0;
	width: 100%;
	max-width: none;
}

.shop-breadcrumbs .breadcrumb {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--color-muted);
	font-size: var(--desktop-body-xs);
	list-style: none;
	white-space: nowrap;
}

.shop-breadcrumbs .breadcrumb-item {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
}

.shop-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
	content: '/';
	margin-inline: var(--space-2);
	color: var(--color-line);
}

/* SEOPress adds its own trailing separator; the component owns separators. */
.shop-breadcrumbs .breadcrumb .breadcrumb-item::after {
	display: none;
	content: none;
}

.shop-breadcrumbs .breadcrumb-item.active {
	flex: 1 1 0;
	overflow: hidden;
}

.shop-breadcrumbs .breadcrumb-item.active > span {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shop-breadcrumbs a {
	color: var(--primary-color);
	text-decoration: none;
}

.shop-breadcrumbs a:hover {
	color: var(--secondary-color);
}

.shop-breadcrumbs a:focus-visible {
	outline: 2px solid var(--secondary-color);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.shop-breadcrumbs .breadcrumb-item:not(:first-child):not(:last-child) {
		display: none;
	}

	.shop-breadcrumbs .breadcrumb-item:first-child + .breadcrumb-item:last-child::before {
		display: inline;
	}
}