.scc-carousel-wrapper {
	--scc-speed: 700ms;
	position: relative;
	width: 100%;
	/* Prevent scaled slides from causing page-level horizontal scroll. */
	overflow-x: clip;
}

.scc-carousel-wrapper .scc-swiper {
	width: 100%;
	padding: var( --scc-pad-y, 24px ) 0;
	/* Required for Swiper width/center calculations. */
	overflow: hidden;
}

.scc-carousel-wrapper.scc-center-mode .scc-swiper {
	padding-top: var( --scc-pad-y, 24px );
	padding-bottom: calc( var( --scc-pad-y, 24px ) + 8px );
}

.scc-carousel-wrapper .swiper-wrapper {
	transition-timing-function: cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.scc-carousel-wrapper .swiper-slide {
	display: block;
	text-decoration: none;
	color: inherit;
}

.scc-carousel-wrapper.scc-height-fixed .swiper-slide {
	height: var( --scc-slide-height, 380px );
}

.scc-carousel-wrapper.scc-height-aspect .swiper-slide {
	height: auto;
	aspect-ratio: var( --scc-aspect, 4 / 3 );
}

/* Without center mode, keep slides at full visual weight. */
.scc-carousel-wrapper:not( .scc-center-mode ) .scc-slide-inner {
	opacity: 1;
	transform: none;
	filter: none;
}

.scc-carousel-wrapper .scc-slide-inner {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: var( --scc-slide-radius, 16px );
	overflow: hidden;
	background: #eee;
	opacity: var( --scc-inactive-opacity, 0.6 );
	transform: scale( var( --scc-inactive-scale, 0.92 ) );
	filter: brightness( var( --scc-inactive-dim, 0.8 ) );
	transition:
		transform var( --scc-speed, 700ms ) cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		opacity var( --scc-speed, 700ms ) cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		filter var( --scc-speed, 700ms ) cubic-bezier( 0.22, 0.61, 0.36, 1 );
	transform-origin: center center;
}

.scc-carousel-wrapper.scc-center-mode .swiper-slide-active .scc-slide-inner {
	opacity: 1;
	transform: scale( var( --scc-active-scale, 1.05 ) )
		translateY( var( --scc-active-nudge-y, 0px ) );
	filter: brightness( 1 );
}

.scc-carousel-wrapper .swiper-slide-active {
	z-index: 10;
}

.scc-carousel-wrapper .scc-slide-inner img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.scc-carousel-wrapper.scc-fit-contain .scc-slide-inner img {
	object-fit: contain;
}

.scc-carousel-wrapper.scc-fit-cover .scc-slide-inner img {
	object-fit: cover;
}

.scc-carousel-wrapper .scc-slide-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.65 ), rgba( 0, 0, 0, 0 ) );
	color: #fff;
	text-align: center;
}

.scc-carousel-wrapper .scc-slide-title {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
}

.scc-carousel-wrapper .scc-slide-subtitle {
	font-size: 13px;
	opacity: 0.9;
	margin-top: 4px;
}

@media ( prefers-reduced-motion: reduce ) {
	.scc-carousel-wrapper .scc-slide-inner {
		transition-duration: 0.01ms;
	}
}

/* Navigation arrows — min 44×44 touch target */
.scc-carousel-wrapper .scc-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba( 255, 255, 255, 0.9 );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.15 );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	transition: background 0.2s ease;
	padding: 0;
}

.scc-carousel-wrapper .scc-nav:focus-visible {
	outline: 2px solid var( --e-global-color-primary, #6b46c1 );
	outline-offset: 2px;
}

.scc-chevron {
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	box-sizing: border-box;
}

.scc-prev .scc-chevron {
	transform: rotate( -135deg );
	margin-right: -3px;
}

.scc-next .scc-chevron {
	transform: rotate( 45deg );
	margin-left: -3px;
}

.scc-carousel-wrapper .scc-nav:hover {
	background: #fff;
}

.scc-carousel-wrapper .scc-prev.scc-nav-side {
	left: 10px;
}

.scc-carousel-wrapper .scc-next.scc-nav-side {
	right: 10px;
}

.scc-carousel-wrapper .scc-pagination {
	text-align: center;
	margin-top: 4px;
}

.scc-carousel-wrapper .swiper-pagination-bullet-active {
	background: var( --e-global-color-primary, #6b46c1 );
}

.scc-carousel-wrapper[dir="rtl"] > .scc-prev {
	transform: translateY( -50% ) scaleX( -1 );
}

.scc-carousel-wrapper[dir="rtl"] > .scc-next {
	transform: translateY( -50% ) scaleX( -1 );
}

/* Bottom control bar */
.scc-bottom-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
	position: relative;
	z-index: 15;
	direction: ltr;
}

.scc-bb-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid #e2e2e2;
	background: #fff;
	color: #333;
	font-size: 13px;
	line-height: 1;
}

.scc-bb-arrows {
	padding: 0 8px;
	gap: 2px;
}

.scc-bb-arrows .scc-nav {
	position: static;
	transform: none;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	box-shadow: none;
	background: transparent;
	font-size: 12px;
}

.scc-bb-arrows .scc-nav:hover {
	background: #f2f2f2;
}

.scc-bb-playpause {
	padding: 0;
	width: 44px;
	justify-content: center;
	border-radius: 50%;
}

.scc-bb-toggle {
	width: 100%;
	height: 100%;
	min-width: 44px;
	min-height: 44px;
	border: none;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scc-bb-toggle:focus-visible {
	outline: 2px solid var( --e-global-color-primary, #6b46c1 );
	outline-offset: 2px;
	border-radius: 50%;
}

.scc-icon-pause,
.scc-icon-play {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.scc-bb-toggle[data-state="playing"] .scc-icon-pause {
	display: flex;
}

.scc-bb-toggle[data-state="paused"] .scc-icon-play {
	display: flex;
}

.scc-icon-pause i {
	display: block;
	width: 3px;
	height: 12px;
	background: #333;
	border-radius: 1px;
}

.scc-icon-play i {
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #333;
}

.scc-bb-count {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.scc-bb-sep {
	opacity: 0.4;
	font-weight: 400;
}