.etps-showcase,
.etps-showcase * {
	box-sizing: border-box;
}

.etps-showcase {
	--etps-progress-color: #6d28d9;
	--etps-progress-height: 3px;
	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
	background: linear-gradient(145deg, #fff7d8 0%, #e8f4df 48%, #d9f4f7 100%);
	color: #321070;
	font-family: inherit;
}

.etps-showcase::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
}

.etps-showcase__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-inline: auto;
	padding: clamp(42px, 6vw, 90px) clamp(20px, 4vw, 64px);
}

.etps-showcase__header {
	position: relative;
	z-index: 3;
	width: 100%;
	margin-bottom: clamp(26px, 4vw, 52px);
}

.etps-showcase__heading,
.etps-showcase__subtitle,
.etps-showcase__feature-title,
.etps-showcase__feature-description {
	padding: 0;
}

.etps-showcase__heading {
	width: 100%;
	margin: 0 auto;
	font-size: clamp(2.25rem, 5.2vw, 4.75rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.045em;
}

.etps-showcase__subtitle {
	width: 100%;
	margin: 16px auto 0;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.55;
}

.etps-showcase__tabs-wrap {
	position: relative;
	z-index: 5;
	max-width: 100%;
	margin: 0 auto clamp(36px, 6vw, 76px);
}

.etps-showcase__tabs {
	display: flex;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	padding: 3px;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.etps-showcase__tabs::-webkit-scrollbar {
	display: none;
}

.etps-showcase__tab {
	--etps-tab-scale: 1;
	--etps-tab-y: 0px;
	--etps-tab-transition: 250ms;
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
	transform: translateY(var(--etps-tab-y)) scale(var(--etps-tab-scale));
	transition: color var(--etps-tab-transition) ease, background-color var(--etps-tab-transition) ease, border-color var(--etps-tab-transition) ease, box-shadow var(--etps-tab-transition) ease, transform var(--etps-tab-transition) ease;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.etps-showcase__tab:focus-visible,
.etps-showcase__button:focus-visible,
.etps-showcase__product-link:focus-visible,
.etps-showcase__feature[href]:focus-visible {
	outline: 3px solid #111827;
	outline-offset: 4px;
}

.etps-showcase__tab-media,
.etps-showcase__tab-media > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.etps-showcase__tab-media img,
.etps-showcase__tab-media svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.etps-showcase__progress {
	position: absolute;
	right: 10%;
	bottom: 0;
	left: 10%;
	height: var(--etps-progress-height);
	overflow: hidden;
	border-radius: 999px;
	background: rgb(255 255 255 / 30%);
	opacity: 0;
}

.etps-showcase__tab[aria-selected="true"] .etps-showcase__progress {
	opacity: 1;
}

.etps-showcase__progress-bar {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--etps-progress-color);
}

.etps-showcase__tab.etps-showcase__tab--progressing .etps-showcase__progress-bar {
	width: 100%;
	transition: width var(--etps-auto-interval, 5000ms) linear;
}

.etps-showcase__panels {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: min(640px, 75vh);
}

.etps-showcase__panel {
	position: relative;
	width: 100%;
	background-repeat: no-repeat;
}

.etps-showcase__panel[hidden] {
	display: none !important;
}

.etps-showcase__content {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	margin-inline: auto;
}

.etps-showcase__product-column,
.etps-showcase__details-column {
	min-width: 0;
}

.etps-showcase__product-column {
	display: flex;
	align-items: center;
	justify-content: center;
}

.etps-showcase__details-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.etps-showcase__product-media {
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
}

.etps-showcase__product-decoration {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	max-width: 620px;
	height: auto;
	object-fit: contain;
	transform: translate(-50%, -50%);
	pointer-events: none;
	user-select: none;
}

.etps-showcase__product-link {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
}

.etps-showcase__product-image {
	--etps-product-opacity: 1;
	--etps-product-rotate: 0deg;
	--etps-product-scale: 1;
	--etps-product-transition: 350ms;
	display: block;
	height: auto;
	opacity: var(--etps-product-opacity);
	transform: rotate(var(--etps-product-rotate)) scale(var(--etps-product-scale));
	transform-origin: center;
	transition: transform var(--etps-product-transition) ease, opacity var(--etps-product-transition) ease;
}

.etps-showcase__features {
	display: flex;
	flex-direction: column;
}

.etps-showcase__feature {
	--etps-feature-y: 0px;
	--etps-feature-scale: 1;
	--etps-feature-transition: 280ms;
	display: block;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transform: translateY(var(--etps-feature-y)) scale(var(--etps-feature-scale));
	transition: color var(--etps-feature-transition) ease, background-color var(--etps-feature-transition) ease, border-color var(--etps-feature-transition) ease, box-shadow var(--etps-feature-transition) ease, transform var(--etps-feature-transition) ease;
}

.etps-showcase__feature-inner {
	display: flex;
	height: 100%;
}

.etps-showcase__feature-media {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: color var(--etps-feature-transition) ease, background-color var(--etps-feature-transition) ease;
}

.etps-showcase__feature-media svg {
	display: block;
	fill: currentColor;
}

.etps-showcase__feature-media img {
	display: block;
	max-width: 100%;
	height: auto;
}

.etps-showcase__feature-content {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
}

.etps-showcase__feature-title {
	margin: 0 0 6px;
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	font-weight: 750;
	line-height: 1.2;
	transition: color var(--etps-feature-transition) ease;
}

.etps-showcase__feature-description {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.etps-showcase__button-wrap {
	display: flex;
	width: 100%;
}

.etps-showcase__button {
	--etps-button-scale: 1;
	--etps-button-y: 0px;
	--etps-button-transition: 250ms;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	font: inherit;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transform: translateY(var(--etps-button-y)) scale(var(--etps-button-scale));
	transition: color var(--etps-button-transition) ease, background-color var(--etps-button-transition) ease, border-color var(--etps-button-transition) ease, box-shadow var(--etps-button-transition) ease, transform var(--etps-button-transition) ease;
}

.etps-showcase__button-icon,
.etps-showcase__button-icon > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.etps-showcase__button-icon svg {
	display: block;
	fill: currentColor;
}

.etps-showcase__decoration {
	position: absolute;
	top: var(--etps-decor-y);
	left: var(--etps-decor-x);
	z-index: var(--etps-decor-z);
	display: block;
	width: var(--etps-decor-width);
	max-width: none;
	height: auto;
	opacity: var(--etps-decor-opacity);
	transform: translate(-50%, -50%) rotate(var(--etps-decor-rotate));
	pointer-events: none;
	user-select: none;
}

.etps-showcase__decoration--float {
	animation: etps-decoration-float var(--etps-decor-duration) ease-in-out var(--etps-decor-delay) infinite alternate;
}

.etps-showcase__decoration--pulse {
	animation: etps-decoration-pulse var(--etps-decor-duration) ease-in-out var(--etps-decor-delay) infinite alternate;
}

.etps-showcase__decoration--spin {
	animation: etps-decoration-spin var(--etps-decor-duration) linear var(--etps-decor-delay) infinite;
}

.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--fade,
.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--fade-up,
.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--fade-down,
.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--slide-left,
.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--slide-right,
.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--scale {
	animation-duration: var(--etps-animation-duration);
	animation-delay: var(--etps-animation-delay);
	animation-timing-function: var(--etps-animation-easing);
	animation-fill-mode: both;
}

.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--fade { animation-name: etps-panel-fade; }
.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--fade-up { animation-name: etps-panel-fade-up; }
.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--fade-down { animation-name: etps-panel-fade-down; }
.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--slide-left { animation-name: etps-panel-slide-left; }
.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--slide-right { animation-name: etps-panel-slide-right; }
.etps-showcase__panel.etps-showcase__panel--entering.etps-animation--scale { animation-name: etps-panel-scale; }

.etps-showcase__panel--animate-product.etps-showcase__panel--entering .etps-showcase__product-media,
.etps-showcase__panel--animate-button.etps-showcase__panel--entering .etps-showcase__button-wrap,
.etps-showcase__panel--animate-features.etps-showcase__panel--entering .etps-showcase__feature {
	animation: etps-child-reveal var(--etps-animation-duration) var(--etps-animation-easing) both;
}

.etps-showcase__panel--animate-features.etps-showcase__panel--entering .etps-showcase__feature {
	animation-delay: calc(var(--etps-animation-delay) + (var(--etps-feature-index, 0) * var(--etps-feature-stagger)));
}

.etps-showcase__panel--animate-button.etps-showcase__panel--entering .etps-showcase__button-wrap {
	animation-delay: calc(var(--etps-animation-delay) + 120ms);
}

@keyframes etps-panel-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes etps-panel-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes etps-panel-fade-down { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes etps-panel-slide-left { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } }
@keyframes etps-panel-slide-right { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } }
@keyframes etps-panel-scale { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes etps-child-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes etps-decoration-float { from { transform: translate(-50%, -50%) rotate(var(--etps-decor-rotate)) translateY(-8px); } to { transform: translate(-50%, -50%) rotate(var(--etps-decor-rotate)) translateY(8px); } }
@keyframes etps-decoration-pulse { from { transform: translate(-50%, -50%) rotate(var(--etps-decor-rotate)) scale(.92); } to { transform: translate(-50%, -50%) rotate(var(--etps-decor-rotate)) scale(1.08); } }
@keyframes etps-decoration-spin { from { transform: translate(-50%, -50%) rotate(var(--etps-decor-rotate)); } to { transform: translate(-50%, -50%) rotate(calc(var(--etps-decor-rotate) + 360deg)); } }

@media (max-width: 1024px) {
	.etps-showcase--stack-tablet .etps-showcase__content {
		flex-direction: column;
	}

	.etps-showcase--stack-tablet .etps-showcase__product-column,
	.etps-showcase--stack-tablet .etps-showcase__details-column {
		width: 100%;
		flex-basis: auto;
	}

	.etps-showcase__decoration--hide-tablet { display: none !important; }
}

@media (min-width: 1025px) {
	.etps-showcase__decoration--hide-desktop { display: none !important; }
}

@media (max-width: 767px) {
	.etps-showcase--stack-mobile .etps-showcase__content {
		flex-direction: column;
	}

	.etps-showcase--stack-mobile .etps-showcase__product-column,
	.etps-showcase--stack-mobile .etps-showcase__details-column {
		width: 100%;
		flex-basis: auto;
	}

	.etps-showcase__inner {
		padding-inline: 18px;
	}

	.etps-showcase__tabs {
		justify-content: flex-start;
	}

	.etps-showcase__tab {
		min-height: 48px;
	}

	.etps-showcase__feature-inner {
		padding: 18px;
	}

	.etps-showcase__decoration--hide-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.etps-showcase--respect-reduced-motion *,
	.etps-showcase--respect-reduced-motion *::before,
	.etps-showcase--respect-reduced-motion *::after {
		scroll-behavior: auto !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}
