/* S4E Page Popups — frontend */
.s4epp {
	--s4epp-accent: #e6457a;
	--s4epp-accent2: #7b5cff;
	--s4epp-bg: #fff;
	--s4epp-text: #1d1b2c;
	--s4epp-radius: 20px;
	--s4epp-maxw: 600px;
	--s4epp-overlay: rgba(15, 12, 29, .65);
	--s4epp-gap: 20px;
	--s4epp-ease: cubic-bezier(.16, 1, .3, 1);
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s4epp-gap);
	box-sizing: border-box;
	pointer-events: none;
	font-family: inherit;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.s4epp[hidden] { display: none !important; }
.s4epp *, .s4epp *::before, .s4epp *::after { box-sizing: border-box; }
.s4epp--modal { pointer-events: auto; z-index: 2147483100; } /* Modals sit above bars & slide-ins. */

/* ---------- Overlay ---------- */
.s4epp__overlay {
	position: absolute;
	inset: 0;
	background: var(--s4epp-overlay);
	opacity: 0;
	transition: opacity .4s ease;
}
.s4epp--blur .s4epp__overlay { -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
.s4epp.is-open .s4epp__overlay { opacity: 1; }

/* ---------- Dialog ---------- */
.s4epp__dialog {
	position: relative;
	width: 100%;
	max-width: var(--s4epp-maxw);
	max-height: calc(100vh - var(--s4epp-gap) * 2);
	max-height: calc(100dvh - var(--s4epp-gap) * 2);
	display: flex;
	flex-direction: column;
	pointer-events: auto;
	outline: none;
	opacity: 0;
	transition: opacity .35s ease, transform .55s var(--s4epp-ease);
	will-change: transform, opacity;
}
.s4epp.is-open .s4epp__dialog { opacity: 1; transform: none; }

/* Entrance animations (initial state) */
.s4epp--anim-zoom .s4epp__dialog { transform: scale(.9) translateY(14px); }
.s4epp--anim-slide-up .s4epp__dialog { transform: translateY(60px); }
.s4epp--anim-slide-down .s4epp__dialog { transform: translateY(-60px); }
.s4epp--anim-flip { perspective: 1400px; }
.s4epp--anim-flip .s4epp__dialog { transform: rotateX(-22deg) translateY(30px) scale(.96); transform-origin: 50% 0; }
.s4epp--anim-fade .s4epp__dialog { transform: none; }
.s4epp.is-closing .s4epp__dialog { transition-duration: .25s, .3s; transition-timing-function: ease, ease-in; }

/* ---------- Close button ---------- */
.s4epp .s4epp__close {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #1d1b2c;
	font: inherit;
	line-height: 1;
	text-transform: none;
	box-shadow: 0 8px 22px -6px rgba(15, 12, 29, .45), 0 0 0 1px rgba(15, 12, 29, .06);
	cursor: pointer;
	transition: transform .3s var(--s4epp-ease), opacity .3s ease, background .2s;
}
.s4epp .s4epp__close:hover,
.s4epp .s4epp__close:focus-visible { transform: rotate(90deg) scale(1.06); background: #fff; color: #1d1b2c; }
.s4epp .s4epp__close:focus-visible { outline: 3px solid var(--s4epp-accent); outline-offset: 2px; }
.s4epp .s4epp__close svg { display: block; width: 16px; height: 16px; }
.s4epp .s4epp__close--dark,
.s4epp .s4epp__close--dark:hover,
.s4epp .s4epp__close--dark:focus-visible { background: rgba(20, 17, 36, .9); color: #fff; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12); }
.s4epp .s4epp__close--accent,
.s4epp .s4epp__close--accent:hover,
.s4epp .s4epp__close--accent:focus-visible { background: linear-gradient(135deg, var(--s4epp-accent), var(--s4epp-accent2)); color: #fff; }
.s4epp .s4epp__close--minimal,
.s4epp .s4epp__close--minimal:hover,
.s4epp .s4epp__close--minimal:focus-visible { top: 12px; right: 12px; width: 32px; height: 32px; background: rgba(127, 127, 127, .14); color: var(--s4epp-text); box-shadow: none; }
.s4epp--type-image .s4epp__close--minimal,
.s4epp--layout-cover .s4epp__close--minimal { color: #fff; background: rgba(0, 0, 0, .35); }
.s4epp .s4epp__close.is-waiting { opacity: 0; pointer-events: none; transform: scale(.6); }

/* ---------- Image popup ---------- */
.s4epp__image { display: flex; justify-content: center; min-height: 0; }
.s4epp .s4epp__image-link {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: block;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--s4epp-radius);
	background: transparent;
	overflow: hidden;
	line-height: 0;
	cursor: pointer;
	box-shadow: 0 40px 90px -30px rgba(10, 8, 25, .65), 0 0 0 1px rgba(255, 255, 255, .08);
	transition: transform .5s var(--s4epp-ease), box-shadow .5s var(--s4epp-ease);
}
.s4epp .s4epp__image-link.is-static { cursor: default; }
.s4epp .s4epp__image-link:not(.is-static):hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 50px 100px -30px rgba(10, 8, 25, .75), 0 0 0 1px rgba(255, 255, 255, .1); }
.s4epp .s4epp__image-link:focus-visible { outline: 3px solid var(--s4epp-accent); outline-offset: 4px; }
.s4epp .s4epp__img,
.s4epp__image picture img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - var(--s4epp-gap) * 2 - 10px);
	max-height: calc(100dvh - var(--s4epp-gap) * 2 - 10px);
	margin: 0 auto;
	border-radius: 0;
	object-fit: contain;
}
.s4epp__image picture { display: block; }
.s4epp__shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%);
	transform: translateX(-120%);
	pointer-events: none;
}
.s4epp.is-open .s4epp__shine { animation: s4epp-shine 1.4s .6s var(--s4epp-ease) 1; }
.s4epp .s4epp__image-link:hover .s4epp__shine { animation: s4epp-shine 1.1s var(--s4epp-ease) 1; }
.s4epp__image--empty {
	display: grid;
	place-items: center;
	min-height: 320px;
	border-radius: var(--s4epp-radius);
	background: repeating-linear-gradient(45deg, #faf8ff, #faf8ff 12px, #f2eefc 12px, #f2eefc 24px);
	color: #6b6880;
	font-weight: 600;
}

/* ---------- HTML popup card ---------- */
.s4epp__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: inherit;
	overflow: hidden auto;
	overscroll-behavior: contain;
	border-radius: var(--s4epp-radius);
	background: var(--s4epp-bg);
	color: var(--s4epp-text);
	box-shadow: 0 40px 100px -30px rgba(10, 8, 25, .55), 0 0 0 1px rgba(127, 127, 127, .08);
	scrollbar-width: thin;
}
/* Decorative glows live in a clipped layer so they never create scrollable overflow. */
.s4epp__fx {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}
.s4epp__glow {
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	pointer-events: none;
	opacity: .22;
	filter: blur(50px);
}
.s4epp__glow--a { top: -150px; right: -110px; background: var(--s4epp-accent); }
.s4epp__glow--b { bottom: -170px; left: -120px; background: var(--s4epp-accent2); opacity: .16; }

