sticky-feature-cta {
	--color-button-outline: rgba(var(--color-foreground), 1);
	display: block;
	background-color: #efefef;

	@media (width >= 750px) {
		display: flex;
		min-height: 100vh;
		position: relative;
	}

	&.t-dark {
		--color-button-outline: #fff;
		color: #fff;
		background-color: #111;
	}

	.sticky-feature-cta__pagination-wrapper {
		position: absolute;
		top: 0;
		right: 53px;
		height: 100%;
	}

	.sticky-feature-cta__pagination {
		display: flex;
		flex-direction: column;
		gap: 21px;
		margin: 50vh 0;
		position: sticky;
		top: 50%;
		transform: translateY(-50%);

		@media (width < 750px) {
			display: none;
		}
	}

	.sticky-feature-cta__pagination-bullet {
		display: block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #111;
		transition: background-color 0.3s;

		&.active {
			background-color: #8F8F8F;
		}
	}
	&.t-dark .sticky-feature-cta__pagination-bullet {
		background-color: #fff;

		&.active {
			background-color: #8F8F8F;
		}
	}

	.sticky-feature-cta__images {
		position: sticky;
		top: 0;
		height: 100vh;
		width: 50%;
		background: #efefef;
		overflow: hidden;

		@media (width < 750px) {
			display: none;
		}
	}
	&.t-dark .sticky-feature-cta__images {
		background: #111;
	}

	.sticky-feature-cta__image-group {
		display: none;
		width: 100%;
		height: 100%;
	}
	.sticky-feature-cta__image-group.active {
		display: block;
	}

	.sticky-feature-cta__swiper {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.sticky-feature-cta__swiper .swiper-wrapper {
		width: 100%;
		height: 100%;
	}
	.sticky-feature-cta__swiper .swiper-slide {
		flex-shrink: 0 !important;
		width: 100% !important;
		height: 100% !important;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.sticky-feature-cta__image {
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover;
		display: block;
	}

	.sticky-feature-cta__swiper--single .swiper-button-prev,
	.sticky-feature-cta__swiper--single .swiper-button-next,
	.sticky-feature-cta__swiper--single .swiper-pagination {
		display: none !important;
	}

	/* Navigation buttons base */
	.sticky-feature-cta__nav.swiper-button-prev,
	.sticky-feature-cta__nav.swiper-button-next {
		width: 44px;
		height: 44px;
		border: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: background 0.2s, opacity 0.2s;
		margin: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.sticky-feature-cta__nav.swiper-button-prev { left: 20px; }
	.sticky-feature-cta__nav.swiper-button-next { right: 20px; }
	.sticky-feature-cta__nav.swiper-button-prev::after,
	.sticky-feature-cta__nav.swiper-button-next::after {
		font-size: 16px;
		font-weight: 600;
	}

	&.sticky-feature-cta--nav-circle .sticky-feature-cta__nav {
		background: rgba(255, 255, 255, 0.85);
		border-radius: 50%;
	}
	&.sticky-feature-cta--nav-circle .sticky-feature-cta__nav:hover { background: #fff; }
	&.sticky-feature-cta--nav-circle .sticky-feature-cta__nav::after { color: #111; }

	&.sticky-feature-cta--nav-minimal .sticky-feature-cta__nav { background: transparent; }
	&.sticky-feature-cta--nav-minimal .sticky-feature-cta__nav::after {
		color: #fff;
		font-size: 28px;
		text-shadow: 0 1px 4px rgba(0,0,0,0.4);
	}
	&.sticky-feature-cta--nav-minimal .sticky-feature-cta__nav:hover::after { opacity: 0.75; }

	&.sticky-feature-cta--nav-square .sticky-feature-cta__nav {
		background: rgba(0, 0, 0, 0.7);
		border-radius: 0;
	}
	&.sticky-feature-cta--nav-square .sticky-feature-cta__nav:hover { background: #000; }
	&.sticky-feature-cta--nav-square .sticky-feature-cta__nav::after { color: #fff; }

	&.sticky-feature-cta--nav-hidden .sticky-feature-cta__nav { display: none !important; }

	.sticky-feature-cta__swiper-pagination.swiper-pagination { bottom: 16px; }
	.sticky-feature-cta__swiper-pagination .swiper-pagination-bullet {
		background: rgba(255, 255, 255, 0.6);
		opacity: 1;
	}
	.sticky-feature-cta__swiper-pagination .swiper-pagination-bullet-active { background: #fff; }

	.sticky-feature-cta__mobile-image-wrap {
		@media (width >= 750px) { display: none; }
	}
	.sticky-feature-cta__mobile-swiper { width: 100%; }
	.sticky-feature-cta__mobile-pagination.swiper-pagination { bottom: 8px; }

	.sticky-feature-cta__content-wrapper {
		@media (width < 750px) {
			display: flex;
			flex-direction: column;
		}
		@media (width >= 750px) {
			width: 50%;
		}
	}

	.sticky-feature-cta__mobile-image {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
	}

	.sticky-feature-cta__content {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #efefef;
		line-height: normal;
		transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;

		@media (width < 750px) {
			padding: 25px;
		}
		@media (width >= 750px) {
			min-height: 100vh;
			padding: 90px;
		}
	}
	&.t-dark .sticky-feature-cta__content {
		background-color: #111;
	}

	.sticky-feature-cta__subheading {
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: normal;
		color: #666666;
		margin-bottom: 10px;
		text-transform: uppercase;
	}

	.sticky-feature-cta__heading {
		font-family: "NordBold";
		font-size: 35px;
		font-weight: 700;
		color: inherit;
		margin-bottom: 20px;
		letter-spacing: -0.03em;
	}

	.sticky-feature-cta__price {
		margin: 0 0 20px;
		color: inherit;
	}

	.sticky-feature-cta__text,
	.sticky-feature-cta__features {
		max-width: 600px;
	}

	.sticky-feature-cta__text {
		color: inherit;
		font-size: 14px;
	}

	.sticky-feature-cta__cta {
		display: inline-flex;
		margin-top: 28px;
		align-self: flex-start;
	}
	&.t-dark .sticky-feature-cta__cta.button--filled {
		background-color: #fff;
		color: #111;
		border-color: #fff;
	}
	&.t-dark .sticky-feature-cta__cta.button--filled:hover {
		background-color: #e6e6e6;
		border-color: #e6e6e6;
		color: #111;
	}
	&.t-dark .sticky-feature-cta__cta.button--outlined {
		border-color: #fff;
		color: #fff;
	}
	&.t-dark .sticky-feature-cta__cta.button--text {
		color: #fff;
	}

	.sticky-feature-cta__features {
		margin: 50px 0 0;
		padding: 0;
		font-size: 12px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		border-collapse: collapse;

		tr {
			border-bottom: 1px solid #e3e3e3;
			transition: border-color 0.4s ease-in-out;
		}

		th, td {
			padding: 12px 0;
			text-align: left;
		}

		th {
			font-weight: normal;
			padding-right: 50px;
		}

		th + td {
			font-weight: 600;
		}
	}
	&.t-dark .sticky-feature-cta__features tr {
		border-color: #333;
	}

	&.has-custom-bg {
		background-color: var(--sfc-custom-bg);
		transition: background-color 0.4s ease-in-out;
	}
	&.has-custom-bg .sticky-feature-cta__content {
		background-color: var(--sfc-custom-bg);
	}
	&.has-custom-bg .sticky-feature-cta__images {
		background: var(--sfc-custom-bg);
		transition: background 0.4s ease-in-out;
	}

	&.has-custom-text {
		color: var(--sfc-custom-text);
		transition: color 0.4s ease-in-out;
	}
	&.has-custom-text .sticky-feature-cta__content {
		color: var(--sfc-custom-text);
	}
}