/**
 * Price Drop — .espt-block-price
 *
 * Vars set by the spec: --size (responsive) --old-ratio --cur-size --gap
 * --strike-w --strike-dur --max-w --badge-size --eyebrow-size --text-size
 * --img-w (responsive) --img-radius --stock-w (responsive) --tmr-size
 * (responsive) --btn-size --btn-radius, plus the colour vars
 * (--new-color --old-color --strike-color --badge-bg --badge-color
 * --save-color --save-bg --note-color --eyebrow-color --stock-* --tmr-*
 * --btn-bg --btn-color). Everything falls back to the shared --bd-* palette.
 *
 * Root classes: .is-design-{inline|stacked|card|tag|split}
 * .is-strike-style-{line|diagonal|double|none} .is-price-order-{old|new}
 * .is-new-anim-{none|pop|slide|flip} .is-badge-anim-{none|pop|wiggle}
 * .is-badge-shape-* .is-image-position-* .is-stock-design-* .is-timer-design-*
 * .is-btn-style-* .is-btn-icon-anim-* .is-text-align-* + is-/no- toggles.
 *
 * The reveal is armed by assets/js/blocks/price.js: it adds .is-armed to
 * .esptp and then .is-go when the block scrolls into view. Without JS the
 * final (struck-through) state is what shows, so the price always reads.
 *
 * Mobile-first: base rules are phones, then 768px, then 1024px.
 */

/* ---------------------------------------------------------------- shell */

.espt-block-price .esptp {
	align-items: center;
	color: var(--bd-body);
	display: flex;
	flex-direction: column;
	gap: 14px;
	line-height: 1.2;
	margin-inline: auto;
	max-width: min(100%, var(--max-w, 680px));
	min-width: 0;
	text-align: center;
}

.espt-block-price.is-text-align-left .esptp {
	align-items: flex-start;
	margin-inline: 0;
	text-align: left;
}

.espt-block-price.is-text-align-right .esptp {
	align-items: flex-end;
	margin-inline: 0;
	text-align: right;
}

.espt-block-price .espt-block-note {
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 14px;
	margin: 0;
	padding: 14px 16px;
	text-align: center;
}

.espt-block-price .esptp-layout {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
	min-width: 0;
	width: 100%;
}

.espt-block-price.is-text-align-left .esptp-layout { align-items: flex-start; }
.espt-block-price.is-text-align-right .esptp-layout { align-items: flex-end; }

.espt-block-price.is-image-position-bottom .esptp-layout { flex-direction: column-reverse; }

/* The content column keeps its own alignment: the layout row centres its
   children vertically at ≥768px, which must not become "centre the text". */
.espt-block-price .esptp-content {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 12px;
	min-width: 0;
	width: 100%;
}

.espt-block-price.is-text-align-left .esptp-content { align-items: flex-start; }
.espt-block-price.is-text-align-right .esptp-content { align-items: flex-end; }

/* ---------------------------------------------------------------- media */

.espt-block-price .esptp-media {
	flex: 0 0 auto;
	line-height: 0;
	max-width: 100%;
	width: min(100%, var(--img-w, 150px));
}

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

.espt-block-price.is-image-shadow .esptp-media img {
	box-shadow: 0 18px 34px -20px rgba(15, 23, 42, 0.55);
}

/* -------------------------------------------------------------- eyebrow */

.espt-block-price .esptp-eyebrow {
	align-items: center;
	color: var(--eyebrow-color, var(--bd-danger));
	display: inline-flex;
	font-size: var(--eyebrow-size, 13px);
	font-weight: 800;
	gap: 6px;
	letter-spacing: 0.04em;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-price .esptp-eyebrow-i svg {
	height: 1.15em;
	width: 1.15em;
}

/* --------------------------------------------------------------- prices */

.espt-block-price .esptp-main {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap, 14px);
	justify-content: center;
	max-width: 100%;
	min-width: 0;
}

.espt-block-price.is-text-align-left .esptp-main { justify-content: flex-start; }
.espt-block-price.is-text-align-right .esptp-main { justify-content: flex-end; }

.espt-block-price .esptp-prices {
	align-items: baseline;
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--gap, 14px);
	justify-content: inherit;
	max-width: 100%;
	min-width: 0;
}

.espt-block-price.is-price-order-new .esptp-prices { flex-direction: row-reverse; }