.s4epp__media { position: relative; flex-shrink: 0; overflow: hidden; }
.s4epp .s4epp__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.s4epp__card--card .s4epp__media { aspect-ratio: 16 / 8; }
.s4epp__card--card .s4epp__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 40%;
	background: linear-gradient(to bottom, transparent, var(--s4epp-bg));
}

.s4epp__content { position: relative; padding: 38px 40px 34px; text-align: center; }
.s4epp__card--card.has-media .s4epp__content { padding-top: 6px; }

.s4epp .s4epp__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 6px 14px 6px 12px;
	border-radius: 999px;
	background: rgba(127, 127, 127, .1);
	background: color-mix(in srgb, var(--s4epp-accent) 13%, transparent);
	color: var(--s4epp-accent);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .09em;
	line-height: 1.3;
	text-transform: uppercase;
}
.s4epp .s4epp__badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 0 currentColor;
	animation: s4epp-pulse 2s infinite;
}
.s4epp .s4epp__title {
	margin: 0 0 10px;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: clamp(24px, 2.4vw + 12px, 34px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.022em;
	text-transform: none;
}
.s4epp .s4epp__sub { margin: 0 auto 14px; max-width: 46ch; font-size: 16.5px; line-height: 1.5; opacity: .78; }
.s4epp .s4epp__text { font-size: 15px; line-height: 1.65; opacity: .9; }
.s4epp .s4epp__text > :first-child { margin-top: 0; }
.s4epp .s4epp__text > :last-child { margin-bottom: 0; }
.s4epp .s4epp__text p { margin: 0 0 .8em; color: inherit; }
.s4epp .s4epp__text a:not(.s4epp__btn) { color: var(--s4epp-accent); text-decoration: underline; text-underline-offset: 3px; }
.s4epp .s4epp__text img { max-width: 100%; height: auto; border-radius: calc(var(--s4epp-radius) * .5); }
.s4epp .s4epp__text iframe { max-width: 100%; border: 0; border-radius: calc(var(--s4epp-radius) * .5); }
.s4epp .s4epp__text ul { display: inline-block; margin: 4px 0 .8em; padding: 0; list-style: none; text-align: left; }
.s4epp .s4epp__text ul li { position: relative; margin: 0 0 8px; padding-left: 30px; }
.s4epp .s4epp__text ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--s4epp-accent), var(--s4epp-accent2));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 100 20 10 10 0 000-20zm4.9 8.1l-5.6 5.6a1.1 1.1 0 01-1.6 0L5.1 11.1a1.1 1.1 0 011.6-1.6l1.8 1.8 4.8-4.8a1.1 1.1 0 011.6 1.6z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 100 20 10 10 0 000-20zm4.9 8.1l-5.6 5.6a1.1 1.1 0 01-1.6 0L5.1 11.1a1.1 1.1 0 011.6-1.6l1.8 1.8 4.8-4.8a1.1 1.1 0 011.6 1.6z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
.s4epp .s4epp__text ol { margin: 0 0 .8em; padding-left: 1.3em; text-align: left; display: inline-block; }

