@layer styles {
	/* Custom component styles go here */

	/*** 

	SITE HEADER / NAV 

	***/

	.site-head {
		text-transform: uppercase;
		letter-spacing: var(--letterspacing-loose);
		line-height: var(--leading-flat);
		font-size: var(--step--2);
		font-weight: var(--font-medium);
		padding-block: var(--space-s);
		background-color: var(--color-dark);
		color: var(--color-light);
		border-bottom: 1px solid hsl(0deg 0% 50% / 30%);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9998;
		width: 100%;
		overflow: hidden;

		&:after {
			position: absolute;
			top: -10rem;
			left: -10rem;
			width: calc(100% + 20rem);
			height: calc(100% + 20rem);
			-webkit-animation: noise 1s infinite;
			animation: noise 1s infinite;
			background-image: url(/assets/images/noise.png);
			background-position: 50%;
			content: '';
			will-change: transform;
			pointer-events: none;
			z-index: 1;
		}

		.wrapper {
			.primary-nav {
				display: flex;
				gap: var(--space-s);
				flex-grow: 1;
				min-width: 100%;
				justify-content: center;
				align-items: center;

				.nav-logo {
					display: flex;
					justify-content: center;
					/* position: absolute;
					inset-block-start: 50%;
					inset-inline-start: 50%;
					transform: translate(-50%, -50%); */

					img,
					svg {
						width: var(--logo-width);
						min-width: var(--logo-width);
						height: auto;
					}
				}

				.nav-list {
					display: grid;
					grid-template-columns: 1fr 0.5fr 1fr;
					justify-content: space-between;
					align-items: center;
					list-style: none;
					flex-grow: 1;
					padding: 0;
					margin: 0;

					a {
						font-size: calc(var(--step--3) * 1.1);
						padding-block: var(--space-3xs);
						font-family: var(--font-button);
					}

					.nav-item--divider {
						display: flex;
						align-items: center;
						justify-content: center;

						a:not(:hover) {
							text-decoration: none;
						}

						img {
							min-width: 140px;
							width: 140px;
						}
					}
				}

				/* Nav groups (left and right) */
				.nav-group {
					ul {
						display: flex;
						flex-wrap: wrap;
						gap: var(--space-s);
						list-style: none;
						padding: 0;
						margin: 0;
						align-items: center;
					}

					&.nav-group--left {
						ul {
							justify-content: flex-start;
						}
					}

					&.nav-group--right {
						ul {
							justify-content: flex-end;
						}
					}
				}

				.nav-item {
					-webkit-margin-before: 0;
					margin-block-start: 0;
					-webkit-padding-start: 0;
					padding-inline-start: 0;

					a {
						text-decoration: none;
						font-weight: var(--font-medium);
					}
				}

				/* Icon link styling for cart */
				.nav-cart-link {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					padding: var(--space-2xs);
					position: relative;
					background-color: var(--color-dark-grey);
					color: var(--color-light);
					font-size: var(--step-1);
					aspect-ratio: 1 / 1;
					font-family: var(--font-base);
					border: none;
					cursor: pointer;

					.nav-icon {
						width: 1.25rem;
						height: 1.25rem;
						display: block;
						transform: scale(1);
						transition: transform var(--transition-base);
					}

					.cart-counter {
						position: absolute;
						top: 0;
						right: 0;
						transform: translateX(5px) translateY(-5px);
						background-color: var(--color-mid);
						color: var(--color-dark);
						min-width: 1.125rem;
						aspect-ratio: 1 / 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: var(--step--3);
						font-weight: var(--font-bold);
						line-height: 1;
						padding: 2px;
						transform-origin: bottom left;
						transition: transform var(--transition-base);
					}

					&:hover {
						.nav-icon {
							transform: scale(1.1);
							transition: transform var(--transition-base);
						}
					}
				}

				/* Mobile nav elements (hidden on desktop) */
				.nav-toggle {
					display: none;
				}
			}
		}

		/* Hamburger menu styles */
		@media (max-width: 992px) {
			padding-block: var(--space-xs);

			.wrapper {
				.primary-nav {
					display: flex;
					grid-template-columns: auto 1fr auto;
					align-items: center;
					justify-content: center;
					gap: var(--space-2xs);
					position: relative;

					/* Show mobile elements */
					.nav-toggle,
					.nav-cart-link {
						display: flex;
					}

					/* Hamburger button */
					.nav-toggle {
						background: none;
						border: none;
						cursor: pointer;
						padding: var(--space-3xs);
						width: 2.5rem;
						height: 2.5rem;
						flex-direction: column;
						justify-content: center;
						gap: 0.375rem;
						z-index: 1001;
						position: relative;

						&:focus-visible {
							outline: 2px solid var(--color-light);
							outline-offset: 2px;
						}

						.nav-toggle__line {
							width: 100%;
							height: 2px;
							background-color: var(--color-light);
							transition: all var(--transition-base);
							transform-origin: center;
						}

						/* Animated hamburger to X */
						&.is-active {
							.nav-toggle__line:nth-child(1) {
								transform: translateY(0.5rem) rotate(45deg);
							}

							.nav-toggle__line:nth-child(2) {
								opacity: 0;
							}

							.nav-toggle__line:nth-child(3) {
								transform: translateY(-0.5rem) rotate(-45deg);
							}
						}
					}

					/* Mobile logo */
					.nav-logo {
						position: relative;
						inset-block-start: initial;
						inset-inline-start: initial;
						transform: none;
					}

					/* Mobile cart */
					.nav-cart-link {
						justify-self: end;
					}

					/* Navigation list - hidden by default on mobile */
					.nav-list {
						position: fixed;
						top: 0;
						left: 0;
						width: clamp(250px, 320px, 100%);
						height: 100vh;
						background-color: var(--color-dark);
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: stretch;
						padding: calc(var(--gutter) + 3rem) var(--gutter) var(--gutter);
						gap: 0;
						z-index: 1000;
						overflow-y: auto;
						transform: translateX(-100%);
						transition: all var(--transition-base);

						&.is-open {
							transform: translateX(0);
							box-shadow: 4px 4px 20px #0003;
						}

						/* Hide desktop logo in mobile menu */
						.nav-item--divider {
							display: none;
						}

						/* Stack nav groups vertically */
						.nav-group {
							width: 100%;

							ul {
								flex-direction: column;
								align-items: stretch;
								gap: 0;
								width: 100%;
							}

							&.nav-group--left,
							&.nav-group--right {
								ul {
									justify-content: flex-start;
								}
							}
						}

						.nav-item {
							width: 100%;
							border-bottom: 1px solid var(--color-dark-grey);

							a {
								display: block;
								padding: var(--space-s) var(--space-s) var(--space-s) 0;
								font-size: var(--step-0);

								&::before,
								&::after {
									display: none;
								}
							}
						}
					}
				}
			}

			/* Prevent body scroll when menu is open */
			body.nav-is-open {
				overflow: hidden;
			}
		}
	}

	@container site-head-brand (68vi <= width <= 50rem) {
		.site-head__brand {
			a {
				color: var(--color-light);
			}
		}
	}

	/*** 
	
	SITE FOOTER 
	
	***/

	.footer-wrap {
		position: relative;
		overflow: hidden;

		.footer {
			grid-column-gap: var(--space-m-l);
			/* grid-row-gap: var(--space-2xl-3xl); */
			letter-spacing: var(--letterspacing-base);
			flex-flow: column;
			/* justify-content: space-between; */
			padding-block: var(--space-3xl-4xl) var(--gutter);
			font-weight: var(--font-semibold);
			display: flex;
			position: relative;

			.footer__links-row {
				grid-column-gap: var(--space-m-l);
				grid-row-gap: var(--space-m-l);
				display: flex;
			}

			.footer__logo-row {
				grid-column-gap: var(--space-2xs);
				grid-row-gap: var(--space-xs);
				flex-flow: column;
				display: flex;

				.eyebrow {
					font-size: var(--step-1);
				}

				svg {
					width: 100%;
					height: auto;
					opacity: 0.9;
				}
			}

			.footer__col {
				grid-column-gap: var(--space-l);
				grid-row-gap: var(--space-s-m);
				flex-flow: column;
				width: calc(33.3333% - var(--space-l));
				display: flex;
			}

			.footer__links {
				grid-column-gap: var(--space-2xs);
				grid-row-gap: var(--space-2xs);
				flex-flow: column;
				align-items: flex-start;
				display: flex;
			}

			.footer__a {
				color: inherit;
				font-size: var(--step-1);
				line-height: 1;
				text-decoration: none;
			}

			address.footer__a {
				line-height: var(--leading-fine);
			}

			@media screen and (max-width: 991px) {
				.footer__links-row {
					flex-flow: column;
				}

				.footer__col {
					width: 100%;
				}
			}
		}

		.footer-wrap__dark {
			opacity: 0;
			pointer-events: none;
			background-color: var(--color-dark);
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	/*** 

	CART PREVIEW PANEL 

	***/

	.cart-preview {
		position: fixed;
		top: 0;
		right: 0;
		width: clamp(320px, 400px, 100%);
		height: 100vh;
		background-color: var(--color-light);
		color: var(--color-dark);
		z-index: 2000;
		display: flex;
		flex-direction: column;
		transform: translateX(100%);
		transition: all var(--transition-base);
		z-index: 9999;

		&.is-open {
			transform: translateX(0);
			box-shadow: 4px 4px 20px #0003;
		}

		/* Header */
		.cart-preview__header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: var(--space-xs) var(--space-2xs) var(--space-xs) var(--space-s);
			border-bottom: 1px solid var(--color-mid);
		}

		.cart-preview__title {
			font-size: var(--step-1);
			margin: 0;
			text-transform: uppercase;
			letter-spacing: var(--letterspacing-neutral);
		}

		.cart-preview__close {
			background: none;
			border: none;
			cursor: pointer;
			padding: var(--space-3xs);
			width: 2rem;
			height: 2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: opacity var(--transition-base);

			&:hover {
				opacity: 0.7;
			}

			&:focus-visible {
				outline: 2px solid var(--color-dark);
				outline-offset: 2px;
			}
		}

		.cart-preview__close-icon {
			font-size: var(--step-0);
			line-height: 1;
		}

		/* Empty State */
		.cart-preview__empty {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: var(--space-l);
			text-align: center;
			gap: var(--space-m);
		}

		.cart-preview__empty-message {
			font-size: var(--step-0);
			color: var(--color-dark-grey);
		}

		/* Cart Items Container */
		.cart-preview__items {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.cart-items {
			flex: 1;
			overflow-y: auto;
			padding: var(--space-s);
			list-style: none;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: var(--space-s);
		}

		/* Cart Item */
		.cart-item {
			display: grid;
			grid-template-columns: 80px 1fr auto;
			gap: var(--space-xs);
			padding: var(--space-3xs) var(--space-3xs) var(--space-xs) 0;
			background-color: var(--color-light);
			border-bottom: 1px solid var(--color-mid);
			position: relative;
		}

		.cart-item__image {
			width: 80px;
			height: 80px;
			overflow: hidden;
			background-color: var(--color-mid);

			img {
				width: 100%;
				height: 100%;
				-o-object-fit: cover;
				object-fit: cover;
			}
		}

		.cart-item__details {
			display: flex;
			flex-direction: column;
			gap: var(--space-3xs);
			min-width: 0;
			padding-right: var(--space-xs);
		}

		.cart-item__name {
			font-size: var(--step--2);
			margin: 0;
			text-transform: uppercase;
			font-weight: var(--font-medium);
			font-family: var(--font-alt);
			letter-spacing: var(--letterspacing-loose);
			line-height: var(--leading-step2);
		}

		.cart-item__meta {
			font-size: var(--step--2);
			color: var(--color-dark-grey);
			margin: 0;
		}

		.cart-item__controls {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-xs);
			margin-top: auto;
		}

		.cart-item__price {
			font-weight: var(--font-medium);
			font-family: var(--font-alt);
			font-size: var(--step--2);
			letter-spacing: var(--letterspacing-loose);

			margin: 0;
			white-space: nowrap;
		}

		.cart-item__remove {
			background: none;
			border: none;
			cursor: pointer;
			padding: var(--space-3xs);
			position: absolute;
			top: calc(0px - var(--space-3xs));
			right: calc(0px - var(--space-3xs));
			width: 1.5rem;
			height: 1.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0.5;
			transition: opacity var(--transition-base);

			&:hover {
				opacity: 1;
			}

			&:focus-visible {
				outline: 2px solid var(--color-dark);
				outline-offset: 2px;
			}

			span {
				font-size: var(--step--1);
				line-height: 1;
			}
		}

		/* Cart Footer */
		.cart-preview__footer {
			padding: var(--space-s);
			border-top: 1px solid var(--color-mid);
			display: flex;
			flex-direction: column;
			gap: var(--space-2xs);
			background-color: var(--color-light);
		}

		.cart-preview__subtotal {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: var(--font-semibold);
		}

		.cart-preview__subtotal-title {
			font-size: var(--step-0);
			font-family: var(--font-base);
			letter-spacing: var(--letterspacing-base);
		}

		.cart-preview__subtotal-amount {
			font-family: var(--font-alt);
			font-size: var(--step--1);
			font-weight: var(--font-medium);
			letter-spacing: var(--letterspacing-loose);
		}

		.cart-preview__shipping-note {
			font-size: var(--step--1);
			color: var(--color-dark-grey);
			margin: 0;
			text-align: left;
			-webkit-margin-after: var(--space-2xs);
			margin-block-end: var(--space-2xs);
		}
	}

	/* Prevent body scroll when cart is open */
	body.cart-is-open {
		overflow: hidden;
	}

	/*** 

	HERO HEADER OPTION V1

	***/

	.hero-header-v1 {
		position: relative;
		overflow: hidden;

		color: var(--color-light);
		background-color: var(--color-dark);

		.hero-content-wrapper {
			position: relative;
			z-index: 1;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			-webkit-padding-before: var(--space-3xl-4xl);
			padding-block-start: var(--space-3xl-4xl);

			h1 {
				font-size: inherit;
				line-height: var(--leading-heading);
				z-index: 1;
				text-transform: uppercase;
			}
		}

		.hero-video-wrapper {
			position: relative;
			font-size: inherit;
			position: relative;
			height: calc(50vh + 1.175cap);
			font-size: inherit;
			position: relative;
			overflow: clip;
			overflow-clip-margin: 1.175cap;

			.hero-fade-top {
				position: absolute;
				background-image: linear-gradient(180deg, var(--color-dark), transparent 100%);
				top: 0;
				left: 0;
				right: 0;
				height: 2.25cap;
				z-index: 1;
			}

			.img-parallax-wrapper {
				position: absolute;
				inset-block-start: 0;
				inset-inline-start: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: flex-end;
				justify-content: center;
			}

			.hero-video-inner {
				/* aspect-ratio: 16/9; */

				width: 100%;
				height: calc(100% + 1.75cap);
				display: flex;
				align-items: center;
				justify-content: center;
				-o-object-fit: cover;
				object-fit: cover;

				.hero-bg-video,
				img {
					height: 100%;
					width: 100%;
					position: absolute;
					inset-block-start: 50%;
					inset-inline-start: 50%;
					transform: translate(-50%, -50%);

					position: absolute;
					-o-object-fit: cover;
					object-fit: cover;
				}

				.hero-fade-left,
				.hero-fade-right {
					pointer-events: none;
					width: 33vw;
					height: 120%;
					position: absolute;
					top: -10%;
				}

				.hero-fade-left {
					background-image: linear-gradient(90deg, var(--color-dark), transparent 100%);
					left: 0;
				}

				.hero-fade-right {
					background-image: linear-gradient(-90deg, var(--color-dark), transparent 100%);
					right: 0;
				}
			}
		}
	}

	/*** 
	
	GLITCH TEXT EFFECT 
	
	***/

	.glitch-text,
	.small-glitch-text {
		position: relative;
		display: inline-flex;

		.glitch-top,
		.glitch-bottom {
			position: absolute;
			right: 0;
			left: 0;
			pointer-events: none;
		}

		.glitch-top {
			-webkit-clip-path: inset(-10% -10% 41% -10%);
			clip-path: inset(-10% -10% 41% -10%);
		}

		.glitch-bottom {
			-webkit-clip-path: inset(55% 0 0 -10%);
			clip-path: inset(55% 0 0 -10%);
		}

		.glitch-dummy {
			visibility: hidden;
		}
	}

	/***

	SERVICES LIST SECTION

	***/

	.service-item {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gutter, var(--space-s-l));
		--service-item-content-min-width: 50%;
		--service-item-target-width: 40%;

		&:not([data-direction]) > :last-child {
			flex-basis: clamp(250px, calc(var(--service-item-target-width) + var(--gutter)), 100%);
			flex-grow: 1;
		}

		&:not([data-direction]) > :first-child {
			flex-basis: 0;
			flex-grow: 999;
			min-width: var(--service-item-content-min-width, 50%);
		}

		&[data-reversed] {
			flex-direction: row-reverse;
		}

		.content-wrapper {
			text-align: left;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			-webkit-padding-after: var(--space-xs-s);
			padding-block-end: var(--space-xs-s);
		}

		.img-video-wrapper {
			.img-video-container {
				position: relative;
				aspect-ratio: 8 / 5;
				width: 100%;
				min-height: 100%;
				overflow: hidden;
				border-radius: var(--soft-edges);
				display: flex;
				align-items: center;

				img {
					position: absolute;
					width: 100%;
					min-height: 100%;
					-o-object-fit: cover;
					object-fit: cover;
					-o-object-position: center;
					object-position: center;
				}
			}
		}
	}

	/***

	DIRECTIONAL HOVER SYSTEM
	Shared styles for directional hover effect on both vertical lists and horizontal cards

	***/

	/* Base directional hover item - shared by all directional hover elements */
	.directional-hover-item {
		position: relative;
		overflow: hidden;
		text-decoration: none;
		color: inherit;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;

		/* Content needs to sit above the hover tile */
		> * {
			position: relative;
			z-index: 1;
		}
	}

	/* The animated tile that slides in from different directions */
	.directional-hover-tile {
		background-color: var(--color-light);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		/* transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); */
		transition: transform 0.5s var(--transition-alt);
		will-change: transform;
		/* Default hidden state - JS will set the correct initial position based on direction */
		transform: translateY(calc(-100% - 1px));
	}

	/* Reverse colors when inside a light background section */
	.bg-light .directional-list[data-type='x'],
	.bg-light .directional-list[data-type='y'] {
		.directional-hover-item {
			color: var(--color-dark);

			.directional-hover-tile {
				background-color: var(--color-dark);
			}

			.btn {
				transition: all 0.5s var(--transition-alt);
			}

			&:hover {
				@media (hover: hover) and (pointer: fine) {
					color: var(--color-light);

					.directional-list__contentwrapper {
						color: var(--color-light);
					}

					.btn {
						background-color: var(--color-light);
						color: var(--color-dark);
						transition: all 0.5s var(--transition-alt);
					}
				}
			}
		}
	}

	.directional-list {
		width: 100%;
		position: relative;
	}

	/* Vertical list item specific styles */

	.directional-list[data-type='y'] {
		.directional-hover-item {
			margin-top: -1px;
			padding: var(--space-s-m) 0 var(--space-s-m) 0;
			color: var(--color-white);
			transition: color 0.5s var(--transition-alt);

			&:hover {
				@media (hover: hover) and (pointer: fine) {
					color: var(--color-dark);
					transition: color 0.5s var(--transition-alt);

					.directional-list__contentwrapper {
						transition: transform 0.5s var(--transition-alt);
						transform: translateX(var(--space-s));
					}
				}
			}

			.directional-list__contentwrapper {
				transition: transform 0.5s var(--transition-alt);
				position: relative;
				z-index: 1;
				will-change: transform;
			}

			.directional-list__border {
				z-index: -1;
				opacity: 0.3;
				background-color: currentColor;
				width: 100%;
				height: 1px;
				position: absolute;
				bottom: 0;
				left: 0;

				&.is--item {
					top: 0;
					bottom: auto;
				}
			}
		}
	}

	/* Horizontal list item specific styles */

	.directional-list[data-type='x'] {
		.directional-hover-item {
			padding: var(--space-s-m) var(--space-m-l) var(--space-s-m) var(--space-s);
			transition: all 0.5s var(--transition-alt);
			border-left: 1px solid currentColor;

			&:hover {
				@media (hover: hover) and (pointer: fine) {
					.directional-list__contentwrapper {
						transition: all 0.5s var(--transition-alt);
						transform: translateX(var(--space-2xs));
						color: var(--color-dark);
					}
				}
			}

			.directional-list__contentwrapper {
				transition: all 0.5s var(--transition-alt);
				position: relative;
				z-index: 1;
				will-change: transform;
			}

			.directional-list__border {
				z-index: -1;
				opacity: 0.3;
				background-color: currentColor;
				width: 100%;
				height: 1px;
				position: absolute;
				bottom: 0;
				left: 0;

				&.is--item {
					top: 0;
					bottom: auto;
				}
			}
		}
	}

	/***

	CLASSES LIST (Vertical variant with borders and image switching)

	***/

	.classes-list-container {
		.classes-list-image-container {
			position: relative;
			aspect-ratio: 16 / 9;
			min-height: 100%;
			max-width: 100%;

			.classes-list-image-wrapper {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius: var(--soft-edges);

				.classes-list-bg-video {
					position: absolute;
					min-width: 100%;
					min-height: 100%;
					-o-object-fit: cover;
					object-fit: cover;
					z-index: 1;

					@media screen and (max-width: 768px) {
						min-height: 200%;
					}
				}

				.classes-list-hover-image {
					position: absolute;
					width: 100%;
					height: 100%;
					-o-object-fit: cover;
					object-fit: cover;
					top: 0;
					left: 0;
					z-index: 2;
					opacity: 0;
					transition: opacity 0.3s ease;
					pointer-events: none;

					&.is-active {
						opacity: 1;
					}
				}
			}
		}
	}

	/***

	PARALLAX BACKGROUND IMAGE

	***/

	.parallax-bg-img-wrapper {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;

		.parallax-img-container {
			position: relative;
			width: 100%;
			height: 100%;

			img {
				position: absolute;
				width: 100%;
				height: 100%;
				-o-object-fit: cover;
				object-fit: cover;
				-o-object-position: center;
				object-position: center;
			}
		}
	}

	/***

	STACKED CARDS SLIDER (FOR ATHLETES ETC)

	***/

	.flick-group {
		position: relative;
		--flick-card-width: clamp(10em, 21em, 90vw);
	}

	/* Navigation buttons */
	.flick-nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background-color: var(--color-light);
		color: var(--color-dark);
		border: none;
		width: 3rem;
		height: 3rem;
		border-radius: var(--soft-edges);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 10;
		transition: all 0.5s var(--transition-alt);
		font-size: var(--step-0);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

		&:active {
			transform: translateY(-50%) scale(0.95);
		}

		&:focus-visible {
			outline: 2px solid var(--color-primary);
			outline-offset: 2px;
		}

		i {
			transform: scale(1.2);
		}

		@media screen and (max-width: 500px) {
			display: none;
		}
	}

	.flick-nav--prev {
		left: -1rem;
	}

	.flick-nav--next {
		right: -1rem;
	}

	@media (max-width: 768px) {
		.flick-nav {
			width: 2.5rem;
			height: 2.5rem;
			font-size: var(--step--1);
		}

		.flick-nav--prev {
			left: 0.5rem;
		}

		.flick-nav--next {
			right: 0.5rem;
		}
	}

	.flick-group__relative-object {
		opacity: 0;
		pointer-events: none;
		width: calc(var(--flick-card-width) * 2);
		position: relative;
	}

	.flick-group__relative-object-before {
		padding-top: 75%;
	}

	.flick-group__collection {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;

		.flick-group__list {
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			display: flex;
			position: relative;

			[data-flick-cards-dragger] {
				position: absolute;
				inset: 0;
				z-index: 1;
				pointer-events: auto;
				touch-action: pan-y;
			}

			/* Position Slides */
			[data-flick-cards-item-status] .flick-card__media {
				transition: opacity 0.2s ease;
				opacity: 0.5;
			}

			[data-flick-cards-item-status='2-before'] .flick-card__media,
			[data-flick-cards-item-status='2-after'] .flick-card__media {
				transition: opacity 0.2s ease;
				opacity: 0.75;
			}

			[data-flick-cards-item-status='active'] .flick-card__media {
				opacity: 1;
			}

			/* Animate Button */
			[data-flick-cards-item-status] .flick-card__btnwrapper {
				transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1), 1s cubic-bezier(0.16, 1, 0.3, 1);
				opacity: 0;
				transform: translate(0%, 50%) rotate(0.001deg);
			}

			[data-flick-cards-item-status='active'] .flick-card__btnwrapper {
				opacity: 1;
				transform: translate(0%, 0%) rotate(0.001deg);
			}

			.flick-group__item {
				position: absolute;

				.flick-card {
					color: #fff;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
					background-color: #000;
					border-radius: var(--soft-edges);
					justify-content: center;
					align-items: center;
					width: var(--flick-card-width);
					aspect-ratio: 6/8.5;
					display: flex;
					position: relative;
					overflow: hidden;

					.flick-card__before {
						padding-top: 150%;
					}

					.flick-card__media {
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						display: flex;
						position: absolute;
						top: 0;
						left: 0;
					}

					.cover-image {
						pointer-events: none;
						-o-object-fit: cover;
						object-fit: cover;
						-webkit-user-select: none;
						-moz-user-select: none;
						-ms-user-select: none;
						user-select: none;
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: auto;
					}

					h3 {
						position: absolute;
					}

					.flick-card__btnwrapper {
						width: calc(100% - 4em);
						position: absolute;
						bottom: 2em;
						left: 2em;
						z-index: 1999;
						display: flex;
						align-items: center;
						justify-content: center;

						.btn {
							font-family: var(--font-button);
							font-size: var(--step--2);
						}
					}
				}
			}
		}
	}

	/***

	CENTERED IMG CTA SECTION

	***/

	.centered-img-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		.centered-img-cta__hero-wrapper {
			--hero-fontsize: var(--step-7);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;

			h2 {
				font-size: var(--hero-fontsize);
				position: relative;
				z-index: 1;
			}

			.centered-img-cta__img-wrapper {
				position: relative;
				font-size: var(--hero-fontsize);
				min-width: clamp(320px, 50rem, 100%);
				position: relative;
				aspect-ratio: 16 / 7;

				.centered-img-cta__img-inner {
					position: relative;
					width: 100%;
					position: relative;
					height: calc(100% + 1.225cap);
					transform: translateY(-1.225cap);
					overflow: hidden;
					border-radius: var(--soft-edges);

					img {
						width: 100%;
						height: calc(100% + 1.225cap);
						-o-object-position: center;
						object-position: center;
						position: absolute;
						-o-object-fit: cover;
						object-fit: cover;
						top: 0;
						left: 0;
					}
				}
			}
		}
	}

	/***

	BASIC CARDS / CARDS

	***/

	/* CARDS */

	.card {
		&.product-card {
			display: flex;
			flex-direction: column;
			gap: var(--space-s);

			.product-item__image {
				position: relative;
				overflow: hidden;
				border-radius: var(--soft-edges);
				background-color: var(--color-light);

				/* Use white background when inside .bg-light section */
				.bg-light & {
					background-color: var(--color-white);
				}

				img {
					position: relative;
					width: 100%;
					height: 100%;
					transition: transform 0.5s var(--transition-alt);
				}

				.btn-icon {
					position: absolute;
					top: -1px;
					right: -1px;
					border-top-right-radius: 0px;
					font-size: var(--step-0);
				}
			}

			.product-item__details {
				display: flex;
				flex-direction: row;
				gap: var(--space-s);
				align-items: flex-start;
				justify-content: space-between;

				.product-item__name {
					font-size: var(--step--1);
					margin: 0;
					text-transform: uppercase;
					font-weight: var(--font-medium);
					font-family: var(--font-alt);
					line-height: var(--leading-step2);
					letter-spacing: var(--letterspacing-loose);
				}

				.product-item__price {
					font-size: var(--step--1);
					margin: 0;
					text-transform: uppercase;
					font-weight: var(--font-medium);
					font-family: var(--font-alt);
					line-height: var(--leading-step2);
					letter-spacing: var(--letterspacing-loose);
				}
			}

			&:hover {
				@media (hover: hover) and (pointer: fine) {
					.product-item__image img {
						transform: scale(1.05);
						transition: transform 0.5s var(--transition-alt);
					}
				}
			}
		}
	}

	/***
	
	CHIP COMPONENT
	Small informational badges with icon and text
	
	***/

	.chip-list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
		list-style: none;
		padding: 0;
		list-style: none;
		-webkit-padding-start: 0;
		padding-inline-start: 0;
		font-size: var(--step--1);
	}

	.chip {
		display: inline-flex;
		align-items: center;
		gap: 0;
		background-color: var(--color-white);
		overflow: hidden;
		border-radius: 0;
		line-height: var(--leading-flat);
		box-shadow: 4px 4px 12px #00000008;

		.chip__icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background-color: var(--color-dark);
			color: var(--color-white);
			width: 1.6em;
			height: 1.6em;
			flex-shrink: 0;

			i {
				font-size: 1em;
				line-height: 1;
			}
		}

		.chip__text {
			padding-inline: 0.75ch;
			font-weight: var(--font-semibold);
			font-family: var(--font-base);
			white-space: nowrap;
		}
	}

	/* Reverse colors for light backgrounds */
	.bg-light .chip {
		background-color: var(--color-white);
		color: var(--color-dark);

		.chip__icon {
			background-color: var(--color-dark);
			color: var(--color-light);
		}
	}
}

/*** 

FOOTER BOTTOM 

***/

.footer-bottom {
	background-color: var(--color-dark);
	border-top: 1px solid var(--color-dark-grey);
	padding-block: var(--space-xs-s);
	position: relative;
}

.footer-bottom__content {
	max-width: var(--grid-max-width);
	margin-inline: auto;
	padding-inline: var(--grid-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
	text-align: center;
}

.footer-bottom__logo {
	a {
		display: block;
		transition: opacity 0.3s ease;

		svg {
			width: 120px;
		}

		&:hover {
			opacity: 0.7;
		}
	}

	img {
		width: 100%;
		height: auto;
		display: block;
	}
}

.footer-bottom__link {
	color: var(--color-light);
	text-decoration: none;
	font-size: var(--step--1);
	font-weight: var(--font-medium);
	letter-spacing: var(--letterspacing-loose);
	transition: color 0.3s ease;

	&:hover {
		color: var(--color-mid);
	}
}

.footer-bottom__separator {
	color: var(--color-grey);
	font-size: var(--step--1);
}

.footer-bottom__text {
	color: var(--color-grey);
	font-size: var(--step--2);
	margin: 0;
	letter-spacing: var(--letterspacing-loose);
}