/**
 * Hero block — .espt-block-hero
 *
 * Vars: --pad-y --gap --content-width --min-height --overlay-color --overlay-opacity
 *       --eyebrow-color --eyebrow-bg --eyebrow-size --title-color --title-size
 *       --typing-color --desc-color --desc-size --desc-max --note-color --note-bg
 *       --note-size --media-width --media-radius --media-anim-speed --play-size
 *       --play-color --play-bg --primary-bg --primary-color --secondary-bg
 *       --secondary-color --secondary-border --btn-size --btn-radius
 *       --discount-bg --discount-color --discount-size --timer-bg --timer-color
 *       --timer-label-color --timer-size --seal-size --seal-gap --seal-x --seal-y
 *       --seal-rotate --seal-anim-dur --seal-bg --seal-color
 *       (plus the shared --bd-* layer: box background, border, radius, padding)
 *
 * Root classes: is-layout-* is-text-align-* is-dpos-* is-mpos-* is-media-ratio-*
 *               is-media-shadow-* is-media-anim-* is-primary-style-*
 *               is-secondary-style-* is-discount-design-*
 *               is-timer-design-* is-bg-size-* is-bg-pos-* is/no-bg-fixed
 *               is/no-play-pulse is/no-btn-full is/no-note-pill is/no-bordered
 *               is-seal-shape-* is-seal-position-* is-seal-anim-*
 * Markup hook: .espt-hero-onbg (layout 5 with a background picture).
 *
 * Mobile-first: phones first, then 768px, then 1024px.
 */

/* ------------------------------------------------------------- section */
.espt-block-hero {
	/* Phone-sized circle sticker (full size from 768px up). */
	--disc-d: min(var(--discount-size, 86px), 78px);
	/* A nudged stand card may hang over the corner, but must never widen the
	   page. overflow-x:clip leaves the vertical axis visible (unlike hidden)
	   and is simply ignored by browsers that do not support it. */
	overflow-x: clip;
}

/* Full browser width. Negative side margins pull the section out of the page's
   content column; 100vw then fills the viewport. The inner wrapper keeps its
   own max-width, so only the background and media go edge to edge. */
.espt-block-hero.is-full-bleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.espt-block-hero .espt-hero {
	display: flex;
	align-items: center;
	min-height: var(--min-height, 0px);
	min-width: 0;
	overflow: visible;
	padding: var(--pad-y, 32px) var(--bd-pad, 16px);
	position: relative;
}

.espt-block-hero.no-bordered .espt-hero {
	border-color: transparent;
}

.espt-block-hero .espt-hero-bg {
	background-repeat: no-repeat;
	border-radius: inherit;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.espt-block-hero.is-bg-size-cover .espt-hero-bg { background-size: cover; }
.espt-block-hero.is-bg-size-contain .espt-hero-bg { background-size: contain; }
.espt-block-hero.is-bg-size-auto .espt-hero-bg { background-size: auto; }

.espt-block-hero.is-bg-pos-center .espt-hero-bg { background-position: center center; }
.espt-block-hero.is-bg-pos-top .espt-hero-bg { background-position: center top; }
.espt-block-hero.is-bg-pos-bottom .espt-hero-bg { background-position: center bottom; }
.espt-block-hero.is-bg-pos-left .espt-hero-bg { background-position: left center; }
.espt-block-hero.is-bg-pos-right .espt-hero-bg { background-position: right center; }

.espt-block-hero .espt-hero-ov {
	background: var(--overlay-color, transparent);
	display: block;
	inset: 0;
	opacity: var(--overlay-opacity, 45%);
	position: absolute;
}

/* ---------------------------------------------------------------- grid */
.espt-block-hero .espt-hero-inner {
	display: flex;
	flex-direction: column;
	gap: var(--gap, 24px);
	margin: 0 auto;
	max-width: min(100%, var(--content-width, 1140px));
	min-width: 0;
	position: relative;
	width: 100%;
	z-index: 1;
}

.espt-block-hero .espt-hero-content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	text-align: left;
	width: 100%;
}

/* Layouts without a side column centre their text by default, and cap the
   measure so a full-width hero does not run 1400px-long lines. */
.espt-block-hero.is-layout-centered .espt-hero-content,
.espt-block-hero.is-layout-background .espt-hero-content,
.espt-block-hero.is-layout-media-bottom .espt-hero-content {
	align-items: center;
	margin: 0 auto;
	max-width: min(100%, 760px);
	text-align: center;
}

/* Explicit alignment always wins (declared after the layout defaults). */
.espt-block-hero.is-text-align-left .espt-hero-content { align-items: flex-start; text-align: left; }
.espt-block-hero.is-text-align-center .espt-hero-content { align-items: center; text-align: center; }
.espt-block-hero.is-text-align-right .espt-hero-content { align-items: flex-end; text-align: right; }