/* Buttons */
.s4epp .s4epp__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; }
.s4epp .s4epp__btn {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 50px;
	margin: 0;
	padding: 13px 28px;
	border: 0;
	border-radius: calc(var(--s4epp-radius) * .55 + 4px);
	overflow: hidden;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .005em;
	text-decoration: none !important;
	text-transform: none;
	cursor: pointer;
	transition: transform .3s var(--s4epp-ease), box-shadow .3s var(--s4epp-ease), background .2s, color .2s, opacity .2s;
}
.s4epp .s4epp__btn svg { flex-shrink: 0; transition: transform .3s var(--s4epp-ease); }
.s4epp .s4epp__btn:hover svg { transform: translateX(4px); }
.s4epp .s4epp__btn:focus-visible { outline: 3px solid var(--s4epp-accent2); outline-offset: 3px; }
.s4epp .s4epp__btn--primary,
.s4epp .s4epp__btn--primary:hover,
.s4epp .s4epp__btn--primary:focus { color: #fff; background: var(--s4epp-accent); }
.s4epp .s4epp__btn--primary { box-shadow: 0 14px 28px -12px var(--s4epp-accent); }
.s4epp .s4epp__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px var(--s4epp-accent); }
.s4epp .s4epp__btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
	transform: translateX(-120%);
}
.s4epp .s4epp__btn--primary:hover::after { animation: s4epp-shine .9s var(--s4epp-ease) 1; }
.s4epp--btn-gradient .s4epp__btn--primary,
.s4epp--btn-gradient .s4epp__btn--primary:hover,
.s4epp--btn-gradient .s4epp__btn--primary:focus { background: linear-gradient(135deg, var(--s4epp-accent) 0%, var(--s4epp-accent2) 100%); }
.s4epp--btn-pill .s4epp__btn { border-radius: 999px; }
.s4epp--btn-outline .s4epp__btn--primary,
.s4epp--btn-outline .s4epp__btn--primary:focus { background: transparent; color: var(--s4epp-accent); box-shadow: inset 0 0 0 2px var(--s4epp-accent); }
.s4epp--btn-outline .s4epp__btn--primary:hover { background: var(--s4epp-accent); color: #fff; box-shadow: inset 0 0 0 2px var(--s4epp-accent), 0 14px 28px -12px var(--s4epp-accent); }
.s4epp .s4epp__btn--secondary,
.s4epp .s4epp__btn--secondary:focus { padding-left: 18px; padding-right: 18px; background: transparent; color: inherit; opacity: .7; box-shadow: none; }
.s4epp .s4epp__btn--secondary:hover { background: rgba(127, 127, 127, .1); color: inherit; opacity: 1; }
.s4epp .s4epp__foot { margin: 18px 0 0; font-size: 12px; line-height: 1.5; opacity: .55; }

/* Split layout */
.s4epp__card--split.has-media { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
.s4epp__card--split .s4epp__media { min-height: 100%; }
.s4epp__card--split .s4epp__content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 44px 42px; text-align: left; }
.s4epp__card--split .s4epp__sub { margin-left: 0; }
.s4epp__card--split .s4epp__badge { align-self: flex-start; }
.s4epp__card--split .s4epp__actions { justify-content: flex-start; }

/* Cover layout */
.s4epp__card--cover { color: #fff; background: #17142a; min-height: min(480px, 80vh); justify-content: flex-end; }
.s4epp__card--cover .s4epp__media { position: absolute; inset: 0; z-index: -2; }
.s4epp__card--cover .s4epp__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 8, 25, .05) 0%, rgba(10, 8, 25, .45) 45%, rgba(10, 8, 25, .9) 100%);
}
.s4epp__card--cover .s4epp__content { padding-top: 120px; }
.s4epp__card--cover .s4epp__badge { background: rgba(255, 255, 255, .16); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.s4epp__card--cover .s4epp__btn--secondary { color: #fff; }
.s4epp__card--cover .s4epp__fx { display: none; }
.s4epp__card--cover .s4epp__title { text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }

/* Custom layout */
.s4epp__card--custom { padding: 36px; }
.s4epp__card--custom .s4epp__text { opacity: 1; }
.s4epp__card--custom .s4epp__text ul { display: block; }

/* Auto-close timer */
.s4epp__timer {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 8px;
	z-index: 4;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--s4epp-accent), var(--s4epp-accent2));
	transform-origin: left center;
	opacity: .85;
	pointer-events: none;
}
.s4epp.is-open .s4epp__timer { animation: s4epp-timer linear var(--s4epp-auto, 10s) forwards; }
.s4epp__dialog:hover .s4epp__timer,
.s4epp.is-paused .s4epp__timer { animation-play-state: paused; }

