.pk-breadcrumbs {
	width: fit-content;
	max-width: 100%;
	font-size: var(--desktop-body-xxs);
	color: var(--ex-white);
	font-weight: 300;
	line-height: 1.6;
	padding: max(.5rem, calc(.5 * var(--su)));
	padding-block: max(.3rem, calc(.3 * var(--su)));
	padding-inline: max(.5rem, calc(.5 * var(--su)));
	border-radius: max(.125rem, calc(.125 * var(--su)));
}

.pk-breadcrumbs .breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: max(.25rem, calc(.25 * var(--su)));
	margin: 0;
	padding: 0;
	padding-top: max(0.1rem, calc(0.1 * var(--su)));
	line-height: normal;
	list-style: none;
	text-transform: uppercase;
}

.pk-breadcrumbs .breadcrumb li {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.pk-breadcrumbs .breadcrumb li::after {
	content: "/" !important;
	margin-inline: max(.25rem, calc(.25 * var(--su))) 0 !important;
}

.pk-breadcrumbs .breadcrumb li:last-child::after {
	display: none;
}

.pk-breadcrumbs a {
	text-decoration: none;
	color: var(--ex-white);
}

.pk-breadcrumbs a:hover {
	color: rgba(255, 255, 255, 0.7);
}
.pk-breadcrumbs .breadcrumb-item.active > span,
.pk-breadcrumbs .breadcrumb-item > span{
	color: rgba(255, 255, 255, 0.5);
}

.pk-breadcrumbs a:focus-visible {
	outline: max(.125rem, calc(.125 * var(--su))) solid currentColor;
	outline-offset: max(.125rem, calc(.125 * var(--su)));
}