/* -------------------------------------------------------- eyebrow row */
.espt-block-hero .espt-hero-eyerow {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 100%;
	min-width: 0;
}

.espt-block-hero.is-text-align-center .espt-hero-eyerow,
.espt-block-hero.is-layout-centered .espt-hero-eyerow,
.espt-block-hero.is-layout-background .espt-hero-eyerow,
.espt-block-hero.is-layout-media-bottom .espt-hero-eyerow { justify-content: center; }

.espt-block-hero.is-text-align-left .espt-hero-eyerow { justify-content: flex-start; }
.espt-block-hero.is-text-align-right .espt-hero-eyerow { justify-content: flex-end; }

.espt-block-hero .espt-hero-eyebrow {
	align-items: center;
	background: var(--eyebrow-bg, color-mix(in srgb, var(--bd-primary) 12%, transparent));
	border-radius: 999px;
	color: var(--eyebrow-color, var(--bd-primary));
	display: inline-flex;
	font-size: var(--eyebrow-size, 13px);
	font-weight: 600;
	gap: 6px;
	letter-spacing: 0.02em;
	line-height: 1.35;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 5px 13px;
}

.espt-block-hero .espt-hero-eico { font-size: 1.1em; }

/* Library icons are bare <svg viewBox> — without an explicit size they fall
   back to the replaced-element default (300x150), so every icon span sizes
   its svg to the current font size. */
