/**
 * Banner Designer — esalespage/banner.
 *
 * Mobile-first: base rules are the phone, 768px the tablet, 1024px the
 * computer. Sizes arrive as --bn-* custom properties from the block root;
 * everything private to this file is --_name.
 *
 * Transforms never share an element: hover zoom → .espt-bn-mz, Ken Burns /
 * parallax → .espt-bn-img, entrance → the text box's children and
 * .espt-bn-pw, product loop → a.espt-bn-p, badge loop → .espt-bn-badge-i,
 * lift / tilt → .espt-bn itself.
 *
 * Order matters in three places, all at the same specificity (0,3,0):
 * templates first, then the overlay-style classes (so a chosen overlay beats
 * the template's own), then hover effects.
 */

/* ------------------------------------------------------------------ root */

.espt-block-banner {
	margin-bottom: 24px;
}

.espt-block-banner.is-bleed-full {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.espt-block-banner .espt-bn {
	--_accent: var(--bn-accent, #fbbf24);
	--_ink: var(--bn-title-c, #fff);
	--_sub: var(--bn-sub-c, rgba(255, 255, 255, .9));
	--_eye-c: var(--bn-eye-c, #fff);
	--_eye-bg: var(--bn-eye-bg, rgba(255, 255, 255, .18));
	--_panel: var(--bn-panel-bg, #fff);
	--_ovc: color-mix(in srgb, var(--bn-ov-c, #000) var(--bn-ov-a, 55%), transparent);
	--_ovbg: var(--_ovc);
	--_px: var(--bn-pad, 20px);
	--_stg: .12s;
	--_r: var(--bn-r, 12px);
	--_bs: var(--bn-bds, 74px);
	--_bo: clamp(10px, calc(var(--bn-pad, 20px) * .6), 28px);

	background-color: var(--bn-bg, #0f172a);
	background-image: linear-gradient(135deg, var(--bn-ga, transparent), var(--bn-gb, transparent));
	border: var(--bn-bw, 0px) solid var(--bn-bc, var(--_accent));
	border-radius: var(--_r);
	color: var(--_ink);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	isolation: isolate;
	min-height: var(--bn-h, 320px);
	position: relative;
}

.espt-block-banner.is-bleed-full .espt-bn {
	--_r: 0px;
}

/* No picture: a gradient of its own rather than a flat slab, and no scrim
   dimming it — unless an overlay was chosen on purpose. */
.espt-block-banner .espt-bn.no-img:not(.bn-split),
.espt-block-banner .espt-bn.bn-nopic:not(.bn-split) { /* a video with no poster: this shows while it loads */
	background-image: linear-gradient(135deg, var(--bn-ga, #0f172a), var(--bn-gb, #1e3a8a));
}

.espt-block-banner.is-template-sale .espt-bn.no-img:not(.bn-split) { background-image: linear-gradient(135deg, var(--bn-ga, #dc2626), var(--bn-gb, #7f1d1d)); }
.espt-block-banner.is-template-neon .espt-bn.no-img:not(.bn-split) { background-image: linear-gradient(135deg, var(--bn-ga, #020617), var(--bn-gb, #0f172a)); }


/* A full-screen banner whose text lines up with the page's content column. */
.espt-block-banner.is-bleed-full.is-inner-boxed .espt-bn {
	--_px: max(var(--bn-pad, 20px), calc((100% - var(--espt-container, 1200px)) / 2 + var(--espt-container-pad, 16px)));
}

/* ------------------------------------------------------------ the picture */

.espt-block-banner .espt-bn-media {
	grid-area: 1 / 1 / 3 / 2;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

/* The border sits outside the media, so its corners are that much tighter. */
.espt-block-banner .espt-bn-media { border-radius: max(0px, calc(var(--_r) - var(--bn-bw, 0px))); }

.espt-block-banner .espt-bn-mz,
.espt-block-banner .espt-bn-mz picture {
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.espt-block-banner .espt-bn-mz {
	transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}

.espt-block-banner .espt-bn-img {
	display: block;
	height: 100%;
	inset: 0;
	max-width: none;
	object-fit: cover;
	object-position: var(--_focus, center);
	position: absolute;
	width: 100%;
}

.espt-block-banner.is-fit-contain .espt-bn-img { object-fit: contain; }
.espt-block-banner.is-flip .espt-bn-img,
.espt-block-banner.is-flip .espt-bn-vid { scale: -1 1; }

.espt-block-banner.is-focus-top { --_focus: center top; }
.espt-block-banner.is-focus-bottom { --_focus: center bottom; }
.espt-block-banner.is-focus-left { --_focus: left center; }
.espt-block-banner.is-focus-right { --_focus: right center; }
.espt-block-banner.is-focus-left-top { --_focus: left top; }
.espt-block-banner.is-focus-right-top { --_focus: right top; }
.espt-block-banner.is-focus-left-bottom { --_focus: left bottom; }
.espt-block-banner.is-focus-right-bottom { --_focus: right bottom; }

@media (max-width: 767px) {
	.espt-block-banner.is-focus-mobile-center { --_focus: center; }
	.espt-block-banner.is-focus-mobile-top { --_focus: center top; }
	.espt-block-banner.is-focus-mobile-bottom { --_focus: center bottom; }
	.espt-block-banner.is-focus-mobile-left { --_focus: left center; }
	.espt-block-banner.is-focus-mobile-right { --_focus: right center; }
	.espt-block-banner.is-focus-mobile-left-top { --_focus: left top; }
	.espt-block-banner.is-focus-mobile-right-top { --_focus: right top; }
	.espt-block-banner.is-focus-mobile-left-bottom { --_focus: left bottom; }
	.espt-block-banner.is-focus-mobile-right-bottom { --_focus: right bottom; }
}

.espt-block-banner.is-filter-gray .espt-bn-img,
.espt-block-banner.is-filter-gray .espt-bn-vid,
.espt-block-banner.is-filter-gray .espt-bn-yt { filter: grayscale(1); }
.espt-block-banner.is-filter-sepia .espt-bn-img,
.espt-block-banner.is-filter-sepia .espt-bn-vid,
.espt-block-banner.is-filter-sepia .espt-bn-yt { filter: sepia(.75); }
.espt-block-banner.is-filter-warm .espt-bn-img,
.espt-block-banner.is-filter-warm .espt-bn-vid,
.espt-block-banner.is-filter-warm .espt-bn-yt { filter: sepia(.28) saturate(1.35) hue-rotate(-8deg); }
.espt-block-banner.is-filter-cool .espt-bn-img,
.espt-block-banner.is-filter-cool .espt-bn-vid,
.espt-block-banner.is-filter-cool .espt-bn-yt { filter: saturate(1.1) hue-rotate(12deg) brightness(1.03); }
.espt-block-banner.is-filter-vivid .espt-bn-img,
.espt-block-banner.is-filter-vivid .espt-bn-vid,
.espt-block-banner.is-filter-vivid .espt-bn-yt { filter: saturate(1.55) contrast(1.08); }
.espt-block-banner.is-filter-fade .espt-bn-img,
.espt-block-banner.is-filter-fade .espt-bn-vid,
.espt-block-banner.is-filter-fade .espt-bn-yt { filter: saturate(.7) contrast(.88) brightness(1.08); }
.espt-block-banner.is-filter-blur .espt-bn-img,
.espt-block-banner.is-filter-blur .espt-bn-vid,
.espt-block-banner.is-filter-blur .espt-bn-yt { filter: blur(6px); }
.espt-block-banner.is-filter-blur .espt-bn-mz { scale: 1.06; } /* hides the blur's soft edge */
.espt-block-banner.is-filter-contrast .espt-bn-img,
.espt-block-banner.is-filter-contrast .espt-bn-vid,
.espt-block-banner.is-filter-contrast .espt-bn-yt { filter: contrast(1.35) saturate(1.1); }

/* ---- video: over the picture, faded in once it is really playing ---- */
.espt-block-banner .espt-bn-vid,
.espt-block-banner .espt-bn-yt {
	border: 0;
	display: block;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity .8s ease;
}

.espt-block-banner .espt-bn-vid {
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: var(--_focus, center);
	width: 100%;
}

.espt-block-banner.is-fit-contain .espt-bn-vid { object-fit: contain; }

/* An iframe has no object-fit: banner.js sizes it to cover (16:9) and it is
   centred here; until then it simply fills the box. */
.espt-block-banner .espt-bn-yt {
	height: var(--bn-yt-h, 100%);
	left: 50%;
	max-width: none;
	top: 50%;
	translate: -50% -50%;
	width: var(--bn-yt-w, 100%);
}

.espt-block-banner .espt-bn.is-playing .espt-bn-vid,
.espt-block-banner .espt-bn.is-playing .espt-bn-yt { opacity: 1; }

/* pause / sound */
.espt-block-banner .espt-bn-vc {
	display: flex;
	gap: 8px;
	grid-area: 1 / 1 / 3 / 2;
	margin: var(--_bo);
	position: relative;
	z-index: 4;
}

.espt-block-banner .espt-bn.bn-novid .espt-bn-vc { display: none; }
.espt-block-banner.is-video-btn-pos-tl .espt-bn-vc { align-self: start; justify-self: start; }
.espt-block-banner.is-video-btn-pos-tr .espt-bn-vc { align-self: start; justify-self: end; }
.espt-block-banner.is-video-btn-pos-bl .espt-bn-vc { align-self: end; justify-self: start; }
.espt-block-banner.is-video-btn-pos-br .espt-bn-vc { align-self: end; justify-self: end; }
.espt-block-banner .espt-bn.bn-split .espt-bn-vc { grid-area: 1 / 1 / 2 / 2; }
.espt-block-banner.is-template-bar .espt-bn-vc { grid-area: 1 / 1 / 3 / 2; }

@media (min-width: 768px) {
	.espt-block-banner:not(.is-template-below):not(.is-template-split-rev) .espt-bn.bn-split .espt-bn-vc { grid-area: 1 / 2 / 2 / 3; }
}

@media (max-width: 767px) {
	.espt-block-banner.is-prod-mobile-stack .espt-bn:not(.bn-split) .espt-bn-vc { grid-area: 1 / 1 / 2 / 2; }
}

.espt-block-banner .espt-bn-vb {
	-webkit-backdrop-filter: blur(8px);
	align-items: center;
	backdrop-filter: blur(8px);
	background: rgba(15, 23, 42, .5);
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	height: 36px;
	justify-content: center;
	line-height: 0;
	padding: 0;
	transition: background-color .25s ease, transform .25s ease;
	width: 36px;
}

.espt-block-banner .espt-bn-vb:hover { background: rgba(15, 23, 42, .78); transform: scale(1.08); }
.espt-block-banner .espt-bn-vb:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }
/* Each button carries both of its icons; the banner's state picks one. */
.espt-block-banner .espt-bn-vi-play,
.espt-block-banner .espt-bn-vi-sound,
.espt-block-banner .espt-bn.is-paused .espt-bn-vi-pause,
.espt-block-banner .espt-bn.is-unmuted .espt-bn-vi-muted { display: none; }
.espt-block-banner .espt-bn.is-paused .espt-bn-vi-play,
.espt-block-banner .espt-bn.is-unmuted .espt-bn-vi-sound { display: inline; }

/* overlay + the hover frame */
.espt-block-banner .espt-bn-ov {
	background: var(--_ovbg);
	inset: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity .5s ease, background-color .5s ease;
}

.espt-block-banner .espt-bn-fr {
	display: none;
	inset: 14px;
	pointer-events: none;
	position: absolute;
}

/* ------------------------------------------------------------- height */

.espt-block-banner.is-height-mode-screen .espt-bn {
	min-height: calc(var(--bn-vh, 100) * 1vh);
	min-height: calc(var(--bn-vh, 100) * 1svh);
}

.espt-block-banner.is-height-mode-ratio .espt-bn {
	aspect-ratio: var(--_ratio, 21 / 9);
	min-height: 0;
}

.espt-block-banner.is-ratio-21-9 { --_ratio: 21 / 9; }
.espt-block-banner.is-ratio-16-9 { --_ratio: 16 / 9; }
.espt-block-banner.is-ratio-3-1 { --_ratio: 3 / 1; }
.espt-block-banner.is-ratio-2-1 { --_ratio: 2 / 1; }
.espt-block-banner.is-ratio-3-2 { --_ratio: 3 / 2; }
.espt-block-banner.is-ratio-4-3 { --_ratio: 4 / 3; }
.espt-block-banner.is-ratio-1-1 { --_ratio: 1 / 1; }
.espt-block-banner.is-ratio-4-5 { --_ratio: 4 / 5; }
.espt-block-banner.is-ratio-3-4 { --_ratio: 3 / 4; }
.espt-block-banner.is-ratio-9-16 { --_ratio: 9 / 16; }

@media (max-width: 767px) {
	.espt-block-banner.is-ratio-mobile-21-9 { --_ratio: 21 / 9; }
	.espt-block-banner.is-ratio-mobile-16-9 { --_ratio: 16 / 9; }
	.espt-block-banner.is-ratio-mobile-3-1 { --_ratio: 3 / 1; }
	.espt-block-banner.is-ratio-mobile-2-1 { --_ratio: 2 / 1; }
	.espt-block-banner.is-ratio-mobile-3-2 { --_ratio: 3 / 2; }
	.espt-block-banner.is-ratio-mobile-4-3 { --_ratio: 4 / 3; }
	.espt-block-banner.is-ratio-mobile-1-1 { --_ratio: 1 / 1; }
	.espt-block-banner.is-ratio-mobile-4-5 { --_ratio: 4 / 5; }
	.espt-block-banner.is-ratio-mobile-3-4 { --_ratio: 3 / 4; }
	.espt-block-banner.is-ratio-mobile-9-16 { --_ratio: 9 / 16; }
}

/* The picture's own height: it goes back into the flow and sizes the banner.
   Without a picture there is nothing to measure, so the minimum height stays. */
.espt-block-banner.is-height-mode-image .espt-bn:not(.no-img):not(.bn-split) { min-height: 0; }

.espt-block-banner.is-height-mode-image .espt-bn.has-video:not(.no-img):not(.bn-split):not(:has(.espt-bn-img)) { min-height: var(--bn-h, 320px); }

.espt-block-banner.is-height-mode-image .espt-bn:not(.bn-split) .espt-bn-mz,
.espt-block-banner.is-height-mode-image .espt-bn:not(.bn-split) .espt-bn-mz picture {
	height: auto;
	position: relative;
}

.espt-block-banner.is-height-mode-image .espt-bn:not(.bn-split) .espt-bn-img {
	height: auto;
	position: relative;
}

/* ----------------------------------------------------- whole-banner link */

.espt-block-banner .espt-bn-link {
	border-radius: inherit;
	grid-area: 1 / 1 / 3 / 2;
	z-index: 1;
}

.espt-block-banner .espt-bn-link:focus-visible {
	outline: 3px solid var(--_accent);
	outline-offset: -3px;
}

/* The text must not swallow the click meant for the link under it. */
.espt-block-banner .espt-bn.has-link .espt-bn-in,
.espt-block-banner .espt-bn.has-link .espt-bn-c { pointer-events: none; }
.espt-block-banner .espt-bn.has-link .espt-bn-c a { pointer-events: auto; }

/* --------------------------------------------------------- the text box */

.espt-block-banner .espt-bn-in {
	align-items: var(--_ai, center);
	display: flex;
	grid-area: 1 / 1 / 3 / 2;
	justify-content: var(--_jc, flex-start);
	min-width: 0;
	padding: var(--bn-pad, 20px) var(--_px);
	position: relative;
	z-index: 2;
}

.espt-block-banner .espt-bn-c {
	align-items: var(--_ta-ai, flex-start);
	display: flex;
	flex-direction: column;
	gap: var(--bn-gap, 14px);
	max-width: min(100%, var(--bn-cw, 600px));
	min-width: 0;
	text-align: var(--_ta, left);
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
	width: 100%;
}

.espt-block-banner.is-pos-tl { --_ai: flex-start; --_jc: flex-start; }
.espt-block-banner.is-pos-tc { --_ai: flex-start; --_jc: center; }
.espt-block-banner.is-pos-tr { --_ai: flex-start; --_jc: flex-end; }
.espt-block-banner.is-pos-ml { --_ai: center; --_jc: flex-start; }
.espt-block-banner.is-pos-mc { --_ai: center; --_jc: center; }
.espt-block-banner.is-pos-mr { --_ai: center; --_jc: flex-end; }
.espt-block-banner.is-pos-bl { --_ai: flex-end; --_jc: flex-start; }
.espt-block-banner.is-pos-bc { --_ai: flex-end; --_jc: center; }
.espt-block-banner.is-pos-br { --_ai: flex-end; --_jc: flex-end; }

.espt-block-banner.is-text-align-left { --_ta: left; --_ta-ai: flex-start; }
.espt-block-banner.is-text-align-center { --_ta: center; --_ta-ai: center; }
.espt-block-banner.is-text-align-right { --_ta: right; --_ta-ai: flex-end; }

@media (max-width: 767px) {
	.espt-block-banner.is-pos-mobile-tl { --_ai: flex-start; --_jc: flex-start; }
	.espt-block-banner.is-pos-mobile-tc { --_ai: flex-start; --_jc: center; }
	.espt-block-banner.is-pos-mobile-tr { --_ai: flex-start; --_jc: flex-end; }
	.espt-block-banner.is-pos-mobile-ml { --_ai: center; --_jc: flex-start; }
	.espt-block-banner.is-pos-mobile-mc { --_ai: center; --_jc: center; }
	.espt-block-banner.is-pos-mobile-mr { --_ai: center; --_jc: flex-end; }
	.espt-block-banner.is-pos-mobile-bl { --_ai: flex-end; --_jc: flex-start; }
	.espt-block-banner.is-pos-mobile-bc { --_ai: flex-end; --_jc: center; }
	.espt-block-banner.is-pos-mobile-br { --_ai: flex-end; --_jc: flex-end; }

	.espt-block-banner.is-text-align-mobile-left { --_ta: left; --_ta-ai: flex-start; }
	.espt-block-banner.is-text-align-mobile-center { --_ta: center; --_ta-ai: center; }
	.espt-block-banner.is-text-align-mobile-right { --_ta: right; --_ta-ai: flex-end; }
}

/* eyebrow */
.espt-block-banner .espt-bn-eye {
	align-items: center;
	color: var(--_eye-c);
	display: inline-flex;
	font-size: var(--bn-es, 12px);
	font-weight: 700;
	gap: .45em;
	letter-spacing: .04em;
	line-height: 1.3;
	max-width: 100%;
}

.espt-block-banner .espt-bn-eye-ic { display: inline-flex; flex: none; line-height: 0; }
.espt-block-banner .espt-bn-eye-ic svg { height: 1.15em; width: 1.15em; }

.espt-block-banner.is-eyebrow-style-pill .espt-bn-eye {
	background: var(--_eye-bg);
	border-radius: 999px;
	padding: .45em 1em;
}

.espt-block-banner.is-eyebrow-style-solid .espt-bn-eye {
	background: var(--bn-eye-bg, var(--_accent));
	border-radius: 6px;
	color: var(--bn-eye-c, #111827);
	padding: .42em .85em;
}

.espt-block-banner.is-eyebrow-style-outline .espt-bn-eye {
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: .4em 1em;
}

.espt-block-banner.is-eyebrow-style-line .espt-bn-eye::before {
	background: var(--_accent);
	content: "";
	flex: none;
	height: 2px;
	width: 2.2em;
}

.espt-block-banner.is-eyebrow-style-underline .espt-bn-eye {
	border-bottom: 2px solid var(--_accent);
	padding-bottom: .3em;
}

.espt-block-banner.is-eyebrow-style-glass .espt-bn-eye {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: var(--bn-eye-bg, rgba(255, 255, 255, .16));
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: .42em 1em;
}

/* title */
.espt-block-banner .espt-bn-t {
	color: var(--_ink);
	font-size: var(--bn-ts, 27px);
	font-weight: var(--bn-tw, 800);
	letter-spacing: var(--bn-tls, 0);
	line-height: var(--bn-tlh, 1.2);
	margin: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 0;
	text-wrap: balance;
}

.espt-block-banner .espt-bn-t strong { color: var(--_accent); font-weight: inherit; }
.espt-block-banner .espt-bn-t u { text-decoration-color: var(--_accent); text-decoration-thickness: .08em; text-underline-offset: .16em; }
.espt-block-banner.is-upper .espt-bn-t { text-transform: uppercase; }

.espt-block-banner.is-title-fx-gradient .espt-bn-t-i {
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(100deg, var(--bn-ga, #fde68a), var(--bn-gb, #f472b6));
	color: transparent;
}

.espt-block-banner.is-title-fx-gradient .espt-bn-t strong { color: inherit; }

.espt-block-banner.is-title-fx-outline .espt-bn-t {
	-webkit-text-stroke: .035em var(--_ink);
	color: transparent;
}

.espt-block-banner.is-title-fx-outline .espt-bn-t strong { -webkit-text-stroke: 0; color: var(--_accent); }
.espt-block-banner.is-title-fx-shadow .espt-bn-t { text-shadow: 0 .06em .5em rgba(0, 0, 0, .55); }
.espt-block-banner.is-title-fx-hard .espt-bn-t { text-shadow: .06em .06em 0 color-mix(in srgb, var(--_accent) 85%, #000); }
.espt-block-banner.is-title-fx-glow .espt-bn-t { text-shadow: 0 0 .25em var(--_accent), 0 0 .7em color-mix(in srgb, var(--_accent) 60%, transparent); }

.espt-block-banner.is-title-fx-marker .espt-bn-t strong {
	background: linear-gradient(transparent 58%, color-mix(in srgb, var(--_accent) 75%, transparent) 58%);
	color: inherit;
	padding: 0 .12em;
}

.espt-block-banner.is-title-fx-box .espt-bn-t-i {
	-webkit-box-decoration-break: clone;
	background: var(--_accent);
	box-decoration-break: clone;
	color: var(--bn-title-c, #111827);
	line-height: 1.5;
	padding: .08em .35em;
}

.espt-block-banner.is-title-fx-box .espt-bn-t strong { color: inherit; }

/* text */
.espt-block-banner .espt-bn-s {
	color: var(--_sub);
	font-size: var(--bn-ss, 14px);
	line-height: 1.6;
	margin: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- buttons */

.espt-block-banner .espt-bn-btns {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	justify-content: var(--_ta-ai, flex-start);
	margin-top: 4px;
	max-width: 100%;
}

.espt-block-banner .espt-bn-b {
	--_br: var(--espt-btn-radius, 10px);
	--_c: var(--_uc, var(--espt-btn-bg, var(--bd-primary, #16a34a)));
	--_i: var(--_ui, var(--espt-btn-text, #fff));
	--_ch: var(--_uch, var(--espt-btn-bg-h, color-mix(in srgb, var(--_c) 84%, #000)));
	--_ih: var(--_uih, var(--_i));

	align-items: center;
	background: var(--_c);
	border: 2px solid transparent;
	border-radius: var(--_br);
	color: var(--_i);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--bn-bs, 14px);
	font-weight: 700;
	gap: .55em;
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	overflow: hidden;
	padding: .8em 1.5em;
	position: relative;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.espt-block-banner .espt-bn-b1 { --_uc: var(--bn-btn-bg); --_ui: var(--bn-btn-ink); --_uch: var(--bn-btn-bg-h); --_uih: var(--bn-btn-ink-h); }
.espt-block-banner .espt-bn-b2 { --_uc: var(--bn-btn2-bg); --_ui: var(--bn-btn2-ink); }

.espt-block-banner .espt-bn-b:hover,
.espt-block-banner .espt-bn-b:focus-visible {
	background: var(--_ch);
	color: var(--_ih);
	transform: translateY(-2px);
}

.espt-block-banner .espt-bn-b:focus-visible { outline: 3px solid color-mix(in srgb, var(--_c) 55%, #fff); outline-offset: 2px; }
.espt-block-banner .espt-bn-b-t { min-width: 0; overflow-wrap: anywhere; }
.espt-block-banner .espt-bn-b-ic { display: inline-flex; flex: none; line-height: 0; transition: transform .25s ease; }
.espt-block-banner .espt-bn-b-ic svg { height: 1.1em; width: 1.1em; }
.espt-block-banner .espt-bn-b:hover .espt-bn-b-ic { transform: translateX(4px); }
.espt-block-banner .espt-bn-b-sh { display: none; }

.espt-block-banner.is-btn-shape-rounded .espt-bn-b { --_br: 12px; }
.espt-block-banner.is-btn-shape-pill .espt-bn-b { --_br: 999px; }
.espt-block-banner.is-btn-shape-square .espt-bn-b { --_br: 0px; }

.espt-block-banner .bnb-white { --_c: var(--_uc, #fff); --_i: var(--_ui, #0f172a); --_ch: var(--_uch, #f1f5f9); }
.espt-block-banner .bnb-dark { --_c: var(--_uc, #0b0f19); --_i: var(--_ui, #fff); --_ch: var(--_uch, #1e293b); }

.espt-block-banner .bnb-gradient {
	background: linear-gradient(100deg, var(--_uc, var(--bn-ga, #f59e0b)), var(--bn-gb, #ef4444));
	background-size: 160% 100%;
	border: 0;
	padding: calc(.8em + 2px) calc(1.5em + 2px);
	transition: background-position .5s ease, transform .25s ease, box-shadow .25s ease;
}

.espt-block-banner .bnb-gradient:hover,
.espt-block-banner .bnb-gradient:focus-visible {
	background: linear-gradient(100deg, var(--_uc, var(--bn-ga, #f59e0b)), var(--bn-gb, #ef4444));
	background-position: 100% 0;
	background-size: 160% 100%;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.espt-block-banner .bnb-soft {
	background: color-mix(in srgb, var(--_c) 18%, #fff);
	color: var(--_ui, color-mix(in srgb, var(--_c) 80%, #000));
}

.espt-block-banner .bnb-outline,
.espt-block-banner .bnb-outline-white {
	background: transparent;
	border-color: var(--_c);
	color: var(--_ui, var(--_c));
}

.espt-block-banner .bnb-outline-white { --_c: var(--_uc, #fff); --_i: #0f172a; }

.espt-block-banner .bnb-outline:hover,
.espt-block-banner .bnb-outline:focus-visible,
.espt-block-banner .bnb-outline-white:hover,
.espt-block-banner .bnb-outline-white:focus-visible {
	background: var(--_c);
	color: var(--_uih, var(--_i));
}

.espt-block-banner .bnb-glass {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	background: color-mix(in srgb, var(--_uc, #fff) 18%, transparent);
	border-color: rgba(255, 255, 255, .45);
	color: var(--_ui, #fff);
}

.espt-block-banner .bnb-glass:hover,
.espt-block-banner .bnb-glass:focus-visible {
	background: color-mix(in srgb, var(--_uc, #fff) 32%, transparent);
	color: var(--_ui, #fff);
}

.espt-block-banner .bnb-underline,
.espt-block-banner .bnb-arrow {
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--_ui, var(--_uc, currentColor));
	overflow: visible;
	padding: .3em 0;
}

.espt-block-banner .bnb-underline::after {
	background: currentColor;
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform-origin: left;
	transition: transform .35s ease;
	width: 100%;
}

.espt-block-banner .bnb-underline:hover,
.espt-block-banner .bnb-underline:focus-visible,
.espt-block-banner .bnb-arrow:hover,
.espt-block-banner .bnb-arrow:focus-visible {
	background: none;
	color: var(--_ui, var(--_uc, currentColor));
	transform: none;
}

.espt-block-banner .bnb-underline:hover::after { transform: scaleX(.4); }

.espt-block-banner .bnb-arrow .espt-bn-b-ic {
	background: var(--_uc, var(--_accent));
	border-radius: 50%;
	color: var(--bn-btn-ink, #111827);
	padding: .55em;
}

@media (max-width: 767px) {
	.espt-block-banner.is-btn-full-mobile .espt-bn-btns { align-items: stretch; flex-direction: column; width: 100%; }
	.espt-block-banner.is-btn-full-mobile .espt-bn-b:not(.bnb-underline):not(.bnb-arrow) { width: 100%; }
}

/* button 1 animation */
.espt-block-banner.is-btn-anim-pulse .espt-bn-b1 { animation: espt-bn-b-pulse 2s infinite; }
.espt-block-banner.is-btn-anim-bounce .espt-bn-b1 { animation: espt-bn-b-bounce 2.2s infinite; }
.espt-block-banner.is-btn-anim-glow .espt-bn-b1 { animation: espt-bn-b-glow 2.2s ease-in-out infinite; }
.espt-block-banner.is-btn-anim-nudge .espt-bn-b1 .espt-bn-b-ic { animation: espt-bn-b-nudge 1.3s ease-in-out infinite; }

.espt-block-banner.is-btn-anim-shine .espt-bn-b1 .espt-bn-b-sh {
	animation: espt-bn-b-shine 3s ease-in-out infinite;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
	display: block;
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(-120%);
}

@keyframes espt-bn-b-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_c) 65%, transparent); }
	70%, 100% { box-shadow: 0 0 0 16px transparent; }
}

@keyframes espt-bn-b-bounce {
	0%, 60%, 100% { translate: 0 0; }
	70% { translate: 0 -7px; }
	80% { translate: 0 0; }
	88% { translate: 0 -3px; }
}

@keyframes espt-bn-b-glow {
	0%, 100% { box-shadow: 0 0 0 0 transparent; }
	50% { box-shadow: 0 0 26px 2px color-mix(in srgb, var(--_c) 70%, transparent); }
}

@keyframes espt-bn-b-nudge {
	0%, 100% { translate: 0 0; }
	50% { translate: 5px 0; }
}

@keyframes espt-bn-b-shine {
	0%, 55% { transform: translateX(-120%); }
	100% { transform: translateX(120%); }
}

/* --------------------------------------------------------------- shadow */

.espt-block-banner.is-shadow-soft .espt-bn { box-shadow: 0 14px 38px -12px rgba(15, 23, 42, .28); }
.espt-block-banner.is-shadow-strong .espt-bn { box-shadow: 0 28px 60px -18px rgba(15, 23, 42, .5); }
.espt-block-banner.is-shadow-glow .espt-bn { box-shadow: 0 18px 50px -14px color-mix(in srgb, var(--_accent) 70%, transparent); }
.espt-block-banner.is-shadow-hard .espt-bn { box-shadow: 8px 8px 0 var(--bn-bc, #0b0f19); }

/* ============================================================ TEMPLATES */

/* 01 overlay — the base look. */

/* 02 side fade */
.espt-block-banner.is-template-scrim-left .espt-bn {
	--_ovbg: linear-gradient(90deg, var(--_ovc) 0%, color-mix(in srgb, var(--_ovc) 70%, transparent) 38%, transparent 78%);
}

.espt-block-banner.is-template-scrim-left.is-pos-tr .espt-bn,
.espt-block-banner.is-template-scrim-left.is-pos-mr .espt-bn,
.espt-block-banner.is-template-scrim-left.is-pos-br .espt-bn {
	--_ovbg: linear-gradient(270deg, var(--_ovc) 0%, color-mix(in srgb, var(--_ovc) 70%, transparent) 38%, transparent 78%);
}

/* On a phone the text covers most of the width, so the fade has to as well. */
@media (max-width: 767px) {
	.espt-block-banner.is-template-scrim-left .espt-bn {
		--_ovbg: linear-gradient(90deg, var(--_ovc) 0%, color-mix(in srgb, var(--_ovc) 75%, transparent) 70%, color-mix(in srgb, var(--_ovc) 45%, transparent) 100%);
	}
}

/* 03 bottom fade */
.espt-block-banner.is-template-scrim-bottom .espt-bn {
	--_ovbg: linear-gradient(0deg, var(--_ovc) 0%, color-mix(in srgb, var(--_ovc) 60%, transparent) 40%, transparent 75%);
}

/* 04 vignette */
.espt-block-banner.is-template-spotlight .espt-bn {
	--_ovbg: radial-gradient(ellipse at center, color-mix(in srgb, var(--_ovc) 35%, transparent) 0%, var(--_ovc) 100%);
}

/* 05 glass, 06 card, 07 brutalist, 19 ticket: the text sits on a panel */
.espt-block-banner.is-template-glass .espt-bn-c,
.espt-block-banner.is-template-card .espt-bn-c,
.espt-block-banner.is-template-brutal .espt-bn-c,
.espt-block-banner.is-template-ticket .espt-bn-c {
	border-radius: var(--bn-pr, 18px);
	padding: var(--bn-pp, 20px);
}

.espt-block-banner.is-template-glass .espt-bn { --_ovbg: color-mix(in srgb, var(--_ovc) 35%, transparent); }

.espt-block-banner.is-template-glass .espt-bn-c {
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	background: var(--bn-panel-bg, rgba(255, 255, 255, .14));
	border: 1px solid rgba(255, 255, 255, .34);
	box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .55);
}

.espt-block-banner.is-template-card .espt-bn,
.espt-block-banner.is-template-brutal .espt-bn,
.espt-block-banner.is-template-ticket .espt-bn {
	--_accent: var(--bn-accent, var(--bd-primary, #16a34a));
	--_ink: var(--bn-title-c, #0f172a);
	--_sub: var(--bn-sub-c, #475569);
	--_eye-c: var(--bn-eye-c, #0f172a);
	--_eye-bg: var(--bn-eye-bg, #f1f5f9);
	--_ovbg: color-mix(in srgb, var(--_ovc) 25%, transparent);
}

/* A white button on a white panel would vanish: there it turns dark. */
.espt-block-banner.is-template-card .bnb-white,
.espt-block-banner.is-template-brutal .bnb-white,
.espt-block-banner.is-template-ticket .bnb-white { --_c: var(--_uc, #0f172a); --_i: var(--_ui, #fff); --_ch: var(--_uch, #1e293b); }

.espt-block-banner.is-template-card .bnb-outline-white,
.espt-block-banner.is-template-brutal .bnb-outline-white,
.espt-block-banner.is-template-ticket .bnb-outline-white { --_c: var(--_uc, #0f172a); --_i: #fff; }

.espt-block-banner.is-template-card .espt-bn-c {
	background: var(--_panel);
	box-shadow: 0 24px 60px -22px rgba(15, 23, 42, .45);
}

.espt-block-banner.is-template-brutal .espt-bn { --_r: 0px; }

.espt-block-banner.is-template-brutal .espt-bn-c {
	background: var(--_panel);
	border: 3px solid #0b0f19;
	border-radius: 0;
	box-shadow: 8px 8px 0 #0b0f19;
}

.espt-block-banner.is-template-brutal .espt-bn-b { border-radius: 0; box-shadow: 4px 4px 0 #0b0f19; }
.espt-block-banner.is-template-brutal .espt-bn-b:hover { box-shadow: 1px 1px 0 #0b0f19; transform: translate(3px, 3px); }

/* 19 coupon ticket: notches in the sides, a dashed tear line */
.espt-block-banner.is-template-ticket .espt-bn-c {
	-webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
	background: var(--_panel);
	mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
	outline: 2px dashed color-mix(in srgb, var(--_accent) 60%, transparent);
	outline-offset: -10px;
}

/* 08 inset frame */
.espt-block-banner.is-template-frame .espt-bn-fr {
	border: 1.5px solid rgba(255, 255, 255, .78);
	border-radius: max(0px, calc(var(--_r) - 10px));
	display: block;
}

.espt-block-banner.is-template-frame .espt-bn-in { padding: calc(var(--bn-pad, 20px) + 16px) calc(var(--_px) + 16px); }

/* 09–12 split family. Phone: the picture on top, the text under it. */
.espt-block-banner .espt-bn.bn-split {
	--_accent: var(--bn-accent, var(--bd-primary, #16a34a));
	--_ink: var(--bn-title-c, #0f172a);
	--_sub: var(--bn-sub-c, #475569);
	--_eye-c: var(--bn-eye-c, #0f172a);
	--_eye-bg: var(--bn-eye-bg, color-mix(in srgb, var(--_accent) 14%, #fff));
	--_ovbg: transparent;

	aspect-ratio: auto;
	background-color: var(--bn-bg, #f8fafc);
	grid-template-rows: auto auto auto;
	min-height: 0;
	overflow: hidden;
}

.espt-block-banner .espt-bn.bn-split .espt-bn-media {
	aspect-ratio: var(--_ratio-m, 4 / 3);
	border-radius: 0;
	grid-area: 1 / 1 / 2 / 2;
}

.espt-block-banner .espt-bn.bn-split.no-img .espt-bn-media { display: none; }
.espt-block-banner .espt-bn.bn-split .espt-bn-in { grid-area: 2 / 1 / 3 / 2; }
.espt-block-banner .espt-bn.bn-split .espt-bn-link { grid-area: 1 / 1 / 4 / 2; }
.espt-block-banner .espt-bn.bn-split .bnb-outline-white { --_c: var(--_uc, #0f172a); --_i: #fff; }
.espt-block-banner .espt-bn.bn-split .bnb-white { --_c: var(--_uc, #0f172a); --_i: var(--_ui, #fff); --_ch: var(--_uch, #1e293b); }

.espt-block-banner.is-height-mode-image .espt-bn.bn-split .espt-bn-media { aspect-ratio: auto; }
.espt-block-banner.is-height-mode-image .espt-bn.bn-split .espt-bn-mz,
.espt-block-banner.is-height-mode-image .espt-bn.bn-split .espt-bn-mz picture,
.espt-block-banner.is-height-mode-image .espt-bn.bn-split .espt-bn-img { height: auto; position: relative; }

@media (min-width: 768px) {
	.espt-block-banner:not(.is-template-below) .espt-bn.bn-split {
		grid-template-columns: minmax(0, calc(100% - var(--bn-split, 50%))) minmax(0, var(--bn-split, 50%));
		grid-template-rows: minmax(0, 1fr);
		min-height: var(--bn-h, 380px);
	}

	.espt-block-banner.is-height-mode-ratio:not(.is-template-below) .espt-bn.bn-split { aspect-ratio: var(--_ratio); min-height: 0; }

	.espt-block-banner.is-height-mode-screen:not(.is-template-below) .espt-bn.bn-split {
		min-height: calc(var(--bn-vh, 100) * 1vh);
		min-height: calc(var(--bn-vh, 100) * 1svh);
	}

	.espt-block-banner:not(.is-template-below) .espt-bn.bn-split .espt-bn-media { aspect-ratio: auto; grid-area: 1 / 2 / 2 / 3; }
	.espt-block-banner:not(.is-template-below) .espt-bn.bn-split .espt-bn-in { grid-area: 1 / 1 / 2 / 2; }
	.espt-block-banner:not(.is-template-below) .espt-bn.bn-split .espt-bn-link { grid-area: 1 / 1 / 2 / 3; }

	.espt-block-banner.is-template-split-rev .espt-bn.bn-split {
		grid-template-columns: minmax(0, var(--bn-split, 50%)) minmax(0, calc(100% - var(--bn-split, 50%)));
	}

	.espt-block-banner.is-template-split-rev .espt-bn.bn-split .espt-bn-media { grid-area: 1 / 1 / 2 / 2; }
	.espt-block-banner.is-template-split-rev .espt-bn.bn-split .espt-bn-in { grid-area: 1 / 2 / 2 / 3; }

	/* 11 diagonal: the picture runs under the panel and is cut on a slant. */
	.espt-block-banner.is-template-diagonal .espt-bn.bn-split .espt-bn-media {
		clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
		margin-left: -9%;
	}

	/* In a column, "left / centre / right" is where the box sits in its half. */
	.espt-block-banner .espt-bn.bn-split .espt-bn-in { padding: var(--bn-pad, 36px); }
}

/* 12 text under the image: always stacked. */
.espt-block-banner.is-template-below .espt-bn.bn-split { background-color: var(--bn-bg, transparent); overflow: visible; }
.espt-block-banner.is-template-below .espt-bn.bn-split .espt-bn-media { border-radius: var(--_r); }
.espt-block-banner.is-template-below .espt-bn.bn-split .espt-bn-in { padding-left: 0; padding-right: 0; }
.espt-block-banner.is-template-below.is-bleed-full .espt-bn.bn-split .espt-bn-in { padding-left: var(--_px); padding-right: var(--_px); }

@media (min-width: 768px) {
	.espt-block-banner.is-template-below .espt-bn.bn-split .espt-bn-media { aspect-ratio: var(--_ratio, 21 / 9); }
}

/* 13 slim strip: text and button on one line from the tablet up. */
.espt-block-banner.is-template-strip .espt-bn { min-height: 0; }
.espt-block-banner.is-template-strip .espt-bn-c { max-width: 100%; }
.espt-block-banner.is-template-strip .espt-bn-in { padding-bottom: calc(var(--bn-pad, 20px) * .7); padding-top: calc(var(--bn-pad, 20px) * .7); }

@media (min-width: 768px) {
	.espt-block-banner.is-template-strip .espt-bn-c {
		align-items: center;
		column-gap: 28px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		text-align: left;
	}

	.espt-block-banner.is-template-strip .espt-bn-eye,
	.espt-block-banner.is-template-strip .espt-bn-t,
	.espt-block-banner.is-template-strip .espt-bn-s { grid-column: 1; justify-self: start; }

	.espt-block-banner.is-template-strip .espt-bn-btns {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin-top: 0;
	}

	.espt-block-banner.is-template-strip .espt-bn-inl { grid-column: 1 / -1; }
}

/* 14 bar along the bottom */
.espt-block-banner.is-template-bar .espt-bn { --_ovbg: transparent; }

/* The bar owns the last row, so chips and the badge always stay above it. */
.espt-block-banner.is-template-bar .espt-bn { grid-template-rows: 1fr auto auto; }
.espt-block-banner.is-template-bar .espt-bn-media,
.espt-block-banner.is-template-bar .espt-bn-link { grid-area: 1 / 1 / 4 / 2; }
.espt-block-banner.is-template-bar .espt-bn-ps:not(.is-inline),
.espt-block-banner.is-template-bar .espt-bn-badge { grid-area: 1 / 1 / 3 / 2; }

.espt-block-banner.is-template-bar .espt-bn-in {
	align-items: flex-end;
	grid-area: 3 / 1 / 4 / 2;
	padding: 0;
}

.espt-block-banner.is-template-bar .espt-bn-c {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: var(--bn-panel-bg, color-mix(in srgb, var(--bn-ov-c, #0b0f19) 78%, transparent));
	border-radius: 0 0 max(0px, calc(var(--_r) - var(--bn-bw, 0px))) max(0px, calc(var(--_r) - var(--bn-bw, 0px)));
	max-width: none;
	padding: calc(var(--bn-pad, 20px) * .8) var(--_px);
}

@media (min-width: 768px) {
	.espt-block-banner.is-template-bar .espt-bn-c {
		align-items: center;
		column-gap: 28px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.espt-block-banner.is-template-bar .espt-bn-eye,
	.espt-block-banner.is-template-bar .espt-bn-t,
	.espt-block-banner.is-template-bar .espt-bn-s { grid-column: 1; }
	.espt-block-banner.is-template-bar .espt-bn-eye { justify-self: start; }
	.espt-block-banner.is-template-bar .espt-bn-btns { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
	.espt-block-banner.is-template-bar .espt-bn-inl { grid-column: 1 / -1; }
}

/* 15 duotone: the picture in two inks. Multiply treats white as "no ink",
   so the strength control fades each colour toward white. */
.espt-block-banner.is-template-duotone .espt-bn {
	--_ovbg: linear-gradient(135deg, color-mix(in srgb, var(--bn-ga, #4f46e5) max(40%, var(--bn-ov-a, 55%)), #fff), color-mix(in srgb, var(--bn-gb, #ec4899) max(40%, var(--bn-ov-a, 55%)), #fff));
}

.espt-block-banner.is-template-duotone .espt-bn-img,
.espt-block-banner.is-template-duotone .espt-bn-vid,
.espt-block-banner.is-template-duotone .espt-bn-yt { filter: grayscale(1) contrast(1.15); }
.espt-block-banner.is-template-duotone .espt-bn-ov { mix-blend-mode: multiply; }

/* 16 neon */
.espt-block-banner.is-template-neon .espt-bn {
	--_accent: var(--bn-accent, #22d3ee);
	--_ovbg: linear-gradient(180deg, color-mix(in srgb, #020617 80%, transparent), color-mix(in srgb, #020617 94%, transparent));
	background-color: var(--bn-bg, #020617);
}

.espt-block-banner.is-template-neon .espt-bn-t { text-shadow: 0 0 .2em var(--_accent), 0 0 .6em color-mix(in srgb, var(--_accent) 65%, transparent); }

.espt-block-banner.is-template-neon .espt-bn-fr {
	border: 2px solid var(--_accent);
	border-radius: max(0px, calc(var(--_r) - 10px));
	box-shadow: 0 0 14px var(--_accent), inset 0 0 14px color-mix(in srgb, var(--_accent) 55%, transparent);
	display: block;
}

.espt-block-banner.is-template-neon .espt-bn-in { padding: calc(var(--bn-pad, 20px) + 16px) calc(var(--_px) + 16px); }
.espt-block-banner.is-template-neon .bnb-solid { --_c: var(--_uc, var(--_accent)); --_i: var(--_ui, #020617); box-shadow: 0 0 18px color-mix(in srgb, var(--_c) 70%, transparent); }

/* 17 magazine cover: a giant title, the small line on its side */
.espt-block-banner.is-template-magazine .espt-bn {
	--_ovbg: linear-gradient(0deg, var(--_ovc) 0%, transparent 55%), linear-gradient(90deg, var(--_ovc) 0%, color-mix(in srgb, var(--_ovc) 55%, transparent) 45%, transparent 85%);
}

.espt-block-banner.is-template-magazine .espt-bn-t {
	font-size: calc(var(--bn-ts, 27px) * 1.35);
	letter-spacing: -.02em;
	line-height: 1.02;
	text-transform: uppercase;
}

.espt-block-banner.is-template-magazine .espt-bn-c { border-left: 4px solid var(--_accent); padding-left: 18px; }
.espt-block-banner.is-template-magazine.is-text-align-right .espt-bn-c { border-left: 0; border-right: 4px solid var(--_accent); padding-left: 0; padding-right: 18px; }
.espt-block-banner.is-template-magazine.is-text-align-center .espt-bn-c { border-left: 0; padding-left: 0; }
.espt-block-banner.is-template-magazine .espt-bn-eye { letter-spacing: .28em; text-transform: uppercase; }

/* 18 sale poster */
.espt-block-banner.is-template-sale .espt-bn {
	--_ovbg: color-mix(in srgb, var(--bn-ov-c, #b91c1c) var(--bn-ov-a, 55%), transparent);
	background-color: var(--bn-bg, #b91c1c);
}

.espt-block-banner.is-template-sale .espt-bn-fr {
	border: 2px dashed rgba(255, 255, 255, .7);
	border-radius: max(0px, calc(var(--_r) - 10px));
	display: block;
}

.espt-block-banner.is-template-sale .espt-bn-in { padding: calc(var(--bn-pad, 20px) + 16px) calc(var(--_px) + 16px); }

.espt-block-banner.is-template-sale .espt-bn-t {
	font-size: calc(var(--bn-ts, 27px) * 1.25);
	font-style: italic;
	text-shadow: .05em .05em 0 rgba(0, 0, 0, .35);
	text-transform: uppercase;
}

.espt-block-banner.is-template-sale .bnb-solid { --_c: var(--_uc, #fde047); --_i: var(--_ui, #7f1d1d); --_ch: var(--_uch, #fff); }

/* 20 soft colour shapes behind the text */
.espt-block-banner.is-template-blob .espt-bn { --_ovbg: color-mix(in srgb, var(--_ovc) 60%, transparent); }

.espt-block-banner.is-template-blob .espt-bn-ov::before,
.espt-block-banner.is-template-blob .espt-bn-ov::after {
	animation: espt-bn-blob 16s ease-in-out infinite alternate;
	border-radius: 50%;
	content: "";
	filter: blur(50px);
	opacity: .7;
	position: absolute;
}

.espt-block-banner.is-template-blob .espt-bn-ov::before { background: var(--bn-ga, #6366f1); height: 70%; left: -10%; top: -20%; width: 55%; }
.espt-block-banner.is-template-blob .espt-bn-ov::after { animation-delay: -8s; background: var(--bn-gb, #ec4899); bottom: -25%; height: 75%; right: -12%; width: 55%; }

@keyframes espt-bn-blob {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(12%, 10%) scale(1.2); }
}

/* ====================================================== OVERLAY STYLES
   After the templates on purpose: a chosen overlay replaces the template's. */

.espt-block-banner.is-overlay-style-none .espt-bn { --_ovbg: transparent; }
.espt-block-banner.is-overlay-style-solid .espt-bn { --_ovbg: var(--_ovc); }
.espt-block-banner.is-overlay-style-left .espt-bn { --_ovbg: linear-gradient(90deg, var(--_ovc) 0%, color-mix(in srgb, var(--_ovc) 65%, transparent) 40%, transparent 80%); }
.espt-block-banner.is-overlay-style-right .espt-bn { --_ovbg: linear-gradient(270deg, var(--_ovc) 0%, color-mix(in srgb, var(--_ovc) 65%, transparent) 40%, transparent 80%); }
.espt-block-banner.is-overlay-style-top .espt-bn { --_ovbg: linear-gradient(180deg, var(--_ovc) 0%, color-mix(in srgb, var(--_ovc) 60%, transparent) 40%, transparent 78%); }
.espt-block-banner.is-overlay-style-bottom .espt-bn { --_ovbg: linear-gradient(0deg, var(--_ovc) 0%, color-mix(in srgb, var(--_ovc) 60%, transparent) 40%, transparent 78%); }
.espt-block-banner.is-overlay-style-vignette .espt-bn { --_ovbg: radial-gradient(ellipse at center, transparent 25%, var(--_ovc) 100%); }
.espt-block-banner.is-overlay-style-center .espt-bn { --_ovbg: radial-gradient(ellipse at center, var(--_ovc) 0%, transparent 75%); }
.espt-block-banner.is-overlay-style-diagonal .espt-bn { --_ovbg: linear-gradient(125deg, var(--_ovc) 0%, color-mix(in srgb, var(--_ovc) 55%, transparent) 45%, transparent 72%); }

.espt-block-banner.is-overlay-style-duo .espt-bn {
	--_ovbg: linear-gradient(135deg, color-mix(in srgb, var(--bn-ga, #4f46e5) var(--bn-ov-a, 55%), transparent), color-mix(in srgb, var(--bn-gb, #ec4899) var(--bn-ov-a, 55%), transparent));
}

.espt-block-banner.is-overlay-style-dots .espt-bn { --_ovbg: radial-gradient(color-mix(in srgb, var(--_ovc) 70%, transparent) 1px, transparent 1.5px) 0 0 / 8px 8px, color-mix(in srgb, var(--_ovc) 55%, transparent); }
.espt-block-banner.is-overlay-style-lines .espt-bn { --_ovbg: repeating-linear-gradient(135deg, var(--_ovc) 0 2px, transparent 2px 8px), color-mix(in srgb, var(--_ovc) 45%, transparent); }

/* A chosen overlay also shows on the split family's picture. */
.espt-block-banner[class*="is-overlay-style-"] .espt-bn.bn-split .espt-bn-ov { display: block; }

/* ============================================================= PRODUCTS */

.espt-block-banner .espt-bn-ps {
	--_pbg: var(--bn-prod-bg, #fff);
	--_pink: var(--bn-prod-ink, #0f172a);
	--_ppc: var(--bn-prod-price, var(--bd-primary, #15803d));

	align-self: var(--_pai, end);
	display: flex;
	flex-direction: column;
	gap: 8px;
	grid-area: 1 / 1 / 3 / 2;
	justify-self: var(--_pjc, end);
	margin: var(--bn-pad, 20px) var(--_px);
	max-width: calc(100% - 2 * var(--_px));
	min-width: 0;
	pointer-events: none;
	position: relative;
	z-index: 3;
}

.espt-block-banner .espt-bn-ps > * { pointer-events: auto; }

.espt-block-banner.is-prod-pos-tl { --_pai: start; --_pjc: start; }
.espt-block-banner.is-prod-pos-tc { --_pai: start; --_pjc: center; }
.espt-block-banner.is-prod-pos-tr { --_pai: start; --_pjc: end; }
.espt-block-banner.is-prod-pos-ml { --_pai: center; --_pjc: start; }
.espt-block-banner.is-prod-pos-mc { --_pai: center; --_pjc: center; }
.espt-block-banner.is-prod-pos-mr { --_pai: center; --_pjc: end; }
.espt-block-banner.is-prod-pos-bl { --_pai: end; --_pjc: start; }
.espt-block-banner.is-prod-pos-bc { --_pai: end; --_pjc: center; }
.espt-block-banner.is-prod-pos-br { --_pai: end; --_pjc: end; }

.espt-block-banner .espt-bn-ps.is-inline {
	margin: 4px 0 0;
	max-width: 100%;
}

.espt-block-banner .espt-bn-inl { max-width: 100%; width: 100%; }

.espt-block-banner .espt-bn-ph {
	color: var(--bn-prod-ink, currentColor);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
	text-transform: uppercase;
}

.espt-block-banner .espt-bn.bn-split .espt-bn-ph,
.espt-block-banner.is-template-card .espt-bn-inl .espt-bn-ph { text-shadow: none; }

.espt-block-banner .espt-bn-pl {
	display: flex;
	flex-direction: column;
	gap: var(--bn-pgap, 10px);
	max-width: 100%;
	min-width: 0;
}

.espt-block-banner.is-prod-dir-row .espt-bn-pl { flex-direction: row; flex-wrap: wrap; }
.espt-block-banner.is-prod-dir-row.is-prod-pos-tc .espt-bn-pl,
.espt-block-banner.is-prod-dir-row.is-prod-pos-mc .espt-bn-pl,
.espt-block-banner.is-prod-dir-row.is-prod-pos-bc .espt-bn-pl { justify-content: center; }
.espt-block-banner.is-prod-dir-row.is-prod-pos-tr .espt-bn-pl,
.espt-block-banner.is-prod-dir-row.is-prod-pos-mr .espt-bn-pl,
.espt-block-banner.is-prod-dir-row.is-prod-pos-br .espt-bn-pl { justify-content: flex-end; }

.espt-block-banner .espt-bn-pw { max-width: 100%; min-width: 0; }

/* The heading lines up with the chips it names. */
.espt-block-banner.is-prod-pos-tc .espt-bn-ps:not(.is-inline) .espt-bn-ph,
.espt-block-banner.is-prod-pos-mc .espt-bn-ps:not(.is-inline) .espt-bn-ph,
.espt-block-banner.is-prod-pos-bc .espt-bn-ps:not(.is-inline) .espt-bn-ph { text-align: center; }
.espt-block-banner.is-prod-pos-tr .espt-bn-ps:not(.is-inline) .espt-bn-ph,
.espt-block-banner.is-prod-pos-mr .espt-bn-ps:not(.is-inline) .espt-bn-ph,
.espt-block-banner.is-prod-pos-br .espt-bn-ps:not(.is-inline) .espt-bn-ph { text-align: right; }

/* Inside the text box, side-by-side chips share the box's width evenly. */
.espt-block-banner.is-prod-dir-row .espt-bn-ps.is-inline .espt-bn-pw { flex: 1 1 0; min-width: min(100%, 170px); }
.espt-block-banner.is-prod-dir-row:not(.is-prod-style-tag) .espt-bn-ps.is-inline .espt-bn-p { width: 100%; }
.espt-block-banner .espt-bn-ps.is-inline .espt-bn-p { border-color: rgba(15, 23, 42, .08); }

.espt-block-banner .espt-bn-p {
	align-items: center;
	background: var(--_pbg);
	border: 1px solid transparent;
	border-radius: 14px;
	box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .45);
	color: var(--_pink);
	display: flex;
	gap: 10px;
	max-width: 100%;
	padding: 7px 12px 7px 7px;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
	width: var(--bn-pw, 210px);
}

.espt-block-banner .espt-bn-p:hover,
.espt-block-banner .espt-bn-p:focus-visible { box-shadow: 0 16px 34px -10px rgba(15, 23, 42, .6); color: var(--_pink); }
.espt-block-banner .espt-bn-p:focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }

.espt-block-banner .espt-bn-pi {
	background: #f1f5f9;
	border-radius: 10px;
	display: block;
	flex: none;
	height: var(--bn-pimg, 46px);
	overflow: hidden;
	position: relative;
	width: var(--bn-pimg, 46px);
}

.espt-block-banner.is-prod-shape-square .espt-bn-pi { border-radius: 0; }
.espt-block-banner.is-prod-shape-circle .espt-bn-pi { border-radius: 50%; }

.espt-block-banner .espt-bn-pi img {
	display: block;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .5s ease;
	width: 100%;
}

.espt-block-banner .espt-bn-p:hover .espt-bn-pi img { transform: scale(1.1); }

.espt-block-banner .espt-bn-poff {
	background: #dc2626;
	border-radius: 0 0 6px 0;
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	left: 0;
	line-height: 1;
	padding: 3px 4px;
	position: absolute;
	top: 0;
}

.espt-block-banner.is-prod-shape-circle .espt-bn-poff { border-radius: 999px; left: 50%; top: auto; bottom: 1px; transform: translateX(-50%); }

.espt-block-banner .espt-bn-pt {
	display: grid;
	flex: 1 1 auto;
	gap: 2px;
	min-width: 0;
}

.espt-block-banner .espt-bn-pn {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--bn-pl, 1);
	display: -webkit-box;
	font-size: 13px;
	font-weight: 600;
	line-clamp: var(--bn-pl, 1);
	line-height: 1.3;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.espt-block-banner .espt-bn-pp {
	color: var(--_ppc);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.25;
	white-space: nowrap;
}

.espt-block-banner .espt-bn-pp del { color: var(--_pink); font-size: .85em; font-weight: 500; opacity: .55; }
.espt-block-banner .espt-bn-pp ins { background: none; text-decoration: none; }
.espt-block-banner .espt-bn-pp .screen-reader-text { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; width: 1px; }

.espt-block-banner .espt-bn-pgo {
	align-items: center;
	background: color-mix(in srgb, var(--_pink) 8%, transparent);
	border-radius: 50%;
	display: inline-flex;
	flex: none;
	height: 26px;
	justify-content: center;
	line-height: 0;
	transition: transform .3s ease, background-color .3s ease, color .3s ease;
	width: 26px;
}

.espt-block-banner .espt-bn-pgo svg { height: 13px; width: 13px; }
.espt-block-banner .espt-bn-p:hover .espt-bn-pgo { background: var(--_ppc); color: #fff; transform: translateX(2px); }
.espt-block-banner .espt-bn-pdot { display: none; }

.espt-block-banner .espt-bn-pnote {
	background: rgba(255, 255, 255, .92);
	border: 1px dashed #94a3b8;
	border-radius: 10px;
	color: #334155;
	font-size: 12px;
	max-width: 240px;
	padding: 8px 10px;
}

/* chip designs */
.espt-block-banner.is-prod-style-pill .espt-bn-p { border-radius: 999px; padding-right: 8px; }
.espt-block-banner.is-prod-style-pill .espt-bn-pi { border-radius: 50%; }

.espt-block-banner.is-prod-style-glass .espt-bn-ps { --_pbg: var(--bn-prod-bg, rgba(15, 23, 42, .34)); --_pink: var(--bn-prod-ink, #fff); --_ppc: var(--bn-prod-price, #fde68a); } /* a dark glass: white text must survive a pale photo */

.espt-block-banner.is-prod-style-glass .espt-bn-p {
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	border-color: rgba(255, 255, 255, .38);
}

.espt-block-banner.is-prod-style-dark .espt-bn-ps { --_pbg: var(--bn-prod-bg, #0b0f19); --_pink: var(--bn-prod-ink, #fff); --_ppc: var(--bn-prod-price, #4ade80); }
.espt-block-banner.is-prod-style-dark .espt-bn-pi { background: #1e293b; }

.espt-block-banner.is-prod-style-outline .espt-bn-ps { --_pbg: var(--bn-prod-bg, transparent); --_pink: var(--bn-prod-ink, #fff); --_ppc: var(--bn-prod-price, #fde68a); }
.espt-block-banner.is-prod-style-outline .espt-bn-p { border: 1.5px solid currentColor; box-shadow: none; }

.espt-block-banner.is-prod-style-minimal .espt-bn-ps { --_pbg: var(--bn-prod-bg, transparent); --_pink: var(--bn-prod-ink, #fff); --_ppc: var(--bn-prod-price, #fde68a); }
.espt-block-banner.is-prod-style-minimal .espt-bn-p { box-shadow: none; padding: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.espt-block-banner.is-prod-style-minimal .espt-bn-pi { box-shadow: 0 0 0 2px #fff, 0 8px 20px -6px rgba(0, 0, 0, .5); }

/* On a light split panel the see-through designs need dark ink. */
.espt-block-banner.is-prod-style-outline .espt-bn.bn-split .espt-bn-ps.is-inline,
.espt-block-banner.is-prod-style-minimal .espt-bn.bn-split .espt-bn-ps.is-inline,
.espt-block-banner.is-prod-style-outline.is-template-card .espt-bn-ps.is-inline,
.espt-block-banner.is-prod-style-minimal.is-template-card .espt-bn-ps.is-inline {
	--_pink: var(--bn-prod-ink, #0f172a);
	--_ppc: var(--bn-prod-price, var(--bd-primary, #15803d));
}

.espt-block-banner.is-prod-style-minimal .espt-bn.bn-split .espt-bn-ps.is-inline .espt-bn-p { text-shadow: none; }

.espt-block-banner.is-prod-style-vertical .espt-bn-p {
	align-items: stretch;
	flex-direction: column;
	gap: 8px;
	padding: 7px 7px 10px;
	width: min(var(--bn-pw, 210px), calc(var(--bn-pimg, 46px) * 2.4 + 14px));
}

.espt-block-banner.is-prod-style-vertical .espt-bn-pi { aspect-ratio: 1; height: auto; width: 100%; }
.espt-block-banner.is-prod-style-vertical .espt-bn-pt { padding: 0 3px; }
.espt-block-banner.is-prod-style-vertical .espt-bn-pgo { display: none; }

.espt-block-banner.is-prod-style-tag .espt-bn-p { border-radius: 999px; gap: 8px; padding: 7px 12px 7px 10px; width: auto; }
.espt-block-banner.is-prod-style-tag .espt-bn-pi { display: none; }
.espt-block-banner.is-prod-style-tag .espt-bn-pt { align-items: baseline; display: flex; gap: 8px; }
.espt-block-banner.is-prod-style-tag .espt-bn-pn { max-width: min(var(--bn-pw, 210px), 60vw); }

.espt-block-banner.is-prod-style-tag .espt-bn-pdot {
	animation: espt-bn-dot 1.8s infinite;
	background: var(--_ppc);
	border-radius: 50%;
	display: block;
	flex: none;
	height: 9px;
	width: 9px;
}

@keyframes espt-bn-dot {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_ppc) 70%, transparent); }
	70%, 100% { box-shadow: 0 0 0 9px transparent; }
}

/* chip loop animations — on the link, the entrance owns the wrapper */
.espt-block-banner.is-prod-anim-float .espt-bn-p { animation: espt-bn-p-float 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }
.espt-block-banner.is-prod-anim-pulse .espt-bn-p { animation: espt-bn-p-pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
.espt-block-banner.is-prod-anim-glow .espt-bn-p { animation: espt-bn-p-glow 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
.espt-block-banner.is-prod-anim-sway .espt-bn-p { animation: espt-bn-p-sway 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.6s); transform-origin: 50% 0; }
.espt-block-banner .espt-bn-p:hover,
.espt-block-banner .espt-bn-p:focus-visible { animation-play-state: paused; }

@keyframes espt-bn-p-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes espt-bn-p-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
@keyframes espt-bn-p-glow { 0%, 100% { box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .45); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--_ppc) 40%, transparent), 0 10px 28px -10px rgba(15, 23, 42, .45); } }
@keyframes espt-bn-p-sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }

/* phones */
@media (max-width: 767px) {
	.espt-block-banner.is-prod-mobile-hide .espt-bn-ps:not(.is-inline),
	.espt-block-banner.is-prod-mobile-hide .espt-bn-inl { display: none; }

	/* A swipeable row pinned along the bottom, under the text — never on it. */
	.espt-block-banner.is-prod-mobile-stack .espt-bn:not(.bn-split) .espt-bn-in { grid-area: 1 / 1 / 2 / 2; }

	.espt-block-banner.is-prod-mobile-stack .espt-bn-ps:not(.is-inline) {
		align-self: end;
		grid-area: 2 / 1 / 3 / 2;
		justify-self: stretch;
		margin: 0;
		max-width: 100%;
		padding: 0 0 var(--bn-pad, 20px);
	}

	.espt-block-banner.is-prod-mobile-stack .espt-bn.bn-split .espt-bn-ps:not(.is-inline) { grid-area: 3 / 1 / 4 / 2; }
	.espt-block-banner.is-prod-mobile-stack .espt-bn-ps:not(.is-inline) .espt-bn-ph { padding: 0 var(--bn-pad, 20px); text-align: left; }

	.espt-block-banner.is-prod-mobile-stack .espt-bn-ps:not(.is-inline) .espt-bn-pl {
		-webkit-overflow-scrolling: touch;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding: 8px var(--bn-pad, 20px) 10px;
		scroll-padding: 0 var(--bn-pad, 20px);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.espt-block-banner.is-prod-mobile-stack .espt-bn-ps:not(.is-inline) .espt-bn-pl::-webkit-scrollbar { display: none; }
	.espt-block-banner.is-prod-mobile-stack .espt-bn-ps:not(.is-inline) .espt-bn-pw { flex: none; max-width: 82%; scroll-snap-align: start; }

	/* The split family's chips sit on the light panel here, not the picture. */
	.espt-block-banner.is-prod-mobile-stack.is-prod-style-outline .espt-bn.bn-split .espt-bn-ps,
	.espt-block-banner.is-prod-mobile-stack.is-prod-style-minimal .espt-bn.bn-split .espt-bn-ps,
	.espt-block-banner.is-prod-mobile-stack.is-prod-style-glass .espt-bn.bn-split .espt-bn-ps {
		--_pbg: var(--bn-prod-bg, #fff);
		--_pink: var(--bn-prod-ink, #0f172a);
		--_ppc: var(--bn-prod-price, var(--bd-primary, #15803d));
	}

	.espt-block-banner.is-prod-mobile-stack.is-prod-style-minimal .espt-bn.bn-split .espt-bn-p { text-shadow: none; }
}

@media (max-width: 767px) {
	.espt-block-banner.is-template-bar.is-prod-mobile-stack .espt-bn:not(.bn-split) .espt-bn-in { grid-area: 3 / 1 / 4 / 2; }
	.espt-block-banner.is-template-bar.is-prod-mobile-stack .espt-bn-ps:not(.is-inline) { padding-bottom: 6px; }
}

/* In the split family the chips stand on the picture — row 1 on a phone,
   the picture's column from the tablet up. Same specificity as the phone
   "stack" rule above, which is inside max-width:767 and so never competes
   with the min-width:768 block here. */
.espt-block-banner .espt-bn.bn-split .espt-bn-ps:not(.is-inline) { margin: 14px; max-width: calc(100% - 28px); }

@media (max-width: 767px) {
	.espt-block-banner:not(.is-prod-mobile-stack) .espt-bn.bn-split .espt-bn-ps:not(.is-inline) { grid-area: 1 / 1 / 2 / 2; }
	.espt-block-banner.is-prod-mobile-stack .espt-bn.bn-split .espt-bn-ps:not(.is-inline) { margin: 0; max-width: 100%; }
}

@media (min-width: 768px) {
	.espt-block-banner .espt-bn.bn-split .espt-bn-ps:not(.is-inline) { grid-area: 1 / 2 / 2 / 3; margin: 22px; max-width: calc(100% - 44px); }
	.espt-block-banner.is-template-split-rev .espt-bn.bn-split .espt-bn-ps:not(.is-inline),
	.espt-block-banner.is-template-below .espt-bn.bn-split .espt-bn-ps:not(.is-inline) { grid-area: 1 / 1 / 2 / 2; }
}

/* ================================================================ BADGE */

.espt-block-banner .espt-bn-badge {
	--_bbg: var(--bn-badge-bg, #dc2626);
	--_bink: var(--bn-badge-ink, #fff);
	grid-area: 1 / 1 / 3 / 2;
	height: var(--_bs);
	margin: var(--_bo);
	pointer-events: none;
	position: relative;
	width: var(--_bs);
	z-index: 4;
}

.espt-block-banner.is-badge-pos-tl .espt-bn-badge { align-self: start; justify-self: start; }
.espt-block-banner.is-badge-pos-tr .espt-bn-badge { align-self: start; justify-self: end; }
.espt-block-banner.is-badge-pos-bl .espt-bn-badge { align-self: end; justify-self: start; }
.espt-block-banner.is-badge-pos-br .espt-bn-badge { align-self: end; justify-self: end; }
.espt-block-banner .espt-bn.bn-split .espt-bn-badge { grid-area: 1 / 1 / 2 / 2; }

/* A phone has no spare corner: the text starts under a top badge instead of
   running beneath it, and a bottom badge stays clear of the product row. */
@media (max-width: 767px) {
	.espt-block-banner.is-badge-pos-tl .espt-bn.has-badge:not(.bn-split) .espt-bn-in,
	.espt-block-banner.is-badge-pos-tr .espt-bn.has-badge:not(.bn-split) .espt-bn-in { padding-top: calc(var(--_bo) + var(--_bs) + 8px); }

	.espt-block-banner.is-badge-style-tag.is-badge-pos-tl .espt-bn.has-badge:not(.bn-split) .espt-bn-in,
	.espt-block-banner.is-badge-style-tag.is-badge-pos-tr .espt-bn.has-badge:not(.bn-split) .espt-bn-in,
	.espt-block-banner.is-badge-style-flag.is-badge-pos-tl .espt-bn.has-badge:not(.bn-split) .espt-bn-in,
	.espt-block-banner.is-badge-style-flag.is-badge-pos-tr .espt-bn.has-badge:not(.bn-split) .espt-bn-in { padding-top: calc(var(--_bo) + var(--_bs) * .45 + 12px); }

	/* The ribbon crosses the corner on a slant; the text clears its band. */
	.espt-block-banner.is-badge-style-ribbon.is-badge-pos-tl .espt-bn.has-badge:not(.bn-split) .espt-bn-in,
	.espt-block-banner.is-badge-style-ribbon.is-badge-pos-tr .espt-bn.has-badge:not(.bn-split) .espt-bn-in { padding-top: calc(var(--_bs) * 1.05); }

	.espt-block-banner.is-prod-mobile-stack .espt-bn:not(.bn-split) .espt-bn-badge { grid-area: 1 / 1 / 2 / 2; }

	/* The bar is already below the badge — it needs no room made for it. */
	.espt-block-banner.is-template-bar[class*="is-badge-pos-t"] .espt-bn.has-badge:not(.bn-split) .espt-bn-in { padding-top: 0; }
	.espt-block-banner.is-template-bar .espt-bn.has-badge { min-height: max(var(--bn-h, 320px), calc(var(--_bs) + 2 * var(--_bo))); }
}

@media (min-width: 768px) {
	.espt-block-banner:not(.is-template-below):not(.is-template-split-rev) .espt-bn.bn-split .espt-bn-badge { grid-area: 1 / 2 / 2 / 3; }
}

.espt-block-banner .espt-bn-badge-i {
	align-items: center;
	background: var(--_bbg);
	border-radius: 50%;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5);
	color: var(--_bink);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	line-height: 1;
	padding: 8%;
	position: relative;
	text-align: center;
	width: 100%;
}

.espt-block-banner .espt-bn-badge-b { font-size: calc(var(--_bs) * .3); font-weight: 900; letter-spacing: -.02em; max-width: 100%; overflow-wrap: anywhere; }
.espt-block-banner .espt-bn-badge-s { font-size: calc(var(--_bs) * .14); font-weight: 800; letter-spacing: .08em; margin-top: .25em; text-transform: uppercase; }

.espt-block-banner.is-badge-style-burst .espt-bn-badge-i { background: none; box-shadow: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .4)); }

.espt-block-banner.is-badge-style-burst .espt-bn-badge-i::before {
	background: var(--_bbg);
	clip-path: polygon(50% 0%, 59% 9%, 71% 4%, 75% 16%, 88% 16%, 87% 29%, 98% 35%, 92% 46%, 100% 56%, 90% 63%, 93% 76%, 81% 78%, 79% 91%, 66% 88%, 58% 99%, 50% 91%, 42% 99%, 34% 88%, 21% 91%, 19% 78%, 7% 76%, 10% 63%, 0% 56%, 8% 46%, 2% 35%, 13% 29%, 12% 16%, 25% 16%, 29% 4%, 41% 9%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

.espt-block-banner.is-badge-style-ring .espt-bn-badge-i { outline: 2px dashed var(--_bink); outline-offset: -7px; }

.espt-block-banner.is-badge-style-tag .espt-bn-badge,
.espt-block-banner.is-badge-style-flag .espt-bn-badge { height: auto; width: auto; }

.espt-block-banner.is-badge-style-tag .espt-bn-badge-i,
.espt-block-banner.is-badge-style-flag .espt-bn-badge-i {
	border-radius: 999px;
	flex-direction: row;
	gap: .4em;
	height: auto;
	padding: .5em 1em;
	width: auto;
}

.espt-block-banner.is-badge-style-tag .espt-bn-badge-b,
.espt-block-banner.is-badge-style-flag .espt-bn-badge-b { font-size: calc(var(--_bs) * .2); }
.espt-block-banner.is-badge-style-tag .espt-bn-badge-s,
.espt-block-banner.is-badge-style-flag .espt-bn-badge-s { font-size: calc(var(--_bs) * .13); margin-top: 0; }

.espt-block-banner.is-badge-style-flag .espt-bn-badge { margin-left: 0; margin-right: 0; }
.espt-block-banner.is-badge-style-flag .espt-bn-badge-i { transform-origin: 0 50%; } /* a loop must not push the flag past the edge it hangs from */
.espt-block-banner.is-badge-style-flag.is-badge-pos-tr .espt-bn-badge-i,
.espt-block-banner.is-badge-style-flag.is-badge-pos-br .espt-bn-badge-i { transform-origin: 100% 50%; }
.espt-block-banner.is-badge-style-flag .espt-bn-badge-i { border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - .7em) 50%, 100% 100%, 0 100%); padding-right: 1.6em; }
.espt-block-banner.is-badge-style-flag.is-badge-pos-tr .espt-bn-badge-i,
.espt-block-banner.is-badge-style-flag.is-badge-pos-br .espt-bn-badge-i { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .7em 50%); padding-left: 1.6em; padding-right: 1em; }

/* corner ribbon: a band across the corner, clipped by the media's radius */
.espt-block-banner.is-badge-style-ribbon .espt-bn-badge {
	height: calc(var(--_bs) * 1.5);
	margin: 0;
	overflow: hidden;
	width: calc(var(--_bs) * 1.5);
}

.espt-block-banner.is-badge-style-ribbon.is-badge-pos-tl .espt-bn-badge { border-top-left-radius: var(--_r); }
.espt-block-banner.is-badge-style-ribbon.is-badge-pos-tr .espt-bn-badge { border-top-right-radius: var(--_r); }
.espt-block-banner.is-badge-style-ribbon.is-badge-pos-bl .espt-bn-badge { border-bottom-left-radius: var(--_r); }
.espt-block-banner.is-badge-style-ribbon.is-badge-pos-br .espt-bn-badge { border-bottom-right-radius: var(--_r); }

.espt-block-banner.is-badge-style-ribbon .espt-bn-badge-i {
	animation: none;
	border-radius: 0;
	flex-direction: row;
	gap: .4em;
	height: auto;
	left: 50%;
	padding: .5em 0;
	position: absolute;
	top: 50%;
	translate: -50% -50%;
	width: 150%;
}

.espt-block-banner.is-badge-style-ribbon.is-badge-pos-tl .espt-bn-badge-i { rotate: -45deg; translate: -64% -120%; }
.espt-block-banner.is-badge-style-ribbon.is-badge-pos-tr .espt-bn-badge-i { rotate: 45deg; translate: -36% -120%; }
.espt-block-banner.is-badge-style-ribbon.is-badge-pos-bl .espt-bn-badge-i { rotate: 45deg; translate: -64% 20%; }
.espt-block-banner.is-badge-style-ribbon.is-badge-pos-br .espt-bn-badge-i { rotate: -45deg; translate: -36% 20%; }
.espt-block-banner.is-badge-style-ribbon .espt-bn-badge-b { font-size: calc(var(--_bs) * .17); }
.espt-block-banner.is-badge-style-ribbon .espt-bn-badge-s { font-size: calc(var(--_bs) * .12); margin-top: 0; }

/* badge loops (the ribbon stays still — it is glued to the corner) */
.espt-block-banner.is-badge-anim-pulse .espt-bn-badge-i { animation: espt-bn-bd-pulse 2s ease-in-out infinite; }
.espt-block-banner.is-badge-anim-swing .espt-bn-badge-i { animation: espt-bn-bd-swing 2.6s ease-in-out infinite; transform-origin: 50% 0; }
.espt-block-banner.is-badge-anim-bounce .espt-bn-badge-i { animation: espt-bn-bd-bounce 2.2s infinite; }
.espt-block-banner.is-badge-anim-tada .espt-bn-badge-i { animation: espt-bn-bd-tada 3s infinite; }
.espt-block-banner.is-badge-anim-spin.is-badge-style-burst .espt-bn-badge-i::before { animation: espt-bn-bd-spin 14s linear infinite; }
.espt-block-banner.is-badge-anim-spin:not(.is-badge-style-burst) .espt-bn-badge-i { animation: espt-bn-bd-pulse 2s ease-in-out infinite; }
.espt-block-banner.is-badge-style-ribbon .espt-bn-badge-i { animation: none; }

@keyframes espt-bn-bd-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.09; } }
@keyframes espt-bn-bd-swing { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }
@keyframes espt-bn-bd-bounce { 0%, 55%, 100% { translate: 0 0; } 68% { translate: 0 -12px; } 80% { translate: 0 0; } 90% { translate: 0 -5px; } }
@keyframes espt-bn-bd-spin { to { rotate: 360deg; } }

@keyframes espt-bn-bd-tada {
	0%, 60%, 100% { rotate: 0deg; scale: 1; }
	66% { rotate: -6deg; scale: .94; }
	72%, 84% { rotate: 6deg; scale: 1.1; }
	78%, 90% { rotate: -6deg; scale: 1.1; }
}

/* ====================================================== IMAGE ANIMATION */

.espt-block-banner.is-img-anim-zoom-in .espt-bn-img { animation: espt-bn-kb-in var(--bn-it, 14s) ease-in-out infinite alternate; }
.espt-block-banner.is-img-anim-zoom-out .espt-bn-img { animation: espt-bn-kb-out var(--bn-it, 14s) ease-in-out infinite alternate; }
.espt-block-banner.is-img-anim-pan-left .espt-bn-img { animation: espt-bn-pan-l var(--bn-it, 14s) ease-in-out infinite alternate; }
.espt-block-banner.is-img-anim-pan-right .espt-bn-img { animation: espt-bn-pan-r var(--bn-it, 14s) ease-in-out infinite alternate; }
.espt-block-banner.is-img-anim-pan-up .espt-bn-img { animation: espt-bn-pan-u var(--bn-it, 14s) ease-in-out infinite alternate; }

@keyframes espt-bn-kb-in { from { transform: scale(1); } to { transform: scale(1.16); } }
@keyframes espt-bn-kb-out { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes espt-bn-pan-l { from { transform: scale(1.14) translateX(5%); } to { transform: scale(1.14) translateX(-5%); } }
@keyframes espt-bn-pan-r { from { transform: scale(1.14) translateX(-5%); } to { transform: scale(1.14) translateX(5%); } }
@keyframes espt-bn-pan-u { from { transform: scale(1.14) translateY(5%); } to { transform: scale(1.14) translateY(-5%); } }

/* Parallax: banner.js writes --bn-py (−1 … 1) as the banner crosses the screen. */
.espt-block-banner.is-img-anim-parallax .espt-bn-img {
	height: 124%;
	top: -12%;
	transform: translate3d(0, calc(var(--bn-py, 0) * 9%), 0);
	will-change: transform;
}

.espt-block-banner.is-img-anim-reveal .espt-bn[data-bn-in] .espt-bn-media { clip-path: inset(0 100% 0 0); }
.espt-block-banner.is-img-anim-reveal .espt-bn[data-bn-in].is-in .espt-bn-media { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.espt-block-banner.is-img-anim-unblur .espt-bn[data-bn-in] .espt-bn-mz { filter: blur(18px); transform: scale(1.08); }
.espt-block-banner.is-img-anim-unblur .espt-bn[data-bn-in].is-in .espt-bn-mz { filter: none; transform: none; transition: filter 1.2s ease, transform 1.4s ease; }

/* ============================================================= ENTRANCE
   Hidden until banner.js adds .is-in (when the banner scrolls into view).
   The server leaves data-bn-in off inside the editor. */

.espt-block-banner:not(.is-anim-in-none) .espt-bn[data-bn-in] .espt-bn-c > *,
.espt-block-banner:not(.is-anim-in-none) .espt-bn[data-bn-in] > .espt-bn-ps .espt-bn-pw,
.espt-block-banner:not(.is-anim-in-none) .espt-bn[data-bn-in] > .espt-bn-ps .espt-bn-ph,
.espt-block-banner:not(.is-anim-in-none) .espt-bn[data-bn-in] > .espt-bn-badge {
	opacity: 0;
}

.espt-block-banner.no-anim-stagger .espt-bn { --_stg: 0s; }

.espt-block-banner:not(.is-anim-in-none) .espt-bn[data-bn-in].is-in .espt-bn-c > *,
.espt-block-banner:not(.is-anim-in-none) .espt-bn[data-bn-in].is-in > .espt-bn-ps .espt-bn-pw,
.espt-block-banner:not(.is-anim-in-none) .espt-bn[data-bn-in].is-in > .espt-bn-ps .espt-bn-ph {
	animation: var(--_in, espt-bn-in-fade) var(--bn-at, .8s) cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--bn-ad, 0s) + var(--i, 0) * var(--_stg));
}

/* The chips follow the text. */
.espt-block-banner:not(.is-anim-in-none) .espt-bn[data-bn-in].is-in > .espt-bn-ps .espt-bn-pw,
.espt-block-banner:not(.is-anim-in-none) .espt-bn[data-bn-in].is-in > .espt-bn-ps .espt-bn-ph {
	animation-delay: calc(var(--bn-ad, 0s) + .35s + var(--i, 0) * .14s);
}

.espt-block-banner:not(.is-anim-in-none) .espt-bn[data-bn-in].is-in > .espt-bn-badge {
	opacity: 1;
	transition: opacity .6s ease calc(var(--bn-ad, 0s) + .5s);
}

.espt-block-banner.is-anim-in-fade .espt-bn { --_in: espt-bn-in-fade; }
.espt-block-banner.is-anim-in-up .espt-bn { --_in: espt-bn-in-up; }
.espt-block-banner.is-anim-in-down .espt-bn { --_in: espt-bn-in-down; }
.espt-block-banner.is-anim-in-left .espt-bn { --_in: espt-bn-in-left; }
.espt-block-banner.is-anim-in-right .espt-bn { --_in: espt-bn-in-right; }
.espt-block-banner.is-anim-in-zoom .espt-bn { --_in: espt-bn-in-zoom; }
.espt-block-banner.is-anim-in-blur .espt-bn { --_in: espt-bn-in-blur; }
.espt-block-banner.is-anim-in-flip .espt-bn { --_in: espt-bn-in-flip; }
.espt-block-banner.is-anim-in-clip .espt-bn { --_in: espt-bn-in-clip; }
.espt-block-banner.is-anim-in-rise .espt-bn { --_in: espt-bn-in-rise; }
.espt-block-banner.is-anim-in-flip .espt-bn-c { perspective: 900px; }

@keyframes espt-bn-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes espt-bn-in-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes espt-bn-in-down { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes espt-bn-in-left { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes espt-bn-in-right { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes espt-bn-in-zoom { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes espt-bn-in-blur { from { filter: blur(14px); opacity: 0; transform: scale(1.04); } to { filter: none; opacity: 1; transform: none; } }
@keyframes espt-bn-in-flip { from { opacity: 0; transform: rotateX(-75deg); transform-origin: 50% 100%; } to { opacity: 1; transform: none; transform-origin: 50% 100%; } }
@keyframes espt-bn-in-clip { from { clip-path: inset(0 100% 0 0); opacity: 1; } to { clip-path: inset(0 -20% 0 -20%); opacity: 1; } }

@keyframes espt-bn-in-rise {
	0% { opacity: 0; transform: translateY(48px) scale(.96); }
	60% { opacity: 1; transform: translateY(-8px) scale(1.01); }
	100% { opacity: 1; transform: none; }
}

/* ================================================================ HOVER
   Only where there is a real pointer: on a phone :hover sticks after a tap. */

@media (hover: hover) and (pointer: fine) {
	.espt-block-banner.is-hover-zoom .espt-bn:hover .espt-bn-mz { transform: scale(1.08); }
	.espt-block-banner.is-hover-zoom-out .espt-bn .espt-bn-mz { transform: scale(1.1); }
	.espt-block-banner.is-hover-zoom-out .espt-bn:hover .espt-bn-mz { transform: scale(1); }
	.espt-block-banner.is-hover-slide .espt-bn .espt-bn-mz { transform: scale(1.1) translateX(-3%); }
	.espt-block-banner.is-hover-slide .espt-bn:hover .espt-bn-mz { transform: scale(1.1) translateX(3%); }

	.espt-block-banner.is-hover-color .espt-bn .espt-bn-mz { filter: grayscale(1); }
	.espt-block-banner.is-hover-color .espt-bn:hover .espt-bn-mz { filter: grayscale(0); }

	.espt-block-banner.is-hover-dim .espt-bn .espt-bn-media::after {
		background: #000;
		content: "";
		inset: 0;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		transition: opacity .45s ease;
	}

	.espt-block-banner.is-hover-dim .espt-bn:hover .espt-bn-media::after { opacity: .3; }
	.espt-block-banner.is-hover-clear .espt-bn:hover .espt-bn-ov { opacity: .35; }

	.espt-block-banner.is-hover-shine .espt-bn .espt-bn-media::after {
		background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%);
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
		transform: translateX(-110%);
	}

	.espt-block-banner.is-hover-shine .espt-bn:hover .espt-bn-media::after { transform: translateX(110%); transition: transform .9s ease; }

	.espt-block-banner.is-hover-lift .espt-bn { transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; }
	.espt-block-banner.is-hover-lift .espt-bn:hover { box-shadow: 0 30px 60px -22px rgba(15, 23, 42, .55); transform: translateY(-6px); }

	/* banner.js writes --bn-rx / --bn-ry while the mouse is over the banner. */
	.espt-block-banner.is-hover-tilt { perspective: 1200px; }

	.espt-block-banner.is-hover-tilt .espt-bn {
		transform: rotateX(var(--bn-rx, 0deg)) rotateY(var(--bn-ry, 0deg));
		transition: transform .25s ease-out;
	}

	.espt-block-banner.is-hover-frame .espt-bn .espt-bn-fr {
		border: 1.5px solid rgba(255, 255, 255, .85);
		border-radius: max(0px, calc(var(--_r) - 10px));
		clip-path: inset(0 100% 100% 0);
		display: block;
		transition: clip-path .7s cubic-bezier(.7, 0, .2, 1);
	}

	.espt-block-banner.is-hover-frame .espt-bn:hover .espt-bn-fr { clip-path: inset(0 0 0 0); }
	.espt-block-banner.is-hover-content .espt-bn:hover .espt-bn-c { transform: translateY(-8px); }

	.espt-block-banner.is-hover-buttons .espt-bn .espt-bn-b { opacity: 0; translate: 0 10px; transition: opacity .35s ease, translate .35s ease, background-color .25s ease, color .25s ease; }
	.espt-block-banner.is-hover-buttons .espt-bn:hover .espt-bn-b,
	.espt-block-banner.is-hover-buttons .espt-bn:focus-within .espt-bn-b { opacity: 1; translate: 0 0; }
	.espt-block-banner.is-hover-buttons .espt-bn:hover .espt-bn-b2 { transition-delay: .08s; }
}

/* =========================================================== BREAKPOINTS */

@media (min-width: 768px) {
	.espt-block-banner .espt-bn-btns { gap: 12px 14px; }
	.espt-block-banner .espt-bn-fr { inset: 18px; }
	.espt-block-banner .espt-bn-pn,
	.espt-block-banner .espt-bn-pp { font-size: 14px; }
}

/* ======================================================= REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
	.espt-block-banner .espt-bn,
	.espt-block-banner .espt-bn *,
	.espt-block-banner .espt-bn *::before,
	.espt-block-banner .espt-bn *::after {
		animation: none !important;
		transition: none !important;
	}

	.espt-block-banner .espt-bn[data-bn-in] .espt-bn-c > *,
	.espt-block-banner .espt-bn[data-bn-in] .espt-bn-pw,
	.espt-block-banner .espt-bn[data-bn-in] .espt-bn-ph,
	.espt-block-banner .espt-bn[data-bn-in] > .espt-bn-badge { opacity: 1 !important; }

	.espt-block-banner .espt-bn[data-bn-in] .espt-bn-media { clip-path: none !important; }
	.espt-block-banner .espt-bn[data-bn-in] .espt-bn-mz { filter: none !important; transform: none !important; }
	.espt-block-banner.is-img-anim-parallax .espt-bn-img { height: 100%; top: 0; transform: none; }
}