/* ---------- Corner slide-ins ---------- */
.s4epp--inline { align-items: flex-end; }
.s4epp--pos-bottom-right { justify-content: flex-end; }
.s4epp--pos-bottom-left { justify-content: flex-start; }
.s4epp--pos-bottom-right .s4epp__dialog,
.s4epp--pos-bottom-left .s4epp__dialog { max-height: min(80vh, 640px); }
.s4epp--pos-bottom-right .s4epp__close,
.s4epp--pos-bottom-left .s4epp__close { top: 10px; right: 10px; width: 32px; height: 32px; }
.s4epp--pos-bottom-right .s4epp__content,
.s4epp--pos-bottom-left .s4epp__content { padding: 28px 26px 24px; }
.s4epp--pos-bottom-right .s4epp__title,
.s4epp--pos-bottom-left .s4epp__title { font-size: 22px; }
.s4epp--pos-bottom-right .s4epp__card--split.has-media,
.s4epp--pos-bottom-left .s4epp__card--split.has-media { display: flex; }
.s4epp--pos-bottom-right .s4epp__card--split .s4epp__media,
.s4epp--pos-bottom-left .s4epp__card--split .s4epp__media { height: 150px; min-height: 0; }

/* ---------- Bars ---------- */
.s4epp--pos-bottom-bar,
.s4epp--pos-top-bar { padding: 0; }
.s4epp--pos-top-bar { align-items: flex-start; }
.s4epp--pos-bottom-bar .s4epp__dialog,
.s4epp--pos-top-bar .s4epp__dialog { max-width: none; }
.s4epp--pos-bottom-bar .s4epp__card,
.s4epp--pos-bottom-bar .s4epp__image-link { border-radius: var(--s4epp-radius) var(--s4epp-radius) 0 0; }
.s4epp--pos-top-bar .s4epp__card,
.s4epp--pos-top-bar .s4epp__image-link { border-radius: 0 0 var(--s4epp-radius) var(--s4epp-radius); }
.s4epp--pos-bottom-bar .s4epp__image-link,
.s4epp--pos-top-bar .s4epp__image-link { width: 100%; }
.s4epp--pos-bottom-bar .s4epp__img,
.s4epp--pos-top-bar .s4epp__img { width: 100%; max-height: 220px; object-fit: cover; }
.s4epp--pos-bottom-bar .s4epp__close,
.s4epp--pos-top-bar .s4epp__close { top: 50%; right: 14px; width: 32px; height: 32px; margin-top: -16px; }
.s4epp--pos-bottom-bar .s4epp__card .s4epp__media,
.s4epp--pos-top-bar .s4epp__card .s4epp__media { display: none; }
.s4epp--pos-bottom-bar .s4epp__card--split.has-media,
.s4epp--pos-top-bar .s4epp__card--split.has-media { display: flex; }
.s4epp--pos-bottom-bar .s4epp__card--cover,
.s4epp--pos-top-bar .s4epp__card--cover { min-height: 0; background: linear-gradient(135deg, var(--s4epp-accent), var(--s4epp-accent2)); }
.s4epp--pos-bottom-bar .s4epp__content,
.s4epp--pos-top-bar .s4epp__content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 22px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 64px 16px 24px;
	text-align: left;
}
.s4epp--pos-bottom-bar .s4epp__badge,
.s4epp--pos-top-bar .s4epp__badge { margin: 0; }
.s4epp--pos-bottom-bar .s4epp__title,
.s4epp--pos-top-bar .s4epp__title { margin: 0; font-size: 19px; }
.s4epp--pos-bottom-bar .s4epp__sub,
.s4epp--pos-top-bar .s4epp__sub,
.s4epp--pos-bottom-bar .s4epp__text,
.s4epp--pos-top-bar .s4epp__text { margin: 0; font-size: 14.5px; }
.s4epp--pos-bottom-bar .s4epp__actions,
.s4epp--pos-top-bar .s4epp__actions { margin: 0; }
.s4epp--pos-bottom-bar .s4epp__btn,
.s4epp--pos-top-bar .s4epp__btn { min-height: 42px; padding: 10px 20px; font-size: 14px; }
.s4epp--pos-bottom-bar .s4epp__foot,
.s4epp--pos-top-bar .s4epp__foot { flex-basis: 100%; margin: 0; text-align: center; }
.s4epp--pos-bottom-bar.s4epp--anim-zoom .s4epp__dialog { transform: translateY(100%); }
.s4epp--pos-top-bar.s4epp--anim-zoom .s4epp__dialog,
.s4epp--pos-top-bar.s4epp--anim-slide-up .s4epp__dialog { transform: translateY(-100%); }

