/* Components
--------------------------------------------- */

/* Breadcrumb Navigation
--------------------------------------------- */
.breadcrumb {
	/*
	position: absolute;
	top: -1rem;
	left: 2rem;
	z-index: 1;*/
	padding: .25rem 1rem;
	border: 2px solid var(--color-black);
	text-transform: uppercase;
	font-size: 0.75rem;
	font-family: "Maax Medium";
	letter-spacing: 2px;
	background: var(--color-white);
	display: inline-block;
}

.breadcrumb__list {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 0.5rem;
	flex-wrap: nowrap;
	align-items: center;
}

.breadcrumb__item {
	display: flex;
	align-items: center;
}

.breadcrumb__item:not(:last-child)::after {
	content: '/';
	margin-left: 0.5rem;
	color: var(--color-gray-dark);
	font-weight: 400;
}

.breadcrumb__item a {
	text-decoration: none;
	color: var(--color-black);
	transition: color 0.2s ease;
}

.breadcrumb__item a:hover {
	color: var(--color-gray-dark);
}

.breadcrumb__item--active {
	color: var(--color-black);
}

/* Truncate long breadcrumb text */
.breadcrumb__item span[itemprop="name"] {
	display: inline-block;
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* Allow more space for last item (current page) */
.breadcrumb__item--active span[itemprop="name"] {
	max-width: 400px;
}

@media (max-width: 768px) {
	
	/* Responsive truncation */
	.breadcrumb__item span[itemprop="name"] {
		max-width: 150px;
	}

	.breadcrumb__item--active span[itemprop="name"] {
		max-width: 200px;
	}
}

/* CTA (Call-to-Action) System
--------------------------------------------- */
.cta {
	font-size: .71111rem;
	font-size: var(--font-size-small-caps-03);
	font-family: "Maax Medium";
	font-weight: 400;
	letter-spacing: .16ch;
	text-transform: uppercase;
	--flow-gap-all: 0rem;
	--focus-shadow-size: var(--border-width-md);
	border: 0;
	border-radius: 0;
	color: currentColor;
	padding: .49063rem .73125rem;
	padding: calc(var(--space-03) + var(--border-width-md)) var(--space-04);
	position: relative;
	text-decoration: none;
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-width: min(7.5ch, 100%);
	text-underline-offset: .3rem;
	text-decoration-thickness: .125rem;
	text-decoration-thickness: var(--border-width-md);
	background: none
}

.cta:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: .125rem solid var(--color-black);
	border: var(--border-width-md) solid var(--color-text)
}

@media (any-hover:hover) {
	.cta:hover {
		background: var(--color-black);
		background: var(--color-text);
		color: var(--color-white);
		color: var(--color-background)
	}
}

.cta:active {
	background: var(--color-black);
	background: var(--color-text);
	color: var(--color-white);
	color: var(--color-background)
}

.cta--secondary {
	--focus-shadow-size: var(--border-width-lg)
}

.cta--secondary:after {
	display: none
}

.cta--text,
.cta--text-light,
.cta--with-arrow {
	min-width: 0
}

.cta--with-arrow {
	padding-right: 0;
	align-items: center;
	display: flex;
	line-height: 1.85;
	max-width: max-content;
	white-space: nowrap
}

.cta--with-arrow .icon {
	box-shadow: inset .125rem 0 currentColor;
	box-shadow: var(--border-width-md) 0 currentColor inset;
	margin: -.49062rem .125rem -.49062rem .73125rem;
	margin: calc(var(--space-03)*-1 + var(--border-width-md)*-1) var(--border-width-md) calc(var(--space-03)*-1 + var(--border-width-md)*-1) var(--space-04);
	will-change: transform;
	fill: currentColor;
	overflow: hidden;
}

.cta--with-arrow .icon>* {
	transform: translateX(0)
}

@keyframes cta-arrow-slide-in {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(0); }
}

.cta--with-arrow:hover .icon>* {
	animation: cta-arrow-slide-in 300ms ease;
}

.cta--text,
.cta--text-light {
	background: none;
	border: none;
	border-bottom: .125rem solid var(--color-gray-mid);
	border-bottom: var(--border-width-md) solid var(--color-line-3);
	color: inherit;
	line-height: 2;
	padding: 0;
	position: relative;
	text-decoration: none;
	transition: border-color .2s ease
}

.cta--text-light:after,
.cta--text:after {
	border: none;
	content: "";
	display: block;
	height: .125rem;
	height: var(--border-width-md);
	left: 0;
	position: absolute;
	top: 100%;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
	width: 100%
}

.cta--text-light:focus,
.cta--text:focus {
	outline: .125rem solid currentColor;
	outline: var(--border-width-md) solid currentColor;
	outline-offset: .25rem;
	outline-offset: var(--space-02)
}

@media (any-hover:hover) {
	.cta--text:hover {
		border-color: var(--color-black);
		border-color: var(--color-text)
	}
}

.cta--text:active,
.cta--text:hover {
	text-decoration: none
}

.cta--text:active {
	background: var(--color-black);
	background: var(--color-text);
	border-color: var(--color-black);
	border-color: var(--color-text);
	color: var(--color-white);
	color: var(--color-background)
}

.cta--text:active:after {
	box-shadow: 0 0 0 .125rem var(--color-black);
	box-shadow: 0 0 0 var(--border-width-md) var(--color-line)
}

.cta--text-light {
	color: var(--color-gray-dark);
	color: var(--color-text-2);
	line-height: 2;
	text-decoration-color: var(--color-gray-mid);
	text-decoration-color: var(--color-line-3);
	will-change: text-decoration-color
}

@media (any-hover:hover) {
	.cta--text-light:hover {
		border-color: var(--color-black);
		border-color: var(--color-text);
		color: var(--color-black);
		color: var(--color-text)
	}
}

.cta--text-light:active,
.cta--text-light:hover {
	text-decoration-color: currentColor
}

.cta--text-light:active {
	color: var(--color-black);
	color: var(--color-text)
}

/* Button System (BEM)
--------------------------------------------- */
.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 0;
	text-decoration: none !important;
	text-align: center;
	font-family: "Maax Medium";
	font-weight: 400;
	transition: all 0.2s;
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

.button--primary {
	background: var(--color-black);
	color: var(--color-white) !important;
}

.button--primary:hover {
	background: var(--color-black);
	text-decoration: none;
}

.button--secondary {
	background: var(--color-white);
	color: var(--color-black);
	border: 1px solid var(--color-black);
}

.button--secondary:hover {
	background: var(--color-gray-light);
	text-decoration: none;
}

.button--block {
	display: block;
	width: 100%;
}

.button--link {
	background: none;
	color: var(--color-black);
	text-decoration: underline;
	padding: 0;
	border: none;
}

.button--link:hover {
	text-decoration: none;
}

/* Buy button variant - used for purchase actions */
.button--buy {
	background: var(--color-white);
	color: var(--color-black);
	border: 2px solid var(--color-black);
	padding: 0.75rem 1rem;
	line-height: 1.15;
}

.button--buy:hover {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

.button--buy-outline {
	background: transparent;
	color: var(--color-black);
	border: 2px solid var(--color-black);
	text-decoration: none;
	text-align: center;
	display: inline-block;
}

.button--buy-outline:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.button--large {
	width: 100%;
	padding: 1rem 2rem;
	font-size: 1.1rem;
}