/*
 * Boomme font: upload your Boomme font files to
 * assets/fonts/ (this plugin's fonts folder) and update the src paths
 * below if your filenames differ. Until real files are uploaded, the
 * stack falls back to Poppins so the layout still looks correct.
 *
 * IMPORTANT: the font must be selected as "Boomme" (not "Boomme Text")
 * in the Typography control's Font Family field for it to match the
 * @font-face name below and actually load. Both names are registered
 * here so either works.
 *
 * If you have separate Regular and Bold font files (most brand fonts
 * do), drop them in as Boomme-Regular.woff2/.woff and
 * Boomme-Bold.woff2/.woff — the two @font-face blocks below already
 * point to those names so Bold renders as a true bold file instead of
 * a fake/synthetic bold.
 */
@font-face {
	font-family: 'Boomme';
	src: url('../fonts/Boomme-Regular.woff2') format('woff2'),
		 url('../fonts/Boomme-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Boomme';
	src: url('../fonts/Boomme-Bold.woff2') format('woff2'),
		 url('../fonts/Boomme-Bold.woff') format('woff');
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Boomme Text';
	src: url('../fonts/Boomme-Regular.woff2') format('woff2'),
		 url('../fonts/Boomme-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Boomme Text';
	src: url('../fonts/Boomme-Bold.woff2') format('woff2'),
		 url('../fonts/Boomme-Bold.woff') format('woff');
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
}

.epsc-carousel {
	--epsc-cols: 3;
	--epsc-gap: 24px;
	position: relative;
	width: 100%;
	font-family: 'Boomme', 'Poppins', sans-serif;
}

.epsc-viewport {
	overflow: hidden;
	width: 100%;
	padding-top: 26px;
	margin-top: -26px;
}

.epsc-track {
	display: flex;
	gap: var(--epsc-gap);
	will-change: transform;
	transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.epsc-slide {
	flex: 0 0 calc((100% - (var(--epsc-cols) - 1) * var(--epsc-gap)) / var(--epsc-cols));
	max-width: calc((100% - (var(--epsc-cols) - 1) * var(--epsc-gap)) / var(--epsc-cols));
}

.epsc-slide-media {
	position: relative;
	display: block;
	width: 100%;
	height: 380px;
	text-decoration: none;
}

.epsc-slide-img {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.epsc-badge {
	position: absolute;
	top: calc(-16px + var(--epsc-badge-y, 0px));
	left: 50%;
	--epsc-badge-x: 0px;
	--epsc-badge-y: 0px;
	--epsc-badge-rotate: 0deg;
	transform: translateX(calc(-50% + var(--epsc-badge-x))) rotate(var(--epsc-badge-rotate));
	z-index: 3;
	display: inline-block;
	/* Background/text color are set per-badge from the "Category Badge"
	 * style section (Badge 1/2/3 tabs). These are just a safe fallback
	 * in case a slide has no matching style tab (4th+ slide). */
	background-color: #331B0E;
	color: #ffe8c9;
	/* Font (family/size/weight/letter-spacing/transform/line-height) is
	 * fully controlled by the "Category Badge" Typography control in the
	 * Style tab — intentionally NOT hardcoded here so that control always
	 * takes effect without any CSS specificity conflict. */
	padding: 18px 18px 18px 18px;
	border-radius: 40px;
	white-space: nowrap;
}


.epsc-caption {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	background-color: transparent;
	color: #ffe8c9;
	/* Font is controlled by the Caption Typography control (Style tab). */
	text-align: center;
	padding: 14px 16px;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
}

.epsc-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}

.epsc-nav-bottom-right {
	justify-content: flex-end;
}

.epsc-nav-bottom-center {
	justify-content: center;
}

.epsc-nav-bottom-left {
	justify-content: flex-start;
}

.epsc-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: #331B0E;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.2s ease;
}

.epsc-next-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.epsc-nav-btn.epsc-next-label {
	width: auto;
	min-width: max-content;
	height: 48px;
	border-radius: 30px;
	padding: 0 26px;
	white-space: nowrap;
}

.epsc-nav-btn.epsc-next-arrow {
	width: 48px;
	height: 48px;
	padding: 0;
}

.epsc-nav-btn:hover {
	background-color: #FF4500;
	transform: translateY(-2px);
}

.epsc-nav-btn svg {
	stroke: #ffe8c9;
	flex-shrink: 0;
}

.epsc-nav-label {
	color: #ffe8c9;
	font-family: 'Boomme', 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.epsc-nav-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

@media (max-width: 1024px) {
	.epsc-slide-media {
		height: 320px;
	}
}

@media (max-width: 767px) {
	.epsc-carousel {
		--epsc-cols: 1 !important;
	}
	.epsc-slide-media {
		height: 300px;
	}
}