.espt-block-hero .espt-hero-eico,
.espt-block-hero .espt-hero-nico,
.espt-block-hero .espt-hero-bico,
.espt-block-hero .espt-hero-seal-ico {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.espt-block-hero .espt-hero-eico svg,
.espt-block-hero .espt-hero-nico svg,
.espt-block-hero .espt-hero-bico svg,
.espt-block-hero .espt-hero-seal-ico svg {
	height: 1em;
	width: 1em;
}

/* -------------------------------------------------------------- title */
.espt-block-hero .espt-hero-title {
	color: var(--title-color, var(--bd-ink));
	font-size: var(--title-size, 28px);
	font-weight: 800;
	line-height: 1.15;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The typed phrase needs breathing room after the fixed prefix (a trailing
   space in the field itself is trimmed away on save). */
.espt-block-hero .espt-hero-tpre {
	color: inherit;
	margin-inline-end: 0.28em;
}

.espt-block-hero .espt-hero-typed {
	color: var(--typing-color, var(--bd-primary));
	max-width: 100%;
	text-align: left;
}

.espt-block-hero .espt-hero-typed::after {
	animation: espt-hero-caret 1s steps(1) infinite;
	background: currentColor;
	border-radius: 2px;
	content: "";
	display: inline-block;
	height: 0.9em;
	margin-left: 4px;
	vertical-align: -0.08em;
	width: 3px;
}

@keyframes espt-hero-caret {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* -------------------------------------------------------- description */
.espt-block-hero .espt-hero-desc {
	color: var(--desc-color, var(--bd-body));
	font-size: var(--desc-size, 16px);
	line-height: 1.7;
	margin: 0;
	max-width: min(100%, var(--desc-max, 560px));
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ buttons */
/* Phones: one full-width CTA per row (they only sit side by side from 768px). */
.espt-block-hero .espt-hero-actions {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2px;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

.espt-block-hero .espt-hero-actions > .espt-hero-btn { width: 100%; }

.espt-block-hero.is-text-align-center .espt-hero-actions,
.espt-block-hero.is-layout-centered .espt-hero-actions,
.espt-block-hero.is-layout-background .espt-hero-actions,
.espt-block-hero.is-layout-media-bottom .espt-hero-actions { justify-content: center; }

.espt-block-hero.is-text-align-left .espt-hero-actions { justify-content: flex-start; }
.espt-block-hero.is-text-align-right .espt-hero-actions { justify-content: flex-end; }

.espt-block-hero .espt-hero-btn {
	align-items: center;
	border: 2px solid transparent;
	border-radius: var(--btn-radius, 10px);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--btn-size, 15px);
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	line-height: 1.25;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: calc(var(--btn-size, 15px) * 0.82) calc(var(--btn-size, 15px) * 1.7);
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.espt-block-hero .espt-hero-btn:hover { text-decoration: none; transform: translateY(-1px); }
.espt-block-hero .espt-hero-btn:focus-visible { outline: 2px solid var(--bd-primary); outline-offset: 3px; }

/* Primary designs */
.espt-block-hero .espt-hero-btn-p {
	background: var(--primary-bg, var(--espt-btn-bg, var(--bd-primary)));
	color: var(--primary-color, #fff);
}

.espt-block-hero .espt-hero-btn-p:hover { color: var(--primary-color, #fff); filter: brightness(1.07); }

.espt-block-hero.is-primary-style-gradient .espt-hero-btn-p {
	background: linear-gradient(135deg, var(--primary-bg, var(--espt-btn-bg, var(--bd-primary))), var(--bd-primary-dark));
}

.espt-block-hero.is-primary-style-glow .espt-hero-btn-p {
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-bg, var(--bd-primary)) 55%, transparent);
	animation: espt-hero-glow 2.4s ease-out infinite;
}

.espt-block-hero.is-primary-style-elevated .espt-hero-btn-p { box-shadow: 0 14px 26px -12px rgba(15, 23, 42, 0.55); }
.espt-block-hero.is-primary-style-elevated .espt-hero-btn-p:hover { box-shadow: 0 18px 32px -12px rgba(15, 23, 42, 0.6); }

.espt-block-hero.is-primary-style-3d .espt-hero-btn-p {
	box-shadow: 0 5px 0 0 color-mix(in srgb, var(--primary-bg, var(--bd-primary)) 55%, #000);
}

.espt-block-hero.is-primary-style-3d .espt-hero-btn-p:active {
	box-shadow: 0 1px 0 0 color-mix(in srgb, var(--primary-bg, var(--bd-primary)) 55%, #000);
	transform: translateY(4px);
}

.espt-block-hero.is-primary-style-shine .espt-hero-btn-p { overflow: hidden; }

.espt-block-hero.is-primary-style-shine .espt-hero-btn-p::after {
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
	content: "";
	inset: 0 auto 0 -60%;
	position: absolute;
	transition: transform 0.6s ease;
	transform: translateX(-30%);
	width: 60%;
}

.espt-block-hero.is-primary-style-shine .espt-hero-btn-p:hover::after { transform: translateX(320%); }

@keyframes espt-hero-glow {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-bg, var(--bd-primary)) 55%, transparent); }
	70% { box-shadow: 0 0 0 14px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* Secondary designs */
.espt-block-hero .espt-hero-btn-s {
	background: var(--secondary-bg, transparent);
	border-color: var(--secondary-border, var(--bd-primary));
	color: var(--secondary-color, var(--bd-primary));
}

.espt-block-hero .espt-hero-btn-s:hover {
	background: var(--secondary-bg, var(--bd-soft));
	color: var(--secondary-color, var(--bd-primary));
}

.espt-block-hero.is-secondary-style-solid .espt-hero-btn-s {
	background: var(--secondary-bg, var(--bd-deep));
	border-color: transparent;
	color: var(--secondary-color, #fff);
}

.espt-block-hero.is-secondary-style-solid .espt-hero-btn-s:hover { filter: brightness(1.12); }

.espt-block-hero.is-secondary-style-soft .espt-hero-btn-s {
	background: var(--secondary-bg, var(--bd-soft));
	border-color: var(--secondary-border, var(--bd-soft-line));
	color: var(--secondary-color, var(--bd-primary-dark));
}

.espt-block-hero.is-secondary-style-ghost .espt-hero-btn-s {
	background: transparent;
	border-color: transparent;
	color: var(--secondary-color, var(--bd-primary));
	padding-left: 4px;
	padding-right: 4px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.espt-block-hero.is-secondary-style-ghost .espt-hero-btn-s:hover { background: transparent; }

/* (Full-width from tablet up lives in the 768px block — on phones every
   button is full width already.) */

/* Button icons */
.espt-block-hero .espt-hero-bico {
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 1.15em;
	line-height: 0;
	transition: transform 0.22s ease, opacity 0.22s ease, margin 0.22s ease;
}

.espt-block-hero .espt-hero-ia-slide.espt-hero-ip-after:hover .espt-hero-bico { transform: translateX(4px); }
.espt-block-hero .espt-hero-ia-slide.espt-hero-ip-before:hover .espt-hero-bico { transform: translateX(-4px); }
.espt-block-hero .espt-hero-ia-rotate:hover .espt-hero-bico { transform: rotate(180deg); }
.espt-block-hero .espt-hero-ia-reveal .espt-hero-bico { margin-left: -0.6em; opacity: 0; }
.espt-block-hero .espt-hero-ia-reveal.espt-hero-ip-before .espt-hero-bico { margin-left: 0; margin-right: -0.6em; }
.espt-block-hero .espt-hero-ia-reveal:hover .espt-hero-bico { margin: 0; opacity: 1; }
.espt-block-hero .espt-hero-ia-bounce .espt-hero-bico { animation: espt-hero-bico-bounce 1.4s ease-in-out infinite; }
.espt-block-hero .espt-hero-ia-pulse .espt-hero-bico { animation: espt-hero-bico-pulse 1.4s ease-in-out infinite; }

@keyframes espt-hero-bico-bounce {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(4px); }
}

@keyframes espt-hero-bico-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.22); }
}

/* --------------------------------------------------------------- note */
.espt-block-hero .espt-hero-note {
	align-items: center;
	color: var(--note-color, var(--bd-muted));
	display: flex;
	font-size: var(--note-size, 14px);
	font-weight: 500;
	gap: 7px;
	line-height: 1.5;
	margin-top: 2px;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-hero.is-note-pill .espt-hero-note {
	background: var(--note-bg, var(--bd-soft));
	border-radius: 999px;
	display: inline-flex;
	padding: 8px 16px;
}

.espt-block-hero.no-note-pill .espt-hero-note { background: var(--note-bg, transparent); }

.espt-block-hero .espt-hero-nico { color: var(--bd-accent); font-size: 1.15em; }

/* -------------------------------------------------------------- media */
.espt-block-hero .espt-hero-media {
	max-width: 100%;
	min-width: 0;
	position: relative;
	width: 100%;
}

.espt-block-hero .espt-hero-media img {
	border-radius: var(--media-radius, 16px);
	display: block;
	height: auto;
	width: 100%;
}

.espt-block-hero.is-media-ratio-square .espt-hero-media .espt-hero-img { aspect-ratio: 1 / 1; object-fit: cover; }
.espt-block-hero.is-media-ratio-photo .espt-hero-media .espt-hero-img { aspect-ratio: 4 / 3; object-fit: cover; }
.espt-block-hero.is-media-ratio-portrait .espt-hero-media .espt-hero-img { aspect-ratio: 3 / 4; object-fit: cover; }
.espt-block-hero.is-media-ratio-wide .espt-hero-media .espt-hero-img { aspect-ratio: 16 / 9; object-fit: cover; }

.espt-block-hero.is-media-shadow-soft .espt-hero-media .espt-hero-img,
.espt-block-hero.is-media-shadow-soft .espt-hero-vwrap,
.espt-block-hero.is-media-shadow-soft .espt-hero-vid { box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.45); }

.espt-block-hero.is-media-shadow-strong .espt-hero-media .espt-hero-img,
.espt-block-hero.is-media-shadow-strong .espt-hero-vwrap,
.espt-block-hero.is-media-shadow-strong .espt-hero-vid { box-shadow: 0 26px 54px -18px rgba(15, 23, 42, 0.62); }

.espt-block-hero.is-media-shadow-ring .espt-hero-media .espt-hero-img,
.espt-block-hero.is-media-shadow-ring .espt-hero-vwrap,
.espt-block-hero.is-media-shadow-ring .espt-hero-vid {
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--bd-primary) 14%, transparent);
}

/* Editor-only "add media" hint. */
.espt-block-hero .espt-hero-ph {
	align-items: center;
	aspect-ratio: 4 / 3;
	background: var(--bd-soft);
	border: 2px dashed var(--bd-soft-line);
	border-radius: var(--media-radius, 16px);
	color: var(--bd-muted);
	display: flex;
	font-size: 13px;
	justify-content: center;
	line-height: 1.5;
	overflow-wrap: anywhere;
	padding: 16px;
	text-align: center;
}

/* The in-content clones: the mobile one is the phone default, the desktop
   one only appears from 768px up. Each is only in the DOM when its device
   has a chosen position, so the flex media hides in exchange. */
.espt-block-hero .espt-hero-media-d { display: none; }

.espt-block-hero .espt-hero-media-m {
	display: block;
	margin: 4px 0;
	width: 100%;
}

.espt-block-hero:not(.is-mpos-default) .espt-hero-inner > .espt-hero-media { display: none; }

/* YouTube facade */
.espt-block-hero .espt-hero-vid {
	appearance: none;
	aspect-ratio: 16 / 9;
	background: #000;
	border: 0;
	border-radius: var(--media-radius, 16px);
	cursor: pointer;
	display: block;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}

.espt-block-hero .espt-hero-vid .espt-hero-vimg {
	border-radius: 0;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
	width: 100%;
}

.espt-block-hero .espt-hero-vid:hover .espt-hero-vimg { transform: scale(1.04); }

.espt-block-hero .espt-hero-vif {
	border: 0;
	border-radius: var(--media-radius, 16px);
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.espt-block-hero .espt-hero-vwrap {
	aspect-ratio: 16 / 9;
	border-radius: var(--media-radius, 16px);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.espt-block-hero .espt-hero-play {
	align-items: center;
	background: var(--play-bg, rgba(255, 255, 255, 0.95));
	border-radius: 50%;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	color: var(--play-color, var(--bd-primary));
	display: inline-flex;
	height: var(--play-size, 52px);
	justify-content: center;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
	width: var(--play-size, 52px);
}

.espt-block-hero .espt-hero-play svg {
	height: 44%;
	margin-left: 6%;
	width: 44%;
}

.espt-block-hero .espt-hero-vid:hover .espt-hero-play { transform: translate(-50%, -50%) scale(1.08); }

.espt-block-hero.is-play-pulse .espt-hero-play::before {
	animation: espt-hero-play-pulse 1.8s ease-out infinite;
	background: inherit;
	border-radius: 50%;
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

@keyframes espt-hero-play-pulse {
	0% { opacity: 0.6; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.9); }
}

/* Continuous media animations */
.espt-block-hero.is-media-anim-float .espt-hero-media .espt-hero-img,
.espt-block-hero.is-media-anim-float .espt-hero-vwrap,
.espt-block-hero.is-media-anim-float .espt-hero-vid { animation: espt-hero-float var(--media-anim-speed, 4s) ease-in-out infinite; }

.espt-block-hero.is-media-anim-pulse .espt-hero-media .espt-hero-img,
.espt-block-hero.is-media-anim-pulse .espt-hero-vwrap,
.espt-block-hero.is-media-anim-pulse .espt-hero-vid { animation: espt-hero-mpulse var(--media-anim-speed, 4s) ease-in-out infinite; }

.espt-block-hero.is-media-anim-sway .espt-hero-media .espt-hero-img,
.espt-block-hero.is-media-anim-sway .espt-hero-vwrap,
.espt-block-hero.is-media-anim-sway .espt-hero-vid { animation: espt-hero-sway var(--media-anim-speed, 5s) ease-in-out infinite; transform-origin: center; }

.espt-block-hero.is-media-anim-zoom .espt-hero-media {
	border-radius: var(--media-radius, 16px);
	overflow: hidden;
}

.espt-block-hero.is-media-anim-zoom .espt-hero-media .espt-hero-img { animation: espt-hero-ken var(--media-anim-speed, 8s) ease-in-out infinite alternate; }

@keyframes espt-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes espt-hero-mpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes espt-hero-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes espt-hero-ken { from { transform: scale(1); } to { transform: scale(1.12); } }

/* ----------------------------------------------------- discount badge */
.espt-block-hero .espt-hero-disc {
	align-items: center;
	background: var(--discount-bg, var(--bd-danger));
	border-radius: 999px;
	color: var(--discount-color, #fff);
	display: inline-flex;
	font-size: 13.5px;
	font-weight: 700;
	gap: 5px;
	line-height: 1.2;
	padding: 6px 14px;
	white-space: nowrap;
}

.espt-block-hero .espt-hero-disc-val { font-size: 1.2em; font-weight: 800; }

.espt-block-hero.is-discount-design-circle .espt-hero-disc {
	border-radius: 50%;
	box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--discount-bg, var(--bd-danger)) 60%, transparent);
	flex-direction: column;
	gap: 0;
	height: var(--disc-d);
	justify-content: center;
	padding: 0;
	text-align: center;
	transform: rotate(-8deg);
	width: var(--disc-d);
}

.espt-block-hero.is-discount-design-circle .espt-hero-disc-val { font-size: calc(var(--disc-d) * 0.24); }
.espt-block-hero.is-discount-design-circle .espt-hero-disc-lbl { font-size: calc(var(--disc-d) * 0.14); opacity: 0.92; }

.espt-block-hero .espt-hero-media > .espt-hero-disc {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 2;
}

/* ------------------------------------------------------------- timer */
.espt-block-hero .espt-hero-tmr {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 100%;
	min-width: 0;
}

.espt-block-hero .espt-hero-tmr-label {
	color: var(--timer-label-color, var(--bd-muted));
	font-size: calc(var(--timer-size, 26px) * 0.55);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.espt-block-hero .espt-hero-tmr-units {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 100%;
}

.espt-block-hero.is-text-align-center .espt-hero-tmr-units,
.espt-block-hero.is-layout-centered .espt-hero-tmr-units,
.espt-block-hero.is-layout-background .espt-hero-tmr-units,
.espt-block-hero.is-layout-media-bottom .espt-hero-tmr-units { justify-content: center; }

.espt-block-hero.is-text-align-left .espt-hero-tmr-units { justify-content: flex-start; }
.espt-block-hero.is-text-align-right .espt-hero-tmr-units { justify-content: flex-end; }

.espt-block-hero .espt-hero-tmr-u {
	align-items: center;
	background: var(--timer-bg, var(--bd-deep));
	border-radius: calc(var(--bd-radius, 16px) * 0.6);
	color: var(--timer-color, #fff);
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	min-width: calc(var(--timer-size, 26px) * 2.1);
	padding: calc(var(--timer-size, 26px) * 0.3) calc(var(--timer-size, 26px) * 0.26);
}

.espt-block-hero .espt-hero-tmr-n {
	font-size: var(--timer-size, 26px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

.espt-block-hero .espt-hero-tmr-l {
	font-size: calc(var(--timer-size, 26px) * 0.36);
	letter-spacing: 0.03em;
	opacity: 0.82;
}

.espt-block-hero .espt-hero-tmr-sep {
	align-self: center;
	color: var(--timer-color, var(--bd-ink));
	display: none;
	font-size: var(--timer-size, 26px);
	font-weight: 800;
	line-height: 1;
}

.espt-block-hero.is-timer-design-pills .espt-hero-tmr-u {
	background: var(--timer-bg, var(--bd-soft));
	border: 1px solid var(--bd-soft-line);
	border-radius: 999px;
	color: var(--timer-color, var(--bd-primary-dark));
	padding: calc(var(--timer-size, 26px) * 0.28) calc(var(--timer-size, 26px) * 0.5);
}

.espt-block-hero.is-timer-design-minimal .espt-hero-tmr-u {
	background: transparent;
	border-radius: 0;
	color: var(--timer-color, var(--bd-ink));
	min-width: 0;
	padding: 0;
}

.espt-block-hero.is-timer-design-minimal .espt-hero-tmr-sep { display: inline-block; }
.espt-block-hero.is-timer-design-minimal .espt-hero-tmr-units { gap: 6px; }

/* --------------------------------------------------- stand card (seal) */
.espt-block-hero .espt-hero-seal {
	align-items: flex-start;
	display: flex;
	inset: 0;
	justify-content: flex-end;
	padding: var(--seal-gap, 14px);
	pointer-events: none;
	position: absolute;
	z-index: 4;
}

.espt-block-hero.is-seal-position-top-left .espt-hero-seal { align-items: flex-start; justify-content: flex-start; }
.espt-block-hero.is-seal-position-top-center .espt-hero-seal { align-items: flex-start; justify-content: center; }
.espt-block-hero.is-seal-position-top-right .espt-hero-seal { align-items: flex-start; justify-content: flex-end; }
.espt-block-hero.is-seal-position-middle-left .espt-hero-seal { align-items: center; justify-content: flex-start; }
.espt-block-hero.is-seal-position-middle-center .espt-hero-seal { align-items: center; justify-content: center; }
.espt-block-hero.is-seal-position-middle-right .espt-hero-seal { align-items: center; justify-content: flex-end; }
.espt-block-hero.is-seal-position-bottom-left .espt-hero-seal { align-items: flex-end; justify-content: flex-start; }
.espt-block-hero.is-seal-position-bottom-center .espt-hero-seal { align-items: flex-end; justify-content: center; }
.espt-block-hero.is-seal-position-bottom-right .espt-hero-seal { align-items: flex-end; justify-content: flex-end; }

.espt-block-hero .espt-hero-seal-rot {
	transform: translate(var(--seal-x, 0px), var(--seal-y, 0px)) rotate(var(--seal-rotate, 0deg));
	transform-origin: center;
}

.espt-block-hero .espt-hero-seal-badge {
	align-items: center;
	background: var(--seal-bg, var(--bd-danger));
	box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.55);
	color: var(--seal-color, #fff);
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	line-height: 1.15;
	text-align: center;
}

.espt-block-hero .espt-hero-seal-ico {
	display: inline-flex;
	font-size: calc(var(--seal-size, 72px) * 0.22);
	line-height: 0;
}

.espt-block-hero .espt-hero-seal-text {
	font-size: calc(var(--seal-size, 72px) * 0.21);
	font-weight: 800;
	overflow-wrap: anywhere;
}

.espt-block-hero .espt-hero-seal-sub {
	font-size: calc(var(--seal-size, 72px) * 0.12);
	letter-spacing: 0.06em;
	overflow-wrap: anywhere;
	opacity: 0.92;
	text-transform: uppercase;
}

.espt-block-hero.is-seal-shape-round .espt-hero-seal-badge {
	border-radius: 50%;
	height: var(--seal-size, 72px);
	padding: 6px;
	width: var(--seal-size, 72px);
}

.espt-block-hero.is-seal-shape-pill .espt-hero-seal-badge {
	border-radius: 999px;
	max-width: 100%;
	padding: calc(var(--seal-size, 72px) * 0.09) calc(var(--seal-size, 72px) * 0.18);
}

.espt-block-hero.is-seal-shape-pill .espt-hero-seal-text { font-size: calc(var(--seal-size, 72px) * 0.17); }
.espt-block-hero.is-seal-shape-pill .espt-hero-seal-sub { font-size: calc(var(--seal-size, 72px) * 0.13); letter-spacing: 0; opacity: 0.9; text-transform: none; }

.espt-block-hero.is-seal-shape-ribbon .espt-hero-seal-badge {
	border-radius: 4px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
	max-width: 100%;
	padding: calc(var(--seal-size, 72px) * 0.1) calc(var(--seal-size, 72px) * 0.22) calc(var(--seal-size, 72px) * 0.18);
}

.espt-block-hero.is-seal-shape-ribbon .espt-hero-seal-text { font-size: calc(var(--seal-size, 72px) * 0.16); }
.espt-block-hero.is-seal-shape-ribbon .espt-hero-seal-sub { font-size: calc(var(--seal-size, 72px) * 0.12); letter-spacing: 0; text-transform: none; }

.espt-block-hero.is-seal-anim-pop .espt-hero-seal-badge { animation: espt-hero-seal-pop var(--seal-anim-dur, 900ms) cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.espt-block-hero.is-seal-anim-bounce .espt-hero-seal-badge { animation: espt-hero-seal-bounce var(--seal-anim-dur, 900ms) cubic-bezier(0.28, 0.84, 0.42, 1) both; }
.espt-block-hero.is-seal-anim-spin .espt-hero-seal-badge { animation: espt-hero-seal-spin var(--seal-anim-dur, 900ms) ease-out both; }
.espt-block-hero.is-seal-anim-pulse .espt-hero-seal-badge { animation: espt-hero-seal-pulse var(--seal-anim-dur, 900ms) ease-in-out infinite; }
.espt-block-hero.is-seal-anim-float .espt-hero-seal-badge { animation: espt-hero-seal-float var(--seal-anim-dur, 900ms) ease-in-out infinite alternate; }
.espt-block-hero.is-seal-anim-tada .espt-hero-seal-badge { animation: espt-hero-seal-tada calc(var(--seal-anim-dur, 900ms) * 2) ease-in-out infinite; }
.espt-block-hero.is-seal-anim-rotate .espt-hero-seal-badge { animation: espt-hero-seal-rotate calc(var(--seal-anim-dur, 900ms) * 4) linear infinite; }

@keyframes espt-hero-seal-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes espt-hero-seal-bounce {
	0% { opacity: 0; transform: translateY(-60%) scale(0.7); }
	60% { opacity: 1; transform: translateY(8%) scale(1.04); }
	80% { transform: translateY(-4%) scale(0.99); }
	100% { transform: translateY(0) scale(1); }
}
@keyframes espt-hero-seal-spin { from { opacity: 0; transform: rotate(-220deg) scale(0.3); } to { opacity: 1; transform: rotate(0deg) scale(1); } }
@keyframes espt-hero-seal-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes espt-hero-seal-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes espt-hero-seal-tada {
	0%, 100% { transform: scale(1) rotate(0); }
	12% { transform: scale(0.92) rotate(-4deg); }
	24%, 48% { transform: scale(1.08) rotate(4deg); }
	36%, 60% { transform: scale(1.08) rotate(-4deg); }
	72% { transform: scale(1) rotate(0); }
}
@keyframes espt-hero-seal-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* --------------------------------- layout 5: photo behind the copy ---- */
/* The render adds .espt-hero-onbg when layout "Full background image" has a
   picture, so the section reads without hand-tuning every colour. Each rule
   is only a fallback — the matching control still wins when it is set. */
.espt-block-hero .espt-hero-onbg .espt-hero-ov { background: var(--overlay-color, rgba(2, 6, 23, 0.55)); }
.espt-block-hero .espt-hero-onbg .espt-hero-title { color: var(--title-color, #fff); }
.espt-block-hero .espt-hero-onbg .espt-hero-desc { color: var(--desc-color, rgba(255, 255, 255, 0.92)); }
.espt-block-hero .espt-hero-onbg .espt-hero-note { color: var(--note-color, rgba(255, 255, 255, 0.9)); }
.espt-block-hero .espt-hero-onbg .espt-hero-tmr-label { color: var(--timer-label-color, rgba(255, 255, 255, 0.9)); }

.espt-block-hero .espt-hero-onbg .espt-hero-eyebrow {
	background: var(--eyebrow-bg, rgba(255, 255, 255, 0.18));
	color: var(--eyebrow-color, #fff);
}

.espt-block-hero.is-timer-design-minimal .espt-hero-onbg .espt-hero-tmr-u,
.espt-block-hero.is-timer-design-minimal .espt-hero-onbg .espt-hero-tmr-sep { color: var(--timer-color, #fff); }

/* ------------------------------------------- staggered entrance timing */
.espt-block-hero .espt-hero-content > [data-bd-anim]:nth-child(1) { transition-delay: 0s; }
.espt-block-hero .espt-hero-content > [data-bd-anim]:nth-child(2) { transition-delay: 0.08s; }
.espt-block-hero .espt-hero-content > [data-bd-anim]:nth-child(3) { transition-delay: 0.16s; }
.espt-block-hero .espt-hero-content > [data-bd-anim]:nth-child(4) { transition-delay: 0.24s; }
.espt-block-hero .espt-hero-content > [data-bd-anim]:nth-child(5) { transition-delay: 0.32s; }
.espt-block-hero .espt-hero-content > [data-bd-anim]:nth-child(6) { transition-delay: 0.4s; }
.espt-block-hero .espt-hero-content > [data-bd-anim]:nth-child(n + 7) { transition-delay: 0.48s; }
.espt-block-hero .espt-hero-inner > .espt-hero-media[data-bd-anim] { transition-delay: 0.2s; }

/* ---------------------------------------------------------- ≥ tablet */
@media (min-width: 768px) {
	.espt-block-hero .espt-hero-content { gap: 18px; }

	.espt-block-hero.is-layout-image-right .espt-hero-inner,
	.espt-block-hero.is-layout-image-left .espt-hero-inner {
		align-items: center;
		flex-direction: row;
	}

	.espt-block-hero.is-layout-image-left .espt-hero-inner { flex-direction: row-reverse; }

	/* A zero flex-basis keeps the text column's width independent of how long
	   the (possibly typing) headline currently is, so the media stays put. */
	.espt-block-hero.is-layout-image-right .espt-hero-content,
	.espt-block-hero.is-layout-image-left .espt-hero-content { flex: 1 1 0%; }

	.espt-block-hero.is-layout-image-right .espt-hero-inner > .espt-hero-media,
	.espt-block-hero.is-layout-image-left .espt-hero-inner > .espt-hero-media {
		flex: 0 0 var(--media-width, 45%);
		max-width: var(--media-width, 45%);
	}

	.espt-block-hero.is-layout-media-bottom .espt-hero-inner > .espt-hero-media {
		margin-left: auto;
		margin-right: auto;
		width: var(--media-width, 100%);
	}

	.espt-block-hero .espt-hero-media-m { display: none; }

	.espt-block-hero .espt-hero-media-d {
		display: block;
		margin: 6px 0;
		max-width: 100%;
		width: var(--media-width, 45%);
	}

	.espt-block-hero.is-layout-centered .espt-hero-media-d,
	.espt-block-hero.is-layout-media-bottom .espt-hero-media-d,
	.espt-block-hero.is-text-align-center .espt-hero-media-d {
		margin-left: auto;
		margin-right: auto;
	}

	/* Restore the side media when only a mobile position was chosen, then
	   hide it again if the desktop also places the media in the text flow. */
	.espt-block-hero:not(.is-mpos-default) .espt-hero-inner > .espt-hero-media { display: block; }
	.espt-block-hero:not(.is-dpos-default) .espt-hero-inner > .espt-hero-media { display: none; }

	.espt-block-hero .espt-hero-tmr-units { gap: 10px; }

	/* Buttons go back to a wrapping row. */
	.espt-block-hero .espt-hero-actions {
		align-items: center;
		flex-direction: row;
	}

	.espt-block-hero .espt-hero-actions > .espt-hero-btn { width: auto; }
	.espt-block-hero.is-btn-full .espt-hero-actions > .espt-hero-btn { flex: 1 1 100%; width: 100%; }

	/* The circle sticker gets its full size back. */
	.espt-block-hero { --disc-d: var(--discount-size, 86px); }
}

/* --------------------------------------------------------- ≥ desktop */
@media (min-width: 1024px) {
	.espt-block-hero.is-bg-fixed .espt-hero-bg { background-attachment: fixed; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-hero .espt-hero-media .espt-hero-img,
	.espt-block-hero .espt-hero-vid,
	.espt-block-hero .espt-hero-vwrap,
	.espt-block-hero .espt-hero-play::before,
	.espt-block-hero .espt-hero-seal-badge,
	.espt-block-hero .espt-hero-bico,
	.espt-block-hero .espt-hero-btn-p {
		animation: none;
	}

	/* Typing is skipped entirely under reduced motion, so a frozen caret
	   would just look like a stray mark next to the headline. */
	.espt-block-hero .espt-hero-typed::after { display: none; }

	.espt-block-hero .espt-hero-btn,
	.espt-block-hero .espt-hero-vid .espt-hero-vimg { transition: none; }
}