/* ---------- Full screen ---------- */
.s4epp--size-full { padding: 0; }
.s4epp--size-full .s4epp__dialog { max-width: none; height: 100%; max-height: none; }
.s4epp--size-full .s4epp__card { flex: 1; border-radius: 0; justify-content: center; }
.s4epp--size-full .s4epp__content { max-width: 760px; margin: 0 auto; }
.s4epp--size-full .s4epp__close { top: 18px; right: 18px; }
.s4epp--size-full .s4epp__image { height: 100%; align-items: center; }
.s4epp--size-full .s4epp__image-link { border-radius: 0; box-shadow: none; }

/* Scroll lock */
html.s4epp-lock, html.s4epp-lock body { overflow: hidden !important; }
html.s4epp-lock body { padding-right: var(--s4epp-scrollbar, 0) !important; }

/* Preview toast */
.s4epp-toast {
	position: fixed;
	left: 50%;
	bottom: 22px;
	z-index: 2147483600;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: 10px;
	background: #12101f;
	color: #fff;
	font: 600 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
	transform: translateX(-50%);
	word-break: break-all;
}

/* ---------- Keyframes ---------- */
@keyframes s4epp-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes s4epp-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes s4epp-pulse {
	0% { box-shadow: 0 0 0 0 currentColor; }
	70% { box-shadow: 0 0 0 7px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	.s4epp { --s4epp-gap: 16px; }
	.s4epp .s4epp__close { top: 10px; right: 10px; width: 34px; height: 34px; }
	.s4epp__content { padding: 30px 22px 24px; }
	.s4epp .s4epp__title { font-size: clamp(22px, 6.4vw, 28px); }
	.s4epp .s4epp__sub { font-size: 15.5px; }
	.s4epp .s4epp__actions { flex-direction: column; align-items: stretch; }
	.s4epp .s4epp__btn { width: 100%; }
	.s4epp__card--split.has-media { display: flex; }
	.s4epp__card--split .s4epp__media { height: 190px; min-height: 0; }
	.s4epp__card--split .s4epp__content { padding: 26px 22px 24px; align-items: stretch; }
	.s4epp__card--cover { min-height: min(440px, 78vh); }
	.s4epp__card--custom { padding: 28px 20px; }

	/* Corner popups become bottom sheets on phones */
	.s4epp--pos-bottom-right,
	.s4epp--pos-bottom-left { padding: 0; justify-content: center; }
	.s4epp--pos-bottom-right .s4epp__dialog,
	.s4epp--pos-bottom-left .s4epp__dialog { max-width: none; }
	.s4epp--pos-bottom-right .s4epp__card,
	.s4epp--pos-bottom-left .s4epp__card,
	.s4epp--pos-bottom-right .s4epp__image-link,
	.s4epp--pos-bottom-left .s4epp__image-link { border-radius: var(--s4epp-radius) var(--s4epp-radius) 0 0; }

	.s4epp--pos-bottom-bar .s4epp__content,
	.s4epp--pos-top-bar .s4epp__content { flex-direction: column; align-items: stretch; padding: 18px 52px 18px 18px; text-align: left; }
	.s4epp--pos-bottom-bar .s4epp__actions,
	.s4epp--pos-top-bar .s4epp__actions { flex-direction: row; }
	.s4epp--pos-bottom-bar .s4epp__btn,
	.s4epp--pos-top-bar .s4epp__btn { width: auto; flex: 1; }
	.s4epp--pos-bottom-bar .s4epp__close,
	.s4epp--pos-top-bar .s4epp__close { top: 12px; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.s4epp__dialog,
	.s4epp--anim-zoom .s4epp__dialog,
	.s4epp--anim-slide-up .s4epp__dialog,
	.s4epp--anim-slide-down .s4epp__dialog,
	.s4epp--anim-flip .s4epp__dialog { transform: none !important; transition: opacity .2s ease; }
	.s4epp__shine,
	.s4epp .s4epp__btn--primary::after,
	.s4epp .s4epp__badge::before { animation: none !important; }
}