.espt-block-price .esptp-old {
	color: var(--old-color, #9ca3af);
	display: inline-block;
	font-size: min(calc(var(--size, 34px) * var(--old-ratio, 0.52)), 8vw);
	font-weight: 600;
	max-width: 100%;
	min-width: 0;
	position: relative;
}

/* an <s> element when a strike style is on — the drawn bar is the line */
.espt-block-price .esptp-old-inner {
	display: inline-block;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
}

.espt-block-price .esptp-new {
	backface-visibility: hidden;
	color: var(--new-color, var(--bd-primary));
	display: inline-block;
	font-size: min(var(--size, 34px), 13vw);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.05;
	max-width: 100%;
	min-width: 0;
	transform-origin: center;
	white-space: nowrap;
}

.espt-block-price .esptp-cur {
	font-size: var(--cur-size, 0.65em);
	font-weight: 700;
	margin: 0 0.05em;
}

/* strike-through */
.espt-block-price .esptp-strike {
	background: var(--strike-color, var(--bd-danger));
	border-radius: 2px;
	height: var(--strike-w, 3px);
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transform-origin: left center;
	width: 100%;
}

.espt-block-price.is-strike-style-diagonal .esptp-strike { transform: translateY(-50%) rotate(-9deg); }

.espt-block-price.is-strike-style-double .esptp-strike {
	background: transparent;
	border-bottom: var(--strike-w, 3px) solid var(--strike-color, var(--bd-danger));
	border-radius: 0;
	border-top: var(--strike-w, 3px) solid var(--strike-color, var(--bd-danger));
	height: calc(var(--strike-w, 3px) * 3);
}

.espt-block-price.is-strike-style-none .esptp-strike { display: none; }

/* ---------------------------------------------------------------- badge */

.espt-block-price .esptp-badge {
	align-items: center;
	background: var(--badge-bg, var(--bd-danger));
	border-radius: 999px;
	color: var(--badge-color, #fff);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--badge-size, 13px);
	font-weight: 800;
	justify-content: center;
	line-height: 1.15;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 7px 13px;
	position: relative;
	transform-origin: center;
}

.espt-block-price.is-badge-shape-rounded .esptp-badge { border-radius: 8px; }
.espt-block-price.is-badge-shape-square .esptp-badge { border-radius: 3px; }

.espt-block-price.is-badge-shape-notch .esptp-badge {
	border-radius: 6px 4px 4px 6px;
	padding-left: 20px;
}

.espt-block-price.is-badge-shape-notch .esptp-badge::before {
	background: var(--bd-box-bg, #fff);
	border-radius: 50%;
	content: "";
	height: 7px;
	left: 7px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
}

.espt-block-price.is-badge-shape-burst .esptp-badge {
	aspect-ratio: 1;
	border-radius: 0;
	clip-path: polygon(50% 0%, 61% 12%, 76% 6%, 80% 22%, 96% 25%, 90% 40%, 100% 50%, 90% 60%, 96% 75%, 80% 78%, 76% 94%, 61% 88%, 50% 100%, 39% 88%, 24% 94%, 20% 78%, 4% 75%, 10% 60%, 0% 50%, 10% 40%, 4% 25%, 20% 22%, 24% 6%, 39% 12%);
	line-height: 1.1;
	padding: 0.9em;
	text-align: center;
}

/* ------------------------------------------------------- savings + note */

.espt-block-price .esptp-save {
	align-items: center;
	background: var(--save-bg, var(--bd-soft));
	border-radius: 10px;
	color: var(--save-color, var(--bd-primary-dark));
	display: inline-flex;
	font-size: var(--text-size, 14px);
	font-weight: 700;
	gap: 7px;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 7px 14px;
}

.espt-block-price .esptp-note {
	color: var(--note-color, #b45309);
	font-size: var(--text-size, 14px);
	font-weight: 600;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------ stock / meter */

.espt-block-price .esptp-stock {
	align-items: inherit;
	display: flex;
	flex-direction: column;
	gap: 7px;
	max-width: min(100%, var(--stock-w, 240px));
	min-width: 0;
	width: 100%;
}

.espt-block-price .esptp-stock-txt {
	color: var(--stock-color, var(--bd-danger));
	font-size: var(--text-size, 14px);
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.espt-block-price .esptp-stock-n { font-weight: 800; }

.espt-block-price.is-stock-design-pill .esptp-stock-txt {
	background: var(--stock-pill-bg, #fef2f2);
	border-radius: 999px;
	display: inline-block;
	padding: 6px 15px;
}

.espt-block-price .esptp-stock-bar {
	background: var(--stock-track, var(--bd-line));
	border-radius: 999px;
	display: block;
	height: 9px;
	overflow: hidden;
	width: 100%;
}

.espt-block-price .esptp-stock-fill {
	background: var(--stock-fill, linear-gradient(90deg, var(--bd-accent), var(--bd-danger)));
	border-radius: 999px;
	display: block;
	height: 100%;
	transition: width 0.9s cubic-bezier(0.6, 0.1, 0.2, 1) 0.15s;
	width: var(--pct, 50%);
}

.espt-block-price .esptp.is-armed:not(.is-go) .esptp-stock-fill { width: 0; }

/* --------------------------------------------------------------- timer */

.espt-block-price .esptp-tmr {
	align-items: inherit;
	display: flex;
	flex-direction: column;
	gap: 7px;
	max-width: 100%;
	min-width: 0;
}

.espt-block-price .esptp-tmr-label {
	color: var(--tmr-label-color, var(--bd-muted));
	font-size: var(--text-size, 14px);
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* .esptp-tmr is a *column* flex box, so its justify-content is the vertical
   axis — the clock has to state its own horizontal alignment (it matters once
   the units wrap on a narrow phone). */
.espt-block-price .esptp-clk {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	max-width: 100%;
	min-width: 0;
}

.espt-block-price.is-text-align-left .esptp-clk { justify-content: flex-start; }
.espt-block-price.is-text-align-right .esptp-clk { justify-content: flex-end; }

.espt-block-price .esptp-u {
	align-items: center;
	background: var(--tmr-bg, var(--bd-deep));
	border-radius: 9px;
	color: var(--tmr-color, #fff);
	display: inline-flex;
	flex-direction: column;
	gap: 1px;
	justify-content: center;
	min-width: calc(var(--tmr-size, 19px) * 2.2);
	padding: 7px 8px;
}

.espt-block-price .esptp-dg {
	font-size: var(--tmr-size, 19px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1.1;
}

.espt-block-price .esptp-dg.is-tick { animation: esptp-tick 0.35s ease; }

.espt-block-price .esptp-ul {
	font-size: calc(var(--tmr-size, 19px) * 0.5);
	font-style: normal;
	letter-spacing: 0.03em;
	opacity: 0.82;
	text-transform: uppercase;
}

.espt-block-price.no-timer-labels .esptp-ul { display: none; }

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

.espt-block-price.is-timer-design-pills .esptp-u {
	background: var(--tmr-bg, var(--bd-soft));
	border: 1px solid var(--bd-soft-line);
	border-radius: 999px;
	color: var(--tmr-color, var(--bd-primary-dark));
	padding: 6px 14px;
}

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

.espt-block-price.is-timer-design-minimal .esptp-ul { color: var(--bd-muted); opacity: 1; }
.espt-block-price.is-timer-design-minimal .esptp-sep { display: inline; }
/* bare digits read as one clock — the tile gap would push the colons apart */
.espt-block-price.is-timer-design-minimal .esptp-clk { gap: 2px; }

/* finished: the clock stays at 00:00, just quieter */
.espt-block-price .esptp-tmr.is-over .esptp-clk { opacity: 0.55; }

/* last minutes: a red ring pulse on the tiles, red digits when they are bare */
.espt-block-price .esptp-tmr.is-urgent .esptp-u { animation: esptp-urgent 1s ease-in-out infinite; }
.espt-block-price.is-timer-design-minimal .esptp-tmr.is-urgent .esptp-dg,
.espt-block-price.is-timer-design-minimal .esptp-tmr.is-urgent .esptp-sep { color: var(--bd-danger); }

/* -------------------------------------------------------------- button */

.espt-block-price .esptp-actions {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 2px;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

.espt-block-price .espt-btn.esptp-btn {
	background: var(--btn-bg, var(--espt-btn-bg, var(--bd-primary)));
	border-radius: var(--btn-radius, 12px);
	color: var(--btn-color, #fff);
	font-size: var(--btn-size, 16px);
	justify-content: center;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	padding: 13px 24px;
	position: relative;
	text-align: center;
	width: 100%;
}

.espt-block-price .esptp-btn-t { overflow-wrap: anywhere; }

.espt-block-price .esptp-btn-note {
	color: var(--bd-muted);
	font-size: calc(var(--text-size, 14px) - 1px);
	overflow-wrap: anywhere;
}

.espt-block-price.is-btn-style-pill .espt-btn.esptp-btn { border-radius: 999px; }

/* The gradient / 3D / soft variants derive their second colour from the chosen
   button colour, so a custom --btn-bg does not leave a stale green edge. */
.espt-block-price.is-btn-style-gradient .espt-btn.esptp-btn {
	background: linear-gradient(135deg, var(--btn-bg, var(--espt-btn-bg, var(--bd-primary))), var(--bd-primary-dark));
	background: linear-gradient(
		135deg,
		var(--btn-bg, var(--espt-btn-bg, var(--bd-primary))),
		color-mix(in srgb, var(--btn-bg, var(--espt-btn-bg, var(--bd-primary))) 72%, #000)
	);
}

.espt-block-price.is-btn-style-outline .espt-btn.esptp-btn {
	background: transparent;
	border: 2px solid var(--btn-bg, var(--bd-primary));
	color: var(--btn-color, var(--bd-primary));
}

/* Each colour is declared twice: the plain value first, so a browser without
   color-mix() keeps a usable button instead of dropping the rule. */
.espt-block-price.is-btn-style-soft .espt-btn.esptp-btn {
	background: var(--bd-soft);
	background: color-mix(in srgb, var(--btn-bg, var(--espt-btn-bg, var(--bd-primary))) 12%, #fff);
	border: 1px solid var(--bd-soft-line);
	border-color: color-mix(in srgb, var(--btn-bg, var(--bd-primary)) 32%, #fff);
	color: var(--btn-color, var(--bd-primary-dark));
}

.espt-block-price.is-btn-style-3d .espt-btn.esptp-btn {
	box-shadow: 0 5px 0 0 var(--bd-primary-dark);
	box-shadow: 0 5px 0 0 color-mix(in srgb, var(--btn-bg, var(--bd-primary)) 68%, #000);
	transform: translateY(-2px);
}

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

.espt-block-price.is-btn-style-shine .espt-btn.esptp-btn::after {
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
	content: "";
	inset: 0 auto 0 -60%;
	position: absolute;
	transform: skewX(-16deg);
	transition: left 0.6s ease;
	width: 55%;
}

.espt-block-price.is-btn-style-shine .espt-btn.esptp-btn:hover::after { left: 115%; }

.espt-block-price.is-btn-attn .espt-btn.esptp-btn { animation: esptp-attn 2.2s ease-in-out infinite; }

/* button icon animations */
.espt-block-price .esptp-btn-i { transition: transform 0.25s ease, opacity 0.25s ease, max-width 0.25s ease; }
.espt-block-price.is-btn-icon-anim-slide .espt-btn.esptp-btn:hover .esptp-btn-i { transform: translateX(4px); }
.espt-block-price.is-btn-icon-anim-rotate .espt-btn.esptp-btn:hover .esptp-btn-i { transform: rotate(180deg); }
.espt-block-price.is-btn-icon-anim-reveal .esptp-btn-i { max-width: 0; opacity: 0; overflow: hidden; }
.espt-block-price.is-btn-icon-anim-reveal .espt-btn.esptp-btn:hover .esptp-btn-i { max-width: 2em; opacity: 1; }
.espt-block-price.is-btn-icon-anim-bounce .esptp-btn-i { animation: esptp-bounce 1.4s ease-in-out infinite; }
.espt-block-price.is-btn-icon-anim-pulse .esptp-btn-i { animation: esptp-attn 1.6s ease-in-out infinite; }

/* ------------------------------------------------------------- designs */

/* stacked — old price sits over the new one */
.espt-block-price.is-design-stacked .esptp-prices {
	align-items: center;
	flex-direction: column;
	gap: 2px;
}

.espt-block-price.is-design-stacked.is-text-align-left .esptp-prices { align-items: flex-start; }
.espt-block-price.is-design-stacked.is-text-align-right .esptp-prices { align-items: flex-end; }
.espt-block-price.is-design-stacked.is-price-order-new .esptp-prices { flex-direction: column-reverse; }
.espt-block-price.is-design-stacked .esptp-new { font-size: min(calc(var(--size, 34px) * 1.1), 15vw); }

/* card / tag / split all sit on the shared .espt-bd-box, which supplies the
   background, border, radius and the (responsive) --bd-pad padding — do not
   override the padding here or the sidebar's "Box padding" control is dead. */
.espt-block-price.is-design-card .esptp,
.espt-block-price.is-design-tag .esptp,
.espt-block-price.is-design-split .esptp {
	width: 100%;
}

/* The tag is the warm one: tint the box background with the accent instead of
   var(--bd-box-bg, …) — the shared layer always defines --bd-box-bg, so a
   fallback there can never fire and the tag would render plain white. */
.espt-block-price.is-design-tag .esptp {
	background: color-mix(in srgb, var(--bd-accent) 10%, var(--bd-box-bg));
	border: 2px dashed color-mix(in srgb, var(--bd-accent) 55%, transparent);
	position: relative;
}

.espt-block-price.is-design-tag .esptp::before,
.espt-block-price.is-design-tag .esptp::after {
	background: var(--bd-accent);
	border-radius: 50%;
	content: "";
	height: 12px;
	opacity: 0.35;
	position: absolute;
	top: 14px;
	width: 12px;
}

.espt-block-price.is-design-tag .esptp::before { left: 14px; }
.espt-block-price.is-design-tag .esptp::after { right: 14px; }

/* split — prices on one side, badge/savings in their own panel */
.espt-block-price.is-design-split .esptp-main {
	align-items: stretch;
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
}

.espt-block-price.is-design-split .esptp-prices {
	align-items: flex-start;
	flex-direction: column;
	gap: 0;
}

/* The column above resets the row-reverse of .is-price-order-new, so the
   "new price first" choice has to be re-stated for this design too. */
.espt-block-price.is-design-split.is-price-order-new .esptp-prices { flex-direction: column-reverse; }

.espt-block-price.is-design-split.is-text-align-center .esptp-prices { align-items: center; }
.espt-block-price.is-design-split.is-text-align-right .esptp-prices { align-items: flex-end; }

.espt-block-price.is-design-split .esptp-badge {
	align-self: center;
	justify-self: center;
}

/* ------------------------------------------------------------- reveal */

/* Armed only while JS is about to animate — no JS keeps the final state. */
.espt-block-price .esptp.is-armed:not(.is-go) .esptp-strike { width: 0; }

.espt-block-price .esptp.is-go .esptp-strike {
	transition: width var(--strike-dur, 0.7s) cubic-bezier(0.65, 0.05, 0.25, 1) 0.1s;
	width: 100%;
}

.espt-block-price.no-strike-anim .esptp.is-armed:not(.is-go) .esptp-strike { width: 100%; }

.espt-block-price.is-new-anim-pop .esptp.is-armed:not(.is-go) .esptp-new { opacity: 0; transform: scale(0.6); }
.espt-block-price.is-new-anim-slide .esptp.is-armed:not(.is-go) .esptp-new { opacity: 0; transform: translateY(16px); }
.espt-block-price.is-new-anim-flip .esptp.is-armed:not(.is-go) .esptp-new { opacity: 0; transform: rotateX(90deg); }

.espt-block-price.is-new-anim-pop .esptp.is-go .esptp-new,
.espt-block-price.is-new-anim-slide .esptp.is-go .esptp-new,
.espt-block-price.is-new-anim-flip .esptp.is-go .esptp-new {
	opacity: 1;
	transform: none;
	transition:
		transform 0.55s cubic-bezier(0.2, 1.4, 0.3, 1) calc(var(--strike-dur, 0.7s) * 0.55),
		opacity 0.4s ease calc(var(--strike-dur, 0.7s) * 0.55);
}

.espt-block-price.is-badge-anim-pop .esptp.is-armed:not(.is-go) .esptp-badge { opacity: 0; transform: scale(0); }
.espt-block-price.is-badge-anim-pop .esptp.is-go .esptp-badge {
	opacity: 1;
	transform: scale(1);
	transition:
		transform 0.45s cubic-bezier(0.2, 1.5, 0.3, 1) calc(var(--strike-dur, 0.7s) * 0.8),
		opacity 0.3s ease calc(var(--strike-dur, 0.7s) * 0.8);
}

.espt-block-price.is-badge-anim-wiggle .esptp.is-armed:not(.is-go) .esptp-badge { opacity: 0; transform: scale(0.4) rotate(-12deg); }
.espt-block-price.is-badge-anim-wiggle .esptp.is-go .esptp-badge {
	animation: esptp-wiggle 0.6s ease calc(var(--strike-dur, 0.7s) * 0.8) both;
	opacity: 1;
}

.espt-block-price.is-pulse-new .esptp.is-go .esptp-new {
	animation: esptp-pulse 1.8s ease-in-out 0.9s infinite;
}

/* ---------------------------------------------------------- keyframes */

@keyframes esptp-wiggle {
	0% { transform: scale(0.4) rotate(-12deg); }
	60% { transform: scale(1.1) rotate(7deg); }
	100% { transform: scale(1) rotate(0); }
}

@keyframes esptp-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

@keyframes esptp-tick {
	0% { opacity: 0.4; transform: translateY(-4px); }
	100% { opacity: 1; transform: none; }
}

@keyframes esptp-urgent {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bd-danger) 55%, transparent); }
	50% { box-shadow: 0 0 0 7px transparent; }
}

@keyframes esptp-attn {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.03); }
}

@keyframes esptp-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

/* ------------------------------------------------------------- tablet */

@media (min-width: 768px) {
	.espt-block-price .esptp { gap: 16px; }

	.espt-block-price .esptp-new { font-size: var(--size, 42px); }
	.espt-block-price .esptp-old { font-size: calc(var(--size, 42px) * var(--old-ratio, 0.52)); }
	.espt-block-price.is-design-stacked .esptp-new { font-size: calc(var(--size, 42px) * 1.1); }

	.espt-block-price.is-image-position-left .esptp-layout { align-items: center; flex-direction: row; }
	.espt-block-price.is-image-position-right .esptp-layout { align-items: center; flex-direction: row-reverse; }

	.espt-block-price.is-image-position-left .esptp-content,
	.espt-block-price.is-image-position-right .esptp-content { width: auto; }

	.espt-block-price .espt-btn.esptp-btn { width: auto; }
	.espt-block-price.is-btn-full .espt-btn.esptp-btn { width: 100%; }

	.espt-block-price .esptp-actions { align-items: center; width: auto; }
	.espt-block-price.is-text-align-left .esptp-actions { align-items: flex-start; }
	.espt-block-price.is-text-align-right .esptp-actions { align-items: flex-end; }
	.espt-block-price.is-btn-full .esptp-actions { width: 100%; }

	.espt-block-price.is-design-split .esptp-main {
		align-items: center;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	/* the dashed divider only exists when a badge shares the row */
	.espt-block-price.is-design-split .esptp-prices:not(:only-child) {
		border-right: 1px dashed var(--bd-box-line, var(--bd-line));
		padding-right: 18px;
	}

	.espt-block-price.is-design-split .esptp-badge { font-size: calc(var(--badge-size, 13px) * 1.15); }
}

/* ------------------------------------------------------------ desktop */

@media (min-width: 1024px) {
	.espt-block-price .esptp { gap: 18px; }
	.espt-block-price .esptp-layout { gap: 26px; }
}

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
	.espt-block-price .esptp.is-armed:not(.is-go) .esptp-strike { width: 100%; }

	.espt-block-price.is-new-anim-pop .esptp.is-armed:not(.is-go) .esptp-new,
	.espt-block-price.is-new-anim-slide .esptp.is-armed:not(.is-go) .esptp-new,
	.espt-block-price.is-new-anim-flip .esptp.is-armed:not(.is-go) .esptp-new,
	.espt-block-price.is-badge-anim-pop .esptp.is-armed:not(.is-go) .esptp-badge,
	.espt-block-price.is-badge-anim-wiggle .esptp.is-armed:not(.is-go) .esptp-badge {
		opacity: 1;
		transform: none;
	}

	.espt-block-price .esptp.is-armed:not(.is-go) .esptp-stock-fill { width: var(--pct, 50%); }

	/* The looping animations above (pulse, wiggle, attention, bounce, urgent
	   ring, shine sweep) are set by four-class selectors, so the reset needs
	   five to beat them — the root class is repeated instead of !important. */
	.espt-block-price.espt-block-price.espt-block-price .esptp .esptp-new,
	.espt-block-price.espt-block-price.espt-block-price .esptp .esptp-badge,
	.espt-block-price.espt-block-price.espt-block-price .esptp .esptp-strike,
	.espt-block-price.espt-block-price.espt-block-price .esptp .esptp-stock-fill,
	.espt-block-price.espt-block-price.espt-block-price .esptp .esptp-dg,
	.espt-block-price.espt-block-price.espt-block-price .esptp .esptp-u,
	.espt-block-price.espt-block-price.espt-block-price .esptp .esptp-btn-i,
	.espt-block-price.espt-block-price.espt-block-price .esptp .espt-btn,
	.espt-block-price.espt-block-price.espt-block-price .esptp .espt-btn::after {
		animation: none;
		transition: none;
	}
}